fix iconY padding when folder expanded

libs/remix-ui/workspace/src/lib/components/file-render.tsx

@@ -1,28 +1,34 @@
 // eslint-disable-next-line no-use-before-define
-import React, { SyntheticEvent, useEffect, useState } from 'react'
+import React, {SyntheticEvent, useEffect, useState} from 'react'
-import { FileType } from '../types'
+import {FileType} from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import {TreeView, TreeViewItem} from '@remix-ui/tree-view'
-import { getPathIcon } from '@remix-ui/helper'
+import {getPathIcon} from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { FileLabel } from './file-label'
+import {FileLabel} from './file-label'
-import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
+import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators'
-import { Draggable } from "@remix-ui/drag-n-drop"
+import {Draggable} from '@remix-ui/drag-n-drop'
 
 export interface RenderFileProps {
-  file: FileType,
+  file: FileType
-  index: number,
+  index: number
-  focusEdit: { element: string, type: string, isNew: boolean, lastEdit: string },
+  focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string}
-  focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[],
+  focusElement: {key: string; type: 'file' | 'folder' | 'gist'}[]
-  focusContext: { element: string, x: number, y: number, type: string },
+  focusContext: {element: string; x: number; y: number; type: string}
-  ctrlKey: boolean,
+  ctrlKey: boolean
-  expandPath: string[],
+  expandPath: string[]
-  hideIconsMenu?: React.Dispatch<React.SetStateAction<boolean>>,
+  hideIconsMenu?: React.Dispatch<React.SetStateAction<boolean>>
-  showIconsMenu?: boolean,
+  showIconsMenu?: boolean
-  editModeOff: (content: string) => void,
+  editModeOff: (content: string) => void
-  handleClickFolder: (path: string, type: string) => void,
+  handleClickFolder: (path: string, type: string) => void
-  handleClickFile: (path: string, type: string) => void,
+  handleClickFile: (path: string, type: string) => void
-  handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void
+  handleContextMenu: (
+    pageX: number,
+    pageY: number,
+    path: string,
+    content: string,
+    type: string
+  ) => void
   fileDecorations: fileDecoration[]
 }
 
@@ -38,11 +44,17 @@ export const FileRender = (props: RenderFileProps) => {
     }
   }, [props.file])
 
-  const labelClass = props.focusEdit.element === file.path
+  const labelClass =
-    ? 'bg-light' : props.focusElement.findIndex(item => item.key === file.path) !== -1
+    props.focusEdit.element === file.path
-      ? 'bg-secondary' : hover
+      ? 'bg-light'
-        ? 'bg-light border-no-shift' : (props.focusContext.element === file.path) && (props.focusEdit.element !== file.path)
+      : props.focusElement.findIndex((item) => item.key === file.path) !== -1
-          ? 'bg-light border-no-shift' : ''
+        ? 'bg-secondary'
+        : hover
+          ? 'bg-light border-no-shift'
+          : props.focusContext.element === file.path &&
+        props.focusEdit.element !== file.path
+            ? 'bg-light border-no-shift'
+            : ''
 
   const spreadProps = {
     onClick: (e) => e.stopPropagation()
@@ -50,20 +62,28 @@ export const FileRender = (props: RenderFileProps) => {
 
   const handleFolderClick = (event: SyntheticEvent) => {
     event.stopPropagation()
-    if (props.focusEdit.element !== file.path) props.handleClickFolder(file.path, file.type)
+    if (props.focusEdit.element !== file.path)
+      props.handleClickFolder(file.path, file.type)
     if (props.showIconsMenu === true) props.hideIconsMenu(!props.showIconsMenu)
   }
 
   const handleFileClick = (event: SyntheticEvent) => {
     event.stopPropagation()
-    if (props.focusEdit.element !== file.path) props.handleClickFile(file.path, file.type)
+    if (props.focusEdit.element !== file.path)
+      props.handleClickFile(file.path, file.type)
     if (props.showIconsMenu === true) props.hideIconsMenu(!props.showIconsMenu)
   }
 
   const handleContextMenu = (event: PointerEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    props.handleContextMenu(event.pageX, event.pageY, file.path, (event.target as HTMLElement).textContent, file.type)
+    props.handleContextMenu(
+      event.pageX,
+      event.pageY,
+      file.path,
+      (event.target as HTMLElement).textContent,
+      file.type
+    )
   }
 
   const handleMouseOut = (event: SyntheticEvent) => {
@@ -80,17 +100,36 @@ export const FileRender = (props: RenderFileProps) => {
     return (
       <TreeViewItem
         id={`treeViewItem${file.path}`}
-        iconX='pr-3 fa fa-folder'
+        iconX="pr-3 fa fa-folder"
-        iconY='pr-3 fa fa-folder-open'
+        iconY={
+          props.expandPath.includes(file.path)
+            ? 'pr-0 fa fa-folder-open'
+            : 'pr-3 fa fa-folder'
+        }
         key={`${file.path + props.index}`}
-        label={<>
+        label={
-          <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
+          <>
-            <div className="d-flex flex-row">
+            <Draggable
-              <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+              isDraggable={props.focusEdit.element !== null}
-              <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
+              file={file}
-            </div>
+              expandedPath={props.expandPath}
-          </Draggable>
+              handleClickFolder={props.handleClickFolder}
-        </>}
+            >
+              <div className="d-flex flex-row">
+                <FileLabel
+                  fileDecorations={props.fileDecorations}
+                  file={file}
+                  focusEdit={props.focusEdit}
+                  editModeOff={props.editModeOff}
+                />
+                <FileDecorationIcons
+                  file={file}
+                  fileDecorations={props.fileDecorations}
+                />
+              </div>
+            </Draggable>
+          </>
+        }
         onClick={handleFolderClick}
         onContextMenu={handleContextMenu}
         labelClass={labelClass}
@@ -99,26 +138,37 @@ export const FileRender = (props: RenderFileProps) => {
         onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}
       >
-        {
+        {file.child ? (
-          file.child ? <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>{
+          <TreeView
-            Object.keys(file.child).map((key, index) => <FileRender
+            id={`treeView${file.path}`}
-              file={file.child[key]}
+            key={`treeView${file.path}`}
-              fileDecorations={props.fileDecorations}
+            {...spreadProps}
-              index={index}
+          >
-              focusContext={props.focusContext}
+            {Object.keys(file.child).map((key, index) => (
-              focusEdit={props.focusEdit}
+              <FileRender
-              focusElement={props.focusElement}
+                file={file.child[key]}
-              ctrlKey={props.ctrlKey}
+                fileDecorations={props.fileDecorations}
-              editModeOff={props.editModeOff}
+                index={index}
-              handleClickFile={props.handleClickFile}
+                focusContext={props.focusContext}
-              handleClickFolder={props.handleClickFolder}
+                focusEdit={props.focusEdit}
-              handleContextMenu={props.handleContextMenu}
+                focusElement={props.focusElement}
-              expandPath={props.expandPath}
+                ctrlKey={props.ctrlKey}
-              key={index}
+                editModeOff={props.editModeOff}
-            />)
+                handleClickFile={props.handleClickFile}
-          }
+                handleClickFolder={props.handleClickFolder}
-          </TreeView> : <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps} />
+                handleContextMenu={props.handleContextMenu}
-        }
+                expandPath={props.expandPath}
+                key={index}
+              />
+            ))}
+          </TreeView>
+        ) : (
+          <TreeView
+            id={`treeView${file.path}`}
+            key={`treeView${file.path}`}
+            {...spreadProps}
+          />
+        )}
       </TreeViewItem>
     )
   } else {
@@ -128,10 +178,23 @@ export const FileRender = (props: RenderFileProps) => {
         key={`treeView${file.path}`}
         label={
           <>
-            <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
+            <Draggable
+              isDraggable={props.focusEdit.element !== null}
+              file={file}
+              expandedPath={props.expandPath}
+              handleClickFolder={props.handleClickFolder}
+            >
               <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+                <FileLabel
-                <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
+                  fileDecorations={props.fileDecorations}
+                  file={file}
+                  focusEdit={props.focusEdit}
+                  editModeOff={props.editModeOff}
+                />
+                <FileDecorationIcons
+                  file={file}
+                  fileDecorations={props.fileDecorations}
+                />
               </div>
             </Draggable>
           </>