diff options
Diffstat (limited to 'web/react/components/setting_upload.jsx')
-rw-r--r-- | web/react/components/setting_upload.jsx | 78 |
1 files changed, 49 insertions, 29 deletions
diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx index 596324308..fad27b355 100644 --- a/web/react/components/setting_upload.jsx +++ b/web/react/components/setting_upload.jsx @@ -1,53 +1,55 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - displayName: 'Setting Upload', - propTypes: { - title: React.PropTypes.string.isRequired, - submit: React.PropTypes.func.isRequired, - fileTypesAccepted: React.PropTypes.string.isRequired, - clientError: React.PropTypes.string, - serverError: React.PropTypes.string, - helpText: React.PropTypes.string - }, - getInitialState: function() { - return { +export default class SettingsUpload extends React.Component { + constructor(props) { + super(props); + + this.doFileSelect = this.doFileSelect.bind(this); + this.doSubmit = this.doSubmit.bind(this); + this.onFileSelect = this.onFileSelect.bind(this); + + this.state = { clientError: this.props.clientError, serverError: this.props.serverError }; - }, - componentWillReceiveProps: function() { + } + + componentWillReceiveProps() { this.setState({ clientError: this.props.clientError, serverError: this.props.serverError }); - }, - doFileSelect: function(e) { + } + + doFileSelect(e) { e.preventDefault(); this.setState({ clientError: '', serverError: '' }); - }, - doSubmit: function(e) { + } + + doSubmit(e) { e.preventDefault(); - var inputnode = this.refs.uploadinput.getDOMNode(); + var inputnode = React.findDOMNode(this.refs.uploadinput); if (inputnode.files && inputnode.files[0]) { this.props.submit(inputnode.files[0]); } else { this.setState({clientError: 'No file selected.'}); } - }, - onFileSelect: function(e) { + } + + onFileSelect(e) { var filename = $(e.target).val(); if (filename.substring(3, 11) === 'fakepath') { filename = filename.substring(12); } $(e.target).closest('li').find('.file-status').addClass('hide'); $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename); - }, - render: function() { + } + + render() { var clientError = null; if (this.state.clientError) { clientError = ( @@ -62,15 +64,24 @@ module.exports = React.createClass({ } return ( <ul className='section-max'> - <li className='col-xs-12 section-title'>{this.props.title}</li> - <li className='col-xs-offset-3'>{this.props.helpText}</li> - <li className='col-xs-offset-3 col-xs-8'> + <li className='col-sm-12 section-title'>{this.props.title}</li> + <li className='col-sm-offset-3 col-sm-9'>{this.props.helpText}</li> + <li className='col-sm-offset-3 col-sm-9'> <ul className='setting-list'> <li className='setting-list-item'> - <span className='btn btn-sm btn-primary btn-file sel-btn'>Select file<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span> + <span className='btn btn-sm btn-primary btn-file sel-btn'> + Select file + <input + ref='uploadinput' + accept={this.props.fileTypesAccepted} + type='file' + onChange={this.onFileSelect} + /> + </span> <a className={'btn btn-sm btn-primary'} - onClick={this.doSubmit}> + onClick={this.doSubmit} + > Import </a> <div className='file-status file-name hide'></div> @@ -82,4 +93,13 @@ module.exports = React.createClass({ </ul> ); } -}); +} + +SettingsUpload.propTypes = { + title: React.PropTypes.string.isRequired, + submit: React.PropTypes.func.isRequired, + fileTypesAccepted: React.PropTypes.string.isRequired, + clientError: React.PropTypes.string, + serverError: React.PropTypes.string, + helpText: React.PropTypes.object +}; |