MM-2065 style refactoring

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
+};