Add selected menu (#3121)

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

@@ -113,6 +113,15 @@ class LibContentContainer extends React.Component {
     this.setState({isDirentDetailShow: false});
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.isDirentDetailShow !== this.state.isDirentDetailShow) {
+      this.setState({
+        isDirentDetailShow: nextProps.isDirentDetailShow,
+        currentDirent: nextProps.selectedDirent,
+      });
+    }
+  }
+
   render() {
     let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts } = this.props;
     let isRepoInfoBarShow = false;

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

@@ -43,6 +43,13 @@ const propTypes = {
   switchViewMode: PropTypes.func.isRequired,
   // search
   onSearchedClick: PropTypes.func.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+  // selected menu
+  onDirentSelected: PropTypes.func.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
+  listRelatedFiles: PropTypes.func.isRequired,
+  onFilesTagChanged: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
 };
 
 class LibContentToolbar extends React.Component {
@@ -65,7 +72,7 @@ class LibContentToolbar extends React.Component {
               hasDraft={this.props.hasDraft}
               fileTags={this.props.fileTags}
               relatedFiles={this.props.relatedFiles}
-              onFileTagChanged={this.props.onFileTagChanged}
+              onFilesTagChanged={this.props.onFilesTagChanged}
               onRelatedFileChange={this.props.onRelatedFileChange}
             />
             <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>
@@ -89,6 +96,17 @@ class LibContentToolbar extends React.Component {
                 onItemsMove={this.props.onItemsMove}
                 onItemsCopy={this.props.onItemsCopy}
                 onItemsDelete={this.props.onItemsDelete}
+                isRepoOwner={this.props.isRepoOwner}
+                currentRepoInfo={this.props.currentRepoInfo}
+                enableDirPrivateShare={this.props.enableDirPrivateShare}
+                onFileTagChanged={this.props.onFileTagChanged}
+                updateDirent={this.props.updateDirent}
+                onDirentSelected={this.props.onDirentSelected}
+                showDirentDetail={this.props.showDirentDetail}
+                listRelatedFiles={this.props.listRelatedFiles}
+                relatedFiles={this.props.relatedFiles}
+                unSelectDirent={this.props.unSelectDirent}
+                onFilesTagChanged={this.props.onFilesTagChanged}
               /> :
               <DirOperationToolBar 
                 path={this.props.path}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import moment from 'moment';
@@ -69,6 +69,7 @@ class LibContentView extends React.Component {
       isAllDirentSelected: false,
       dirID: '',  // for update dir list
       errorMsg: '',
+      isDirentDetailShow: false,
     };
 
     window.onpopstate = this.onpopstate;
@@ -76,6 +77,12 @@ class LibContentView extends React.Component {
     this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
   }
 
+  showDirentDetail = () => {
+    this.setState({
+      isDirentDetailShow: true,
+    });
+  }
+
   componentWillMount() {
     const hash = window.location.hash;
     if (hash.slice(0, 1) === '#') {
@@ -1202,7 +1209,17 @@ class LibContentView extends React.Component {
     });
   }
 
+  unSelectDirent = () => {
+    this.setState({
+      isDirentSelected: false,
+      selectedDirentList: []
+    });
+    const dirent = {};
+    this.onDirentSelected(dirent);
+  }
+
   render() {
+    const { repoID } = this.props;
 
     if (this.state.libNeedDecrypt) {
       return (
@@ -1245,6 +1262,7 @@ class LibContentView extends React.Component {
       }
 
     }
+    
 
     return (
       <div className="main-panel o-hidden">
@@ -1280,6 +1298,14 @@ class LibContentView extends React.Component {
             currentMode={this.state.currentMode}
             switchViewMode={this.switchViewMode}
             onSearchedClick={this.onSearchedClick}
+            isRepoOwner={isRepoOwner}
+            currentRepoInfo={this.state.currentRepoInfo}
+            updateDirent={this.updateDirent}
+            onDirentSelected={this.onDirentSelected}
+            showDirentDetail={this.showDirentDetail}
+            listRelatedFiles={this.listRelatedFiles}
+            unSelectDirent={this.unSelectDirent}
+            onFilesTagChanged={this.onFileTagChanged}
           />
         </div>
         <div className="main-panel-center flex-row">
@@ -1342,6 +1368,8 @@ class LibContentView extends React.Component {
             isDirentSelected={this.state.isDirentSelected}
             isAllDirentSelected={this.state.isAllDirentSelected}
             onAllDirentSelected={this.onAllDirentSelected}
+            isDirentDetailShow={this.state.isDirentDetailShow}
+            selectedDirent={this.state.selectedDirentList && this.state.selectedDirentList[0]}
           />
           {this.state.pathExist && !this.state.isViewFile && (
             <FileUploader