feat: add animation to mode switch when hover (#1489)

Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx

@@ -1,5 +1,4 @@
 import { toast } from '@affine/component';
-import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { CSSProperties } from 'react';
 
@@ -8,7 +7,8 @@ import {
   usePageMetaHelper,
 } from '../../../../hooks/use-page-meta';
 import { BlockSuiteWorkspace } from '../../../../shared';
-import { StyledEditorModeSwitch, StyledSwitchItem } from './style';
+import { StyledEditorModeSwitch } from './style';
+import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 
 export type EditorModeSwitchProps = {
   // todo(himself65): combine these two properties
@@ -35,7 +35,7 @@ export const EditorModeSwitch = ({
       switchLeft={mode === 'page'}
       showAlone={trash}
     >
-      <StyledSwitchItem
+      <PageSwitchItem
         data-testid="switch-page-mode-button"
         active={mode === 'page'}
         hide={trash && mode !== 'page'}
@@ -43,10 +43,8 @@ export const EditorModeSwitch = ({
           setPageMeta(pageId, { mode: 'page' });
           toast('Page mode');
         }}
-      >
-        <PaperIcon />
-      </StyledSwitchItem>
-      <StyledSwitchItem
+      />
+      <EdgelessSwitchItem
         data-testid="switch-edgeless-mode-button"
         active={mode === 'edgeless'}
         hide={trash && mode !== 'edgeless'}
@@ -54,9 +52,7 @@ export const EditorModeSwitch = ({
           setPageMeta(pageId, { mode: 'edgeless' });
           toast('Edgeless mode');
         }}
-      >
-        <EdgelessIcon />
-      </StyledSwitchItem>
+      />
     </StyledEditorModeSwitch>
   );
 };

apps/web/src/components/blocksuite/header/editor-mode-switch/style.ts

@@ -40,9 +40,9 @@ export const StyledEditorModeSwitch = styled('div')<{
 });
 
 export const StyledSwitchItem = styled('button')<{
-  active: boolean;
+  active?: boolean;
   hide?: boolean;
-}>(({ theme, active, hide = false }) => {
+}>(({ theme, active = false, hide = false }) => {
   return {
     width: '24px',
     height: '24px',
@@ -54,5 +54,8 @@ export const StyledSwitchItem = styled('button')<{
     position: 'relative',
     zIndex: 2,
     fontSize: '20px',
+    path: {
+      fill: 'currentColor',
+    },
   };
 });

apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx

@@ -0,0 +1,79 @@
+import React, { cloneElement, HTMLAttributes, useState } from 'react';
+import Lottie from 'react-lottie';
+
+import * as edgelessHoverAnimationData from './animation-data/edgeless-hover.json';
+import * as pageHoverAnimationData from './animation-data/page-hover.json';
+import { StyledSwitchItem } from './style';
+
+type HoverAnimateControllerProps = {
+  active?: boolean;
+  hide?: boolean;
+  children: React.ReactElement;
+} & HTMLAttributes<HTMLButtonElement>;
+
+const HoverAnimateController = ({
+  active,
+  hide,
+  children,
+  ...props
+}: HoverAnimateControllerProps) => {
+  const [startAnimate, setStartAnimate] = useState(false);
+  return (
+    <StyledSwitchItem
+      hide={hide}
+      active={active}
+      onMouseEnter={() => {
+        setStartAnimate(true);
+      }}
+      onMouseLeave={() => {
+        setStartAnimate(false);
+      }}
+      {...props}
+    >
+      {cloneElement(children, {
+        isStopped: !startAnimate,
+        speed: 5,
+        width: 20,
+        height: 20,
+      })}
+    </StyledSwitchItem>
+  );
+};
+
+export const PageSwitchItem = (
+  props: Omit<HoverAnimateControllerProps, 'children'>
+) => {
+  return (
+    <HoverAnimateController {...props}>
+      <Lottie
+        options={{
+          loop: false,
+          autoplay: false,
+          animationData: pageHoverAnimationData,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+          },
+        }}
+      />
+    </HoverAnimateController>
+  );
+};
+
+export const EdgelessSwitchItem = (
+  props: Omit<HoverAnimateControllerProps, 'children'>
+) => {
+  return (
+    <HoverAnimateController {...props}>
+      <Lottie
+        options={{
+          loop: false,
+          autoplay: false,
+          animationData: edgelessHoverAnimationData,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+          },
+        }}
+      />
+    </HoverAnimateController>
+  );
+};