rewrite input in es6

components/input/index.cjsx

@@ -1,119 +0,0 @@
-localCSS = require './style'
-
-module.exports = React.createClass
-  displayName   : 'Input'
-
-  # -- States & Properties
-  propTypes:
-    className   : React.PropTypes.string
-    disabled    : React.PropTypes.bool
-    error       : React.PropTypes.string
-    label       : React.PropTypes.string
-    multiline   : React.PropTypes.bool
-    onBlur      : React.PropTypes.func
-    onChange    : React.PropTypes.func
-    onKeyPress  : React.PropTypes.func
-    onFocus     : React.PropTypes.func
-    onBlur      : React.PropTypes.func
-    required    : React.PropTypes.bool
-    type        : React.PropTypes.string
-    value       : React.PropTypes.any
-
-  getDefaultProps: ->
-    className   : ''
-    disabled    : false
-    multiline   : false
-    required    : false
-    type        : 'text'
-
-  getInitialState: ->
-    checked     : @props.value
-    error       : @props.error
-    touch       : @props.type in ['checkbox', 'radio']
-    value       : @props.value
-    focus       : false
-    valid       : false
-
-  # -- Events
-  onBlur: (event) ->
-    @setState focus: false
-    @props.onBlur? event, @
-
-  onChange: (event) ->
-    if @state.touch
-      @setState checked: event.target.checked, error: undefined
-    else
-      @setState value: event.target.value, error: undefined
-    @props.onChange? event, @
-
-  onFocus: (event) ->
-    @setState focus: true
-    @props.onFocus? event, @
-
-  onKeyPress: (event) ->
-    @setState focus: true
-    @props.onKeyPress? event, @
-
-  # -- Render
-  render: ->
-    className  = "#{localCSS.root} #{@props.className}"
-    className += " #{@props.type}"  if @props.type
-    className += ' checked'         if @state.checked
-    className += ' disabled'        if @props.disabled
-    className += ' error'           if @state.error
-    className += ' focus'           if @state.focus
-    className += ' hidden'          if @props.type is 'hidden'
-    className += ' touch'           if @state.touch
-    className += ' radio'           if @props.type is 'radio'
-    className += ' valid'           if @state.value? and @state.value.length > 0
-
-    <div data-react-toolbox='input' className={className}>
-      {
-        if @props.multiline
-          <textarea ref='input' {...@props}
-                    value={@state.value}
-                    onChange={@onChange}
-                    onKeyPress={@onKeyPress}
-                    onFocus={@onFocus}
-                    onBlur={@onBlur}
-                    value={@state.value} />
-
-        else if @props.type is 'file'
-          delete @props.value
-          <input ref="input" {...@props} onChange={@onChange} />
-
-        else
-          <input ref='input' {...@props}
-                 value={@state.value}
-                 checked={@state.checked} 
-                 onBlur={@onBlur}
-                 onChange={@onChange}
-                 onFocus={@onFocus}
-                 onKeyPress={@onKeyPress} />
-      }
-      <span className='bar'></span>
-      { <label>{@props.label}</label> if @props.label }
-      { <span className='error'>{@state.error}</span> if @state.error }
-    </div>
-
-  # -- Extends
-  blur: ->
-    @refs.input.getDOMNode().blur()
-
-  focus: ->
-    @refs.input.getDOMNode().focus()
-
-  getValue: ->
-    if @props.type is 'file'
-      @state.value
-    else
-      @refs.input?.getDOMNode()[if @state.touch then 'checked' else 'value']
-
-  setError: (data = 'Unknown error') ->
-    @setState error: @props.error or data
-
-  setValue: (data) ->
-    data = false if @state.touch and data is undefined
-    attributes = value: data
-    attributes.checked = data if @state.touch and data?
-    @setState attributes

components/input/index.jsx

@@ -0,0 +1,156 @@
+/* global React */
+
+import { addons } from 'react/addons';
+import style from './style';
+
+export default React.createClass({
+  mixins: [addons.PureRenderMixin],
+
+  displayName: 'Input',
+
+  propTypes: {
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    error: React.PropTypes.string,
+    label: React.PropTypes.string,
+    multiline: React.PropTypes.bool,
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    onKeyPress: React.PropTypes.func,
+    required: React.PropTypes.bool,
+    type: React.PropTypes.string,
+    value: React.PropTypes.any
+  },
+
+  getDefaultProps () {
+    return {
+      className: '',
+      disabled: false,
+      multiline: false,
+      required: false,
+      type: 'text'
+    };
+  },
+
+  getInitialState () {
+    return {
+      checked: this.props.value,
+      error: this.props.error,
+      touch: ['checkbox', 'radio'].indexOf(this.props.type) !== -1,
+      value: this.props.value,
+      focus: false,
+      valid: false
+    };
+  },
+
+  onBlur (event) {
+    this.setState({focus: false});
+    if (this.props.onBlur) this.props.onBlur(event, this);
+  },
+
+  onChange (event) {
+    if (this.state.touch) {
+      this.setState({checked: event.target.checked, error: undefined});
+    } else {
+      this.setState({value: event.target.value, error: undefined});
+    }
+    if (this.props.onChange) this.props.onChange(event, this);
+  },
+
+  onFocus (event) {
+    this.setState({focus: true});
+    if (this.props.onFocus) this.props.onFocus(event, this);
+  },
+
+  onKeyPress (event) {
+    this.setState({focus: true});
+    if (this.props.onKeyPress) this.props.onKeyPress(event, this);
+  },
+
+  renderInput () {
+    if (this.props.multiline) {
+      return (
+        <textarea
+          ref='input'
+          {...this.props}
+          onChange={this.onChange}
+          onKeyPress={this.onKeyPress}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          value={this.state.value} />
+      );
+    } else if (this.props.type === 'file') {
+      return (
+        <input
+          ref='input'
+          {...this.props}
+          value={undefined}
+          onChange={this.onChange} />
+      );
+    } else {
+      return (
+        <input
+          ref='input'
+          {...this.props}
+          value={this.state.value}
+          checked={this.state.checked}
+          onBlur={this.onBlur}
+          onChange={this.onChange}
+          onFocus={this.onFocus}
+          onKeyPress={this.onKeyPress} />
+      );
+    }
+  },
+
+  render () {
+    let className = `${style.root} ${this.props.className}`;
+    if (this.props.type) className += ` ${this.props.type}`;
+    if (this.state.checked) className += ' checked';
+    if (this.props.disabled) className += ' disabled';
+    if (this.state.error) className += ' error';
+    if (this.state.focus) className += ' focus';
+    if (this.props.type === 'hidden') className += ' hidden';
+    if (this.state.touch) className += ' touch';
+    if (this.props.type === 'radio') className += ' radio';
+    if (this.state.value && this.state.value.length > 0) className += ' valid';
+
+    console.log(this.state.touch);
+
+    return (
+      <div data-react-toolbox='input' className={className}>
+        { this.renderInput() }
+        <span className='bar'></span>
+        { this.props.label ? <label>{this.props.label}</label> : null }
+        { this.state.error ? <span className='error'>{this.state.error}</span> : null }
+      </div>
+    );
+  },
+
+  blur () {
+    this.refs.input.getDOMNode().blur();
+  },
+
+  focus () {
+    this.refs.input.getDOMNode().focus();
+  },
+
+  getValue () {
+    if (this.props.type === 'file') {
+      return this.state.value;
+    } else if (this.refs.input) {
+      return this.refs.input.getDOMNode()[this.state.touch ? 'checked' : 'value'];
+    }
+  },
+
+  setError (data = 'Unknown error') {
+    this.setState({error: this.props.error || data});
+  },
+
+  setValue (argData) {
+    let data = this.state.touch && argData === undefined ? false : argData;
+    let attributes = { value: data };
+    if (this.state.touch && data) attributes.checked = data;
+    this.setState(attributes);
+  }
+});