Modify some code structure

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

@@ -77,7 +77,6 @@ class DirGridView extends React.Component {
           isDirentDetailShow={this.props.isDirentDetailShow}
           onItemRename={this.props.onItemRename}
           onAddFolder={this.props.onAddFolder}
-          onDirentClick={this.props.onDirentClick}
         />
       </Fragment>
     );

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

@@ -10,7 +10,7 @@ const propTypes = {
   onItemClick: PropTypes.func.isRequired,
   showImagePopup: PropTypes.func.isRequired,
   onGridItemContextmenu: PropTypes.func.isRequired,
-  onDirentClick: PropTypes.func.isRequired,
+  onGridItemClick: PropTypes.func.isRequired,
   activeDirent: PropTypes.object,
   onGridItemMouseDown: PropTypes.func,
 };
@@ -21,7 +21,7 @@ class DirentGridItem extends React.Component {
     super(props);
     this.state = {
       isGridSelected: false,
-      isGridDropTipshow: false,
+      isGridDropTipShow: false,
     }
   }
 
@@ -51,7 +51,7 @@ class DirentGridItem extends React.Component {
       }
     } else {
       this.setState({isGridSelected: true})
-      this.props.onDirentClick(this.props.dirent)
+      this.props.onGridItemClick(this.props.dirent)
     }
   }
 
@@ -75,7 +75,7 @@ class DirentGridItem extends React.Component {
 
   onGridItemDragEnter = (e) => {
     if (this.props.dirent.type === 'dir') {
-      this.setState({isGridDropTipshow: true});
+      this.setState({isGridDropTipShow: true});
     }
   }
 
@@ -85,11 +85,11 @@ class DirentGridItem extends React.Component {
   }
 
   onGridItemDragLeave = (e) => {
-    this.setState({isGridDropTipshow: false});
+    this.setState({isGridDropTipShow: false});
   }
 
   onGridItemDragDrop = (e) => {
-    this.setState({isGridDropTipshow: false});
+    this.setState({isGridDropTipShow: false});
     if (e.dataTransfer.files.length) { // uploaded files
       return;
     }
@@ -142,7 +142,7 @@ class DirentGridItem extends React.Component {
     
     let gridClass = 'grid-file-img-link cursor-pointer'
     gridClass += this.state.isGridSelected ? " grid-selected-active" : " ";
-    gridClass += this.state.isGridDropTipshow ? " grid-drop-show" : " ";
+    gridClass += this.state.isGridDropTipShow ? " grid-drop-show" : " ";
 
     return(
       <Fragment>

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

@@ -40,7 +40,6 @@ const propTypes = {
   isDirentDetailShow: PropTypes.bool.isRequired,
   onGridItemClick: PropTypes.func,
   onAddFolder: PropTypes.func.isRequired,
-  onDirentClick: PropTypes.func.isRequired,
 };
 
 class DirentGridView extends React.Component{
@@ -60,10 +59,9 @@ class DirentGridView extends React.Component{
       isCreateFileDialogShow: false,
 
       isMutipleOperation: false,
-      dirent: '',
+      contextMenuDirent: '',
       isGridItemFreezed: false,
       activeDirent: null,
-
     }
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
   }
@@ -74,10 +72,9 @@ class DirentGridView extends React.Component{
     });
   }
 
-  onDirentClick = (dirent) => {
+  onGridItemClick = (dirent) => {
     this.setState({activeDirent: dirent});
-    this.props.onDirentClick(dirent);
-    this.props.onGridItemClick(dirent)
+    this.props.onGridItemClick(dirent);
   }
  
   onMoveToggle = () => {
@@ -267,7 +264,7 @@ class DirentGridView extends React.Component{
     this.setState({
       isRenameDialogShow: !this.state.isRenameDialogShow,
     });
-    this.props.onItemRename(this.state.dirent, newName)
+    this.props.onItemRename(this.state.contextMenuDirent, newName)
   }
 
 
@@ -356,7 +353,7 @@ class DirentGridView extends React.Component{
     if (!this.props.isDirentDetailShow) {
       this.props.onGridItemClick(null);
     }
-    this.onDirentClick(null);
+    this.onGridItemClick(null);
   }
 
   onGridContainContextMenu = (event) => {
@@ -387,7 +384,7 @@ class DirentGridView extends React.Component{
 
     hideMenu();
     
-    this.setState({dirent: currentObject});
+    this.setState({contextMenuDirent: currentObject});
 
     let showMenuConfig = {
       id: id,
@@ -479,7 +476,7 @@ class DirentGridView extends React.Component{
 
   render() {
     let {direntList, path} = this.props;
-    let dirent = this.state.dirent ? this.state.dirent : '';
+    let dirent = this.state.contextMenuDirent ? this.state.contextMenuDirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
 
     if (this.props.isDirentListLoading) {
@@ -503,7 +500,7 @@ class DirentGridView extends React.Component{
                   onGridItemContextmenu={this.onGridItemContextmenu}
                   onItemMove={this.props.onItemMove}
                   onGridItemMouseDown={this.onGridItemMouseDown}
-                  onDirentClick={this.onDirentClick}
+                  onGridItemClick={this.onGridItemClick}
                   activeDirent={this.state.activeDirent}
                 />
               )
@@ -546,7 +543,7 @@ class DirentGridView extends React.Component{
             isMutipleOperation={this.state.isMutipleOperation}
             onItemMove={this.props.onItemMove}
             onCancelMove={this.onMoveToggle}
-            dirent={this.state.dirent}
+            dirent={this.state.contextMenuDirent}
           />
         }
         {this.state.isZipDialogOpen &&
@@ -567,7 +564,7 @@ class DirentGridView extends React.Component{
             isMutipleOperation={this.state.isMutipleOperation}
             onItemCopy={this.props.onItemCopy}
             onCancelCopy={this.onCopyToggle}
-            dirent={this.state.dirent}
+            dirent={this.state.contextMenuDirent}
           />
         }
         {this.state.isShareDialogShow &&
@@ -588,7 +585,7 @@ class DirentGridView extends React.Component{
         {this.state.isRenameDialogShow && (
           <ModalPortal>
             <Rename
-              dirent={this.state.dirent}
+              dirent={this.state.contextMenuDirent}
               onRename={this.onItemRename}
               checkDuplicatedName={this.checkDuplicatedName}
               toggleCancel={this.onItemRenameToggle}

frontend/src/css/grid-view.css

@@ -1,5 +1,6 @@
 .grid-view {
   padding-top: 10px;
+  padding-bottom: 10rem;
   list-style: none;
   display: flex;
   flex-wrap: wrap;

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

@@ -116,6 +116,7 @@ class LibContentContainer extends React.Component {
 
   onGridItemClick = (dirent) => {
     this.setState({currentDirent: dirent});
+    this.props.onDirentClick(dirent);
   }
 
   // on '<tr>'
@@ -233,7 +234,6 @@ class LibContentContainer extends React.Component {
                     onGridItemClick={this.onGridItemClick}
                     isDirentDetailShow={this.props.isDirentDetailShow}
                     onItemRename={this.props.onItemRename}
-                    onDirentClick={this.onDirentClick}
                   />
                 )}
                 {this.props.currentMode === 'column' && (