diff --git a/apps/web/package.json b/apps/web/package.json index b45c28221d..3b8bdbe859 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -30,11 +30,11 @@ "jotai": "^2.0.3", "jotai-devtools": "^0.2.0", "lit": "^2.6.1", + "lottie-web": "^5.10.2", "next-themes": "^0.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-is": "^18.2.0", - "react-lottie": "^1.2.3", "swr": "^2.0.4", "y-indexeddb": "^9.0.9", "y-protocols": "^1.0.5", @@ -48,7 +48,6 @@ "@swc-jotai/react-refresh": "^0.0.4", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", - "@types/react-lottie": "^1.2.6", "@types/webpack-env": "^1.18.0", "dotenv": "^16.0.3", "eslint": "^8.35.0", diff --git a/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx b/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx index e63025d6fd..7f79e059e2 100644 --- a/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx +++ b/apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx @@ -21,7 +21,8 @@ import { useWorkspacesHelper } from '../../hooks/use-workspaces'; import { ThemeProvider } from '../../providers/ThemeProvider'; import { pathGenerator, RemWorkspaceFlavour } from '../../shared'; import { WorkSpaceSliderBar } from '../pure/workspace-slider-bar'; -vi.mock('react-lottie', () => ({ + +vi.mock('../blocksuite/header/editor-mode-switch/CustomLottie', () => ({ default: (props: React.PropsWithChildren) => <>{props.children}, })); diff --git a/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx b/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx new file mode 100644 index 0000000000..e9d2f7ca1d --- /dev/null +++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx @@ -0,0 +1,54 @@ +import lottie from 'lottie-web'; +import { FC, useEffect, useRef } from 'react'; + +type CustomLottieProps = { + options: { + loop?: boolean | number | undefined; + autoplay?: boolean | undefined; + animationData: any; + rendererSettings?: { + preserveAspectRatio?: string | undefined; + }; + }; + isStopped?: boolean | undefined; + speed?: number | undefined; + width?: number | string | undefined; + height?: number | string | undefined; +}; + +const CustomLottie: FC = ({ + options, + isStopped, + speed, + width, + height, +}) => { + const element = useRef(null); + const lottieInstance = useRef(); + + useEffect(() => { + if (element.current) { + lottieInstance.current = lottie.loadAnimation({ + ...options, + container: element.current, + }); + } + return () => { + lottieInstance.current?.destroy(); + }; + }, [options]); + + useEffect(() => { + if (speed) { + lottieInstance.current?.setSpeed(speed); + } + if (isStopped) { + lottieInstance.current?.stop(); + } else { + lottieInstance.current?.play(); + } + }, [isStopped, speed]); + + return
; +}; +export default CustomLottie; diff --git a/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx b/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx index b191e93dc4..270ee107ba 100644 --- a/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx +++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx @@ -1,6 +1,6 @@ import React, { cloneElement, HTMLAttributes, useState } from 'react'; -import Lottie from 'react-lottie'; +import Lottie from './CustomLottie'; import { StyledSwitchItem } from './style'; type HoverAnimateControllerProps = { diff --git a/apps/web/src/components/pure/workspace-slider-bar/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/index.tsx index a968594a66..7820ea30cf 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx @@ -53,19 +53,20 @@ const FavoriteList: React.FC = ({ {favoriteList.map((pageMeta, index) => { const active = router.query.pageId === pageMeta.id; return ( - { - if (active) { - return; - } - openPage(pageMeta.id); - }} - > - {pageMeta.title || 'Untitled'} - +
+ { + if (active) { + return; + } + openPage(pageMeta.id); + }} + > + {pageMeta.title || 'Untitled'} + +
); })} {favoriteList.length === 0 && ( diff --git a/apps/web/src/hooks/__tests__/index.spec.tsx b/apps/web/src/hooks/__tests__/index.spec.tsx index 7f2fa0a409..251ae532d2 100644 --- a/apps/web/src/hooks/__tests__/index.spec.tsx +++ b/apps/web/src/hooks/__tests__/index.spec.tsx @@ -42,9 +42,13 @@ import { useSyncRouterWithCurrentWorkspaceAndPage, } from '../use-sync-router-with-current-workspace-and-page'; import { useWorkspaces, useWorkspacesHelper } from '../use-workspaces'; -vi.mock('react-lottie', () => ({ - default: (props: React.PropsWithChildren) => <>{props.children}, -})); + +vi.mock( + '../../components/blocksuite/header/editor-mode-switch/CustomLottie', + () => ({ + default: (props: React.PropsWithChildren) => <>{props.children}, + }) +); let blockSuiteWorkspace: BlockSuiteWorkspace; beforeAll(() => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c21aa523c7..c48aa2e574 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -154,7 +154,6 @@ importers: '@swc-jotai/react-refresh': ^0.0.4 '@types/react': ^18.0.28 '@types/react-dom': ^18.0.11 - '@types/react-lottie': ^1.2.6 '@types/webpack-env': ^1.18.0 cmdk: ^0.1.22 css-spring: ^4.1.0 @@ -165,6 +164,7 @@ importers: jotai: ^2.0.3 jotai-devtools: ^0.2.0 lit: ^2.6.1 + lottie-web: ^5.10.2 next: ^13.2.2 next-debug-local: ^0.1.5 next-router-mock: ^0.9.2 @@ -173,7 +173,6 @@ importers: react: ^18.2.0 react-dom: ^18.2.0 react-is: ^18.2.0 - react-lottie: ^1.2.3 redux: ^4.2.1 swc-plugin-coverage-instrument: ^0.0.14 swr: ^2.0.4 @@ -205,11 +204,11 @@ importers: jotai: 2.0.3_react@18.2.0 jotai-devtools: 0.2.0_tfg3pgykuuhpvkcrwis64xs5oq lit: 2.6.1 + lottie-web: 5.10.2 next-themes: 0.2.1_nvzgbose6yf6w7ijjprgspqefi react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-is: 18.2.0 - react-lottie: 1.2.3_react@18.2.0 swr: 2.0.4_react@18.2.0 y-indexeddb: 9.0.9_yjs@13.5.48 y-protocols: 1.0.5 @@ -222,7 +221,6 @@ importers: '@swc-jotai/react-refresh': 0.0.4 '@types/react': 18.0.28 '@types/react-dom': 18.0.11 - '@types/react-lottie': 1.2.6 '@types/webpack-env': 1.18.0 dotenv: 16.0.3 eslint: 8.35.0 @@ -3385,6 +3383,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -3394,6 +3393,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true optional: true @@ -3402,6 +3402,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -3411,6 +3412,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true optional: true @@ -3419,6 +3421,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -3428,6 +3431,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true optional: true @@ -3436,6 +3440,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -3445,6 +3450,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true optional: true @@ -4802,6 +4808,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -4811,6 +4818,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -4820,6 +4828,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -4829,6 +4838,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -5185,12 +5195,6 @@ packages: '@types/react': 18.0.28 dev: false - /@types/react-lottie/1.2.6: - resolution: {integrity: sha512-fvGJHD7SeUdVESHo7f7erRnXkTWaa/6Mo5TB+R0/ieSftKoFspA4sMlF2qMH6BljXI7ehFJbBtrD5bzDxPCkGg==} - dependencies: - '@types/react': 18.0.28 - dev: true - /@types/react-transition-group/4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} dependencies: @@ -6024,13 +6028,6 @@ packages: - supports-color dev: true - /babel-runtime/6.26.0: - resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==} - dependencies: - core-js: 2.6.12 - regenerator-runtime: 0.11.1 - dev: false - /balanced-match/1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -6596,12 +6593,6 @@ packages: browserslist: 4.21.5 dev: true - /core-js/2.6.12: - resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==} - deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. - requiresBuild: true - dev: false - /core-util-is/1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} @@ -10997,17 +10988,6 @@ packages: /react-is/18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-lottie/1.2.3_react@18.2.0: - resolution: {integrity: sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==} - engines: {npm: ^3.0.0} - peerDependencies: - react: ^0.14.7 || ^15.0.0 || ^16.0.0 - dependencies: - babel-runtime: 6.26.0 - lottie-web: 5.10.2 - react: 18.2.0 - dev: false - /react-refresh/0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -11208,10 +11188,6 @@ packages: resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} dev: true - /regenerator-runtime/0.11.1: - resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==} - dev: false - /regenerator-runtime/0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}