toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-23 21:52:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add animation for add favorites (#4317)

Browse Source
This commit is contained in:
JimmFly 2023-09-13 00:06:03 +08:00 committed by GitHub
parent 9e5213f074
commit a94512a3fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1589 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/component/package.json
View File

@ -43,6 +43,7 @@
"dayjs": "^1.11.9",
"jotai": "^2.4.1",
"lit": "^2.8.0",
"lottie-react": "^2.4.0",
"lottie-web": "^5.12.2",
"react": "18.2.0",
"react-datepicker": "^4.16.0",

33
packages/component/src/components/page-list/components/favorite-tag.tsx
View File

@ -5,7 +5,10 @@ import {
type IconButtonProps,
} from '@toeverything/components/button';
import { Tooltip } from '@toeverything/components/tooltip';
import { forwardRef } from 'react';
import Lottie from 'lottie-react';
import { forwardRef, useCallback, useState } from 'react';
import favoritedAnimation from './favorited-animation/data.json';
export const FavoriteTag = forwardRef<
HTMLButtonElement,
@ -13,20 +16,30 @@ export const FavoriteTag = forwardRef<
active: boolean;
} & Omit<IconButtonProps, 'children'>
>(({ active, onClick, ...props }, ref) => {
const [playAnimation, setPlayAnimation] = useState(false);
const t = useAFFiNEI18N();
return (
<Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
<IconButton
ref={ref}
active={active}
onClick={e => {
const handleClick = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
onClick?.(e);
}}
{...props}
>
setPlayAnimation(!active);
},
[active, onClick]
);
return (
<Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
<IconButton ref={ref} active={active} onClick={handleClick} {...props}>
{active ? (
playAnimation ? (
<Lottie
loop={false}
animationData={favoritedAnimation}
onComplete={() => setPlayAnimation(false)}
style={{ width: '20px', height: '20px' }}
/>
) : (
<FavoritedIcon data-testid="favorited-icon" />
)
) : (
<FavoriteIcon />
)}

1550
packages/component/src/components/page-list/components/favorited-animation/data.json Normal file
View File

File diff suppressed because it is too large Load Diff

15
yarn.lock
View File

@ -202,6 +202,7 @@ __metadata:
dayjs: ^1.11.9
jotai: ^2.4.1
lit: ^2.8.0
lottie-react: ^2.4.0
lottie-web: ^5.12.2
react: 18.2.0
react-datepicker: ^4.16.0
@ -25414,7 +25415,19 @@ __metadata:
languageName: node
linkType: hard
"lottie-web@npm:^5.12.2":
"lottie-react@npm:^2.4.0":
version: 2.4.0
resolution: "lottie-react@npm:2.4.0"
dependencies:
lottie-web: ^5.10.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
languageName: node
linkType: hard
"lottie-web@npm:^5.10.2, lottie-web@npm:^5.12.2":
version: 5.12.2
resolution: "lottie-web@npm:5.12.2"
checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636