From ef3d5e5c6f85a55f4e24e297071c560869dc84c7 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Tue, 11 Dec 2018 13:22:52 +0800 Subject: [PATCH] change menu implatement method --- frontend/config/server.js | 4 +- frontend/config/webpack.config.dev.js | 2 +- frontend/package-lock.json | 10 +- frontend/package.json | 2 +- .../wiki-list-view/wiki-list-item.js | 106 +++++++++--------- .../wiki-list-view/wiki-list-view.js | 5 +- .../components/wiki-list-view/wiki-menu.js | 28 ----- frontend/src/pages/wikis/wiki-add.js | 31 ----- frontend/src/pages/wikis/wikis.js | 63 ++++------- 9 files changed, 85 insertions(+), 166 deletions(-) delete mode 100644 frontend/src/components/wiki-list-view/wiki-menu.js delete mode 100644 frontend/src/pages/wikis/wiki-add.js diff --git a/frontend/config/server.js b/frontend/config/server.js index 77d4ca031a..c2b5f7eb5f 100644 --- a/frontend/config/server.js +++ b/frontend/config/server.js @@ -15,10 +15,10 @@ const devServerOptions = Object.assign({}, config.devServer, { console.log('Dev server options:', devServerOptions); const server = new WebpackDevServer(compiler, devServerOptions); -server.listen(3001, '0.0.0.0', function (err, result) { +server.listen(3000, '0.0.0.0', function (err, result) { if (err) { console.log(err) } - console.log('Listening at 0.0.0.0:3001') + console.log('Listening at 0.0.0.0:3000') }) diff --git a/frontend/config/webpack.config.dev.js b/frontend/config/webpack.config.dev.js index 7c90b19e38..c9d33652c4 100644 --- a/frontend/config/webpack.config.dev.js +++ b/frontend/config/webpack.config.dev.js @@ -15,7 +15,7 @@ const BundleTracker = require('webpack-bundle-tracker'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. -const publicPath = 'http://127.0.0.1:3001/assets/bundles/'; +const publicPath = 'http://127.0.0.1:3000/assets/bundles/'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 20483b73f0..903f12c532 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -180,7 +180,7 @@ "dependencies": { "reactstrap": { "version": "5.0.0", - "resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz", "integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==", "requires": { "classnames": "^2.2.3", @@ -640,7 +640,7 @@ }, "axios": { "version": "0.18.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz", "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", "requires": { "follow-redirects": "^1.3.0", @@ -10793,9 +10793,9 @@ } }, "seafile-js": { - "version": "0.2.42", - "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.42.tgz", - "integrity": "sha512-qbia7tcIRRtI16ks42ocJHd2i1z7QkfsvqGawATKtrnvij2kXNRnTnZqwbHpSjv1H1yctots+NN9F1JRziHDkQ==", + "version": "0.2.43", + "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.43.tgz", + "integrity": "sha512-9Y3pssifTbHMEbsa7aQEHMuiauOZzSj2/L1Z8IhMLBDtO58Zp5wgn4FmDCeNR1tRPGIsJbFYaMOMBjwYGy3p9w==", "requires": { "axios": "^0.18.0", "form-data": "^2.3.2", diff --git a/frontend/package.json b/frontend/package.json index ddf844003c..c1ab5c4f60 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,7 +29,7 @@ "react-moment": "^0.7.9", "react-select": "^2.1.1", "reactstrap": "^6.4.0", - "seafile-js": "^0.2.42", + "seafile-js": "^0.2.43", "seafile-ui": "^0.1.10", "sw-precache-webpack-plugin": "0.11.4", "unified": "^7.0.0", diff --git a/frontend/src/components/wiki-list-view/wiki-list-item.js b/frontend/src/components/wiki-list-view/wiki-list-item.js index 1f2aac22f9..5dab735fa9 100644 --- a/frontend/src/components/wiki-list-view/wiki-list-item.js +++ b/frontend/src/components/wiki-list-view/wiki-list-item.js @@ -1,12 +1,11 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; +import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { gettext, siteRoot } from '../../utils/constants'; +import Toast from '../toast'; import ModalPortal from '../modal-portal'; import WikiDeleteDialog from '../dialog/wiki-delete-dialog'; -import MenuControl from '../menu-control'; -import Toast from '../toast'; -import WikiMenu from './wiki-menu'; import WikiRename from './wiki-rename'; const propTypes = { @@ -23,58 +22,42 @@ class WikiListItem extends Component { super(props); this.state = { isShowWikiMenu: false, - position: {top:'', left: ''}, isShowDeleteDialog: false, isShowMenuControl: false, isRenameing: false, - highlight: '', + highlight: false, }; } - componentDidMount() { - document.addEventListener('click', this.onHideWikiMenu); - } - - componentWillUnmount() { - document.removeEventListener('click', this.onHideWikiMenu); + clickMenuToggle = (e) => { + e.preventDefault(); + this.onMenuToggle(e); } onMenuToggle = (e) => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - - if (this.state.isShowWikiMenu) { - this.onHideWikiMenu(); - } else { - this.onShowWikiMenu(e); + let targetType = e.target.dataset.toggle; + if (targetType === 'dropdown') { + if (this.props.isItemFreezed) { + this.setState({ + highlight: false, + isShowMenuControl: false, + isShowWikiMenu: !this.state.isShowWikiMenu + }); + this.props.onUnfreezedItem(); + } else { + this.setState({ + isShowWikiMenu: !this.state.isShowWikiMenu + }); + this.props.onFreezedItem(); + } } } - onShowWikiMenu = (e) => { - let left = e.clientX - 8*16; - let top = e.clientY + 12; - let position = {top: top, left: left}; - this.setState({ - isShowWikiMenu: true, - position: position, - }); - this.props.onFreezedItem(); - } - - onHideWikiMenu = () => { - this.setState({ - isShowWikiMenu: false, - isShowMenuControl: false, - highlight: '', - }); - this.props.onUnfreezedItem(); - } - onMouseEnter = () => { if (!this.props.isItemFreezed) { this.setState({ isShowMenuControl: true, - highlight: 'tr-highlight', + highlight: true, }); } } @@ -83,13 +66,12 @@ class WikiListItem extends Component { if (!this.props.isItemFreezed) { this.setState({ isShowMenuControl: false, - highlight: '', + highlight: false, }); } } onRenameToggle = (e) => { - e.nativeEvent.stopImmediatePropagation(); this.props.onFreezedItem(); this.setState({ isShowWikiMenu: false, @@ -123,12 +105,21 @@ class WikiListItem extends Component { this.setState({isRenameing: false}); this.props.onUnfreezedItem(); } - + onDeleteToggle = () => { this.setState({ isShowDeleteDialog: !this.state.isShowDeleteDialog, + isShowWikiMenu: false, + isShowMenuControl: false, }); } + + onDeleteCancel = () => { + this.setState({ + isShowDeleteDialog: !this.state.isShowDeleteDialog, + }); + this.props.onUnfreezedItem(); + } renameWiki = (newName) => { let wiki = this.props.wiki; @@ -149,7 +140,7 @@ class WikiListItem extends Component { return ( - + {this.state.isRenameing ? : @@ -159,23 +150,28 @@ class WikiListItem extends Component { {gettext(wiki.owner_nickname)} {moment(wiki.updated_at).fromNow()} - - {this.state.isShowWikiMenu && - - } + {this.state.isShowMenuControl && ( + + + + {gettext('Rename')} + {gettext('Delete')} + + + )} {this.state.isShowDeleteDialog && diff --git a/frontend/src/components/wiki-list-view/wiki-list-view.js b/frontend/src/components/wiki-list-view/wiki-list-view.js index c5a81de03b..6631fc62b3 100644 --- a/frontend/src/components/wiki-list-view/wiki-list-view.js +++ b/frontend/src/components/wiki-list-view/wiki-list-view.js @@ -46,7 +46,7 @@ class WikiListView extends Component { {wikis.map((wiki, index) => { - return( + return ( ); + /> + ); })} diff --git a/frontend/src/components/wiki-list-view/wiki-menu.js b/frontend/src/components/wiki-list-view/wiki-menu.js deleted file mode 100644 index 1979178518..0000000000 --- a/frontend/src/components/wiki-list-view/wiki-menu.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { gettext } from '../../utils/constants'; - -const propTypes = { - position: PropTypes.object.isRequired, - onRenameToggle: PropTypes.func.isRequired, - onDeleteToggle: PropTypes.func.isRequired, -}; - -class WikiMenu extends React.Component { - - render() { - let position = this.props.position; - let style = {position: 'fixed', top: position.top, left: position.left, display: 'block'}; - - return ( -
    -
  • {gettext('Rename')}
    • -
  • {gettext('Delete')}
    • -
- ); - } -} - -WikiMenu.propTypes = propTypes; - -export default WikiMenu; diff --git a/frontend/src/pages/wikis/wiki-add.js b/frontend/src/pages/wikis/wiki-add.js deleted file mode 100644 index 3a452b1dcf..0000000000 --- a/frontend/src/pages/wikis/wiki-add.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { gettext } from '../../utils/constants'; - -const propTypes = { - isShowWikiAdd: PropTypes.bool.isRequired, - position: PropTypes.object.isRequired, - onSelectToggle: PropTypes.func.isRequired, - onCreateToggle: PropTypes.func.isRequired, -}; - -class WikiAdd extends React.Component { - - render() { - let style = {}; - let {isShowWikiAdd, position} = this.props; - if (isShowWikiAdd) { - style = {position: 'fixed', top: position.top, left: position.left, display: 'block'}; - } - return ( -
    -
  • {gettext('New Wiki')}
    • -
  • {gettext('Choose a library as Wiki')}
    • -
- ); - } -} - -WikiAdd.propTypes = propTypes; - -export default WikiAdd; diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js index 48e5c5fa7f..82ee291948 100644 --- a/frontend/src/pages/wikis/wikis.js +++ b/frontend/src/pages/wikis/wikis.js @@ -1,8 +1,8 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; +import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api'; import { gettext, loginUrl } from '../../utils/constants'; -import WikiAdd from './wiki-add'; import toaster from '../../components/toast'; import ModalPortal from '../../components/modal-portal'; import NewWikiDialog from '../../components/dialog/new-wiki-dialog'; @@ -25,14 +25,9 @@ class Wikis extends Component { } componentDidMount() { - document.addEventListener('click', this.onHideWikiAdd); this.getWikis(); } - componentWillUnmount() { - document.removeEventListener('click', this.onHideWikiAdd); - } - getWikis = () => { seafileAPI.listWikis().then(res => { this.setState({ @@ -62,31 +57,13 @@ class Wikis extends Component { }); } - onAddMenuToggle = (e) => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - - if (this.state.isShowWikiAdd) { - this.onHideWikiAdd(); - } else { - this.onShowWikiAdd(e); - } + clickMenuToggle = (e) => { + e.preventDefault(); + this.onMenuToggle(); } - onShowWikiAdd = (e) => { - let left = e.clientX - 10*20; - let top = e.clientY + 12; - let position = {top: top, left: left}; - this.setState({ - isShowWikiAdd: true, - position: position, - }); - } - - onHideWikiAdd = () => { - this.setState({ - isShowWikiAdd: false, - }); + onMenuToggle = () => { + this.setState({isShowWikiAdd: !this.state.isShowWikiAdd}) } onSelectToggle = () => { @@ -156,19 +133,23 @@ class Wikis extends Component {

{gettext('Wikis')}

- + + + {gettext(' Add Wiki')} + + + {gettext('New Wiki')} + {gettext('Choose a library as Wiki')} + +
- {this.state.isShowWikiAdd && - - }
{(this.state.loading || this.state.wikis.length !== 0) &&