FIXED: keyboard position was lost if first item was selected and tab …

…was changed FIXED: scroll position wasn't reset to top when opening a new directory, fixes #52 UPDATED: version number
warpdesign · May 29, 2019 · 2c90eb5 · 2c90eb5
1 parent f23607f
commit 2c90eb5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-explorer",
-  "version": "v2.0.0-beta.2",
+  "version": "v2.0.0-beta.3",
   "description": "Plugin-based file explorer written with React",
   "main": "build/main.js",
   "build": {

diff --git a/src/components/FileTable.tsx b/src/components/FileTable.tsx
@@ -155,8 +155,8 @@ export class FileTableClass extends React.Component<IProps, IState> {
     }
 
     public componentDidUpdate() {
-        const scrollTop = this.state.position === -1 && this.cache.scrollTop || undefined;
-        if (scrollTop > 0) {
+        const scrollTop = this.state.position === -1 ? this.cache.scrollTop : null;
+        if (scrollTop !== null && scrollTop > -1) {
             this.tableRef.current.scrollToPosition(scrollTop);
         }
     }
@@ -215,8 +215,6 @@ export class FileTableClass extends React.Component<IProps, IState> {
                 // when cache is being (re)loaded, cache.files is empty:
                 // we don't want to show "empty folder" placeholder
                 // that case, only when cache is loaded and there are no files
-                const { viewState } = this.injected;
-
                 if (cache.cmd === 'cwd' || cache.history.length) {
                     this.updateNodes(files);
                 }
@@ -298,7 +296,8 @@ export class FileTableClass extends React.Component<IProps, IState> {
     private updateState(nodes: ITableRow[], keepSelection = false) {
         const cache = this.cache;
         const newPath = nodes.length && nodes[0].nodeData.dir || '';
-        const position = keepSelection && cache.selectedId && this.getFilePosition(nodes, cache.selectedId) || -1;
+        const position = keepSelection && cache.selectedId ? this.getFilePosition(nodes, cache.selectedId) : -1;
+
         // cancel inlineedit if there was one
         this.clearEditElement();
         this.setState({ nodes, selected: keepSelection ? this.state.selected : 0, position, path: newPath }, () => {
@@ -490,8 +489,6 @@ export class FileTableClass extends React.Component<IProps, IState> {
         const fileCache = this.cache;
         const { nodes, position } = this.state;
 
-        console.log('selected', nodes.filter((node, i) => i !== position && node.isSelected));
-
         const selection = nodes.filter((node, i) => i !== position && node.isSelected).map((node) => node.nodeData) as File[];
 
         if (position > -1) {

diff --git a/src/state/fileState.ts b/src/state/fileState.ts
@@ -280,15 +280,12 @@ export class FileState {
     }
 
     @action
-    updateSelection() {
-        const isSameDir = this.selected.length && this.selected[0].dir === this.path;
-        const newSelection = [];
+    updateSelection(isSameDir: boolean) {
         if (isSameDir) {
-            // selected contains files that can be outdated:
+            const newSelection = [];
+            // cache.selected contains files that can be outdated:
             // files may have been removed on reload
-            // we iterated through the previously selected files and
-            // create a new selection based on file ids that were and are still
-            // in the list of files
+            // so we filter the list and remove outdated files.
             for (let selection of this.selected) {
                 // use inode/dev to retrieve files that were selected before reload:
                 // we cannot use fullname anymore since files may have been renamed
@@ -301,20 +298,22 @@ export class FileState {
             if (this.selectedId && !this.files.find(file => file.id.dev === this.selectedId.dev && file.id.ino === this.selectedId.ino)) {
                 this.selectedId = null;
             }
+
             // Do not change the selectedId here, we want to keep it
-            // if (newSelection.length) {
-            //     const selectedFile = newSelection[newSelection.length - 1];
-            //     this.selected.replace(newSelection);
-            //     this.selectedId = {
-            //         ...selectedFile.id
-            //     }
-            // } else {
-            //     this.selected.clear();
-            //     this.selectedId = null;
-            // }
+            if (newSelection.length) {
+                const selectedFile = newSelection[newSelection.length - 1];
+                this.selected.replace(newSelection);
+                this.selectedId = {
+                    ...selectedFile.id
+                }
+            } else {
+                this.selected.clear();
+                this.selectedId = null;
+            }
         } else {
             this.selected.clear();
             this.selectedId = null;
+            this.scrollTop = 0;
         }
     }
 
@@ -395,9 +394,21 @@ export class FileState {
 
         return this.api.cd(joint)
             .then((path) => {
-                return this.list(path).then(() => {
-                    this.updatePath(path, skipHistory);
-                    this.cmd = '';
+                return this.list(path).then((files) => {
+                    runInAction(() => {
+                        const isSameDir = this.path === path;
+
+                        this.files.replace(files);
+
+                        this.updatePath(path, skipHistory);
+                        this.cmd = '';
+
+                        // update the cache's selection, keeping files that were previously selected
+                        this.updateSelection(isSameDir);
+
+                        this.setStatus('ok');
+                    });
+
                     return path;
                 });
             })
@@ -415,17 +426,6 @@ export class FileState {
     @needsConnection
     async list(path: string): Promise<File[]> {
         return this.api.list(path)
-            .then((files: File[]) => {
-                runInAction(() => {
-                    this.files.replace(files);
-                    // update the cache's selection, keeping files that were previously selected
-                    this.updateSelection();
-
-                    this.setStatus('ok');
-                });
-
-                return files;
-            })
             .catch(this.handleError)
     }