diff options
Diffstat (limited to 'web/react/components/setting_upload.jsx')
-rw-r--r-- | web/react/components/setting_upload.jsx | 64 |
1 files changed, 40 insertions, 24 deletions
diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx index 596324308..a7ab03018 100644 --- a/web/react/components/setting_upload.jsx +++ b/web/react/components/setting_upload.jsx @@ -1,36 +1,37 @@ // 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(); if (inputnode.files && inputnode.files[0]) { @@ -38,16 +39,18 @@ module.exports = React.createClass({ } 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 = ( @@ -67,7 +70,11 @@ module.exports = React.createClass({ <li className='col-xs-offset-3 col-xs-8'> <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}> @@ -82,4 +89,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 +};
\ No newline at end of file |