feat: support sort in folderTree (#524)

* feat: support sort in folderTree

* feat: improve check hidden files

Author: mortalYoung

src/services/workbench/__tests__/folderTreeService.test.ts

@@ -272,10 +272,125 @@ describe('Test StatusBarService', () => {
         const children = data[0].children!;
         expect(children).toHaveLength(2);
         expect(children[0]).toEqual({
-            ...pendingNode,
+            ...fileNode,
         });
     });
 
+    test('Should in sort', () => {
+        const ignoreFolder = new TreeNodeModel({
+            id: 'ignore-folder',
+            fileType: FileTypes.Folder,
+            name: '.git',
+            isLeaf: false,
+            children: [],
+        });
+        const normalFolder = new TreeNodeModel({
+            id: 'nomral-folder',
+            fileType: FileTypes.Folder,
+            name: 'folder',
+            isLeaf: false,
+            children: [],
+        });
+        const normalFile = new TreeNodeModel({
+            id: 'nomral-file',
+            fileType: FileTypes.File,
+            name: 'file',
+            isLeaf: true,
+            children: [],
+        });
+        const ignoreFile = new TreeNodeModel({
+            id: 'ignore-file',
+            fileType: FileTypes.File,
+            name: '.gitignore',
+            isLeaf: true,
+            children: [],
+        });
+        const root = new TreeNodeModel({
+            id: 'root',
+            fileType: FileTypes.RootFolder,
+            name: 'root-test',
+            isLeaf: false,
+            children: [ignoreFile, normalFile, normalFolder, ignoreFolder],
+        });
+        folderTreeService.add(root);
+
+        // let data = folderTreeService.getState().folderTree?.data || [];
+        let rootNode = folderTreeService.get('root')!;
+        expect(rootNode.children?.map((i) => i.name)).toEqual([
+            '.git',
+            'folder',
+            '.gitignore',
+            'file',
+        ]);
+
+        // add a file
+        folderTreeService.add(
+            new TreeNodeModel({
+                id: 'another-ignore-file',
+                fileType: FileTypes.File,
+                name: '.prettierignore',
+                isLeaf: true,
+                children: [],
+            }),
+            'root'
+        );
+
+        rootNode = folderTreeService.get('root')!;
+        expect(rootNode.children?.map((i) => i.name)).toEqual([
+            '.git',
+            'folder',
+            '.gitignore',
+            '.prettierignore',
+            'file',
+        ]);
+
+        // add a folder
+        folderTreeService.add(
+            new TreeNodeModel({
+                id: 'another-normal-folder',
+                fileType: FileTypes.Folder,
+                name: 'another-folder',
+                isLeaf: false,
+                children: [],
+            }),
+            'root'
+        );
+
+        rootNode = folderTreeService.get('root')!;
+        expect(rootNode.children?.map((i) => i.name)).toEqual([
+            '.git',
+            'another-folder',
+            'folder',
+            '.gitignore',
+            '.prettierignore',
+            'file',
+        ]);
+
+        // add a input
+        folderTreeService.add(
+            new TreeNodeModel({
+                id: 'create-folder',
+                fileType: FileTypes.Folder,
+                name: '',
+                isEditable: true,
+                isLeaf: false,
+                children: [],
+            }),
+            'root'
+        );
+
+        rootNode = folderTreeService.get('root')!;
+        expect(rootNode.children?.map((i) => i.name)).toEqual([
+            '',
+            '.git',
+            'another-folder',
+            'folder',
+            '.gitignore',
+            '.prettierignore',
+            'file',
+        ]);
+    });
+
     test('Should support to set entry', () => {
         folderTreeService.setEntry(Button);
         expect(folderTreeService.getState().entry).toEqual(Button);

src/services/workbench/explorer/folderTreeService.ts

@@ -157,6 +157,42 @@ export class FolderTreeService
         this.builtinService = container.resolve(BuiltinService);
     }
 
+    private isHiddenFile(file: IFolderTreeNodeProps) {
+        return !!file.name?.startsWith('.');
+    }
+
+    private sortTree(tree: IFolderTreeNodeProps[]) {
+        tree.sort((pre, cur) => {
+            // folder before file
+            if (pre.isLeaf !== cur.isLeaf) {
+                return pre.isLeaf! > cur.isLeaf! ? 1 : -1;
+            }
+
+            // in general, both have name
+            if (pre.name && cur.name) {
+                const isHiddenFilePre = Number(this.isHiddenFile(pre));
+                const isHiddenFileCur = Number(this.isHiddenFile(cur));
+                // one is hidden file and another is not
+                if (isHiddenFilePre ^ isHiddenFileCur) {
+                    return isHiddenFilePre ? -1 : 1;
+                }
+                // both are hidden files
+                if (isHiddenFilePre & isHiddenFilePre) {
+                    // hidden file
+                    return pre.name
+                        .substring(1)
+                        .localeCompare(cur.name.substring(1));
+                }
+                return pre.name.localeCompare(cur.name!);
+            }
+
+            // the node which is creating would without name
+            return pre.isEditable ? -1 : 1;
+        });
+
+        tree.forEach((treeNode) => this.sortTree(treeNode.children || []));
+    }
+
     public reset() {
         this.setState({
             folderTree: {
@@ -221,6 +257,8 @@ export class FolderTreeService
             // if root folder exists, then do nothing
             return;
         }
+
+        this.sortTree(folder.children || []);
         this.setState({
             folderTree: { ...folderTree, data: [folder] },
         });
@@ -319,6 +357,7 @@ export class FolderTreeService
         }
 
         cloneData[index] = tree!.obj;
+        this.sortTree(cloneData[index].children || []);
         this.setState({
             folderTree: {
                 ...this.state.folderTree,
@@ -363,7 +402,10 @@ export class FolderTreeService
             return;
         }
         tree.updateNode(id, restData);
-        if (index > -1) nextData[index] = tree.obj;
+        if (index > -1) {
+            nextData[index] = tree.obj;
+            this.sortTree(nextData[index].children || []);
+        }
         this.setState({
             folderTree,
         });