Active improve 2 (#3262)

* improve active-item logic

* update interactive

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

@@ -41,7 +41,8 @@ const propTypes = {
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   onItemMouseDown: PropTypes.func.isRequired,
   onItemContextMenu: PropTypes.func.isRequired,
-  selectedDirentList: PropTypes.array.isRequired
+  selectedDirentList: PropTypes.array.isRequired,
+  activeDirent: PropTypes.object,
 };
 
 class DirentListItem extends React.Component {
@@ -382,7 +383,7 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let { path, dirent, selectedDirentList } = this.props;
+    let { path, dirent, selectedDirentList, activeDirent } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let dirHref = '';
     if (this.props.currentRepoInfo) {
@@ -401,7 +402,8 @@ class DirentListItem extends React.Component {
 
     let trClass = this.state.highlight ? 'tr-highlight ' : '';
     trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
-    trClass += dirent.isSelected ? 'tr-active' : '';
+    trClass += (activeDirent && activeDirent.name === dirent.name)  ? 'tr-active' : '';
+    trClass += dirent.isSelected? 'tr-active' : '';
 
     return (
       <Fragment>

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

@@ -63,6 +63,7 @@ class DirentListView extends React.Component {
       isProgressDialogShow: false,
       progress: 0,
       isMutipleOperation: true,
+      activeDirent: null,
     };
 
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
@@ -101,6 +102,19 @@ class DirentListView extends React.Component {
     this.onFreezedItem();
   }
 
+  onItemSelected = (dirent) => {
+    this.setState({activeDirent: null});
+    this.props.onItemSelected(dirent);
+  }
+
+  onDirentClick = (dirent) => {
+    if (this.props.selectedDirentList.length > 0 && !this.state.activeDirent ) {
+      return;
+    }
+    this.setState({activeDirent: dirent});
+    this.props.onDirentClick(dirent);
+  }
+
   sortByName = (e) => {
     e.preventDefault();
     const sortBy = 'name';
@@ -303,14 +317,21 @@ class DirentListView extends React.Component {
       this.handleContextClick(event, id, menuList);
     } else {
       if (this.props.selectedDirentList.length === 1) {
-        this.props.onDirentClick(null);
+        if (!this.state.activeDirent) {
-        event.preventDefault();
+          let id = 'dirent-item-menu';
-        event.persist();
+          let dirent = this.props.selectedDirentList[0];
-        setTimeout(() => {
+          let menuList = this.getDirentItemMenuList(dirent, true);
-          let id = "dirent-container-menu"
+          this.handleContextClick(event, id, menuList, dirent);
-          let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+        } else {
-          this.handleContextClick(event, id, menuList);
+          this.onDirentClick(null);
-        }, 0);
+          event.preventDefault();
+          event.persist();
+          setTimeout(() => {
+            let id = "dirent-container-menu"
+            let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+            this.handleContextClick(event, id, menuList);
+          }, 0);
+        }
       } else {
         let id = 'dirents-menu';
         let menuList = [TextTranslation.MOVE, TextTranslation.COPY, TextTranslation.DOWNLOAD, TextTranslation.DELETE];
@@ -370,7 +391,10 @@ class DirentListView extends React.Component {
   }
 
   onItemContextMenu = (event, dirent) => {
-    this.props.onDirentClick(dirent);
+    if (this.props.selectedDirentList.length > 1) {
+      return;
+    }
+    this.onDirentClick(dirent);
     let id = 'dirent-item-menu';
     let menuList = this.getDirentItemMenuList(dirent, true);
     this.handleContextClick(event, id, menuList, dirent);
@@ -530,7 +554,7 @@ class DirentListView extends React.Component {
                   showShareBtn={this.props.showShareBtn}
                   onItemClick={this.props.onItemClick}
                   onItemRenameToggle={this.onItemRenameToggle}
-                  onItemSelected={this.props.onItemSelected}
+                  onItemSelected={this.onItemSelected}
                   onItemDelete={this.props.onItemDelete}
                   onItemRename={this.onItemRename}
                   onItemMove={this.props.onItemMove}
@@ -539,11 +563,12 @@ class DirentListView extends React.Component {
                   isItemFreezed={this.state.isItemFreezed}
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
-                  onDirentClick={this.props.onDirentClick}
+                  onDirentClick={this.onDirentClick}
                   showImagePopup={this.showImagePopup}
                   onItemMouseDown={this.onItemMouseDown}
                   onItemContextMenu={this.onItemContextMenu}
                   selectedDirentList={this.props.selectedDirentList}
+                  activeDirent={this.state.activeDirent}
                 />
               );
             })}

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

@@ -750,7 +750,7 @@ class LibContentView extends React.Component {
       return dirent;
     });
     if (dirent) {
-      dirent.isSelected = true;
+      // dirent.isSelected = true;
       this.setState({
         direntList: direntList,
         isDirentSelected: true,