mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 21:27:20 +00:00
feat(core): init organize (#7456)
This commit is contained in:
EYHN
421
packages/frontend/component/src/ui/lottie/folder-icon.json
Normal file
421
packages/frontend/component/src/ui/lottie/folder-icon.json
Normal file
@@ -0,0 +1,421 @@
|
||||
{
|
||||
"v": "5.12.1",
|
||||
"fr": 60,
|
||||
"ip": 0,
|
||||
"op": 89,
|
||||
"w": 240,
|
||||
"h": 240,
|
||||
"nm": "folder",
|
||||
"ddd": 0,
|
||||
"assets": [],
|
||||
"layers": [
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 1,
|
||||
"ty": 4,
|
||||
"nm": "“图层 2”轮廓 3",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": { "a": 0, "k": 100, "ix": 11 },
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [120, 120, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [12, 12, 0], "ix": 1, "l": 2 },
|
||||
"s": { "a": 0, "k": [1000, 1000, 100], "ix": 6, "l": 2 }
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"ind": 0,
|
||||
"ty": "sh",
|
||||
"ix": 1,
|
||||
"ks": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": 0.833, "y": 0.833 },
|
||||
"o": { "x": 0.167, "y": 0.167 },
|
||||
"t": 0,
|
||||
"s": [
|
||||
{
|
||||
"i": [
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[-0.366, -0.46],
|
||||
[0, 0],
|
||||
[1.105, 0],
|
||||
[0, 0],
|
||||
[0, 1.105]
|
||||
],
|
||||
"o": [
|
||||
[0, -1.105],
|
||||
[0, 0],
|
||||
[0.53, 0],
|
||||
[0, 0],
|
||||
[0.634, 0],
|
||||
[0.272, 0.342],
|
||||
[0, 1.105],
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[-9, -5.25],
|
||||
[-7, -7.25],
|
||||
[-2.328, -7.25],
|
||||
[0.5, -5.25],
|
||||
[7, -5.25],
|
||||
[8.565, -4.495],
|
||||
[9, 5.25],
|
||||
[7, 7.25],
|
||||
[-7, 7.25],
|
||||
[-9, 5.25]
|
||||
],
|
||||
"c": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"t": 5,
|
||||
"s": [
|
||||
{
|
||||
"i": [
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[-0.002, -0.756],
|
||||
[0, 0],
|
||||
[1.105, 0],
|
||||
[0, 0],
|
||||
[0, 1.105]
|
||||
],
|
||||
"o": [
|
||||
[0.225, -0.675],
|
||||
[0, 0],
|
||||
[0.53, 0],
|
||||
[0, 0],
|
||||
[2.525, -0.05],
|
||||
[-0.002, 0.982],
|
||||
[-0.375, 1.05],
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[-7.5, 0.35],
|
||||
[-5.5, -1.65],
|
||||
[-0.828, -1.65],
|
||||
[2, -1.637],
|
||||
[7.825, -1.612],
|
||||
[10.577, 0.344],
|
||||
[9.075, 5.25],
|
||||
[7.075, 7.25],
|
||||
[-7, 7.25],
|
||||
[-9, 5.25]
|
||||
],
|
||||
"c": true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 1",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.466666666667, 0.458823529412, 0.490196078431, 1],
|
||||
"ix": 3
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 4 },
|
||||
"w": { "a": 0, "k": 1.5, "ix": 5 },
|
||||
"lc": 1,
|
||||
"lj": 2,
|
||||
"bm": 0,
|
||||
"nm": "描边 1",
|
||||
"mn": "ADBE Vector Graphic - Stroke",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [12, 11.75], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "组 1",
|
||||
"np": 2,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 1,
|
||||
"op": 18060,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 2,
|
||||
"ty": 4,
|
||||
"nm": "形状图层 1",
|
||||
"td": 1,
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": { "a": 0, "k": 100, "ix": 11 },
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [120, 120, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
|
||||
"s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"ind": 0,
|
||||
"ty": "sh",
|
||||
"ix": 1,
|
||||
"ks": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{
|
||||
"i": { "x": 0.833, "y": 0.833 },
|
||||
"o": { "x": 0.167, "y": 0.167 },
|
||||
"t": 0,
|
||||
"s": [
|
||||
{
|
||||
"i": [
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"o": [
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[77.675, -57.65],
|
||||
[77.675, 39.75],
|
||||
[-74.425, 39.801],
|
||||
[-74.425, -57.6]
|
||||
],
|
||||
"c": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"t": 5,
|
||||
"s": [
|
||||
{
|
||||
"i": [
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"o": [
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[107.675, -32.825],
|
||||
[84.175, 45.15],
|
||||
[-80.425, 45.075],
|
||||
[-80.425, -34.825]
|
||||
],
|
||||
"c": true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 1",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
|
||||
"o": { "a": 0, "k": 100, "ix": 5 },
|
||||
"r": 1,
|
||||
"bm": 0,
|
||||
"nm": "填充 1",
|
||||
"mn": "ADBE Vector Graphic - Fill",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [-1.575, 18.575], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "矩形 1",
|
||||
"np": 3,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 18060,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 3,
|
||||
"ty": 4,
|
||||
"nm": "“图层 2”轮廓",
|
||||
"tt": 2,
|
||||
"tp": 2,
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": { "a": 0, "k": 100, "ix": 11 },
|
||||
"r": { "a": 0, "k": 0, "ix": 10 },
|
||||
"p": { "a": 0, "k": [120, 120, 0], "ix": 2, "l": 2 },
|
||||
"a": { "a": 0, "k": [12, 12, 0], "ix": 1, "l": 2 },
|
||||
"s": { "a": 0, "k": [1000, 1000, 100], "ix": 6, "l": 2 }
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"ind": 0,
|
||||
"ty": "sh",
|
||||
"ix": 1,
|
||||
"ks": {
|
||||
"a": 0,
|
||||
"k": {
|
||||
"i": [
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0],
|
||||
[-0.375, -0.375],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[0, -1.105],
|
||||
[0, 0],
|
||||
[1.105, 0],
|
||||
[0, 0],
|
||||
[0, 1.105]
|
||||
],
|
||||
"o": [
|
||||
[0, -1.105],
|
||||
[0, 0],
|
||||
[0.53, 0],
|
||||
[0, 0],
|
||||
[0, 0],
|
||||
[1.105, 0],
|
||||
[0, 0],
|
||||
[0, 1.105],
|
||||
[0, 0],
|
||||
[-1.105, 0],
|
||||
[0, 0]
|
||||
],
|
||||
"v": [
|
||||
[-9, -5.25],
|
||||
[-7, -7.25],
|
||||
[-2.328, -7.25],
|
||||
[-0.914, -6.664],
|
||||
[0.5, -5.25],
|
||||
[7, -5.25],
|
||||
[9, -3.25],
|
||||
[9, 5.25],
|
||||
[7, 7.25],
|
||||
[-7, 7.25],
|
||||
[-9, 5.25]
|
||||
],
|
||||
"c": true
|
||||
},
|
||||
"ix": 2
|
||||
},
|
||||
"nm": "路径 1",
|
||||
"mn": "ADBE Vector Shape - Group",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {
|
||||
"a": 0,
|
||||
"k": [0.466666666667, 0.458823529412, 0.490196078431, 1],
|
||||
"ix": 3
|
||||
},
|
||||
"o": { "a": 0, "k": 100, "ix": 4 },
|
||||
"w": { "a": 0, "k": 1.5, "ix": 5 },
|
||||
"lc": 1,
|
||||
"lj": 2,
|
||||
"bm": 0,
|
||||
"nm": "描边 1",
|
||||
"mn": "ADBE Vector Graphic - Stroke",
|
||||
"hd": false
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": { "a": 0, "k": [12, 11.75], "ix": 2 },
|
||||
"a": { "a": 0, "k": [0, 0], "ix": 1 },
|
||||
"s": { "a": 0, "k": [100, 100], "ix": 3 },
|
||||
"r": { "a": 0, "k": 0, "ix": 6 },
|
||||
"o": { "a": 0, "k": 100, "ix": 7 },
|
||||
"sk": { "a": 0, "k": 0, "ix": 4 },
|
||||
"sa": { "a": 0, "k": 0, "ix": 5 },
|
||||
"nm": "变换"
|
||||
}
|
||||
],
|
||||
"nm": "组 1",
|
||||
"np": 2,
|
||||
"cix": 2,
|
||||
"bm": 0,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group",
|
||||
"hd": false
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 18060,
|
||||
"st": 0,
|
||||
"ct": 1,
|
||||
"bm": 0
|
||||
}
|
||||
],
|
||||
"markers": [],
|
||||
"props": {}
|
||||
}
|
||||
39
packages/frontend/component/src/ui/lottie/folder-icon.tsx
Normal file
39
packages/frontend/component/src/ui/lottie/folder-icon.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
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 {
|
||||
closed: boolean; // eg, when folder icon is a "dragged over" state
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// animated folder icon that has two states: closed and opened
|
||||
export const AnimatedFolderIcon = ({ closed, className }: FolderIconProps) => {
|
||||
const lottieRef: LottieRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (lottieRef.current) {
|
||||
const lottie = lottieRef.current;
|
||||
if (closed) {
|
||||
lottie.setDirection(1);
|
||||
} else {
|
||||
lottie.setDirection(-1);
|
||||
}
|
||||
lottie.play();
|
||||
}
|
||||
}, [closed]);
|
||||
|
||||
return (
|
||||
<Lottie
|
||||
className={clsx(styles.root, className)}
|
||||
autoPlay={false}
|
||||
loop={false}
|
||||
lottieRef={lottieRef}
|
||||
animationData={animationData}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user