repair share&selected-operation bug

frontend/package-lock.json

@@ -9964,7 +9964,7 @@
     },
     "react-popper": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
       "integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
       "requires": {
         "popper.js": "^1.12.9",

frontend/src/components/dialog/share-to-group.js

@@ -7,6 +7,61 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api.js';
 
+class GroupItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.group_info.id);
+  }
+
+  render() {
+    let item = this.props.item;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>{item.group_info.name}</td>
+        <td>{Utils.sharePerms[item.permission]}</td>
+        <td>
+          <span
+            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class GroupList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <GroupItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
 const propTypes = {
   isGroupOwnedRepo: PropTypes.bool,
   itemPath: PropTypes.string.isRequired,
@@ -85,7 +140,7 @@ class ShareToGroup extends React.Component {
     let path = this.props.itemPath;
     let repoID = this.props.repoID; 
     let isGroupOwnedRepo = this.props.isGroupOwnedRepo;
-    if (this.state.selectedOption.length > 0 ) {
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         groups[i] = this.state.selectedOption[i].id;
       }
@@ -137,8 +192,7 @@ class ShareToGroup extends React.Component {
     }
   }
 
-  deleteShareItem = (e, groupID) => {
-    e.preventDefault();
+  deleteShareItem = (groupID) => {
     let path = this.props.itemPath;
     let repoID = this.props.repoID; 
     if (this.props.isGroupOwnedRepo) {
@@ -207,20 +261,6 @@ class ShareToGroup extends React.Component {
   }
 }
 
-function GroupList(props) {
-  return (
-    <tbody>
-      {props.items.map((item, index) => (
-        <tr key={index}>
-          <td>{item.group_info.name}</td>
-          <td>{Utils.sharePerms[item.permission]}</td>
-          <td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.group_info.id);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
-        </tr>
-      ))}
-    </tbody>
-  );
-}
-
 ShareToGroup.propTypes = propTypes;
 
 export default ShareToGroup;

frontend/src/components/dialog/share-to-user.js

@@ -6,6 +6,61 @@ import PropTypes from 'prop-types';
 import { Button, Input } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
 
+class UserItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.name);
+  }
+
+  render() {
+    let item = this.props.item;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>{item.user_info.nickname}</td>
+        <td>{Utils.sharePerms[item.permission]}</td>
+        <td>
+          <span
+            className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class UserList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <UserItem key={index} item={item} deleteShareItem={this.props.deleteShareItem}/>
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
 const propTypes = {
   isGroupOwnedRepo: PropTypes.bool,
   itemPath: PropTypes.string.isRequired,
@@ -88,7 +143,7 @@ class ShareToUser extends React.Component {
     let users = [];
     let path = this.props.itemPath; 
     let repoID = this.props.repoID;
-    if (this.state.selectedOption.length > 0 ) {
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         users[i] = this.state.selectedOption[i].email;
       }
@@ -134,8 +189,7 @@ class ShareToUser extends React.Component {
     }
   } 
 
-  deleteShareItem = (e, username) => {
-    e.preventDefault();
+  deleteShareItem = (username) => {
     let path = this.props.itemPath;
     let repoID = this.props.repoID;
     if (this.props.isGroupOwnedRepo) {
@@ -210,20 +264,6 @@ class ShareToUser extends React.Component {
   }
 }
 
-function UserList(props) {
-  return (
-    <tbody>
-      {props.items.map((item, index) => (
-        <tr key={index}>
-          <td>{item.user_info.nickname}</td>
-          <td>{Utils.sharePerms[item.permission]}</td>
-          <td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.user_info.name);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
-        </tr>
-      ))}
-    </tbody>
-  );
-}
-
 ShareToUser.propTypes = propTypes;
 
 export default ShareToUser;

frontend/src/components/dir-view/dir-panel.js

@@ -126,6 +126,7 @@ class DirPanel extends React.Component {
                   onItemsDelete={this.props.onItemsDelete}
                 /> :
                 <DirOperationToolBar 
+                  isViewFile={false}
                   path={this.props.path}
                   repoID={this.props.repoID}
                   onAddFile={this.props.onAddFile}
@@ -152,6 +153,7 @@ class DirPanel extends React.Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <CurDirPath 
+                isViewFile={false}
                 repoID={this.props.repoID}
                 repoName={this.props.repoName}
                 pathPrefix={this.props.pathPrefix}
@@ -209,9 +211,10 @@ class DirPanel extends React.Component {
           )}
           {this.props.libNeedDecrypt && (
             <ModalPortal>
-              <LibDecryptDialog repoID={this.props.repoID} 
-                                onLibDecryptDialog={this.props.onLibDecryptDialog}
-                                />
+              <LibDecryptDialog 
+                repoID={this.props.repoID} 
+                onLibDecryptDialog={this.props.onLibDecryptDialog}
+              />
             </ModalPortal>
           )}
         </div>

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

@@ -134,15 +134,20 @@ class DirOperationToolbar extends React.Component {
     this.props.goDraftPage();
   }
 
-  render() {
-    let isFile = this.props.isViewFile;
-    let itemName;
-    if (this.props.isViewFile) {
-        itemName =  Utils.getFileName(this.props.path)
-    } else {
-        itemName = this.props.path.replace('\/','');
+  getFolderName = (path) => {
+    // eg: /
+    if (path === '/') {
+      return path;
     }
+    // eg: /abc/bcd/; /abc/bcd
+    path = path[path.length - 1] !== '/' ? path : path.slice(0, path.length -2);
+    return path.slice(path.lastIndexOf('/') + 1);
+  }
 
+  render() {
+    let { path, isViewFile } = this.props;
+    let itemType = isViewFile ? 'file' : 'dir';
+    let itemName = isViewFile ? Utils.getFileName(path) : this.getFolderName(path);
     return (
       <Fragment>
         <div className="operation">
@@ -203,7 +208,7 @@ class DirOperationToolbar extends React.Component {
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog 
-              isDir={!isFile}
+              itemType={itemType}
               itemName={itemName}
               itemPath={this.props.path}
               repoID={this.props.repoID}

frontend/src/pages/my-libs/item.js

@@ -175,7 +175,7 @@ class Item extends Component {
       'is_admin': data.is_admin,
       'permission': permission
     });
-    data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}`;
+    data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'sf2-icon-share sf2-x op-icon' + iconVisibility;