diff options
Diffstat (limited to 'webapp/components/new_channel_modal.jsx')
| -rw-r--r-- | webapp/components/new_channel_modal.jsx | 288 |
1 files changed, 288 insertions, 0 deletions
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx new file mode 100644 index 000000000..628687f27 --- /dev/null +++ b/webapp/components/new_channel_modal.jsx @@ -0,0 +1,288 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import ReactDOM from 'react-dom'; +import * as Utils from 'utils/utils.jsx'; + +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; + +import {Modal} from 'react-bootstrap'; + +const holders = defineMessages({ + nameEx: { + id: 'channel_modal.nameEx', + defaultMessage: 'E.g.: "Bugs", "Marketing", "办公室恋情"' + } +}); + +import React from 'react'; + +class NewChannelModal extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + this.handleChange = this.handleChange.bind(this); + + this.state = { + displayNameError: '' + }; + } + componentWillReceiveProps(nextProps) { + if (nextProps.show === true && this.props.show === false) { + this.setState({ + displayNameError: '' + }); + } + } + componentDidMount() { + if (Utils.isBrowserIE()) { + $('body').addClass('browser--IE'); + } + } + handleSubmit(e) { + e.preventDefault(); + + const displayName = ReactDOM.findDOMNode(this.refs.display_name).value.trim(); + if (displayName.length < 1) { + this.setState({displayNameError: true}); + return; + } + + this.props.onSubmitChannel(); + } + handleChange() { + const newData = { + displayName: ReactDOM.findDOMNode(this.refs.display_name).value, + purpose: ReactDOM.findDOMNode(this.refs.channel_purpose).value + }; + this.props.onDataChanged(newData); + } + render() { + var displayNameError = null; + var serverError = null; + var displayNameClass = 'form-group'; + + if (this.state.displayNameError) { + displayNameError = ( + <p className='input__help error'> + <FormattedMessage + id='channel_modal.displayNameError' + defaultMessage='This field is required' + /> + {this.state.displayNameError} + </p> + ); + displayNameClass += ' has-error'; + } + + if (this.props.serverError) { + serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>; + } + + var channelTerm = ''; + var channelSwitchText = ''; + switch (this.props.channelType) { + case 'P': + channelTerm = ( + <FormattedMessage + id='channel_modal.group' + defaultMessage='Group' + /> + ); + channelSwitchText = ( + <div className='modal-intro'> + <FormattedMessage + id='channel_modal.privateGroup1' + defaultMessage='Create a new private group with restricted membership. ' + /> + <a + href='#' + onClick={this.props.onTypeSwitched} + > + <FormattedMessage + id='channel_modal.publicChannel1' + defaultMessage='Create a public channel' + /> + </a> + </div> + ); + break; + case 'O': + channelTerm = ( + <FormattedMessage + id='channel_modal.channel' + defaultMessage='Channel' + /> + ); + channelSwitchText = ( + <div className='modal-intro'> + <FormattedMessage + id='channel_modal.publicChannel2' + defaultMessage='Create a new public channel anyone can join. ' + /> + <a + href='#' + onClick={this.props.onTypeSwitched} + > + <FormattedMessage + id='channel_modal.privateGroup2' + defaultMessage='Create a private group' + /> + </a> + </div> + ); + break; + } + + const prettyTeamURL = Utils.getShortenedTeamURL(); + + return ( + <span> + <Modal + show={this.props.show} + bsSize='large' + onHide={this.props.onModalDismissed} + > + <Modal.Header closeButton={true}> + <Modal.Title> + <FormattedMessage + id='channel_modal.modalTitle' + defaultMessage='New ' + /> + {channelTerm} + </Modal.Title> + </Modal.Header> + <form + role='form' + className='form-horizontal' + > + <Modal.Body> + <div> + {channelSwitchText} + </div> + <div className={displayNameClass}> + <label className='col-sm-3 form__label control-label'> + <FormattedMessage + id='channel_modal.name' + defaultMessage='Name' + /> + </label> + <div className='col-sm-9'> + <input + onChange={this.handleChange} + type='text' + ref='display_name' + className='form-control' + placeholder={this.props.intl.formatMessage(holders.nameEx)} + maxLength='22' + value={this.props.channelData.displayName} + autoFocus={true} + tabIndex='1' + /> + {displayNameError} + <p className='input__help dark'> + {'URL: ' + prettyTeamURL + this.props.channelData.name + ' ('} + <a + href='#' + onClick={this.props.onChangeURLPressed} + > + <FormattedMessage + id='channel_modal.edit' + defaultMessage='Edit' + /> + </a> + {')'} + </p> + </div> + </div> + <div className='form-group less'> + <div className='col-sm-3'> + <label className='form__label control-label'> + <FormattedMessage + id='channel_modal.purpose' + defaultMessage='Purpose' + /> + </label> + <label className='form__label light'> + <FormattedMessage + id='channel_modal.optional' + defaultMessage='(optional)' + /> + </label> + </div> + <div className='col-sm-9'> + <textarea + className='form-control no-resize' + ref='channel_purpose' + rows='4' + placeholder={this.props.intl.formatMessage({id: 'channel_modal.purpose'})} + maxLength='128' + value={this.props.channelData.purpose} + onChange={this.handleChange} + tabIndex='2' + /> + <p className='input__help'> + <FormattedMessage + id='channel_modal.descriptionHelp' + defaultMessage='Describe how this {term} should be used.' + values={{ + term: (channelTerm) + }} + /> + </p> + {serverError} + </div> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.props.onModalDismissed} + > + <FormattedMessage + id='channel_modal.cancel' + defaultMessage='Cancel' + /> + </button> + <button + onClick={this.handleSubmit} + type='submit' + className='btn btn-primary' + tabIndex='3' + > + <FormattedMessage + id='channel_modal.createNew' + defaultMessage='Create New ' + /> + {channelTerm} + </button> + </Modal.Footer> + </form> + </Modal> + </span> + ); + } +} + +NewChannelModal.defaultProps = { + show: false, + channelType: 'O', + serverError: '' +}; +NewChannelModal.propTypes = { + intl: intlShape.isRequired, + show: React.PropTypes.bool.isRequired, + channelType: React.PropTypes.string.isRequired, + channelData: React.PropTypes.object.isRequired, + serverError: React.PropTypes.string, + onSubmitChannel: React.PropTypes.func.isRequired, + onModalDismissed: React.PropTypes.func.isRequired, + onTypeSwitched: React.PropTypes.func.isRequired, + onChangeURLPressed: React.PropTypes.func.isRequired, + onDataChanged: React.PropTypes.func.isRequired +}; + +export default injectIntl(NewChannelModal);
\ No newline at end of file |