From ceb813927a2ca298582b3b773090b5237860cc8f Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 17 Dec 2018 21:38:55 +0800 Subject: [PATCH 1/4] repair share&selected-operation bug --- frontend/package-lock.json | 2 +- .../src/components/dialog/share-to-group.js | 74 ++++++++++++++----- .../src/components/dialog/share-to-user.js | 74 ++++++++++++++----- frontend/src/components/dir-view/dir-panel.js | 9 ++- .../toolbar/dir-operation-toolbar.js | 21 ++++-- frontend/src/pages/my-libs/item.js | 2 +- 6 files changed, 135 insertions(+), 47 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 06172323a9..95bd6b231a 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js index 8e11dc5d7b..0fef6e4db9 100644 --- a/frontend/src/components/dialog/share-to-group.js +++ b/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 ( + + {item.group_info.name} + {Utils.sharePerms[item.permission]} + + + + + + ); + } +} + +class GroupList extends React.Component { + + render() { + let items = this.props.items; + return ( + + {items.map((item, index) => { + return ( + + ); + })} + + ); + } +} + 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 ( - - {props.items.map((item, index) => ( - - {item.group_info.name} - {Utils.sharePerms[item.permission]} - {props.deleteShareItem(e, item.group_info.id);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}> - - ))} - - ); -} - ShareToGroup.propTypes = propTypes; export default ShareToGroup; diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js index f587a87c96..3bc4ea9989 100644 --- a/frontend/src/components/dialog/share-to-user.js +++ b/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 ( + + {item.user_info.nickname} + {Utils.sharePerms[item.permission]} + + + + + + ); + } +} + +class UserList extends React.Component { + + render() { + let items = this.props.items; + return ( + + {items.map((item, index) => { + return ( + + ); + })} + + ); + } +} + 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 ( - - {props.items.map((item, index) => ( - - {item.user_info.nickname} - {Utils.sharePerms[item.permission]} - {props.deleteShareItem(e, item.user_info.name);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}> - - ))} - - ); -} - ShareToUser.propTypes = propTypes; export default ShareToUser; diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js index 582bf8e3ef..5fb11d762b 100644 --- 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} /> :
- + )}
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js index 29d6033e3a..fd88a11041 100644 --- a/frontend/src/components/toolbar/dir-operation-toolbar.js +++ b/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 (
@@ -203,7 +208,7 @@ class DirOperationToolbar extends React.Component { {this.state.isShareDialogShow && Date: Mon, 17 Dec 2018 21:42:37 +0800 Subject: [PATCH 2/4] repair selected operation style --- frontend/src/css/toolbar.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css index 5ca4e909ba..cb60728cbf 100644 --- 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; } From 93b619899fb098d47784a1491509af101c8654fd Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 17 Dec 2018 22:34:54 +0800 Subject: [PATCH 3/4] optimized code --- .../toolbar/dir-operation-toolbar.js | 12 +----------- frontend/src/utils/utils.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js index fd88a11041..963f43faac 100644 --- a/frontend/src/components/toolbar/dir-operation-toolbar.js +++ b/frontend/src/components/toolbar/dir-operation-toolbar.js @@ -134,20 +134,10 @@ class DirOperationToolbar extends React.Component { this.props.goDraftPage(); } - 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); + let itemName = isViewFile ? Utils.getFileName(path) : Utils.getFolderName(path); return (
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js index 39e68cecb3..b703b1459b 100644 --- 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 '/'. From c2266f9af11e8e5c580af1a96d0ea3e7694da0a2 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Tue, 18 Dec 2018 10:36:42 +0800 Subject: [PATCH 4/4] optimized code style --- frontend/src/components/dialog/share-to-group.js | 2 ++ frontend/src/components/dialog/share-to-user.js | 2 ++ frontend/src/components/file-chooser/repo-list-item.js | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js index 0fef6e4db9..f672f73dc3 100644 --- a/frontend/src/components/dialog/share-to-group.js +++ b/frontend/src/components/dialog/share-to-group.js @@ -8,12 +8,14 @@ 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}); } diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js index 3bc4ea9989..01c5a1704b 100644 --- a/frontend/src/components/dialog/share-to-user.js +++ b/frontend/src/components/dialog/share-to-user.js @@ -7,12 +7,14 @@ 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}); } diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js index 34e70527b0..a48732b50a 100644 --- 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 { {this.props.repo.repo_name} - { + {this.state.isShowChildren && ( - } + )} ); }