refactor(projects): change sidebar animation

soybeanjs · Oct 6, 2024 · f92972e · f92972e
1 parent abada7f
commit f92972e
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 152 deletions.
diff --git a/src/layouts/modules/theme-drawer/components/SettingItem.tsx b/src/layouts/modules/theme-drawer/components/SettingItem.tsx
@@ -1,19 +1,76 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import classNames from 'classnames';
+import { getThemeDrawerVisible } from '@/store/slice/app';
+
 interface Props {
   /** Label */
   label: React.ReactNode;
   children: React.ReactNode;
+  className?: string;
   suffix?: React.ReactNode;
+  seq: number;
+  show?: boolean;
 }
 
-const SettingItem: FC<Props> = memo(({ label, children, suffix }) => {
+const variants = {
+  open: (i: number) => ({
+    x: 0,
+    y: 0,
+    opacity: 1,
+    transition: {
+      delay: i * 0.05, // 每个元素的动画延迟 delay for each element's animation
+      duration: 0.5, // 每个动画持续时间  duration of each animation
+      type: 'tween'
+    }
+  }),
+  closed: (i: number) => ({
+    x: 500,
+    y: -50,
+    opacity: 0,
+    transition: {
+      delay: i * 0.05, // 每个元素的动画延迟 delay for each element's animation
+      duration: 0.5, // 每个动画持续时间 duration of each animation
+      type: 'tween'
+    }
+  }),
+  exit: {
+    x: 500,
+    y: -20,
+    opacity: 0,
+    transition: {
+      duration: 0.5,
+      type: 'tween'
+    }
+  }
+};
+
+const SettingItem: FC<Props> = memo(({ label, children, suffix, seq, className, show = true }) => {
+  const themeDrawerVisible = useAppSelector(getThemeDrawerVisible);
+
+  const id = useId();
+
   return (
-    <div className="w-full flex-y-center justify-between">
-      <div>
-        <span className="pr-8px text-base-text">{label}</span>
-        {suffix}
-      </div>
-      {children}
-    </div>
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className={classNames('w-full flex-y-center justify-between', className)}
+          variants={variants}
+          initial="closed"
+          id={id + seq}
+          key={id + seq}
+          exit="exit"
+          animate={themeDrawerVisible ? 'open' : 'closed'}
+          custom={seq}
+          whileHover={{ scale: 1.1 }}
+        >
+          <div>
+            <span className="pr-8px text-base-text">{label}</span>
+            {suffix}
+          </div>
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 });
 

diff --git a/src/layouts/modules/theme-drawer/index.tsx b/src/layouts/modules/theme-drawer/index.tsx
@@ -9,7 +9,9 @@ import ConfigOperation from './modules/ConfigOperation';
 
 const ThemeDrawer = memo(() => {
   const { t } = useTranslation();
+
   const dispatch = useAppDispatch();
+
   const themeDrawerVisible = useAppSelector(getThemeDrawerVisible);
 
   function close() {
@@ -33,7 +35,7 @@ const ThemeDrawer = memo(() => {
       footer={<ConfigOperation />}
     >
       <SimpleScrollbar>
-        <div className="px-24px pb-24px pt-8px">
+        <div className="overflow-x-hidden px-24px pb-24px pt-8px">
           <ADivider>{t('theme.themeSchema.title')}</ADivider>
           <DarkMode />
           <ADivider>{t('theme.layoutMode.title')}</ADivider>

diff --git a/src/layouts/modules/theme-drawer/modules/CustomPicker.tsx b/src/layouts/modules/theme-drawer/modules/CustomPicker.tsx
@@ -24,14 +24,16 @@ const swatches: { name: string; color: string }[] = [
 interface Props {
   label: string;
   value: string;
+  index: number;
   theme: string;
   isInfoFollowPrimary: boolean;
 }
 
-const CustomPicker: FC<Props> = memo(({ label, value, theme, isInfoFollowPrimary }) => {
+const CustomPicker: FC<Props> = memo(({ label, value, theme, isInfoFollowPrimary, index }) => {
   const { t } = useTranslation();
 
   const dispatch = useAppDispatch();
+
   function handleUpdateColor(color: string, name: App.Theme.ThemeColorKey) {
     dispatch(updateThemeColors({ key: name, color }));
   }
@@ -41,6 +43,7 @@ const CustomPicker: FC<Props> = memo(({ label, value, theme, isInfoFollowPrimary
   const onChange: CheckboxProps['onChange'] = e => {
     dispatch(setIsInfoFollowPrimary(e.target.checked));
   };
+
   const customPanelRender: ColorPickerProps['panelRender'] = (_, { components: { Picker } }) => (
     <ASpace
       direction="vertical"
@@ -77,7 +80,7 @@ const CustomPicker: FC<Props> = memo(({ label, value, theme, isInfoFollowPrimary
 
   return (
     <SettingItem
-      key={label}
+      seq={index + 5}
       suffix={
         label === 'info' && (
           <ACheckbox

diff --git a/src/layouts/modules/theme-drawer/modules/DarkMode.tsx b/src/layouts/modules/theme-drawer/modules/DarkMode.tsx
@@ -1,6 +1,5 @@
 import { Segmented, Switch } from 'antd';
 import type { SegmentedOptions } from 'antd/es/segmented';
-import { CSSTransition } from 'react-transition-group';
 import { themeSchemaRecord } from '@/constants/app';
 import {
   getThemeSettings,
@@ -11,7 +10,6 @@ import {
 } from '@/store/slice/theme';
 import SettingItem from '../components/SettingItem';
 import '@/styles/css/darkMode.css';
-
 const icons: Record<UnionKey.ThemeScheme, string> = {
   light: 'material-symbols:sunny',
   dark: 'material-symbols:nightlight-rounded',
@@ -37,12 +35,8 @@ const DarkMode = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const twoNodeRef = useRef(null);
-
   const themeSettings = useAppSelector(getThemeSettings);
 
-  const isVertical = themeSettings.layout.mode.includes('vertical');
-
   function handleSegmentChange(value: string | number) {
     dispatch(setThemeScheme(value as UnionKey.ThemeScheme));
   }
@@ -69,33 +63,35 @@ const DarkMode = () => {
         ></Segmented>
       </div>
 
-      <SettingItem label={t('theme.grayscale')}>
+      <SettingItem
+        seq={1}
+        label={t('theme.grayscale')}
+      >
         <Switch
           defaultChecked={themeSettings.grayscale}
           onChange={handleGrayscaleChange}
         />
       </SettingItem>
-      <SettingItem label={t('theme.colourWeakness')}>
+
+      <SettingItem
+        seq={2}
+        label={t('theme.colourWeakness')}
+      >
         <Switch
           defaultChecked={themeSettings.colourWeakness}
           onChange={handleAuxiliaryColorChange}
         />
       </SettingItem>
-      <CSSTransition
-        timeout={300}
-        in={isVertical}
-        classNames="sider-inverted"
-        nodeRef={twoNodeRef}
+
+      <SettingItem
+        seq={3}
+        label={t('theme.isOnlyExpandCurrentParentMenu')}
       >
-        <div ref={twoNodeRef}>
-          <SettingItem label={t('theme.isOnlyExpandCurrentParentMenu')}>
-            <Switch
-              defaultChecked={themeSettings.isOnlyExpandCurrentParentMenu}
-              onChange={handleIsOnlyExpandCurrentParentMenuChange}
-            />
-          </SettingItem>
-        </div>
-      </CSSTransition>
+        <Switch
+          defaultChecked={themeSettings.isOnlyExpandCurrentParentMenu}
+          onChange={handleIsOnlyExpandCurrentParentMenuChange}
+        />
+      </SettingItem>
     </div>
   );
 };

diff --git a/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx b/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx
@@ -60,16 +60,18 @@ const LayoutMode = memo(() => {
         mode={themeSettings.layout.mode}
         {...LAYOUTS_COMPONENTS}
       />
-      {themeSettings.layout.mode === 'horizontal-mix' && (
-        <div className="mt-16px">
-          <SettingItem label={t('theme.layoutMode.reverseHorizontalMix')}>
-            <ASwitch
-              defaultChecked={themeSettings.layout.reverseHorizontalMix}
-              onChange={toggleReverseHorizontalMix}
-            />
-          </SettingItem>
-        </div>
-      )}
+
+      <SettingItem
+        seq={1}
+        show={themeSettings.layout.mode === 'horizontal-mix'}
+        className="mt-16px"
+        label={t('theme.layoutMode.reverseHorizontalMix')}
+      >
+        <ASwitch
+          defaultChecked={themeSettings.layout.reverseHorizontalMix}
+          onChange={toggleReverseHorizontalMix}
+        />
+      </SettingItem>
     </>
   );
 });