mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-09 13:15:51 +08:00
CatsJuice
75a308ac79
close AF-1198, AF-1169, AF-1204, AF-1167, AF-1168 - **fix**: empty favorite cannot be dropped(AF-1198) - **fix**: folder close animation has a unexpected delay - **fix**: mount explorer's DropEffect to body to avoid clipping(AF-1169) - **feat**: drop on empty organize to create folder and put item into it(AF-1204) - **feat**: only show explorer section's action when hovered(AF-1168) - **feat**: animate folder icon when opened(AF-1167) - **chore**: extract dnd related `dropEffect`, `canDrop` functions outside component
46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import clsx from 'clsx';
|
|
import type { LottieRef } from 'lottie-react';
|
|
import Lottie from 'lottie-react';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
import animationData from './folder-icon.json';
|
|
import * as styles from './styles.css';
|
|
|
|
export interface FolderIconProps {
|
|
open: boolean; // eg, when folder icon is a "dragged over" state
|
|
className?: string;
|
|
speed?: number;
|
|
}
|
|
|
|
// animated folder icon that has two states: closed and opened
|
|
export const AnimatedFolderIcon = ({
|
|
open,
|
|
className,
|
|
speed = 0.5,
|
|
}: FolderIconProps) => {
|
|
const lottieRef: LottieRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (lottieRef.current) {
|
|
const lottie = lottieRef.current;
|
|
lottie.setSpeed(speed);
|
|
if (open) {
|
|
lottie.setDirection(1);
|
|
} else {
|
|
lottie.setDirection(-1);
|
|
}
|
|
lottie.play();
|
|
}
|
|
}, [open, speed]);
|
|
|
|
return (
|
|
<Lottie
|
|
className={clsx(styles.root, className)}
|
|
autoPlay={false}
|
|
loop={false}
|
|
lottieRef={lottieRef}
|
|
animationData={animationData}
|
|
/>
|
|
);
|
|
};
|