Active item improve (#3258)

* optimized code

* add active interaction

* repair interactive bug

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -61,7 +61,6 @@ const propTypes = {
   onItemRename: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
   onItemCopy: PropTypes.func.isRequired,
-  onItemDetails: PropTypes.func.isRequired,
   onDirentClick: PropTypes.func.isRequired,
   isAllItemSelected: PropTypes.bool.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
@@ -218,7 +217,6 @@ class DirColumnView extends React.Component {
               onItemMove={this.props.onItemMove}
               onItemCopy={this.props.onItemCopy}
               onDirentClick={this.props.onDirentClick}
-              onItemDetails={this.props.onItemDetails}
               updateDirent={this.props.updateDirent}
               isAllItemSelected={this.props.isAllItemSelected}
               onAllItemSelected={this.props.onAllItemSelected}

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

@@ -6,7 +6,6 @@ import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
-import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -28,7 +27,6 @@ class DetailListView extends React.Component {
     this.state = {
       isEditFileTagShow: false,
       showRelatedFileDialog: false,
-      repo: {},
     };
   }
 
@@ -71,28 +69,6 @@ class DetailListView extends React.Component {
       showRelatedFileDialog: false,
     });
   }
-
-  getRepoInfo = (repoID) => {
-    seafileAPI.listRepos({type: 'mine'}).then((res) => {
-      let repoList = res.data.repos;
-      for (let i = 0, length = repoList.length; i < length; i++) {
-        if (repoList[i].repo_id === repoID) {
-          this.setState({ repo: repoList[i] });
-          break;
-        }
-      }
-    });
-  }
-
-  componentDidMount() {
-    this.getRepoInfo(this.props.repoID);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.repoID !== this.props.repoID) {
-      this.getRepoInfo(nextProps.repoID);
-    }
-  }
   
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles } = this.props;
@@ -110,20 +86,6 @@ class DetailListView extends React.Component {
           </tbody>
         </table>
       );
-    } else if (direntType === 'repo') {
-      const repoInfo = this.props.repoInfo;
-      return (
-        <table className="table-thead-hidden">
-          <thead>
-            <tr><th width="35%"></th><th width="65%"></th></tr>
-          </thead>
-          <tbody>
-            <tr><th>{gettext('File Count')}</th><td>{repoInfo.file_count}</td></tr>
-            <tr><th>{gettext('Size')}</th><td>{repoInfo.size}</td></tr>
-            <tr><th>{gettext('Last Update')}</th><td>{moment(this.state.repo.last_modified).format('YYYY-MM-DD')}</td></tr>
-          </tbody>
-        </table>
-      );
     } else {
       return (
         <Fragment>
@@ -200,4 +162,4 @@ class DetailListView extends React.Component {
 
 DetailListView.propTypes = propTypes;
 
-export default DetailListView;
+export default DetailListView;

frontend/src/components/dirent-detail/dirent-details.js

@@ -4,14 +4,14 @@ import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
 import DetailListView from './detail-list-view';
-import RepoInfo from '../../models/repo-info';
 import FileTag from '../../models/file-tag';
 import '../../css/dirent-detail.css';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
   path: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired,
   onItemDetailsClose: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
 };
@@ -23,38 +23,48 @@ class DirentDetail extends React.Component {
     this.state = {
       direntType: '',
       direntDetail: '',
-      repoInfo: null,
       fileTagList: [],
       relatedFiles: [],
-      currentFolderDirent: null,
+      folderDirent: null,
     };
   }
 
-  componentWillMount() {
-    if (!this.props.dirent.name) {
-      this.getCurrentFolderDirent();
-    }
-  }
-
   componentDidMount() {
     let { dirent, path, repoID } = this.props;
-    let direntPath = Utils.joinPath(path, dirent.name);
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      let repoInfo = new RepoInfo(res.data);
-      this.setState({repoInfo: repoInfo});
-      this.updateDetailView(dirent, direntPath);
-    });
+    this.loadDirentInfo(dirent, path, repoID);
   }
 
   componentWillReceiveProps(nextProps) {
-    let { dirent, path } = nextProps;
-    let direntPath = Utils.joinPath(path, dirent.name);
-    this.updateDetailView(dirent, direntPath);
+    let { dirent, path, repoID } = nextProps;
+    this.loadDirentInfo(dirent, path, repoID);
   }
 
+  loadDirentInfo = (dirent, path, repoID) => {
+    if (dirent) {
+      let direntPath = Utils.joinPath(path, dirent.name);
+      this.updateDetailView(dirent, direntPath);
+    } else {
+      let dirPath = Utils.getDirName(path);
+      seafileAPI.listDir(repoID, dirPath).then(res => {
+        let direntList = res.data.dirent_list;
+        let folderDirent = null;
+        for (let i = 0; i < direntList.length; i++) {
+          let dirent = direntList[i];
+          if (dirent.parent_dir + dirent.name === path) {
+            folderDirent = new Dirent(dirent);
+            break;
+          }
+        }
+        this.setState({folderDirent: folderDirent});
+        this.updateDetailView(folderDirent, path);
+      });
+    }
+  }
+
+
   updateDetailView = (dirent, direntPath) => {
     let repoID = this.props.repoID;
-    if (dirent && dirent.type === 'file') {
+    if (dirent.type === 'file') {
       seafileAPI.getFileInfo(repoID, direntPath).then(res => {
         this.setState({
           direntType: 'file',
@@ -84,49 +94,16 @@ class DirentDetail extends React.Component {
           });
         }
       });
-    } else if (this.props.path !== '/') {
-      const dirPath = dirent.name ? direntPath : this.props.path;
-      seafileAPI.getDirInfo(repoID, dirPath).then(res => {
-        this.setState({
-          direntType: 'dir',
-          direntDetail: res.data
-        });
-      });
-    } else if (this.props.path === '/' && dirent.name) {
+    } else {
       seafileAPI.getDirInfo(repoID, direntPath).then(res => {
         this.setState({
           direntType: 'dir',
           direntDetail: res.data
         });
       });
-    } else if (this.props.path === '/' && !dirent.name) {
-      this.setState({
-        direntType: 'repo',
-        direntDetail: {},
-      });
     }
   }
 
-  getCurrentFolderDirent = () => {
-    const path = this.props.path;
-    const parentPath = path.slice(0, path.lastIndexOf('/'));
-    seafileAPI.listDir(this.props.repoID, parentPath).then(res => {
-      try {
-        res.data.dirent_list.forEach((dirent) => {
-          if ((dirent.parent_dir + dirent.name) === path) throw dirent;
-        });
-      } catch (dirent) {
-        let dirent = new Dirent(dirent);
-        this.setState({ currentFolderDirent: dirent });
-      }
-    });
-  }
-
-  onFileTagChanged = (dirent, direntPath) => {
-    this.updateDetailView(dirent, direntPath);
-    this.props.onFileTagChanged(dirent, direntPath);
-  }
-
   onRelatedFileChange = () => {
     let { dirent, path } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
@@ -134,27 +111,16 @@ class DirentDetail extends React.Component {
   }
 
   render() {
-    let { dirent, path, currentRepoInfo } = this.props;
-    let smallIconUrl, bigIconUrl, direntName;
-    let folderDirent = this.state.currentFolderDirent;
-
-    if (dirent.name) {
-      // selected something
-      smallIconUrl = Utils.getDirentIcon(dirent);
-      bigIconUrl = Utils.getDirentIcon(dirent, true);
-      direntName = dirent.name;
-    } else if (!dirent.name && path === '/') {
-      // seleted nothing and parent is repo
-      smallIconUrl = Utils.getLibIconUrl(currentRepoInfo);
-      bigIconUrl = Utils.getLibIconUrl(currentRepoInfo, true);
-      direntName = currentRepoInfo.repo_name;
-    } else if (!dirent.name && path !== '/') {
-      // select nothing and parent is folder
-      smallIconUrl = folderDirent && Utils.getDirentIcon(folderDirent);
-      bigIconUrl = folderDirent && Utils.getDirentIcon(folderDirent, true);
-      direntName = folderDirent && folderDirent.name;
+    let { dirent } = this.props;
+    let { folderDirent } = this.state;
+    if (!dirent && !folderDirent) {
+      return '';
     }
 
+    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
+    let direntName = dirent ? dirent.name : folderDirent.name;
+
     return (
       <div className="detail-container">
         <div className="detail-header">
@@ -171,7 +137,7 @@ class DirentDetail extends React.Component {
           {this.state.direntDetail && 
             <div className="dirent-table-container">
               <DetailListView 
-                repoInfo={this.state.repoInfo}
+                repoInfo={this.props.currentRepoInfo}
                 path={this.props.path}
                 repoID={this.props.repoID}
                 dirent={this.props.dirent || folderDirent}
@@ -179,7 +145,7 @@ class DirentDetail extends React.Component {
                 direntDetail={this.state.direntDetail} 
                 fileTagList={this.state.fileTagList}
                 relatedFiles={this.state.relatedFiles}
-                onFileTagChanged={this.onFileTagChanged}
+                onFileTagChanged={this.props.onFileTagChanged}
                 onRelatedFileChange={this.onRelatedFileChange}
               />
             </div>
@@ -192,4 +158,4 @@ class DirentDetail extends React.Component {
 
 DirentDetail.propTypes = propTypes;
 
-export default DirentDetail;
+export default DirentDetail;

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

@@ -41,6 +41,7 @@ const propTypes = {
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   onItemMouseDown: PropTypes.func.isRequired,
   onItemContextMenu: PropTypes.func.isRequired,
+  selectedDirentList: PropTypes.array.isRequired
 };
 
 class DirentListItem extends React.Component {
@@ -102,13 +103,6 @@ class DirentListItem extends React.Component {
   }
 
   onUnfreezedItem = () => {
-    let dirent = this.props.dirent;
-    // scenes 1: dirent isSelected --> this have Highest level
-    // scenes 2: dirent contextmenu show
-    // scenes 3: dirent operation menu show
-    if (dirent.isSelected) {
-      return;
-    }
     this.setState({
       highlight: false,
       isOperationShow: false,
@@ -118,7 +112,6 @@ class DirentListItem extends React.Component {
 
   //buiness handler
   onItemSelected = () => {
-    this.props.onFreezedItem();
     this.props.onItemSelected(this.props.dirent);
   }
 
@@ -389,7 +382,7 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let { path, dirent } = this.props;
+    let { path, dirent, selectedDirentList } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
     let dirHref = '';
     if (this.props.currentRepoInfo) {
@@ -408,6 +401,7 @@ class DirentListItem extends React.Component {
 
     let trClass = this.state.highlight ? 'tr-highlight ' : '';
     trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
+    trClass += dirent.isSelected ? 'tr-active' : '';
 
     return (
       <Fragment>
@@ -466,33 +460,65 @@ class DirentListItem extends React.Component {
             )} 
           </td>
           <td className="operation">
-            {
-              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>
+            {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>

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

@@ -101,10 +101,6 @@ class DirentListView extends React.Component {
     this.onFreezedItem();
   }
 
-  onItemDetails = (dirent) => {
-    this.props.onItemDetails(dirent);
-  }
-
   sortByName = (e) => {
     e.preventDefault();
     const sortBy = 'name';
@@ -174,9 +170,7 @@ class DirentListView extends React.Component {
   }
 
   closeImagePopup = () => {
-    this.setState({
-      isImagePopupOpen: false
-    });
+    this.setState({isImagePopupOpen: false});
   }
 
   onCreateFileToggle = () => {
@@ -395,9 +389,7 @@ class DirentListView extends React.Component {
   }
 
   onHideMenu = (e) => {
-    if (this.props.selectedDirentList.length === 0) {
-      this.onUnfreezedItem();
-    }
+    this.onUnfreezedItem();
   }
 
   // contextmenu utils
@@ -545,10 +537,10 @@ class DirentListView extends React.Component {
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
                   onDirentClick={this.props.onDirentClick}
-                  onItemDetails={this.onItemDetails}
                   showImagePopup={this.showImagePopup}
                   onItemMouseDown={this.onItemMouseDown}
                   onItemContextMenu={this.onItemContextMenu}
+                  selectedDirentList={this.props.selectedDirentList}
                 />
               );
             })}

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
 import { Utils } from '../../utils/utils';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
-import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
+import { gettext, isPro } from '../../utils/constants';
+import TextTranslation from '../../utils/text-translation';
+
 import '../../css/dirents-menu.css';
 
 const propTypes = {
-  dirents: PropTypes.array.isRequired,
+  dirent: PropTypes.object.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
-  isRepoOwner: PropTypes.bool.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
 };
 
@@ -22,65 +23,43 @@ class DirentMenu extends React.Component {
     };
   }
 
-  calculateMenuList(props) {
-    const { currentRepoInfo, dirents, isRepoOwner } = props;
-    const length = dirents.length;
-    let menuList = [];
-    if (length === 1) {
-      const dirent = dirents[0];
-      if (dirent.type === 'dir') {
-        menuList = ['Share'];
-      } else if (dirent.type === 'file') {
-        menuList = ['Share', 'Tags', 'Related Files', 'Divider', 'History', 'Divider', 'Open via Client'];
-        if (!Utils.isMarkdownFile(dirent.name)) {
-          menuList.splice(2, 1);
-        }
-        if (isPro) {
-          if (dirent.is_locked) {
-            if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
-              menuList.splice(1, 0, 'Unlock');
-            }
-          } else {
-            menuList.splice(1, 0, 'Lock');
-          }
-        }
-      }
-    } else {
-      menuList = [];
-    }
-    this.setState({
-      menuList: menuList,
-    });
+  componentDidMount() {
+    const { currentRepoInfo, dirent } = this.props;
+    let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+    this.setState({menuList: menuList});
   }
 
-  translateMenuItem = (menuItem) => {
-    let translateResult = '';
-    switch (menuItem) {
-      case 'Share':
-        translateResult = gettext('Share');
-        break;
-      case 'Tags':
-        translateResult = gettext('Tags');
-        break;
-      case 'Lock':
-        translateResult = gettext('Lock');
-        break;
-      case 'Unlock':
-        translateResult = gettext('Unlock');
-        break;
-      case 'Related Files':
-        translateResult = gettext('Related Files');
-        break;
-      case 'History':
-        translateResult = gettext('History');
-        break;
-      case 'Open via Client':
-        translateResult = gettext('Open via Client');
-        break;
-      default:
-        break;
+  componentWillReceiveProps(nextProps) {
+    const { currentRepoInfo, dirent } = nextProps;
+    let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+    this.setState({menuList: menuList});
+  }
+
+  calculateMenuList(currentRepoInfo, dirent) {
+    let menuList = [];
+    const { SHARE, TAGS, RELATED_FILES, HISTORY, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation;
+
+    if (dirent.type === 'dir') {
+      menuList = [SHARE];
+      return menuList;
+    } 
+
+    if (dirent.type === 'file') {
+      menuList = [SHARE, TAGS, RELATED_FILES, 'Divider', HISTORY, 'Divider', OPEN_VIA_CLIENT];
+      if (!Utils.isMarkdownFile(dirent.name)) {
+        menuList.splice(2, 1);
+      }
+      if (isPro) {
+        if (dirent.is_locked) {
+          if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
+            menuList.splice(1, 0, UNLOCK);
+          }
+        } else {
+          menuList.splice(1, 0, LOCK);
+        }
+      }
+      return menuList;
     }
-    return translateResult;
   }
 
   onDropdownToggleClick = (e) => {
@@ -92,23 +71,11 @@ class DirentMenu extends React.Component {
 
   onMenuItemClick = (event) => {
     let operation = event.target.dataset.toggle;
-    this.props.onMenuItemClick(operation, this.props.dirents);
-  }
-
-  componentDidMount() {
-    this.calculateMenuList(this.props);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.dirents.length !== nextProps.dirents.length) {
-      this.calculateMenuList(nextProps);
-    }
+    this.props.onMenuItemClick(operation, this.props.dirent);
   }
 
   render() {
-    if (this.state.menuList.length === 0) {
-      return null;
-    }
+
     return (
       <ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} title={gettext('More Operations')}>
         <DropdownToggle data-toggle="dropdown" aria-expanded={this.state.isItemMenuShow} onClick={this.onDropdownToggleClick} className="fas fa-ellipsis-v sf-dropdown-toggle dirents-more-menu">
@@ -119,7 +86,7 @@ class DirentMenu extends React.Component {
               return <DropdownItem key={index} divider/>;
             } else {
               return (
-                <DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
+                <DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick}>{menuItem.value}</DropdownItem>
               );
             }
           })}

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

@@ -28,7 +28,6 @@ const propTypes = {
   onFilesTagChanged: PropTypes.func.isRequired,
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
-  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class MutipleDirOperationToolbar extends React.Component {
@@ -96,9 +95,6 @@ class MutipleDirOperationToolbar extends React.Component {
       case 'Tags':
         this.listFileTags(dirent);
         break;
-      case 'Details':
-        this.props.showDirentDetail();
-        break;
       case 'Lock':
         this.lockFile(dirent);
         break;
@@ -246,11 +242,10 @@ class MutipleDirOperationToolbar extends React.Component {
             <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
             <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
             <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
-            {this.props.selectedDirentList.length > 0 &&
+            {this.props.selectedDirentList.length === 1 &&
               <DirentsMenu
-                dirents={this.props.selectedDirentList}
+                dirent={this.props.selectedDirentList[0]}
                 currentRepoInfo={this.props.currentRepoInfo}
-                isRepoOwner={this.props.isRepoOwner}
                 onMenuItemClick={this.onMenuItemClick}
               />
             }