fix: some ui and interaction optimization

drl990114 · Aug 12, 2023 · 91300d6 · 91300d6
1 parent 54ba1ec
commit 91300d6
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 37 deletions.
diff --git a/apps/linebyline/src/components/EditorArea/styles.ts b/apps/linebyline/src/components/EditorArea/styles.ts
@@ -14,6 +14,10 @@ export const Container = styled.div`
     overflow-x: auto;
     overflow-y: hidden;
 
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
     &__icon {
       margin: 0 2px;
     }
@@ -38,6 +42,10 @@ export const TabItem = styled.div<TabItemProps>`
   box-sizing: border-box;
   white-space: nowrap;
 
+  &:first-child {
+    border-left: none;
+  }
+
   &:last-child {
     border-right: 1px solid ${(props) => props.theme.borderColor};
   }

diff --git a/apps/linebyline/src/components/FileTree/FileNode.tsx b/apps/linebyline/src/components/FileTree/FileNode.tsx
@@ -8,13 +8,17 @@ import NewFileInput from './NewFIleInput'
 import bus from '@/helper/eventBus'
 import useFileTreeContextMenuNode from '@/hooks/useContextMenuNode'
 
-const FileNode: FC<FileNodeProps> = ({ item, level = 0, activeId, onSelect }) => {
-  const [isOpen, setIsOpen] = useState(false)
+const FileNode: FC<FileNodeProps> = ({ item, level = 0, activeId, onSelect, open = false }) => {
+  const [isOpen, setIsOpen] = useState(open)
   const newInputRef = useRef<NewInputRef>(null)
   const { contextMenuNode, setContextMenuNode } = useFileTreeContextMenuNode()
   const isActived = activeId === item.id
   const isFolder = item.kind === 'dir'
 
+  useEffect(() => {
+    setIsOpen(open)
+  }, [open])
+
   useEffect(() => {
     const newFileHandler = () => {
       if (!contextMenuNode || contextMenuNode.id !== item.id) return
@@ -89,6 +93,7 @@ const FileNode: FC<FileNodeProps> = ({ item, level = 0, activeId, onSelect }) =>
 interface FileNodeProps {
   item: IFile
   level: number
+  open?: boolean
   activeId?: string
   onSelect: (file: IFile) => void
 }

diff --git a/apps/linebyline/src/components/FileTree/FileTree.tsx b/apps/linebyline/src/components/FileTree/FileTree.tsx
@@ -26,8 +26,9 @@ const FileTree: FC<FileTreeProps> = (props) => {
 
   return (
     <div className={containerCls} onContextMenuCapture={handleContextMenu}>
+      {/* Currently, folderData only has root file, so open it. */}
       {data?.map((item) => (
-        <FileNode key={item.name} item={item} level={0} activeId={activeId} onSelect={onSelect} />
+        <FileNode open key={item.name} item={item} level={0} activeId={activeId} onSelect={onSelect} />
       ))}
       <FileNodeContextMenu top={points.y} left={points.x} />
     </div>

diff --git a/apps/linebyline/src/components/SideBar/index.tsx b/apps/linebyline/src/components/SideBar/index.tsx
@@ -8,27 +8,23 @@ import { RIGHTBARITEMKEYS } from '@/constants'
 function SideBar() {
   const [isResizing, setIsResizing] = useState(false)
   const [sidebarWidth, setSidebarWidth] = useState(300)
-  const [activeRightBarItemKey, setActiveRightBarItemKey] = useState<
-    RIGHTBARITEMKEYS | undefined
-  >()
+  const [activeRightBarItemKey, setActiveRightBarItemKey] = useState<RIGHTBARITEMKEYS | undefined>()
   const sidebarRef = useRef<HTMLDivElement>(null)
 
   const rightBarDataSource: RightBarItem[] = useMemo(() => {
     return [
       {
         title: RIGHTBARITEMKEYS.Explorer,
         key: RIGHTBARITEMKEYS.Explorer,
-        icon: <i className="ri-file-list-3-line" />,
+        icon: <i className='ri-file-list-3-line' />,
         components: <Explorer />,
       },
       chatgpt,
     ]
   }, [])
 
   const activeRightBarItem = useMemo(() => {
-    const activeItem = rightBarDataSource.find(
-      item => item.key === activeRightBarItemKey,
-    )
+    const activeItem = rightBarDataSource.find((item) => item.key === activeRightBarItemKey)
     return activeItem
   }, [activeRightBarItemKey, rightBarDataSource])
 
@@ -44,13 +40,25 @@ function SideBar() {
   const resize = useCallback(
     (mouseMoveEvent: MouseEvent) => {
       if (isResizing && sidebarRef.current) {
-        setSidebarWidth(
-          mouseMoveEvent.clientX
-            - sidebarRef.current.getBoundingClientRect().left,
-        )
+        const sideBarClientRect = sidebarRef.current.getBoundingClientRect()
+        if (
+          sideBarClientRect.width > 100 &&
+          mouseMoveEvent.clientX - sideBarClientRect.left <= 100
+        ) {
+          setActiveRightBarItemKey(undefined)
+        } else if (
+          sideBarClientRect.width < 100 &&
+          mouseMoveEvent.clientX - sideBarClientRect.left > 100
+        ) {
+          setActiveRightBarItemKey(rightBarDataSource[0].key)
+        }
+
+        requestAnimationFrame(() => {
+          setSidebarWidth(mouseMoveEvent.clientX - sideBarClientRect.left)
+        })
       }
     },
-    [isResizing],
+    [isResizing, rightBarDataSource],
   )
 
   useEffect(() => {
@@ -71,38 +79,31 @@ function SideBar() {
       noActiveItem={noActiveItem}
       style={{ width: noActiveItem ? '48px' : sidebarWidth }}
     >
-      <div className="app-sidebar">
+      <div className='app-sidebar'>
         <div>
           {rightBarDataSource.map((item) => {
             const cls = classNames('app-sidebar__item fjic', {
               'app-sidebar-active': activeRightBarItemKey === item.key,
             })
 
             const handleRightBarItemClick = () => {
-              if (activeRightBarItemKey === item.key)
-                setActiveRightBarItemKey(undefined)
-
-              else
-                setActiveRightBarItemKey(item.key)
+              if (activeRightBarItemKey === item.key) setActiveRightBarItemKey(undefined)
+              else setActiveRightBarItemKey(item.key)
             }
 
             return (
-              <div
-                key={item.key}
-                className={cls}
-                onClick={handleRightBarItemClick}
-              >
+              <div key={item.key} className={cls} onClick={handleRightBarItemClick}>
                 {item.icon}
               </div>
             )
           })}
         </div>
-        <SettingRightBarContainer className="app-sidebar__item fjic">
+        <SettingRightBarContainer className='app-sidebar__item fjic'>
           <Setting />
         </SettingRightBarContainer>
       </div>
       {activeRightBarItem?.components ?? null}
-      <div className="app-sidebar-resizer" onMouseDown={startResizing} />
+      <div className='app-sidebar-resizer' onMouseDown={startResizing} />
     </Container>
   )
 }

diff --git a/apps/linebyline/src/components/SideBar/styles.ts b/apps/linebyline/src/components/SideBar/styles.ts
@@ -39,17 +39,17 @@ export const Container = styled.div<ContainerProps>`
   }
 
   .app-sidebar-resizer {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 1px;
-    justify-self: flex-end;
+    position: absolute;
+    height: 100%;
+    width: 1px;
+    right: -1px;
     cursor: col-resize;
     resize: horizontal;
     background: ${props => props.theme.borderColor};
   }
 
   .app-sidebar-resizer:hover {
-    flex-basis: 3px;
+    width: 3px;
     background: ${props => props.theme.labelFontColor};
   }
 

diff --git a/apps/linebyline/src/helper/filesys.ts b/apps/linebyline/src/helper/filesys.ts
@@ -68,7 +68,7 @@ export const readDirectory = (folderPath: string): Promise<IFile[]> => {
           resolve([
             {
               id: nanoid(),
-              name: folderPath,
+              name: getFileNameFromPath(folderPath),
               path: folderPath,
               kind: 'dir',
               children: entries,
@@ -88,7 +88,7 @@ export const readDirectory = (folderPath: string): Promise<IFile[]> => {
         resolve([
           {
             id: nanoid(),
-            name: folderPath,
+            name: getFileNameFromPath(folderPath),
             path: folderPath,
             kind: 'dir',
             children: entries,
@@ -104,3 +104,14 @@ export const readDirectory = (folderPath: string): Promise<IFile[]> => {
 export function isMdFile(fileName: string) {
   return fileName.endsWith('.md')
 }
+
+function getFileNameFromPath(filePath: string) {
+  const regex = /[\/\\]([^\/\\]+)$/
+  const match = regex.exec(filePath)
+
+  if (match && match.length > 1) {
+    return match[1]
+  }
+
+  return filePath
+}
diff --git a/apps/linebyline/src/stores/useEditorStore.ts b/apps/linebyline/src/stores/useEditorStore.ts
@@ -38,12 +38,12 @@ const useEditorStore = create<EditorStore>((set, get) => {
       if (fileNode && target) {
         const parent = fileNode.kind === 'dir' ? fileNode : findParentNode(fileNode, folderData![0])
 
-        if (!parent || hasSameFile(parent.children!, target)) return false
-
         if (!isMdFile(target.name)) {
           target.name = `${target.name}.md`
         }
 
+        if (!parent || hasSameFile(parent.children!, target)) return false
+
         const targetFile = createFile({
           name: target.name,
           path: parent.path ? `${parent.path}/${target.name}` : target.name,