CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-23 18:52:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: remove item based on animation exit event

Browse Source
This commit is contained in:
鲁树人 2023-05-21 15:38:52 +01:00
parent afc95e0ed3
commit 4fc407221a
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/features/file-listing/FileRow.tsx
View File

@ -18,6 +18,7 @@ import {
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useAppDispatch } from '~/hooks';
import { AnimationDefinition } from 'framer-motion';
import noCoverFallbackImageURL from '~/assets/no-cover.svg';
interface FileRowProps {
@ -48,15 +49,21 @@ export function FileRow({ id, file }: FileRowProps) {
}
};
const handleDeleteRow = useCallback(() => {
onClose();
setTimeout(() => {
const onCollapseAnimationComplete = (definition: AnimationDefinition) => {
if (definition === 'exit') {
dispatch(deleteFile({ id }));
}, 500);
}, [dispatch, id, onClose]);
}
};
return (
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%', padding: '0.25rem' }}>
<Collapse
in={isOpen}
animateOpacity
unmountOnExit
startingHeight={0}
onAnimationComplete={onCollapseAnimationComplete}
style={{ width: '100%', padding: '0.25rem' }}
>
<Card w="full" data-testid="file-row">
<CardBody>
<FileRowResponsiveGrid>
@ -111,7 +118,7 @@ export function FileRow({ id, file }: FileRowProps) {
</>
)}
<WrapItem>
<Button type="button" onClick={handleDeleteRow}>
<Button type="button" onClick={onClose}>
删除
</Button>
</WrapItem>