selected-file-detail (#3140)

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

@@ -25,6 +25,12 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired,
+  unSelectDirent: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class MutipleDirOperationToolbar extends React.Component {
@@ -260,7 +266,7 @@ class MutipleDirOperationToolbar extends React.Component {
     for (let i = 0; i < length; i++) {
       const dirent = this.props.selectedDirentList[i];
       const direntPath = this.getDirentPath(dirent);
-      this.props.onFilesTagChanged(dirent, direntPath);
+      this.props.onFileTagChanged(dirent, direntPath);
     }
   }
 

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

@@ -71,6 +71,10 @@ const propTypes = {
   isDirentSelected: PropTypes.bool.isRequired,
   isAllDirentSelected: PropTypes.bool.isRequired,
   onAllDirentSelected: PropTypes.func.isRequired,
+  isDirentDetailShow: PropTypes.bool.isRequired,
+  selectedDirent: PropTypes.object,
+  closeDirentDetail: PropTypes.func.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class LibContentContainer extends React.Component {
@@ -79,25 +83,24 @@ class LibContentContainer extends React.Component {
     super(props);
     this.state = {
       currentDirent: null,
-      isDirentDetailShow: false,
     };
 
     this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
   }
 
   onPathClick = (path) => {
-    this.setState({isDirentDetailShow: false});
     this.props.onMainNavBarClick(path);
+    this.props.closeDirentDetail();
   }
 
   onItemClick = (dirent) => {
-    this.setState({isDirentDetailShow: false});
     this.props.onItemClick(dirent);
+    this.props.closeDirentDetail();
   }
 
   // on '<tr>'
   onDirentClick = (dirent) => {
-    if (this.state.isDirentDetailShow) {
+    if (this.props.isDirentDetailShow) {
       this.onItemDetails(dirent);
     }
   }
@@ -105,18 +108,22 @@ class LibContentContainer extends React.Component {
   onItemDetails = (dirent) => {
     this.setState({
       currentDirent: dirent,
-      isDirentDetailShow: true,
     });
+    this.props.showDirentDetail();
   }
 
   onItemDetailsClose = () => {
-    this.setState({isDirentDetailShow: false});
+    this.props.closeDirentDetail();
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.isDirentDetailShow !== this.state.isDirentDetailShow) {
+    if (nextProps.isDirentDetailShow) {
+      this.setState({
+        isDirentDetailShow: nextProps.isDirentDetailShow
+      });
+    }
+    if (nextProps.selectedDirent && nextProps.isDirentDetailShow) {
       this.setState({
-        isDirentDetailShow: nextProps.isDirentDetailShow,
         currentDirent: nextProps.selectedDirent,
       });
     }
@@ -245,7 +252,7 @@ class LibContentContainer extends React.Component {
             )}
           </div>
         </div>
-        {this.state.isDirentDetailShow && (
+        {this.props.isDirentDetailShow && (
           <div className="cur-view-detail">
             <DirentDetail
               repoID={repoID}

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import moment from 'moment';
@@ -83,6 +83,10 @@ class LibContentView extends React.Component {
     });
   }
 
+  closeDirentDetail = () => {
+    this.setState({ isDirentDetailShow: false });
+  }
+
   componentWillMount() {
     const hash = window.location.hash;
     if (hash.slice(0, 1) === '#') {
@@ -356,7 +360,7 @@ class LibContentView extends React.Component {
   } 
 
   loadDirentList = (path) => {
-    let repoID = this.props.repoID
+    let repoID = this.props.repoID;
     seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
       let direntList = [];
       let markdownItem = null;
@@ -1159,7 +1163,6 @@ class LibContentView extends React.Component {
   }
   
   goDraftPage = () => {
-    let repoID = this.props.repoID;
     window.location.href = siteRoot + 'drafts/' + this.state.draftID + '/';
   }
 
@@ -1221,8 +1224,6 @@ class LibContentView extends React.Component {
   }
 
   render() {
-    const { repoID } = this.props;
-
     if (this.state.libNeedDecrypt) {
       return (
         <ModalPortal>
@@ -1265,7 +1266,6 @@ class LibContentView extends React.Component {
 
     }
 
-
     return (
       <div className="main-panel o-hidden">
         <div className="main-panel-north border-left-show">
@@ -1372,6 +1372,8 @@ class LibContentView extends React.Component {
             onAllDirentSelected={this.onAllDirentSelected}
             isDirentDetailShow={this.state.isDirentDetailShow}
             selectedDirent={this.state.selectedDirentList && this.state.selectedDirentList[0]}
+            closeDirentDetail={this.closeDirentDetail}
+            showDirentDetail={this.showDirentDetail}
           />
           {this.state.pathExist && !this.state.isViewFile && (
             <FileUploader