chore: move file row's grid layout to its own file

This commit is contained in:
鲁树人 2023-05-21 15:38:07 +01:00
parent 22ca4882bc
commit dd035d04a0
2 changed files with 32 additions and 27 deletions

View File

@ -1,3 +1,4 @@
import { useRef } from 'react';
import {
Box,
Button,
@ -5,7 +6,6 @@ import {
CardBody,
Center,
Collapse,
Grid,
GridItem,
Image,
Link,
@ -15,8 +15,8 @@ import {
Wrap,
WrapItem,
} from '@chakra-ui/react';
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useCallback, useRef } from 'react';
import { useAppDispatch } from '~/hooks';
import noCoverFallbackImageURL from '~/assets/no-cover.svg';
@ -59,29 +59,7 @@ export function FileRow({ id, file }: FileRowProps) {
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%', padding: '0.25rem' }}>
<Card w="full" data-testid="file-row">
<CardBody>
<Grid
templateAreas={{
base: `
"cover"
"title"
"meta"
"action"
`,
md: `
"cover title title"
"cover meta action"
`,
}}
gridTemplateRows={{
base: 'repeat(auto-fill)',
md: 'min-content 1fr',
}}
gridTemplateColumns={{
base: '1fr',
md: '160px 1fr',
}}
gap="1"
>
<FileRowResponsiveGrid>
<GridItem area="cover">
<Center w="160px" h="160px" m="auto">
<Image
@ -111,7 +89,7 @@ export function FileRow({ id, file }: FileRowProps) {
</Box>
)}
</GridItem>
<GridItem area="action">
<GridItem area="action" alignSelf="center">
<VStack>
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
@ -138,7 +116,7 @@ export function FileRow({ id, file }: FileRowProps) {
</Wrap>
</VStack>
</GridItem>
</Grid>
</FileRowResponsiveGrid>
</CardBody>
</Card>
</Collapse>

View File

@ -0,0 +1,27 @@
import { Grid, chakra } from '@chakra-ui/react';
export const FileRowResponsiveGrid = chakra(Grid, {
baseStyle: {
gridTemplateAreas: {
base: `
"cover"
"title"
"meta"
"action"
`,
md: `
"cover title action"
"cover meta action"
`,
},
gridTemplateRows: {
base: 'repeat(auto-fill)',
md: 'min-content 1fr',
},
gridTemplateColumns: {
base: '1fr',
md: '160px 1fr',
},
gap: 3,
},
});