fix(desktop): editor tab scrolling optimization

drl990114 · Sep 9, 2023 · 525cae4 · 525cae4
1 parent 6097221
commit 525cae4
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/apps/desktop/src/components/EditorArea/EditorAreaTabs.tsx b/apps/desktop/src/components/EditorArea/EditorAreaTabs.tsx
@@ -2,7 +2,7 @@ import { getFileObject } from '@/helper/files'
 import type { IFile } from '@/helper/filesys'
 import { useAutoAnimate, useGlobalTheme } from '@/hooks'
 import { useEditorStore, useEditorStateStore } from '@/stores'
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 import { TabItem, Dot } from './styles'
 import styled, { css } from 'styled-components'
 
@@ -22,6 +22,14 @@ const EditorAreaTabs = memo(() => {
   const { themeColors } = useGlobalTheme()
   const { htmlRef } = useAutoAnimate<HTMLDivElement>()
 
+  useEffect(() => {
+    if (!htmlRef.current) return
+    htmlRef.current.onwheel = (ev) => {
+      ev.preventDefault()
+      htmlRef.current!.scrollLeft += ev.deltaY
+    }
+  }, [])
+
   const onSelectItem = (id: string) => {
     setActiveId(id)
   }
@@ -48,11 +56,7 @@ const EditorAreaTabs = memo(() => {
         const editorState = idStateMap.get(id)
 
         return (
-          <TabItem
-            active={active}
-            onClick={() => onSelectItem(file.id)}
-            key={id}
-          >
+          <TabItem active={active} onClick={() => onSelectItem(file.id)} key={id}>
             <i className={'ri-file-3-line tab-items__icon'} />
             <span style={{ color: active ? themeColors.accentColor : '' }}>{file.name}</span>