Merge pull request #2659 from haiwen/bug-repair

Bug repair
2025-09-03 16:10:26 +00:00 · 2018-12-18 11:07:32 +08:00
parent 48efb09308 c2266f9af1
commit 04d4f57b4e
9 changed files with 150 additions and 52 deletions
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -7,6 +7,63 @@ 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 +142,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 +194,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 +263,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;
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -6,6 +6,63 @@ 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 +145,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 +191,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 +266,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;
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/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>
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -46,14 +46,14 @@ class RepoListItem extends React.Component {
          <span className="icon far fa-folder"></span>
          <span className="name">{this.props.repo.repo_name}</span>
        </span>
-        {
+        {this.state.isShowChildren && (
          <DirentListView 
            repo={this.props.repo} 
            isShowChildren={this.state.isShowChildren} 
            onDirentItemClick={this.onDirentItemClick}
            selectedPath={this.props.selectedPath}
          />
-        }
+        )}
      </li>
    );
  }
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -135,14 +135,9 @@ class DirOperationToolbar extends React.Component {
  }

  render() {
-    let isFile = this.props.isViewFile;
-    let itemName;
-    if (this.props.isViewFile) {
-        itemName =  Utils.getFileName(this.props.path)
-    } else {
-        itemName = this.props.path.replace('\/','');
-    }
-
+    let { path, isViewFile } = this.props;
+    let itemType = isViewFile ? 'file' : 'dir';
+    let itemName = isViewFile ? Utils.getFileName(path) : Utils.getFolderName(path);
    return (
      <Fragment>
        <div className="operation">
@@ -203,7 +198,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}
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -26,8 +26,6 @@
  background-color: #fff;
  line-height: 29px;
  font-weight: normal;
-  font-size: 13px;
-  color: #333;
  border: 1px solid #ccc;
  border-radius: 2px;
 }
--- a/frontend/src/pages/my-libs/item.js
+++ b/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; 
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -170,6 +170,24 @@ export const Utils = {
    return filePath.slice(lastIndex+1);
  },

+    /**
+   * input: 
+   *  eg: /
+   *      ../abc/abc/
+   *      ../abc/bc
+   * output(return):
+   *  eg: /
+   *      abc
+   *      bc
+   */
+  getFolderName: function(path) {
+    if (path === '/') {
+      return path;
+    }
+    path = path[path.length - 1] !== '/' ? path : path.slice(0, path.length -2);
+    return path.slice(path.lastIndexOf('/') + 1);
+  },
+
  /*
    return dirname of a path.
    if path is '/', return '/'.