12.0 list view support multiple selection (#6421)

* Feature - multiple selection with ctrl/shift

* update grid view context menu list in multiple selection mode

* list view support multiple selection

* improve list view selection experience

* before remove activeDirent state

* improve list view selection experience

* fix warnings

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -532,7 +532,9 @@ class DirentGridView extends React.Component {
     if (this.props.selectedDirentList.length > 1) return;
     // Display menu items according to the current dirent permission
     const menuList = this.getDirentItemMenuList(dirent, true);
-    this.handleContextClick(event, GRID_ITEM_CONTEXTMENU_ID, menuList, dirent);
+    const id = 'grid-item-contextmenu';
+    this.handleContextClick(event, id, menuList, dirent);
+    if (this.props.direntList.filter(item => item.isSelected).length > 1) return;
     this.props.onGridItemClick && this.props.onGridItemClick(dirent);
   };
 

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -96,15 +96,13 @@ class DirentListItem extends React.Component {
     this.tagListTitleID = `tag-list-title-${uuidv4()}`;
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.isItemFreezed !== this.props.isItemFreezed && !nextProps.isItemFreezed) {
+  componentDidUpdate(prevProps) {
+    const { isItemFreezed, activeDirent, dirent } = this.props;
+
+    if (prevProps.isItemFreezed !== isItemFreezed && !isItemFreezed) {
       this.setState({
         highlight: false,
-        isOperationShow: false,
-      }, () => {
-        if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) {
-          this.setState({ isOperationShow: true });
-        }
+        isOperationShow: activeDirent && activeDirent.name === dirent.name,
       });
     }
   }
@@ -192,7 +190,7 @@ class DirentListItem extends React.Component {
     // '<td>' is clicked
     e.stopPropagation();
     if (e.target.tagName == 'TD') {
-      this.props.onDirentClick(this.props.dirent);
+      this.props.onDirentClick(this.props.dirent, e);
     }
   };
 
@@ -682,7 +680,7 @@ class DirentListItem extends React.Component {
   };
 
   render() {
-    let { path, dirent, activeDirent } = this.props;
+    let { path, dirent } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let dirHref = '';
     if (this.props.currentRepoInfo) {
@@ -695,11 +693,10 @@ class DirentListItem extends React.Component {
 
     let iconUrl = Utils.getDirentIcon(dirent);
 
-    let isActive = (activeDirent && activeDirent.name === dirent.name) || dirent.isSelected;
+    let isActive = dirent.isSelected;
     let trClass = this.state.highlight ? 'tr-highlight ' : '';
     trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
     trClass += isActive ? 'tr-active' : '';
-    trClass += isActive ? 'tr-active' : '';
 
     let lockedInfo = dirent.is_freezed ? gettext('Frozen by {name}') : gettext('locked by {name}');
     lockedInfo = lockedInfo.replace('{name}', dirent.lock_owner_name);

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -129,13 +129,9 @@ class DirentListView extends React.Component {
     this.props.onItemSelected(dirent);
   };
 
-  onDirentClick = (dirent) => {
+  onDirentClick = (dirent, event) => {
     hideMenu();
-    if (this.props.selectedDirentList.length > 0 && !this.state.activeDirent) {
-      return;
-    }
-    this.setState({ activeDirent: dirent });
-    this.props.onDirentClick(dirent);
+    this.props.onDirentClick(dirent, event);
   };
 
   sortByName = (e) => {
@@ -306,7 +302,7 @@ class DirentListView extends React.Component {
   // table-container contextmenu handle
   onContainerClick = () => {
     hideMenu();
-    if (this.state.activeDirent) {
+    if (this.props.selectedDirentList.length > 0) {
       this.onDirentClick(null);
     }
   };

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1360,6 +1360,7 @@ class LibContentView extends React.Component {
           return dirent;
         }),
         isDirentSelected: newSelectedDirentList.length > 0,
+        isAllDirentSelected: newSelectedDirentList.length === direntList.length,
         selectedDirentList: newSelectedDirentList,
         lastSelectedIndex: clickedIndex,
       });
@@ -1370,6 +1371,7 @@ class LibContentView extends React.Component {
           return dirent;
         }),
         isDirentSelected: false,
+        isAllDirentSelected: false,
         selectedDirentList: [],
         lastSelectedIndex: null,
       });
@@ -1414,7 +1416,6 @@ class LibContentView extends React.Component {
     let selectedDirentList = direntList.filter(item => {
       return item.isSelected;
     });
-
     if (selectedDirentList.length) {
       this.setState({ isDirentSelected: true });
       if (selectedDirentList.length === direntList.length) {
@@ -1441,29 +1442,20 @@ class LibContentView extends React.Component {
   };
 
   onAllDirentSelected = () => {
-    if (this.state.isAllDirentSelected) {
-      let direntList = this.state.direntList.map(item => {
-        item.isSelected = false;
+    this.setState(prevState => {
+      const isAllDirentSelected = !prevState.isAllDirentSelected;
+      const direntList = prevState.direntList.map(item => {
+        item.isSelected = isAllDirentSelected;
         return item;
       });
-      this.setState({
-        isDirentSelected: false,
-        isAllDirentSelected: false,
+
+      return {
+        isDirentSelected: isAllDirentSelected,
+        isAllDirentSelected: isAllDirentSelected,
         direntList: direntList,
-        selectedDirentList: [],
+        selectedDirentList: isAllDirentSelected ? [...direntList] : []
+      };
     });
-    } else {
-      let direntList = this.state.direntList.map(item => {
-        item.isSelected = true;
-        return item;
-      });
-      this.setState({
-        isDirentSelected: true,
-        isAllDirentSelected: true,
-        direntList: direntList,
-        selectedDirentList: direntList,
-      });
-    }
   };
 
   onFileTagChanged = (dirent, direntPath) => {