From c827c880f92cbca59ed30788b93697e022aa4a68 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 10:43:34 +0800 Subject: [PATCH 01/15] package drop-down menu component --- .../dirent-list-view/dirent-list-item.js | 27 ++-- .../dirent-list-view/dirent-list-view.js | 1 + .../components/dropdown-menu/dropdown-menu.js | 129 ++++++++++++++++++ 3 files changed, 146 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/dropdown-menu/dropdown-menu.js diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index b21b71b46e..edf87a84f2 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -6,7 +6,7 @@ import { gettext, siteRoot, mediaUrl } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import URLDecorator from '../../utils/url-decorator'; -import DirentMenu from './dirent-menu'; +import DropDownMenu from '../dropdown-menu/dropdown-menu'; import Rename from '../rename'; import ModalPortal from '../modal-portal'; import MoveDirentDialog from '../dialog/move-dirent-dialog'; @@ -44,6 +44,7 @@ const propTypes = { onItemContextMenu: PropTypes.func.isRequired, selectedDirentList: PropTypes.array.isRequired, activeDirent: PropTypes.object, + getDirentItemMenuList: PropTypes.func.isRequired, }; class DirentListItem extends React.Component { @@ -428,13 +429,15 @@ class DirentListItem extends React.Component {
  • -
    • @@ -457,13 +460,15 @@ class DirentListItem extends React.Component {
  • -
    • diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 383504a34d..6c1402f193 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -584,6 +584,7 @@ class DirentListView extends React.Component { selectedDirentList={this.props.selectedDirentList} activeDirent={this.state.activeDirent} onFileTagChanged={this.props.onFileTagChanged} + getDirentItemMenuList={this.getDirentItemMenuList} /> ); })} diff --git a/frontend/src/components/dropdown-menu/dropdown-menu.js b/frontend/src/components/dropdown-menu/dropdown-menu.js new file mode 100644 index 0000000000..1a137ed28e --- /dev/null +++ b/frontend/src/components/dropdown-menu/dropdown-menu.js @@ -0,0 +1,129 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import listener from '../context-menu/globalEventListener'; +import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; +import { gettext } from '../../utils/constants'; + +const propTypes = { + tagName: PropTypes.string, + opItem: PropTypes.object.isRequired, + menuType: PropTypes.oneOf(['pc', 'mobile']).isRequired, + menuClass: PropTypes.string.isRequired, + isHandleContextMenuEvent: PropTypes.bool, + getOpItemMenuList: PropTypes.func.isRequired, + onMenuItemClick: PropTypes.func.isRequired, + onFrezeedItem: PropTypes.func, + onUnfrezeedItem: PropTypes.func, +}; + +class DropDownMenu extends React.Component { + + static defaultProps = { + isHandleContextMenuEvent: false, + menuType: 'pc', + }; + + constructor(props) { + super(props); + this.state = { + menuList: [], + isItemMenuShow: false, + }; + + } + + componentDidMount() { + if (this.props.isHandleContextMenuEvent) { + this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); + } + let { opItem, menuType } = this.props; + + // scene 1: menuType === 'pc', Get some menu operations + // scene 2: menuType === 'mobile', Get all menu operations + let isAllOperations = menuType === 'pc' ? false : true; + let menuList = this.props.getOpItemMenuList(opItem, isAllOperations); + this.setState({menuList: menuList}); + } + + componentWillUnmount() { + if (this.props.isHandleContextMenuEvent && this.listenerId) { + listener.unregister(this.listenerId); + } + } + + onShowMenu = () => { + // nothing todo + } + + onHideMenu = () => { + if (this.state.isItemMenuShow) { + this.setState({isItemMenuShow: false}); + if (typeof(this.props.onUnfreezedItem) === 'function') { + this.props.onUnfreezedItem(); + } + } + } + + onDropdownToggleClick = (e) => { + e.preventDefault(); + e.stopPropagation(); + + this.toggleOperationMenu(); + } + + toggleOperationMenu = () => { + this.setState( + {isItemMenuShow: !this.state.isItemMenuShow}, + () => { + if (this.state.isItemMenuShow && typeof(this.props.onFreezedItem) === 'function') { + this.props.onFreezedItem(); + } else if (!this.state.isItemMenuShow && typeof(this.props.onUnfreezedItem) === 'function') { + this.props.onUnfreezedItem(); + } + } + ); + } + + onMenuItemClick = (event) => { + let operation = event.target.dataset.toggle; + this.props.onMenuItemClick(operation); + } + + render() { + let menuList = this.state.menuList; + let { menuClass, tagName } = this.props; + menuClass = 'sf-dropdown-toggle ' + menuClass; + + if (!menuList.length) { + return ''; + } + + return ( + + + + {menuList.map((menuItem, index) => { + if (menuItem === 'Divider') { + return ; + } else { + return ( + {menuItem.value} + ); + } + })} + + + ); + } +} + +DropDownMenu.propTypes = propTypes; + +export default DropDownMenu; From 681adcf27b188c58d5b3c92e082e6642aea966cd Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 13:57:58 +0800 Subject: [PATCH 02/15] improve dropdown-menu --- .../components/dropdown-menu/dropdown-menu.js | 46 +++++++++++++++++-- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/dropdown-menu/dropdown-menu.js b/frontend/src/components/dropdown-menu/dropdown-menu.js index 1a137ed28e..ff4733ace7 100644 --- a/frontend/src/components/dropdown-menu/dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/dropdown-menu.js @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import listener from '../context-menu/globalEventListener'; -import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; +import { Dropdown, ButtonDropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; import { gettext } from '../../utils/constants'; const propTypes = { tagName: PropTypes.string, opItem: PropTypes.object.isRequired, - menuType: PropTypes.oneOf(['pc', 'mobile']).isRequired, - menuClass: PropTypes.string.isRequired, + menuType: PropTypes.oneOf(['pc', 'mobile']), + menuClass: PropTypes.string, isHandleContextMenuEvent: PropTypes.bool, getOpItemMenuList: PropTypes.func.isRequired, onMenuItemClick: PropTypes.func.isRequired, @@ -19,8 +19,9 @@ const propTypes = { class DropDownMenu extends React.Component { static defaultProps = { - isHandleContextMenuEvent: false, + isHandleContextMenuEvent: true, menuType: 'pc', + menuClass: 'sf2-icon-caret-down' }; constructor(props) { @@ -45,6 +46,15 @@ class DropDownMenu extends React.Component { this.setState({menuList: menuList}); } + componentWillReceiveProps(nextProps) { // for toolbar opItem operation + let { opItem, menuType } = nextProps; + if (opItem.name !== this.props.opItem.name) { + let isAllOperations = menuType === 'pc' ? false : true; + let menuList = this.props.getOpItemMenuList(opItem, isAllOperations); + this.setState({menuList: menuList}); + } + } + componentWillUnmount() { if (this.props.isHandleContextMenuEvent && this.listenerId) { listener.unregister(this.listenerId); @@ -98,6 +108,32 @@ class DropDownMenu extends React.Component { return ''; } + if (tagName && tagName === 'button') { + return ( + + + + + {menuList.map((menuItem, index) => { + if (menuItem === 'Divider') { + return ; + } else { + return ( + {menuItem.value} + ); + } + })} + + + ); + } + return ( {menuList.map((menuItem, index) => { if (menuItem === 'Divider') { - return ; + return ; } else { return ( {menuItem.value} From da09d856cc8f0a905826dead4a0d8e9d5db339e5 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 14:02:12 +0800 Subject: [PATCH 03/15] optimized toolbar more operation menu --- .../toolbar/mutilple-dir-operation-toolbar.js | 45 ++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js index 0c33189856..67de358092 100644 --- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js +++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js @@ -2,17 +2,20 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Button, ButtonGroup } from 'reactstrap'; import { gettext } from '../../utils/constants'; -import { Utils } from '../../utils/utils'; +import { Utils, isPro } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import URLDecorator from '../../utils/url-decorator'; +import TextTranslation from '../../utils/text-translation'; import MoveDirentDialog from '../dialog/move-dirent-dialog'; import CopyDirentDialog from '../dialog/copy-dirent-dialog'; -import DirentsMenu from '../dirent-list-view/dirents-menu'; import ShareDialog from '../dialog/share-dialog'; import RelatedFileDialogs from '../dialog/related-file-dialogs'; import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import ZipDownloadDialog from '../dialog/zip-download-dialog'; import ModalPortal from '../modal-portal'; +import DropDownMenu from '../dropdown-menu/dropdown-menu'; + +import '../../css/dirents-menu.css'; const propTypes = { path: PropTypes.string.isRequired, @@ -83,6 +86,35 @@ class MutipleDirOperationToolbar extends React.Component { }); } + getDirentMenuList = (dirent) => { + let menuList = []; + let currentRepoInfo = this.props.currentRepoInfo; + + const { SHARE, TAGS, RELATED_FILES, HISTORY, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation; + + if (dirent.type === 'dir') { + menuList = [SHARE]; + return menuList; + } + + if (dirent.type === 'file') { + menuList = [SHARE, TAGS, RELATED_FILES, 'Divider', HISTORY, 'Divider', OPEN_VIA_CLIENT]; + if (!Utils.isMarkdownFile(dirent.name)) { + menuList.splice(2, 1); + } + if (isPro) { + if (dirent.is_locked) { + if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) { + menuList.splice(1, 0, UNLOCK); + } + } else { + menuList.splice(1, 0, LOCK); + } + } + return menuList; + } + } + onMenuItemClick = (operation) => { const dirents = this.props.selectedDirentList; const dirent = dirents[0]; @@ -250,10 +282,13 @@ class MutipleDirOperationToolbar extends React.Component { {this.props.selectedDirentList.length === 1 && - } From bafc77f17ef83b2e08d953f18ac712f3dc831d6d Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 15:23:32 +0800 Subject: [PATCH 04/15] rename dropdown-menu to item-dropdown-menu --- .../src/components/dirent-list-view/dirent-list-item.js | 6 +++--- .../{dropdown-menu.js => item-dropdown-menu.js} | 6 +++--- .../components/toolbar/mutilple-dir-operation-toolbar.js | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) rename frontend/src/components/dropdown-menu/{dropdown-menu.js => item-dropdown-menu.js} (97%) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index edf87a84f2..9a32ba1e0b 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -6,7 +6,7 @@ import { gettext, siteRoot, mediaUrl } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import URLDecorator from '../../utils/url-decorator'; -import DropDownMenu from '../dropdown-menu/dropdown-menu'; +import ItemDropDownMenu from '../dropdown-menu/dropdown-menu'; import Rename from '../rename'; import ModalPortal from '../modal-portal'; import MoveDirentDialog from '../dialog/move-dirent-dialog'; @@ -429,7 +429,7 @@ class DirentListItem extends React.Component {
  • -
  • - {this.props.selectedDirentList.length === 1 && - Date: Sun, 21 Apr 2019 16:25:43 +0800 Subject: [PATCH 05/15] repair import bug --- frontend/src/components/dirent-list-view/dirent-list-item.js | 2 +- .../src/components/toolbar/mutilple-dir-operation-toolbar.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index 9a32ba1e0b..3ba49c636c 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -6,7 +6,7 @@ import { gettext, siteRoot, mediaUrl } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import URLDecorator from '../../utils/url-decorator'; -import ItemDropDownMenu from '../dropdown-menu/dropdown-menu'; +import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu'; import Rename from '../rename'; import ModalPortal from '../modal-portal'; import MoveDirentDialog from '../dialog/move-dirent-dialog'; diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js index cec6cf45e9..d169060bce 100644 --- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js +++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js @@ -13,7 +13,7 @@ import RelatedFileDialogs from '../dialog/related-file-dialogs'; import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import ZipDownloadDialog from '../dialog/zip-download-dialog'; import ModalPortal from '../modal-portal'; -import ItemDropDownMenu from '../dropdown-menu/dropdown-menu'; +import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu'; import '../../css/dirents-menu.css'; From 79462f5fd39c2f8a669ef5afbe460728e629ab46 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 16:27:20 +0800 Subject: [PATCH 06/15] package text-dropdown-menu for text-button dropdown menu --- .../dropdown-menu/item-dropdown-menu.js | 3 +- .../dropdown-menu/text-dropdown-menu.js | 105 ++++++++++++++++++ .../components/toolbar/view-file-toolbar.js | 36 +++--- 3 files changed, 129 insertions(+), 15 deletions(-) create mode 100644 frontend/src/components/dropdown-menu/text-dropdown-menu.js diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js index dcf73818dd..c8988d9b1c 100644 --- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js @@ -30,7 +30,6 @@ class ItemDropDownMenu extends React.Component { menuList: [], isItemMenuShow: false, }; - } componentDidMount() { @@ -96,7 +95,7 @@ class ItemDropDownMenu extends React.Component { onMenuItemClick = (event) => { let operation = event.target.dataset.toggle; - this.props.onMenuItemClick(operation); + this.props.onMenuItemClick(operation, event); } render() { diff --git a/frontend/src/components/dropdown-menu/text-dropdown-menu.js b/frontend/src/components/dropdown-menu/text-dropdown-menu.js new file mode 100644 index 0000000000..2087ad55c3 --- /dev/null +++ b/frontend/src/components/dropdown-menu/text-dropdown-menu.js @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import listener from '../context-menu/globalEventListener'; +import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; +import { gettext } from '../../utils/constants'; + +const propTypes = { + menuClass: PropTypes.string, + menuType: PropTypes.oneOf(['pc', 'mobile']), + menuChildren: PropTypes.string.isRequired, + menuList: PropTypes.array.isRequired, + isHandleContextMenuEvent: PropTypes.bool, + onMenuItemClick: PropTypes.func.isRequired, +}; + +class TextDropDownMenu extends React.Component { + + static defaultProps = { + isHandleContextMenuEvent: true, + menuType: 'pc', + }; + + constructor(props) { + super(props); + this.state = { + isItemMenuShow: false, + }; + } + + componentDidMount() { + if (this.props.isHandleContextMenuEvent) { + this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); + } + } + + componentWillUnmount() { + if (this.props.isHandleContextMenuEvent && this.listenerId) { + listener.unregister(this.listenerId); + } + } + + onShowMenu = () => { + // nothing todo + } + + onHideMenu = () => { + if (this.state.isItemMenuShow) { + this.setState({isItemMenuShow: false}); + } + } + + onDropdownToggleClick = (e) => { + e.preventDefault(); + e.stopPropagation(); + + this.toggleOperationMenu(); + } + + toggleOperationMenu = () => { + this.setState({isItemMenuShow: !this.state.isItemMenuShow}); + } + + onMenuItemClick = (event) => { + let operation = event.target.dataset.toggle; + this.props.onMenuItemClick(operation, event); + } + + render() { + let { menuClass, menuChildren, menuList } = this.props; + menuClass = 'btn btn-secondary operation-item ' + menuClass; + + if (!menuList.length) { + return ''; + } + + return ( + + + {menuChildren} + + + {menuList.map((menuItem, index) => { + if (menuItem === 'Divider') { + return ; + } else { + return ( + {menuItem.value} + ); + } + })} + + + ); + } +} + +TextDropDownMenu.propTypes = propTypes; + +export default TextDropDownMenu; diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js index f636d6e557..1809fb7404 100644 --- a/frontend/src/components/toolbar/view-file-toolbar.js +++ b/frontend/src/components/toolbar/view-file-toolbar.js @@ -4,10 +4,12 @@ import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 're import { Utils } from '../../utils/utils'; import { gettext, siteRoot } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; +import TextTranslation from '../../utils/text-translation'; import ModalPotal from '../modal-portal'; import ShareDialog from '../dialog/share-dialog'; import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import RelatedFileDialogs from '../dialog/related-file-dialogs'; +import TextDropDownMenu from '../dropdown-menu/text-dropdown-menu'; const propTypes = { path: PropTypes.string.isRequired, @@ -31,7 +33,6 @@ class ViewFileToolbar extends React.Component { super(props); this.state = { isDraftMessageShow: false, - isMoreMenuShow: false, isShareDialogShow: false, isEditTagDialogShow: false, isRelatedFileDialogShow: false, @@ -58,8 +59,20 @@ class ViewFileToolbar extends React.Component { this.setState({isDraftMessageShow: !this.state.isDraftMessageShow}); } - toggleMore = () => { - this.setState({isMoreMenuShow: !this.state.isMoreMenuShow}); + onMenuItemClick = (operation) => { + switch (operation) { + case 'Share': + this.onShareToggle(); + break; + case 'Tags': + this.onEditFileTagToggle(); + break; + case 'Related Files': + this.onListRelatedFileToggle(); + break; + default: + break; + } } onShareToggle = () => { @@ -104,16 +117,13 @@ class ViewFileToolbar extends React.Component { )} {filePermission === 'rw' && ( - - - {gettext('More')} - - - {gettext('Share')} - {gettext('Tags')} - {gettext('Related Files')} - - + )} {this.state.isShareDialogShow && ( From d90d486864044d619c78bbb40165ec8761c97d31 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 16:29:26 +0800 Subject: [PATCH 07/15] delete unnecessary code --- .../dirent-list-view/dirent-menu.js | 220 ------------------ .../dirent-list-view/dirents-menu.js | 101 -------- 2 files changed, 321 deletions(-) delete mode 100644 frontend/src/components/dirent-list-view/dirent-menu.js delete mode 100644 frontend/src/components/dirent-list-view/dirents-menu.js diff --git a/frontend/src/components/dirent-list-view/dirent-menu.js b/frontend/src/components/dirent-list-view/dirent-menu.js deleted file mode 100644 index 9fa4d33350..0000000000 --- a/frontend/src/components/dirent-list-view/dirent-menu.js +++ /dev/null @@ -1,220 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import listener from '../context-menu/globalEventListener'; -import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; -import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants'; - -const propTypes = { - dirent: PropTypes.object.isRequired, - currentRepoInfo: PropTypes.object.isRequired, - isRepoOwner: PropTypes.bool.isRequired, - onMenuItemClick: PropTypes.func.isRequired, - onFreezedItem: PropTypes.func.isRequired, - onUnfreezedItem: PropTypes.func.isRequired, -}; - -class DirentMenu extends React.Component { - - constructor(props) { - super(props); - this.state = { - isItemMenuShow: false, - menuList: [], - }; - } - - componentDidMount() { - this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); - let { currentRepoInfo, dirent, isRepoOwner } = this.props; - let menuList = this.calculateMenuList(currentRepoInfo, dirent, isRepoOwner); - this.setState({menuList: menuList}); - } - - componentWillReceiveProps(nextProps) { - let { currentRepoInfo, dirent, isRepoOwner } = nextProps; - let menuList = this.calculateMenuList(currentRepoInfo, dirent, isRepoOwner); - this.setState({menuList: menuList}); - - } - - componentWillUnmount () { - if (this.listenerId) { - listener.unregister(this.listenerId); - } - } - - onShowMenu = () => { - // nothing todo - } - - onHideMenu = () => { - if (this.state.isItemMenuShow) { - this.setState({isItemMenuShow: false}); - this.props.onUnfreezedItem(); - } - } - - calculateMenuList(currentRepoInfo, dirent, isRepoOwner) { - - let type = dirent.type; - let permission = dirent.permission; - let can_set_folder_perm = folderPermEnabled && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin); - if (type === 'dir' && permission === 'rw') { - let menuList = []; - if (can_set_folder_perm) { - menuList = ['Rename', 'Move', 'Copy', 'Divider', 'Permission', 'Divider', 'Open via Client']; - } else { - menuList = ['Rename', 'Move', 'Copy', 'Divider', 'Open via Client']; - } - return menuList; - } - - if (type === 'dir' && permission === 'r') { - let menuList = currentRepoInfo.encrypted ? ['Copy'] : []; - return menuList; - } - - if (type === 'file' && permission === 'rw') { - let menuList = []; - if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) { - menuList.push('Rename'); - menuList.push('Move'); - } - menuList.push('Copy'); - menuList.push('Tags'); - if (isPro) { - if (dirent.is_locked) { - if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && permission === 'rw')) { - menuList.push('Unlock'); - } - } else { - menuList.push('Lock'); - } - } - menuList.push('Divider'); - if (enableFileComment) { - menuList.push('Comment'); - } - menuList.push('History'); - if (fileAuditEnabled) { - menuList.push('Access Log'); - } - menuList.push('Divider'); - menuList.push('Open via Client'); - return menuList; - } - - if (type === 'file' && permission === 'r') { - let menuList = []; - if (!currentRepoInfo.encrypted) { - menuList.push('Copy'); - } - if (enableFileComment) { - menuList.push('Comment'); - } - menuList.push('History'); - return menuList; - } - - return []; - } - - translateMenuItem = (menuItem) => { - let translateResult = ''; - switch(menuItem) { - case 'Rename': - translateResult = gettext('Rename'); - break; - case 'Move': - translateResult = gettext('Move'); - break; - case 'Copy': - translateResult = gettext('Copy'); - break; - case 'Tags': - translateResult = gettext('Tags'); - break; - case 'Permission': - translateResult = gettext('Permission'); - break; - case 'Unlock': - translateResult = gettext('Unlock'); - break; - case 'Lock': - translateResult = gettext('Lock'); - break; - case 'Comment': - translateResult = gettext('Comment'); - break; - case 'History': - translateResult = gettext('History'); - break; - case 'Access Log': - translateResult = gettext('Access Log'); - break; - case 'Open via Client': - translateResult = gettext('Open via Client'); - break; - default: - break; - } - return translateResult; - } - - onDropdownToggleClick = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.toggleOperationMenu(); - } - - toggleOperationMenu = () => { - this.setState( - {isItemMenuShow: !this.state.isItemMenuShow}, - () => { - if (this.state.isItemMenuShow) { - this.props.onFreezedItem(); - } else { - this.props.onUnfreezedItem(); - } - } - ); - } - - onMenuItemClick = (event) => { - let operation = event.target.dataset.toggle; - this.props.onMenuItemClick(operation); - } - - render() { - if (!this.state.menuList.length) { - return ''; - } - return ( - - - - {this.state.menuList.map((menuItem, index) => { - if (menuItem === 'Divider') { - return ; - } else { - return ( - {this.translateMenuItem(menuItem)} - ); - } - })} - - - ); - } -} - -DirentMenu.propTypes = propTypes; - -export default DirentMenu; diff --git a/frontend/src/components/dirent-list-view/dirents-menu.js b/frontend/src/components/dirent-list-view/dirents-menu.js deleted file mode 100644 index bb1319c9fe..0000000000 --- a/frontend/src/components/dirent-list-view/dirents-menu.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap'; -import { Utils } from '../../utils/utils'; -import { gettext, isPro } from '../../utils/constants'; -import TextTranslation from '../../utils/text-translation'; - -import '../../css/dirents-menu.css'; - -const propTypes = { - dirent: PropTypes.object.isRequired, - currentRepoInfo: PropTypes.object.isRequired, - onMenuItemClick: PropTypes.func.isRequired, -}; - -class DirentMenu extends React.Component { - - constructor(props) { - super(props); - this.state = { - isItemMenuShow: false, - menuList: [], - }; - } - - componentDidMount() { - const { currentRepoInfo, dirent } = this.props; - let menuList = this.calculateMenuList(currentRepoInfo, dirent); - this.setState({menuList: menuList}); - } - - componentWillReceiveProps(nextProps) { - const { currentRepoInfo, dirent } = nextProps; - let menuList = this.calculateMenuList(currentRepoInfo, dirent); - this.setState({menuList: menuList}); - } - - calculateMenuList(currentRepoInfo, dirent) { - let menuList = []; - const { SHARE, TAGS, RELATED_FILES, HISTORY, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation; - - if (dirent.type === 'dir') { - menuList = [SHARE]; - return menuList; - } - - if (dirent.type === 'file') { - menuList = [SHARE, TAGS, RELATED_FILES, 'Divider', HISTORY, 'Divider', OPEN_VIA_CLIENT]; - if (!Utils.isMarkdownFile(dirent.name)) { - menuList.splice(2, 1); - } - if (isPro) { - if (dirent.is_locked) { - if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) { - menuList.splice(1, 0, UNLOCK); - } - } else { - menuList.splice(1, 0, LOCK); - } - } - return menuList; - } - } - - onDropdownToggleClick = (e) => { - e.preventDefault(); - this.setState({ - isItemMenuShow: !this.state.isItemMenuShow, - }); - } - - onMenuItemClick = (event) => { - let operation = event.target.dataset.toggle; - this.props.onMenuItemClick(operation, this.props.dirent); - } - - render() { - - return ( - - - - - {this.state.menuList.map((menuItem, index) => { - if (menuItem === 'Divider') { - return ; - } else { - return ( - {menuItem.value} - ); - } - })} - - - ); - } -} - -DirentMenu.propTypes = propTypes; - -export default DirentMenu; From 3a3b9e213a5fd84a0a5538ea986300b5b99ef84d Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 16:44:15 +0800 Subject: [PATCH 08/15] improve tree-node-menu code --- .../components/tree-view/tree-node-menu.js | 137 ------------------ .../components/tree-view/tree-node-view.js | 25 +++- 2 files changed, 18 insertions(+), 144 deletions(-) delete mode 100644 frontend/src/components/tree-view/tree-node-menu.js diff --git a/frontend/src/components/tree-view/tree-node-menu.js b/frontend/src/components/tree-view/tree-node-menu.js deleted file mode 100644 index deab669009..0000000000 --- a/frontend/src/components/tree-view/tree-node-menu.js +++ /dev/null @@ -1,137 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import listener from '../context-menu/globalEventListener'; -import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; -import { gettext } from '../../utils/constants'; - -const propTypes = { - node: PropTypes.object.isRequired, - onMenuItemClick: PropTypes.func.isRequired, - onFreezedItem: PropTypes.func.isRequired, - onUnFreezedItem: PropTypes.func.isRequired, -}; - -class TreeNodeMenu extends React.Component { - - constructor(props) { - super(props); - this.state = { - isItemMenuShow: false, - menuList: [] - }; - } - - componentDidMount() { - let menuList = this.caculateMenuList(); - this.setState({menuList: menuList}); - this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); - } - - componentWillUnmount () { - if (this.listenerId) { - listener.unregister(this.listenerId); - } - } - - onShowMenu = () => { - // nothing todo - } - - onHideMenu = () => { - if (this.state.isItemMenuShow) { - this.setState({isItemMenuShow: false}); - this.props.onUnFreezedItem(); - } - } - - caculateMenuList() { - let { node } = this.props; - let menuList = []; - if (node.object.type === 'dir') { - menuList = ['New Folder', 'New File', 'Copy', 'Move', 'Rename', 'Delete']; - } else { - menuList = ['Rename', 'Delete', 'Copy', 'Move', 'Open in New Tab']; - } - return menuList; - } - - translateMenuItem = (menuItem) => { - let translateResult = ''; - switch(menuItem) { - case 'New Folder': - translateResult = gettext('New Folder'); - break; - case 'New File': - translateResult = gettext('New File'); - break; - case 'Rename': - translateResult = gettext('Rename'); - break; - case 'Copy': - translateResult = gettext('Copy'); - break; - case 'Move': - translateResult = gettext('Move'); - break; - case 'Delete': - translateResult = gettext('Delete'); - break; - case 'Open in New Tab': - translateResult = gettext('Open in New Tab'); - break; - default: - break; - } - return translateResult; - } - - onDropdownToggleClick = (e) => { - e.preventDefault(); - this.toggleOperationMenu(e); - } - - toggleOperationMenu = (e) => { - e.stopPropagation(); - this.setState( - {isItemMenuShow: !this.state.isItemMenuShow }, () => { - if (this.state.isItemMenuShow) { - this.props.onFreezedItem(); - } else { - this.props.onUnFreezedItem(); - } - } - ); - } - - onMenuItemClick = (event) => { - let operation = event.target.dataset.toggle; - let node = this.props.node; - this.props.onMenuItemClick(operation, node); - } - - render() { - return ( - - - - {this.state.menuList.map((menuItem, index) => { - return ( - {this.translateMenuItem(menuItem)} - ); - })} - - - ); - } -} - -TreeNodeMenu.propTypes = propTypes; - -export default TreeNodeMenu; diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js index 2e08d8a579..8822999843 100644 --- a/frontend/src/components/tree-view/tree-node-view.js +++ b/frontend/src/components/tree-view/tree-node-view.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import TreeNodeMenu from './tree-node-menu'; import { permission } from '../../utils/constants'; +import TextTranslation from '../../utils/text-translation'; +import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu'; const propTypes = { repoPermission: PropTypes.bool, @@ -168,6 +169,16 @@ class TreeNodeView extends React.Component { return {icon, type}; } + caculateMenuList(node) { + let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} = TextTranslation; + + if (node.object.type === 'dir') { + return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE]; + } + + return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT]; + } + renderChildren = () => { let { node, paddingLeft } = this.props; if (!node.hasChildren()) { @@ -242,14 +253,14 @@ class TreeNodeView extends React.Component { {isNodeMenuShow && (
    {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && ( - )}
    From 57d3865c7ff42e710ef45d16f0ea2c6d56ee7b21 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 17:31:28 +0800 Subject: [PATCH 09/15] repair bug --- .../components/dirent-list-view/dirent-list-item.js | 2 +- .../components/dropdown-menu/item-dropdown-menu.js | 5 +++-- frontend/src/components/toolbar/view-file-toolbar.js | 2 +- frontend/src/components/tree-view/tree-node-view.js | 12 ++++++------ frontend/src/components/tree-view/tree-view.js | 6 +++--- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index 3ba49c636c..e36380545e 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -173,7 +173,7 @@ class DirentListItem extends React.Component { this.setState({isShareDialogShow: !this.state.isShareDialogShow}); } - onMenuItemClick = (operation, event) => { + onMenuItemClick = (operation, opDirent, event) => { switch(operation) { case 'Download': this.onItemDownload(event); diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js index c8988d9b1c..eb471bb0b6 100644 --- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js @@ -95,7 +95,8 @@ class ItemDropDownMenu extends React.Component { onMenuItemClick = (event) => { let operation = event.target.dataset.toggle; - this.props.onMenuItemClick(operation, event); + let opItem = this.props.opItem; + this.props.onMenuItemClick(operation, opItem, event); } render() { @@ -134,7 +135,7 @@ class ItemDropDownMenu extends React.Component { } return ( - + { + onUnfreezedItem = () => { this.setState({isShowOperationMenu: false}); - this.props.onUnFreezedItem(); + this.props.onUnfreezedItem(); } onMenuItemClick = (operation, node) => { @@ -201,7 +201,7 @@ class TreeNodeView extends React.Component { onNodeExpanded={this.props.onNodeExpanded} onFreezedItem={this.props.onFreezedItem} onMenuItemClick={this.onMenuItemClick} - onUnFreezedItem={this.onUnFreezedItem} + onUnfreezedItem={this.onUnfreezedItem} onNodeChanged={this.props.onNodeChanged} registerHandlers={this.props.registerHandlers} unregisterHandlers={this.props.unregisterHandlers} @@ -259,8 +259,8 @@ class TreeNodeView extends React.Component { menuType={'pc'} getOpItemMenuList={this.caculateMenuList} onMenuItemClick={this.onMenuItemClick} - onFreezedItem={this.onFreezedItem} - onUnFreezedItem={this.onUnFreezedItem} + onFreezedItem={this.props.onFreezedItem} + onUnfreezedItem={this.onUnfreezedItem} /> )} diff --git a/frontend/src/components/tree-view/tree-view.js b/frontend/src/components/tree-view/tree-view.js index 4e5ad5eed9..c0a3ab3b55 100644 --- a/frontend/src/components/tree-view/tree-view.js +++ b/frontend/src/components/tree-view/tree-view.js @@ -116,7 +116,7 @@ class TreeView extends React.Component { this.setState({isItemFreezed: true}); } - onUnFreezedItem = () => { + onUnfreezedItem = () => { this.setState({isItemFreezed: false}); } @@ -198,7 +198,7 @@ class TreeView extends React.Component { } onHideMenu = () => { - this.onUnFreezedItem(); + this.onUnfreezedItem(); } render() { @@ -224,7 +224,7 @@ class TreeView extends React.Component { onNodeCollapse={this.props.onNodeCollapse} onNodeDragStart={this.onNodeDragStart} onFreezedItem={this.onFreezedItem} - onUnFreezedItem={this.onUnFreezedItem} + onUnfreezedItem={this.onUnfreezedItem} onNodeDragMove={this.onNodeDragMove} onNodeDrop={this.onNodeDrop} onNodeDragEnter={this.onNodeDragEnter} From 025fe6e29de682e21cfdfc7e4f5124856844abc3 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Sun, 21 Apr 2019 17:56:55 +0800 Subject: [PATCH 10/15] repair bug --- frontend/src/components/dirent-list-view/dirent-list-item.js | 2 +- frontend/src/components/dropdown-menu/item-dropdown-menu.js | 2 +- frontend/src/components/tree-view/tree-node-view.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index e36380545e..3ba49c636c 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -173,7 +173,7 @@ class DirentListItem extends React.Component { this.setState({isShareDialogShow: !this.state.isShareDialogShow}); } - onMenuItemClick = (operation, opDirent, event) => { + onMenuItemClick = (operation, event) => { switch(operation) { case 'Download': this.onItemDownload(event); diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js index eb471bb0b6..0a688c7ec5 100644 --- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js @@ -96,7 +96,7 @@ class ItemDropDownMenu extends React.Component { onMenuItemClick = (event) => { let operation = event.target.dataset.toggle; let opItem = this.props.opItem; - this.props.onMenuItemClick(operation, opItem, event); + this.props.onMenuItemClick(operation, event, opItem); } render() { diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js index 9d4f783093..3c196c0111 100644 --- a/frontend/src/components/tree-view/tree-node-view.js +++ b/frontend/src/components/tree-view/tree-node-view.js @@ -118,7 +118,7 @@ class TreeNodeView extends React.Component { this.props.onUnfreezedItem(); } - onMenuItemClick = (operation, node) => { + onMenuItemClick = (operation, event, node) => { this.props.onMenuItemClick(operation, node); } @@ -200,7 +200,7 @@ class TreeNodeView extends React.Component { onNodeCollapse={this.props.onNodeCollapse} onNodeExpanded={this.props.onNodeExpanded} onFreezedItem={this.props.onFreezedItem} - onMenuItemClick={this.onMenuItemClick} + onMenuItemClick={this.props.onMenuItemClick} onUnfreezedItem={this.onUnfreezedItem} onNodeChanged={this.props.onNodeChanged} registerHandlers={this.props.registerHandlers} From 546313a3a763bee20d7b65d7286d3f9996c5f46e Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 22 Apr 2019 10:29:41 +0800 Subject: [PATCH 11/15] revert code to last version --- .../dropdown-menu/text-dropdown-menu.js | 105 ------------------ .../components/toolbar/view-file-toolbar.js | 40 +++---- 2 files changed, 15 insertions(+), 130 deletions(-) delete mode 100644 frontend/src/components/dropdown-menu/text-dropdown-menu.js diff --git a/frontend/src/components/dropdown-menu/text-dropdown-menu.js b/frontend/src/components/dropdown-menu/text-dropdown-menu.js deleted file mode 100644 index 2087ad55c3..0000000000 --- a/frontend/src/components/dropdown-menu/text-dropdown-menu.js +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import listener from '../context-menu/globalEventListener'; -import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; -import { gettext } from '../../utils/constants'; - -const propTypes = { - menuClass: PropTypes.string, - menuType: PropTypes.oneOf(['pc', 'mobile']), - menuChildren: PropTypes.string.isRequired, - menuList: PropTypes.array.isRequired, - isHandleContextMenuEvent: PropTypes.bool, - onMenuItemClick: PropTypes.func.isRequired, -}; - -class TextDropDownMenu extends React.Component { - - static defaultProps = { - isHandleContextMenuEvent: true, - menuType: 'pc', - }; - - constructor(props) { - super(props); - this.state = { - isItemMenuShow: false, - }; - } - - componentDidMount() { - if (this.props.isHandleContextMenuEvent) { - this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); - } - } - - componentWillUnmount() { - if (this.props.isHandleContextMenuEvent && this.listenerId) { - listener.unregister(this.listenerId); - } - } - - onShowMenu = () => { - // nothing todo - } - - onHideMenu = () => { - if (this.state.isItemMenuShow) { - this.setState({isItemMenuShow: false}); - } - } - - onDropdownToggleClick = (e) => { - e.preventDefault(); - e.stopPropagation(); - - this.toggleOperationMenu(); - } - - toggleOperationMenu = () => { - this.setState({isItemMenuShow: !this.state.isItemMenuShow}); - } - - onMenuItemClick = (event) => { - let operation = event.target.dataset.toggle; - this.props.onMenuItemClick(operation, event); - } - - render() { - let { menuClass, menuChildren, menuList } = this.props; - menuClass = 'btn btn-secondary operation-item ' + menuClass; - - if (!menuList.length) { - return ''; - } - - return ( - - - {menuChildren} - - - {menuList.map((menuItem, index) => { - if (menuItem === 'Divider') { - return ; - } else { - return ( - {menuItem.value} - ); - } - })} - - - ); - } -} - -TextDropDownMenu.propTypes = propTypes; - -export default TextDropDownMenu; diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js index f6389e3d6a..f5834c5ba6 100644 --- a/frontend/src/components/toolbar/view-file-toolbar.js +++ b/frontend/src/components/toolbar/view-file-toolbar.js @@ -1,15 +1,13 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { Tooltip} from 'reactstrap'; +import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 'reactstrap'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; -import TextTranslation from '../../utils/text-translation'; import ModalPotal from '../modal-portal'; import ShareDialog from '../dialog/share-dialog'; import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import RelatedFileDialogs from '../dialog/related-file-dialogs'; -import TextDropDownMenu from '../dropdown-menu/text-dropdown-menu'; const propTypes = { path: PropTypes.string.isRequired, @@ -33,6 +31,7 @@ class ViewFileToolbar extends React.Component { super(props); this.state = { isDraftMessageShow: false, + isMoreMenuShow: false, isShareDialogShow: false, isEditTagDialogShow: false, isRelatedFileDialogShow: false, @@ -59,20 +58,8 @@ class ViewFileToolbar extends React.Component { this.setState({isDraftMessageShow: !this.state.isDraftMessageShow}); } - onMenuItemClick = (operation) => { - switch (operation) { - case 'Share': - this.onShareToggle(); - break; - case 'Tags': - this.onEditFileTagToggle(); - break; - case 'Related Files': - this.onListRelatedFileToggle(); - break; - default: - break; - } + toggleMore = () => { + this.setState({isMoreMenuShow: !this.state.isMoreMenuShow}); } onShareToggle = () => { @@ -117,13 +104,16 @@ class ViewFileToolbar extends React.Component { )} {filePermission === 'rw' && ( - + + + {gettext('More')} + + + {gettext('Share')} + {gettext('Tags')} + {gettext('Related Files')} + + )} {this.state.isShareDialogShow && ( @@ -172,4 +162,4 @@ class ViewFileToolbar extends React.Component { ViewFileToolbar.propTypes = propTypes; -export default ViewFileToolbar; +export default ViewFileToolbar; \ No newline at end of file From ddb7ec369e2f21813943ee49fe94f6c1d1eb025f Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 22 Apr 2019 11:19:26 +0800 Subject: [PATCH 12/15] delete item-dropdown-menu unnecessary code --- .../dirent-list-view/dirent-list-item.js | 1 - .../dropdown-menu/item-dropdown-menu.js | 15 ++++----------- .../toolbar/mutilple-dir-operation-toolbar.js | 1 - .../src/components/tree-view/tree-node-view.js | 1 - 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index 3ba49c636c..d826d52beb 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -431,7 +431,6 @@ class DirentListItem extends React.Component {
  • Date: Mon, 22 Apr 2019 12:18:35 +0800 Subject: [PATCH 13/15] optimized code --- .../dirent-list-view/dirent-list-item.js | 23 +++++++++---------- .../dirent-list-view/dirent-list-view.js | 14 +++++------ .../dropdown-menu/item-dropdown-menu.js | 22 +++++++++--------- .../toolbar/mutilple-dir-operation-toolbar.js | 2 +- .../components/tree-view/tree-node-view.js | 18 +++++++-------- .../src/components/tree-view/tree-view.js | 12 +++++----- 6 files changed, 45 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index d826d52beb..a6a56372db 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -24,8 +24,8 @@ const propTypes = { showShareBtn: PropTypes.bool.isRequired, dirent: PropTypes.object.isRequired, onItemClick: PropTypes.func.isRequired, - onFreezedItem: PropTypes.func.isRequired, - onUnfreezedItem: PropTypes.func.isRequired, + freezeItem: PropTypes.func.isRequired, + unfreezeItem: PropTypes.func.isRequired, onItemRenameToggle: PropTypes.func.isRequired, onItemSelected: PropTypes.func.isRequired, onItemDelete: PropTypes.func.isRequired, @@ -110,12 +110,12 @@ class DirentListItem extends React.Component { this.setState({isDragTipShow: false}); } - onUnfreezedItem = () => { + unfreezeItem = () => { this.setState({ highlight: false, isOperationShow: false, }); - this.props.onUnfreezedItem(); + this.props.unfreezeItem(); } //buiness handler @@ -248,7 +248,7 @@ class DirentListItem extends React.Component { onRenameCancel = () => { this.setState({isRenameing: false}); - this.onUnfreezedItem(); + this.unfreezeItem(); } onItemMoveToggle = () => { @@ -433,10 +433,10 @@ class DirentListItem extends React.Component { opItem={this.props.dirent} menuClass={'sf2-icon-caret-down'} isHandleContextMenuEvent={true} - getOpItemMenuList={this.props.getDirentItemMenuList} + getMenuList={this.props.getDirentItemMenuList} onMenuItemClick={this.onMenuItemClick} - onUnfreezedItem={this.onUnfreezedItem} - onFreezedItem={this.props.onFreezedItem} + unfreezeItem={this.unfreezeItem} + freezeItem={this.props.freezeItem} />
    • @@ -461,13 +461,12 @@ class DirentListItem extends React.Component {
    • diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 6c1402f193..5b28016eb6 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -78,11 +78,11 @@ class DirentListView extends React.Component { this.zipToken = null; } - onFreezedItem = () => { + freezeItem = () => { this.setState({isItemFreezed: true}); } - onUnfreezedItem = () => { + unfreezeItem = () => { this.setState({isItemFreezed: false}); } @@ -100,7 +100,7 @@ class DirentListView extends React.Component { } onItemRenameToggle = () => { - this.onFreezedItem(); + this.freezeItem(); } onItemSelected = (dirent) => { @@ -425,11 +425,11 @@ class DirentListView extends React.Component { } onShowMenu = (e) => { - this.onFreezedItem(); + this.freezeItem(); } onHideMenu = (e) => { - this.onUnfreezedItem(); + this.unfreezeItem(); } // contextmenu utils @@ -575,8 +575,8 @@ class DirentListView extends React.Component { onItemCopy={this.props.onItemCopy} updateDirent={this.props.updateDirent} isItemFreezed={this.state.isItemFreezed} - onFreezedItem={this.onFreezedItem} - onUnfreezedItem={this.onUnfreezedItem} + freezeItem={this.freezeItem} + unfreezeItem={this.unfreezeItem} onDirentClick={this.onDirentClick} showImagePopup={this.showImagePopup} onItemMouseDown={this.onItemMouseDown} diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js index 9dce191322..c2ae297e36 100644 --- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js @@ -9,10 +9,10 @@ const propTypes = { opItem: PropTypes.object.isRequired, menuClass: PropTypes.string, isHandleContextMenuEvent: PropTypes.bool, - getOpItemMenuList: PropTypes.func.isRequired, + getMenuList: PropTypes.func.isRequired, onMenuItemClick: PropTypes.func.isRequired, - onFrezeedItem: PropTypes.func, - onUnfrezeedItem: PropTypes.func, + freezeItem: PropTypes.func, + unfreezeItem: PropTypes.func, }; class ItemDropDownMenu extends React.Component { @@ -35,14 +35,14 @@ class ItemDropDownMenu extends React.Component { this.listenerId = listener.register(this.onShowMenu, this.onHideMenu); } let { opItem } = this.props; - let menuList = this.props.getOpItemMenuList(opItem); + let menuList = this.props.getMenuList(opItem); this.setState({menuList: menuList}); } componentWillReceiveProps(nextProps) { // for toolbar opItem operation let { opItem } = nextProps; if (opItem.name !== this.props.opItem.name) { - let menuList = this.props.getOpItemMenuList(opItem); + let menuList = this.props.getMenuList(opItem); this.setState({menuList: menuList}); } } @@ -60,8 +60,8 @@ class ItemDropDownMenu extends React.Component { onHideMenu = () => { if (this.state.isItemMenuShow) { this.setState({isItemMenuShow: false}); - if (typeof(this.props.onUnfreezedItem) === 'function') { - this.props.onUnfreezedItem(); + if (typeof(this.props.unfreezeItem) === 'function') { + this.props.unfreezeItem(); } } } @@ -77,10 +77,10 @@ class ItemDropDownMenu extends React.Component { this.setState( {isItemMenuShow: !this.state.isItemMenuShow}, () => { - if (this.state.isItemMenuShow && typeof(this.props.onFreezedItem) === 'function') { - this.props.onFreezedItem(); - } else if (!this.state.isItemMenuShow && typeof(this.props.onUnfreezedItem) === 'function') { - this.props.onUnfreezedItem(); + if (this.state.isItemMenuShow && typeof(this.props.freezeItem) === 'function') { + this.props.freezeItem(); + } else if (!this.state.isItemMenuShow && typeof(this.props.unfreezeItem) === 'function') { + this.props.unfreezeItem(); } } ); diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js index 4c45159761..4fb2007b99 100644 --- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js +++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js @@ -287,7 +287,7 @@ class MutipleDirOperationToolbar extends React.Component { opItem={this.props.selectedDirentList[0]} menuClass={'fas fa-ellipsis-v dirents-more-menu'} onMenuItemClick={this.onMenuItemClick} - getOpItemMenuList={this.getDirentMenuList} + getMenuList={this.getDirentMenuList} /> } diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js index 8cae098e07..3b41bb4e7e 100644 --- a/frontend/src/components/tree-view/tree-node-view.js +++ b/frontend/src/components/tree-view/tree-node-view.js @@ -15,8 +15,8 @@ const propTypes = { onNodeExpanded: PropTypes.func.isRequired, onNodeCollapse: PropTypes.func.isRequired, onNodeDragStart: PropTypes.func.isRequired, - onFreezedItem: PropTypes.func.isRequired, - onUnfreezedItem: PropTypes.func.isRequired, + freezeItem: PropTypes.func.isRequired, + unfreezeItem: PropTypes.func.isRequired, onMenuItemClick: PropTypes.func, registerHandlers: PropTypes.func, unregisterHandlers: PropTypes.func, @@ -113,9 +113,9 @@ class TreeNodeView extends React.Component { this.props.onNodeDrop(e, this.props.node); } - onUnfreezedItem = () => { + unfreezeItem = () => { this.setState({isShowOperationMenu: false}); - this.props.onUnfreezedItem(); + this.props.unfreezeItem(); } onMenuItemClick = (operation, event, node) => { @@ -199,9 +199,9 @@ class TreeNodeView extends React.Component { onNodeClick={this.props.onNodeClick} onNodeCollapse={this.props.onNodeCollapse} onNodeExpanded={this.props.onNodeExpanded} - onFreezedItem={this.props.onFreezedItem} + freezeItem={this.props.freezeItem} onMenuItemClick={this.props.onMenuItemClick} - onUnfreezedItem={this.onUnfreezedItem} + unfreezeItem={this.unfreezeItem} onNodeChanged={this.props.onNodeChanged} registerHandlers={this.props.registerHandlers} unregisterHandlers={this.props.unregisterHandlers} @@ -256,10 +256,10 @@ class TreeNodeView extends React.Component { )} diff --git a/frontend/src/components/tree-view/tree-view.js b/frontend/src/components/tree-view/tree-view.js index c0a3ab3b55..4d906173bc 100644 --- a/frontend/src/components/tree-view/tree-view.js +++ b/frontend/src/components/tree-view/tree-view.js @@ -112,11 +112,11 @@ class TreeView extends React.Component { this.onItemMove(this.props.currentRepoInfo, nodeDirent, dropNodeData.path, nodeParentPath); } - onFreezedItem = () => { + freezeItem = () => { this.setState({isItemFreezed: true}); } - onUnfreezedItem = () => { + unfreezeItem = () => { this.setState({isItemFreezed: false}); } @@ -194,11 +194,11 @@ class TreeView extends React.Component { } onShowMenu = () => { - this.onFreezedItem(); + this.freezeItem(); } onHideMenu = () => { - this.onUnfreezedItem(); + this.unfreezeItem(); } render() { @@ -223,8 +223,8 @@ class TreeView extends React.Component { onNodeExpanded={this.props.onNodeExpanded} onNodeCollapse={this.props.onNodeCollapse} onNodeDragStart={this.onNodeDragStart} - onFreezedItem={this.onFreezedItem} - onUnfreezedItem={this.onUnfreezedItem} + freezeItem={this.freezeItem} + unfreezeItem={this.unfreezeItem} onNodeDragMove={this.onNodeDragMove} onNodeDrop={this.onNodeDrop} onNodeDragEnter={this.onNodeDragEnter} From 8b05873b37e86ddbaa81ae6a7f621c8fa22cb1d0 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 22 Apr 2019 14:00:16 +0800 Subject: [PATCH 14/15] improve code --- .../dirent-list-view/dirent-list-item.js | 10 ++++---- .../dropdown-menu/item-dropdown-menu.js | 24 +++++++++---------- .../toolbar/mutilple-dir-operation-toolbar.js | 6 ++--- .../components/tree-view/tree-node-view.js | 6 ++--- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index a6a56372db..92aa16c12d 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -6,7 +6,7 @@ import { gettext, siteRoot, mediaUrl } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import { seafileAPI } from '../../utils/seafile-api'; import URLDecorator from '../../utils/url-decorator'; -import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu'; +import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu'; import Rename from '../rename'; import ModalPortal from '../modal-portal'; import MoveDirentDialog from '../dialog/move-dirent-dialog'; @@ -429,8 +429,8 @@ class DirentListItem extends React.Component {
  • -
  • - { let operation = event.target.dataset.toggle; - let opItem = this.props.opItem; - this.props.onMenuItemClick(operation, event, opItem); + let item = this.props.item; + this.props.onMenuItemClick(operation, event, item); } render() { @@ -153,6 +153,6 @@ class ItemDropDownMenu extends React.Component { } } -ItemDropDownMenu.propTypes = propTypes; +ItemDropdownMenu.propTypes = propTypes; -export default ItemDropDownMenu; +export default ItemDropdownMenu; diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js index 4fb2007b99..b00ca5860d 100644 --- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js +++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js @@ -13,7 +13,7 @@ import RelatedFileDialogs from '../dialog/related-file-dialogs'; import EditFileTagDialog from '../dialog/edit-filetag-dialog'; import ZipDownloadDialog from '../dialog/zip-download-dialog'; import ModalPortal from '../modal-portal'; -import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu'; +import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu'; import '../../css/dirents-menu.css'; @@ -282,9 +282,9 @@ class MutipleDirOperationToolbar extends React.Component { {this.props.selectedDirentList.length === 1 && - {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && ( - Date: Mon, 22 Apr 2019 15:15:51 +0800 Subject: [PATCH 15/15] improve class naming --- .../components/dirent-list-view/dirent-list-item.js | 4 ++-- .../components/dropdown-menu/item-dropdown-menu.js | 12 ++++++------ .../toolbar/mutilple-dir-operation-toolbar.js | 2 +- frontend/src/components/tree-view/tree-node-view.js | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js index 92aa16c12d..f2aad49bc8 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -431,7 +431,7 @@ class DirentListItem extends React.Component {
  • diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js index 7d885497d6..4729a973b4 100644 --- a/frontend/src/components/tree-view/tree-node-view.js +++ b/frontend/src/components/tree-view/tree-node-view.js @@ -255,7 +255,7 @@ class TreeNodeView extends React.Component { {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (