chore: remove item based on animation exit event
This commit is contained in:
parent
afc95e0ed3
commit
4fc407221a
@ -18,6 +18,7 @@ import {
|
|||||||
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
|
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
|
||||||
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
||||||
import { useAppDispatch } from '~/hooks';
|
import { useAppDispatch } from '~/hooks';
|
||||||
|
import { AnimationDefinition } from 'framer-motion';
|
||||||
import noCoverFallbackImageURL from '~/assets/no-cover.svg';
|
import noCoverFallbackImageURL from '~/assets/no-cover.svg';
|
||||||
|
|
||||||
interface FileRowProps {
|
interface FileRowProps {
|
||||||
@ -48,15 +49,21 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteRow = useCallback(() => {
|
const onCollapseAnimationComplete = (definition: AnimationDefinition) => {
|
||||||
onClose();
|
if (definition === 'exit') {
|
||||||
setTimeout(() => {
|
|
||||||
dispatch(deleteFile({ id }));
|
dispatch(deleteFile({ id }));
|
||||||
}, 500);
|
}
|
||||||
}, [dispatch, id, onClose]);
|
};
|
||||||
|
|
||||||
return (
|
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">
|
<Card w="full" data-testid="file-row">
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<FileRowResponsiveGrid>
|
<FileRowResponsiveGrid>
|
||||||
@ -111,7 +118,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<WrapItem>
|
<WrapItem>
|
||||||
<Button type="button" onClick={handleDeleteRow}>
|
<Button type="button" onClick={onClose}>
|
||||||
删除
|
删除
|
||||||
</Button>
|
</Button>
|
||||||
</WrapItem>
|
</WrapItem>
|
||||||
|
Loading…
Reference in New Issue
Block a user