alphabetic file folder sorting

Author: filip mertens

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} from '@remix-ui/drag-n-drop'
 import {ROOT_PATH} from '../utils/constants'
+import { fileKeySort } from '../utils'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const intl = useIntl()
@@ -32,6 +33,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) {
@@ -315,6 +317,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  useEffect(() => {
+    if(files[ROOT_PATH]){
+      const children: FileType[] = files[ROOT_PATH] as any
+      setChildrenKeys(fileKeySort(children))
+    } else{
+      setChildrenKeys([])
+    }
+  }, [props])
+
+
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
@@ -343,7 +355,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           <div className="pb-4 mb-4">
             <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,17 @@ export const FileRender = (props: RenderFileProps) => {
     }
   }, [props.file])
 
+  useEffect(() => {
+    
+    if(file.child){
+      const children: FileType[] = file.child as any
+      setChildrenKeys(fileKeySort(children))
+    } else {
+      setChildrenKeys([])
+    }
+
+  }, [file.child, props.expandPath, props.file])
+
   const labelClass =
     props.focusEdit.element === file.path
       ? 'bg-light'
@@ -85,8 +98,8 @@ export const FileRender = (props: RenderFileProps) => {
     return (
       <TreeViewItem
         id={`treeViewItem${file.path}`}
-        iconX="mr-2 fa fa-folder"
-        iconY={props.expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder'}
+        iconX="pr-3 fa fa-folder"
+        iconY={props.expandPath.includes(file.path) ? 'pr-0 fa fa-folder-open' : 'pr-3 fa fa-folder'}
         key={`${file.path + props.index}`}
         label={
           <>
@@ -108,7 +121,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
+}