Merge pull request #3322 from haiwen/dirent-menu-improve

repair cloud-edit&perview bug

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

@@ -403,8 +403,80 @@ class DirentListItem extends React.Component {
     this.props.onItemContextMenu(event, dirent);
   }
 
+  renderItemOperation = () => {
+    let { dirent, selectedDirentList, currentRepoInfo } = this.props;
+    if (currentRepoInfo.permission === 'cloud-edit' || currentRepoInfo.permission === 'preview') {
+      return '';
+    }
+    
+    return (
+      <Fragment>
+        {selectedDirentList.length > 1 ? 
+          <Fragment>
+            {this.state.isOperationShow && !dirent.isSelected &&
+              <div className="operations">
+                <ul className="operation-group">
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                  </li>
+                  {this.props.showShareBtn &&
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
+                  </li>
+                  }
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                  </li>
+                  <li className="operation-group-item">
+                    <DirentMenu
+                      dirent={this.props.dirent}
+                      onMenuItemClick={this.onMenuItemClick}
+                      currentRepoInfo={this.props.currentRepoInfo}
+                      isRepoOwner={this.props.isRepoOwner}
+                      onFreezedItem={this.props.onFreezedItem}
+                      onUnfreezedItem={this.onUnfreezedItem}
+                    />
+                  </li>
+                </ul>
+              </div>
+            }
+          </Fragment> : 
+          <Fragment>
+            {this.state.isOperationShow && 
+              <div className="operations">
+                <ul className="operation-group">
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                  </li>
+                  {this.props.showShareBtn &&
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
+                  </li>
+                  }
+                  <li className="operation-group-item">
+                    <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                  </li>
+                  <li className="operation-group-item">
+                    <DirentMenu
+                      dirent={this.props.dirent}
+                      onMenuItemClick={this.onMenuItemClick}
+                      currentRepoInfo={this.props.currentRepoInfo}
+                      isRepoOwner={this.props.isRepoOwner}
+                      onFreezedItem={this.props.onFreezedItem}
+                      onUnfreezedItem={this.onUnfreezedItem}
+                    />
+                  </li>
+                </ul>
+              </div>
+            }
+          </Fragment>
+        }
+      </Fragment>
+    )
+  }
+
   render() {
-    let { path, dirent, selectedDirentList, activeDirent } = this.props;
+    let { path, dirent, activeDirent } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let dirHref = '';
     if (this.props.currentRepoInfo) {
@@ -482,68 +554,7 @@ class DirentListItem extends React.Component {
               </Fragment>
             )} 
           </td>
-          <td className="operation">
+          <td className="operation">{this.renderItemOperation()}</td>
-            {selectedDirentList.length > 1 ? 
-              <Fragment>
-                {this.state.isOperationShow && !dirent.isSelected &&
-                  <div className="operations">
-                    <ul className="operation-group">
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
-                      </li>
-                      {this.props.showShareBtn &&
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
-                      </li>
-                      }
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
-                      </li>
-                      <li className="operation-group-item">
-                        <DirentMenu
-                          dirent={this.props.dirent}
-                          onMenuItemClick={this.onMenuItemClick}
-                          currentRepoInfo={this.props.currentRepoInfo}
-                          isRepoOwner={this.props.isRepoOwner}
-                          onFreezedItem={this.props.onFreezedItem}
-                          onUnfreezedItem={this.onUnfreezedItem}
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                }
-              </Fragment> : 
-              <Fragment>
-                {this.state.isOperationShow && 
-                  <div className="operations">
-                    <ul className="operation-group">
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
-                      </li>
-                      {this.props.showShareBtn &&
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
-                      </li>
-                      }
-                      <li className="operation-group-item">
-                        <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
-                      </li>
-                      <li className="operation-group-item">
-                        <DirentMenu
-                          dirent={this.props.dirent}
-                          onMenuItemClick={this.onMenuItemClick}
-                          currentRepoInfo={this.props.currentRepoInfo}
-                          isRepoOwner={this.props.isRepoOwner}
-                          onFreezedItem={this.props.onFreezedItem}
-                          onUnfreezedItem={this.onUnfreezedItem}
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                }
-              </Fragment>
-            }
-          </td>
           <td className="file-size">{dirent.size && dirent.size}</td>
           <td className="last-update">{dirent.mtime_relative}</td>
         </tr>

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

@@ -283,6 +283,12 @@ class DirentListView extends React.Component {
     event.preventDefault();
     event.stopPropagation();
 
+    let currentRepoInfo = this.props.currentRepoInfo;
+
+    if (currentRepoInfo.permission === 'cloud-edit' || currentRepoInfo.permission === 'preview') {
+      return '';
+    }
+
     let x = event.clientX || (event.touches && event.touches[0].pageX);
     let y = event.clientY || (event.touches && event.touches[0].pageY);
 
@@ -511,6 +517,8 @@ class DirentListView extends React.Component {
       menuList.push(HISTORY);
       return menuList;
     }
+
+    return [];
   }
 
   render() {

frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js

@@ -16,6 +16,7 @@ import ModalPortal from '../modal-portal';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
+  userPerm: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   repoEncrypted: PropTypes.bool.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
@@ -232,8 +233,14 @@ class MutipleDirOperationToolbar extends React.Component {
   }
 
   render() {
-    const { repoID } = this.props;
+
+    const { repoID, userPerm } = this.props;
     let direntPath = this.getDirentPath(this.props.selectedDirentList[0]);
+
+    if (userPerm !== 'rw' && userPerm !== 'admin') {
+      return '';
+    }
+    
     return (
       <Fragment>
         <div className="d-flex">

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

@@ -88,6 +88,7 @@ class LibContentToolbar extends React.Component {
               <MutipleDirOperationToolbar
                 repoID={this.props.repoID} 
                 path={this.props.path}
+                userPerm={this.props.userPerm}
                 repoEncrypted={this.props.repoEncrypted}
                 selectedDirentList={this.props.selectedDirentList}
                 onItemsMove={this.props.onItemsMove}