diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/invite_member_modal.jsx | 40 | ||||
-rw-r--r-- | web/react/components/navbar_dropdown.jsx | 7 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 9 | ||||
-rw-r--r-- | web/react/components/user_settings/import_theme_modal.jsx | 5 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 6 | ||||
-rw-r--r-- | web/react/stores/modal_store.jsx | 42 | ||||
-rw-r--r-- | web/react/stores/user_store.jsx | 20 | ||||
-rw-r--r-- | web/react/utils/channel_intro_mssages.jsx | 6 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 3 |
9 files changed, 91 insertions, 47 deletions
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 71f72625d..c09477a69 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -2,7 +2,10 @@ // See License.txt for license information. var utils = require('../utils/utils.jsx'); +var ActionTypes = require('../utils/constants.jsx').ActionTypes; +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Client = require('../utils/client.jsx'); +var ModalStore = require('../stores/modal_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var ConfirmModal = require('./confirm_modal.jsx'); @@ -13,6 +16,7 @@ export default class InviteMemberModal extends React.Component { constructor(props) { super(props); + this.handleToggle = this.handleToggle.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleHide = this.handleHide.bind(this); this.addInviteFields = this.addInviteFields.bind(this); @@ -20,6 +24,7 @@ export default class InviteMemberModal extends React.Component { this.removeInviteFields = this.removeInviteFields.bind(this); this.state = { + show: false, inviteIds: [0], idCount: 0, emailErrors: {}, @@ -30,6 +35,20 @@ export default class InviteMemberModal extends React.Component { }; } + componentDidMount() { + ModalStore.addModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); + } + + componentWillUnmount() { + ModalStore.removeModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); + } + + handleToggle(value) { + this.setState({ + show: value + }); + } + handleSubmit() { if (!this.state.emailEnabled) { return; @@ -108,12 +127,14 @@ export default class InviteMemberModal extends React.Component { this.clearFields(); - this.setState({showConfirmModal: false}); - this.props.onModalDismissed(); + this.setState({ + show: false, + showConfirmModal: false + }); } - componentDidUpdate(prevProps) { - if (!prevProps.show && this.props.show) { + componentDidUpdate(prevProps, prevState) { + if (!prevState.show && this.state.show) { $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); @@ -331,7 +352,7 @@ export default class InviteMemberModal extends React.Component { <div> <Modal className='modal-invite-member' - show={this.props.show} + show={this.state.show} onHide={this.handleHide.bind(this, true)} enforceFocus={!this.state.showConfirmModal} > @@ -369,9 +390,14 @@ export default class InviteMemberModal extends React.Component { return null; } + + static show() { + AppDispatcher.handleViewAction({ + type: ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, + value: true + }); + } } InviteMemberModal.propTypes = { - show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired }; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index 81ff11fb5..6c4b278a0 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -46,7 +46,6 @@ export default class NavbarDropdown extends React.Component { const state = getStateFromStores(); state.showUserSettingsModal = false; state.showAboutModal = false; - state.showInviteMemberModal = false; this.state = state; } handleLogoutClick(e) { @@ -102,7 +101,7 @@ export default class NavbarDropdown extends React.Component { <li> <a href='#' - onClick={() => this.setState({showInviteMemberModal: true})} + onClick={InviteMemberModal.show} > {'Invite New Member'} </a> @@ -276,10 +275,6 @@ export default class NavbarDropdown extends React.Component { show={this.state.showAboutModal} onModalDismissed={this.aboutModalDismissed} /> - <InviteMemberModal - show={this.state.showInviteMemberModal} - onModalDismissed={() => this.setState({showInviteMemberModal: false})} - /> </ul> </li> </ul> diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 51f9ab1bc..2135e3ef3 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -19,8 +19,7 @@ export default class SidebarRightMenu extends React.Component { this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = { - showUserSettingsModal: false, - showInviteMemberModal: false + showUserSettingsModal: false }; } @@ -47,7 +46,7 @@ export default class SidebarRightMenu extends React.Component { <li> <a href='#' - onClick={() => this.setState({showInviteMemberModal: true})} + onClick={InviteMemberModal.show} > <i className='glyphicon glyphicon-user'></i>Invite New Member </a> @@ -156,10 +155,6 @@ export default class SidebarRightMenu extends React.Component { show={this.state.showUserSettingsModal} onModalDismissed={() => this.setState({showUserSettingsModal: false})} /> - <InviteMemberModal - show={this.state.showInviteMemberModal} - onModalDismissed={() => this.setState({showInviteMemberModal: false})} - /> </div> ); } diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx index 384226b20..24da106d0 100644 --- a/web/react/components/user_settings/import_theme_modal.jsx +++ b/web/react/components/user_settings/import_theme_modal.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +const ModalStore = require('../../stores/modal_store.jsx'); const UserStore = require('../../stores/user_store.jsx'); const Utils = require('../../utils/utils.jsx'); const Client = require('../../utils/client.jsx'); @@ -24,10 +25,10 @@ export default class ImportThemeModal extends React.Component { }; } componentDidMount() { - UserStore.addImportModalListener(this.updateShow); + ModalStore.addModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow); } componentWillUnmount() { - UserStore.removeImportModalListener(this.updateShow); + ModalStore.removeModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow); } updateShow(show) { this.setState({show}); diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 2e7a26d00..2f872effd 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -25,6 +25,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx'); var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx'); var RegisterAppModal = require('../components/register_app_modal.jsx'); var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx'); +var InviteMemberModal = require('../components/invite_member_modal.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Constants = require('../utils/constants.jsx'); @@ -79,6 +80,11 @@ function setupChannelPage(props) { ); ReactDOM.render( + <InviteMemberModal />, + document.getElementById('invite_member_modal') + ); + + ReactDOM.render( <ImportThemeModal />, document.getElementById('import_theme_modal') ); diff --git a/web/react/stores/modal_store.jsx b/web/react/stores/modal_store.jsx new file mode 100644 index 000000000..dc65d48da --- /dev/null +++ b/web/react/stores/modal_store.jsx @@ -0,0 +1,42 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const EventEmitter = require('events').EventEmitter; + +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; + +class ModalStoreClass extends EventEmitter { + constructor() { + super(); + + this.addModalListener = this.addModalListener.bind(this); + this.removeModalListener = this.removeModalListener.bind(this); + + this.handleEventPayload = this.handleEventPayload.bind(this); + this.dispatchToken = AppDispatcher.register(this.handleEventPayload); + } + + addModalListener(action, callback) { + this.on(action, callback); + } + + removeModalListener(action, callback) { + this.removeListener(action, callback); + } + + handleEventPayload(payload) { + const action = payload.action; + + switch (action.type) { + case ActionTypes.TOGGLE_IMPORT_THEME_MODAL: + case ActionTypes.TOGGLE_INVITE_MEMBER_MODAL: + this.emit(action.type, action.value); + break; + } + } +} + +const ModalStore = new ModalStoreClass(); +export default ModalStore; diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx index ce80c5ec9..2ad5a2ffa 100644 --- a/web/react/stores/user_store.jsx +++ b/web/react/stores/user_store.jsx @@ -13,7 +13,6 @@ var CHANGE_EVENT_SESSIONS = 'change_sessions'; var CHANGE_EVENT_AUDITS = 'change_audits'; var CHANGE_EVENT_TEAMS = 'change_teams'; var CHANGE_EVENT_STATUSES = 'change_statuses'; -var TOGGLE_IMPORT_MODAL_EVENT = 'toggle_import_modal'; class UserStoreClass extends EventEmitter { constructor() { @@ -34,9 +33,6 @@ class UserStoreClass extends EventEmitter { this.emitStatusesChange = this.emitStatusesChange.bind(this); this.addStatusesChangeListener = this.addStatusesChangeListener.bind(this); this.removeStatusesChangeListener = this.removeStatusesChangeListener.bind(this); - this.emitToggleImportModal = this.emitToggleImportModal.bind(this); - this.addImportModalListener = this.addImportModalListener.bind(this); - this.removeImportModalListener = this.removeImportModalListener.bind(this); this.getCurrentId = this.getCurrentId.bind(this); this.getCurrentUser = this.getCurrentUser.bind(this); this.setCurrentUser = this.setCurrentUser.bind(this); @@ -124,18 +120,6 @@ class UserStoreClass extends EventEmitter { this.removeListener(CHANGE_EVENT_STATUSES, callback); } - emitToggleImportModal(value) { - this.emit(TOGGLE_IMPORT_MODAL_EVENT, value); - } - - addImportModalListener(callback) { - this.on(TOGGLE_IMPORT_MODAL_EVENT, callback); - } - - removeImportModalListener(callback) { - this.removeListener(TOGGLE_IMPORT_MODAL_EVENT, callback); - } - getCurrentUser() { if (this.getProfiles()[global.window.mm_user.id] == null) { this.saveProfile(global.window.mm_user); @@ -350,10 +334,6 @@ UserStore.dispatchToken = AppDispatcher.register((payload) => { UserStore.pSetStatuses(action.statuses); UserStore.emitStatusesChange(); break; - case ActionTypes.TOGGLE_IMPORT_THEME_MODAL: - UserStore.emitToggleImportModal(action.value); - break; - default: } }); diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx index fdeb17bc1..161c79761 100644 --- a/web/react/utils/channel_intro_mssages.jsx +++ b/web/react/utils/channel_intro_mssages.jsx @@ -3,6 +3,7 @@ // See License.txt for license information. const Utils = require('./utils.jsx'); +const InviteMemberModal = require('../components/invite_member_modal.jsx'); const UserProfile = require('../components/user_profile.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); const Constants = require('../utils/constants.jsx'); @@ -109,8 +110,7 @@ export function createDefaultIntroMessage(channel) { <a className='intro-links' href='#' - data-toggle='modal' - data-target='#invite_member' + onClick={InviteMemberModal.show} > <i className='fa fa-user-plus'></i>{'Invite others to this team'} </a> @@ -186,8 +186,6 @@ export function createStandardIntroMessage(channel) { ); } - // TODO show channel_invite modal now that it's a React-Bootstrap modal - return ( <div className='channel-intro'> <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4> diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 8884d1d10..51cd41b6d 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -39,7 +39,8 @@ module.exports = { RECIEVED_LOGS: null, RECIEVED_ALL_TEAMS: null, - TOGGLE_IMPORT_THEME_MODAL: null + TOGGLE_IMPORT_THEME_MODAL: null, + TOGGLE_INVITE_MEMBER_MODAL: null }), PayloadSources: keyMirror({ |