From 10910d53a7d53955ea2831fd5ad3408d8620d9f9 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 27 Sep 2023 13:39:34 +0200 Subject: [PATCH 1/4] alphabetic file folder sorting --- .../src/lib/components/file-explorer.tsx | 16 +++++++++++++-- .../src/lib/components/file-render.tsx | 19 +++++++++++++++--- .../remix-ui/workspace/src/lib/utils/index.ts | 20 ++++++++++++++++++- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index a3b94e22c1..42cd18619d 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -3,7 +3,7 @@ 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' @@ -11,6 +11,7 @@ import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} f 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) const treeRef = useRef(null) + const [childrenKeys, setChildrenKeys] = useState([]) 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 (
@@ -343,7 +355,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
{files[ROOT_PATH] && - Object.keys(files[ROOT_PATH]).map((key, index) => ( + childrenKeys.map((key, index) => ( { const [file, setFile] = useState({} as FileType) const [hover, setHover] = useState(false) const [icon, setIcon] = useState('') + const [childrenKeys, setChildrenKeys] = useState([]) 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 ( @@ -108,7 +121,7 @@ export const FileRender = (props: RenderFileProps) => { > {file.child ? ( - {Object.keys(file.child).map((key, index) => ( + {childrenKeys.map((key, index) => ( { + 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 +} \ No newline at end of file From 4dac83dcd03a901d1c8015e56fc71087659f5959 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 27 Sep 2023 13:42:16 +0200 Subject: [PATCH 2/4] revert --- libs/remix-ui/workspace/src/lib/components/file-render.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx index 4d69cd9311..3690d3b359 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx @@ -98,8 +98,8 @@ export const FileRender = (props: RenderFileProps) => { return ( From a606b20813d01c62788ff3dfd0d2f55d5cdcbc6c Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 27 Sep 2023 14:44:18 +0200 Subject: [PATCH 3/4] fix remixd sorting --- .../workspace/src/lib/components/file-explorer.tsx | 9 +++++++-- .../workspace/src/lib/components/file-render.tsx | 12 +++++++----- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 42cd18619d..7f84851951 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -319,8 +319,13 @@ export const FileExplorer = (props: FileExplorerProps) => { useEffect(() => { if(files[ROOT_PATH]){ - const children: FileType[] = files[ROOT_PATH] as any - setChildrenKeys(fileKeySort(children)) + + try { + const children: FileType[] = files[ROOT_PATH] as any + setChildrenKeys(fileKeySort(children)) + } catch (error) { + setChildrenKeys(Object.keys(files[ROOT_PATH])) + } } else{ setChildrenKeys([]) } diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx index 3690d3b359..a23ed76df3 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx @@ -41,14 +41,16 @@ export const FileRender = (props: RenderFileProps) => { }, [props.file]) useEffect(() => { - - if(file.child){ - const children: FileType[] = file.child as any - setChildrenKeys(fileKeySort(children)) + 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 = From a1106f2394d7c321781a05e392fb8f8b2910b08e Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Wed, 27 Sep 2023 17:26:13 +0200 Subject: [PATCH 4/4] Update file-explorer.tsx --- libs/remix-ui/workspace/src/lib/components/file-explorer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 7f84851951..49064fea9d 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -318,8 +318,7 @@ export const FileExplorer = (props: FileExplorerProps) => { } useEffect(() => { - if(files[ROOT_PATH]){ - + if (files[ROOT_PATH]){ try { const children: FileType[] = files[ROOT_PATH] as any setChildrenKeys(fileKeySort(children))