From 9c230cc5db4d59e7a63c3b168af3c5efe15d06eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= Date: Wed, 9 Jan 2019 14:39:17 +0800 Subject: [PATCH] Select editor encapsulate (#2794) --- .../dialog/manage-members-dialog.js | 16 +++---- .../src/components/dialog/share-to-group.js | 14 +++---- .../src/components/dialog/share-to-user.js | 18 ++++---- .../select-editor/permission-editor.js | 36 ++++++++++++++++ .../components/select-editor/role-eidtor.js | 42 +++++++++++++++++++ .../select-editor.js} | 34 +++++++-------- frontend/src/models/dirent.js | 2 +- frontend/src/pages/share-admin/folders.js | 2 +- frontend/src/pages/share-admin/libraries.js | 2 +- frontend/src/utils/utils.js | 6 --- 10 files changed, 123 insertions(+), 49 deletions(-) create mode 100644 frontend/src/components/select-editor/permission-editor.js create mode 100644 frontend/src/components/select-editor/role-eidtor.js rename frontend/src/components/{permission-editor.js => select-editor/select-editor.js} (67%) diff --git a/frontend/src/components/dialog/manage-members-dialog.js b/frontend/src/components/dialog/manage-members-dialog.js index bebe4b0557..f7dd454ea9 100644 --- a/frontend/src/components/dialog/manage-members-dialog.js +++ b/frontend/src/components/dialog/manage-members-dialog.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { gettext } from '../../utils/constants'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api.js'; -import PermissionEditor from '../permission-editor'; +import RoleEditor from '../select-editor/role-eidtor'; import UserSelect from '../../models/user-select'; import '../../css/manage-members-dialog.css'; @@ -152,10 +152,11 @@ class Member extends React.PureComponent { constructor(props) { super(props); + this.roles = ['Admin', 'Member']; } - onChangeUserPermission = (permission) => { - let isAdmin = permission === 'Admin' ? 'True' : 'False'; + onChangeUserRole = (role) => { + let isAdmin = role === 'Admin' ? 'True' : 'False'; seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => { this.props.onGroupMembersChange(); }); @@ -169,7 +170,6 @@ class Member extends React.PureComponent { render() { const { item, isOwner } = this.props; - const permissions = ['Admin', 'Member']; return( @@ -179,12 +179,12 @@ class Member extends React.PureComponent { {item.role} } {(isOwner === true && item.role !== 'Owner') && - } diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js index 8f0c089e31..5de11e41be 100644 --- a/frontend/src/components/dialog/share-to-group.js +++ b/frontend/src/components/dialog/share-to-group.js @@ -5,7 +5,7 @@ import Select from 'react-select'; import makeAnimated from 'react-select/lib/animated'; import { gettext } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api.js'; -import PermissionEditor from '../permission-editor'; +import PermissionEditor from '../select-editor/permission-editor'; class GroupItem extends React.Component { @@ -250,9 +250,9 @@ class ShareToGroup extends React.Component { - - - + + + @@ -298,9 +298,9 @@ class ShareToGroup extends React.Component {
{gettext('Group')}{gettext('Permission')}{gettext('Group')}{gettext('Permission')}
- - - + + + @@ -42,7 +43,7 @@ class UserItem extends React.Component { @@ -255,6 +256,7 @@ class ShareToUser extends React.Component { if (username === sharedItemUsername) { sharedItem.permission = permission; } + sharedItem.is_admin = permission === 'admin' ? true : false; return sharedItem; }); this.setState({sharedItems: sharedItems}); @@ -267,9 +269,9 @@ class ShareToUser extends React.Component {
{gettext('Group')}{gettext('Permission')}{gettext('Group')}{gettext('Permission')}
{item.user_info.nickname}
- - - + + + @@ -323,9 +325,9 @@ class ShareToUser extends React.Component {
{gettext('User')}{gettext('Permission')}{gettext('User')}{gettext('Permission')}
- - - + + + { + return Utils.sharePerms(permission); + } + + render() { + return ( + + ); + } +} + +PermissionEditor.propTypes = propTypes; + +export default PermissionEditor; diff --git a/frontend/src/components/select-editor/role-eidtor.js b/frontend/src/components/select-editor/role-eidtor.js new file mode 100644 index 0000000000..83d2459243 --- /dev/null +++ b/frontend/src/components/select-editor/role-eidtor.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { gettext } from '../../utils/constants'; +import SelectEditor from './select-editor'; + +const propTypes = { + isTextMode: PropTypes.bool.isRequired, + isEditIconShow: PropTypes.bool.isRequired, + roles: PropTypes.array.isRequired, + currentRole: PropTypes.string.isRequired, + onRoleChangedHandler: PropTypes.func.isRequired, +}; + +class RoleEditor extends React.Component { + + translateRole = (role) => { + if (role === 'Admin') { + return gettext('Admin'); + } + + if (role === 'Member') { + return gettext('Member'); + } + } + + render() { + return ( + + ); + } +} + +RoleEditor.propTypes = propTypes; + +export default RoleEditor; diff --git a/frontend/src/components/permission-editor.js b/frontend/src/components/select-editor/select-editor.js similarity index 67% rename from frontend/src/components/permission-editor.js rename to frontend/src/components/select-editor/select-editor.js index 949807cded..e35e2f702b 100644 --- a/frontend/src/components/permission-editor.js +++ b/frontend/src/components/select-editor/select-editor.js @@ -1,18 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Input } from 'reactstrap'; -import { Utils } from '../utils/utils'; -import { gettext } from '../utils/constants'; +import { gettext } from '../../utils/constants'; const propTypes = { isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select isEditIconShow: PropTypes.bool.isRequired, - currentPermission: PropTypes.string.isRequired, - permissions: PropTypes.array.isRequired, - onPermissionChangedHandler: PropTypes.func.isRequired, + options: PropTypes.array.isRequired, + currentOption: PropTypes.string.isRequired, + translateOption: PropTypes.func.isRequired, + onOptionChangedHandler: PropTypes.func.isRequired, }; -class PermissionEditor extends React.Component { +class SelectEditor extends React.Component { constructor(props) { super(props); @@ -34,11 +34,11 @@ class PermissionEditor extends React.Component { this.setState({isEditing: true}); } - onPermissionChangedHandler = (e) => { + onOptionChangedHandler = (e) => { e.nativeEvent.stopImmediatePropagation(); let permission = e.target.value; - if (permission !== this.props.currentPermission) { - this.props.onPermissionChangedHandler(permission); + if (permission !== this.props.currentOption) { + this.props.onOptionChangedHandler(permission); } this.setState({isEditing: false}); } @@ -52,7 +52,7 @@ class PermissionEditor extends React.Component { } render() { - let { currentPermission, permissions, isTextMode } = this.props; + let { currentOption, options, isTextMode } = this.props; // scence1: isTextMode (text)editor-icon --> select // scence2: !isTextMode select @@ -66,17 +66,17 @@ class PermissionEditor extends React.Component { return (
{(!isTextMode || this.state.isEditing) && - - {permissions.map((item, index) => { + + {options.map((item, index) => { return ( - - ) + + ); })} } {(isTextMode && !this.state.isEditing) &&
- {Utils.sharePerms(currentPermission)} + {this.props.translateOption(currentOption)} {this.props.isEditIconShow && (
{gettext('User')}{gettext('Permission')}{gettext('User')}{gettext('Permission')}