feat(desktop): animate editor tabs

Author: drl990114

.yarn/cache/@formkit-auto-animate-npm-0.7.0-459537d1b4-c714bf9609.zip

@@ -14,6 +14,7 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@formkit/auto-animate": "^0.7.0",
     "@linebyline/editor": "workspace:*",
     "@mui/material": "^5.14.6",
     "@tauri-apps/api": "^1.4.0",

apps/desktop/package.json

@@ -1,14 +1,33 @@
-import { getFileObject } from "@/helper/files"
-import type { IFile } from "@/helper/filesys"
-import { useGlobalTheme } from "@/hooks"
-import { useEditorStore, useEditorStateStore } from "@/stores"
-import { memo } from "react"
-import { TabItem, Dot } from "./styles"
+import { getFileObject } from '@/helper/files'
+import type { IFile } from '@/helper/filesys'
+import { useGlobalTheme } from '@/hooks'
+import { useEditorStore, useEditorStateStore } from '@/stores'
+import { memo, useEffect, useRef } from 'react'
+import autoAnimate from '@formkit/auto-animate'
+import { TabItem, Dot } from './styles'
+import styled, { css } from 'styled-components'
 
+type ContainerProps = {
+  visible: boolean
+}
+const Container = styled.div<ContainerProps>`
+  ${(props) =>
+    !props.visible &&
+    css({
+      display: 'none',
+    })}
+`
 const EditorAreaTabs = memo(() => {
   const { opened, activeId, setActiveId, delOpenedFile } = useEditorStore()
   const { idStateMap } = useEditorStateStore()
   const { themeColors } = useGlobalTheme()
+  const parent = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (parent.current) {
+      autoAnimate(parent.current)
+    }
+  }, [])
 
   const onSelectItem = (id: string) => {
     setActiveId(id)
@@ -28,8 +47,8 @@ const EditorAreaTabs = memo(() => {
     delOpenedFile(id)
   }
 
-  return opened.length > 1 ? (
-    <div className='tab-items'>
+  return (
+    <Container className='tab-items' visible={opened.length > 1} ref={parent}>
       {opened.map((id) => {
         const file = getFileObject(id) as IFile
         const active = activeId === id
@@ -56,8 +75,8 @@ const EditorAreaTabs = memo(() => {
           </TabItem>
         )
       })}
-    </div>
-  ) : null
+    </Container>
+  )
 })
 
 export default EditorAreaTabs

apps/desktop/src/components/EditorArea/EditorAreaTabs.tsx

@@ -2743,6 +2743,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formkit/auto-animate@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@formkit/auto-animate@npm:0.7.0"
+  checksum: c714bf960946eddd3abbe339e43dcfc972a193fa2717d1c9c3d89a3acc6590dc68ee3e366ed473f5e9f359d4ef6daa46d75649d963c795ab06da8bbadb5d71a3
+  languageName: node
+  linkType: hard
+
 "@halodong/eslint-config-basic@npm:0.38.24":
   version: 0.38.24
   resolution: "@halodong/eslint-config-basic@npm:0.38.24"
@@ -3143,6 +3150,7 @@ __metadata:
     "@emotion/css": ^11.11.0
     "@emotion/react": ^11.11.1
     "@emotion/styled": ^11.11.0
+    "@formkit/auto-animate": ^0.7.0
     "@linebyline/editor": "workspace:*"
     "@mui/material": ^5.14.6
     "@remirror/core": ^2.0.17