Merge pull request #4098 from ethereum/filesortingagain

File sorting

Author: LianaHus

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

@@ -3,14 +3,15 @@ import {useIntl} from 'react-intl'
 import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
 import {FileExplorerMenu} from './file-explorer-menu' // eslint-disable-line
 import {FileExplorerContextMenu} from './file-explorer-context-menu' // eslint-disable-line
-import {FileExplorerProps, WorkSpaceState} from '../types'
+import {FileExplorerProps, FileType, WorkSpaceState} from '../types'
 
 import '../css/file-explorer.css'
 import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {FileRender} from './file-render'
 import {Drag, Draggable} from '@remix-ui/drag-n-drop'
 import {ROOT_PATH} from '../utils/constants'
+import { fileKeySort } from '../utils'
 import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions'
 
 export const FileExplorer = (props: FileExplorerProps) => {
@@ -33,6 +34,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   } = props
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
   const treeRef = useRef<HTMLDivElement>(null)
+  const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
     if (contextMenuItems) {
@@ -332,6 +334,20 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  useEffect(() => {
+    if (files[ROOT_PATH]){
+      try {
+        const children: FileType[] = files[ROOT_PATH] as any
+        setChildrenKeys(fileKeySort(children))
+      } catch (error) {
+        setChildrenKeys(Object.keys(files[ROOT_PATH]))
+      }
+    } else{
+      setChildrenKeys([])
+    }
+  }, [props])
+
+
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
@@ -360,7 +376,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           <div>
             <TreeView id="treeViewMenu">
               {files[ROOT_PATH] &&
-                Object.keys(files[ROOT_PATH]).map((key, index) => (
+                childrenKeys.map((key, index) => (
                   <FileRender
                     file={files[ROOT_PATH][key]}
                     fileDecorations={fileState}

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

@@ -8,6 +8,7 @@ import {getPathIcon} from '@remix-ui/helper'
 import {FileLabel} from './file-label'
 import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators'
 import {Draggable} from '@remix-ui/drag-n-drop'
+import { fileKeySort } from '../utils'
 
 export interface RenderFileProps {
   file: FileType
@@ -30,6 +31,7 @@ export const FileRender = (props: RenderFileProps) => {
   const [file, setFile] = useState<FileType>({} as FileType)
   const [hover, setHover] = useState<boolean>(false)
   const [icon, setIcon] = useState<string>('')
+  const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
     if (props.file && props.file.path && props.file.type) {
@@ -38,6 +40,19 @@ export const FileRender = (props: RenderFileProps) => {
     }
   }, [props.file])
 
+  useEffect(() => {
+    if (file.child) {
+      try {
+        const children: FileType[] = file.child as any
+        setChildrenKeys(fileKeySort(children))
+      } catch (e) {
+        setChildrenKeys(Object.keys(file.child))
+      }
+    } else {
+      setChildrenKeys([])
+    }
+  }, [file.child, props.expandPath, props.file])
+
   const labelClass =
     props.focusEdit.element === file.path
       ? 'bg-light'
@@ -108,7 +123,7 @@ export const FileRender = (props: RenderFileProps) => {
       >
         {file.child ? (
           <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>
-            {Object.keys(file.child).map((key, index) => (
+            {childrenKeys.map((key, index) => (
               <FileRender
                 file={file.child[key]}
                 fileDecorations={props.fileDecorations}

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
+import { FileType } from '@remix-ui/file-decorators'
 import { WorkspaceProps, MenuItems } from '../types'
 
 export const contextMenuActions: MenuItems = [{
@@ -113,4 +114,21 @@ export const contextMenuActions: MenuItems = [{
   multiselect: false,
   label: '',
   group: 4
-}]
+}]
+
+export const fileKeySort = (children: FileType[]): string[] => {
+  const directories = Object.keys(children).filter((key: string) => children[key].isDirectory && children[key].name !== '')
+
+  // sort case insensitive
+  directories.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+
+  const fileKeys = Object.keys(children).filter((key: string) => !children[key].isDirectory && children[key].name !== '')
+  // sort case insensitive
+  fileKeys.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+
+  // find the children with a blank name
+  const blankChildren = Object.keys(children).filter((key: string) => children[key].name === '')
+
+  const keys = [...directories, ...fileKeys, ...blankChildren]
+  return keys
+}