
import React from 'react'
import classnames from 'classnames'

const Textfield = ({
  autoFocus,
  defaultValue,
  disabled,
  error,
  float,
  icon,
  label,
  name,
  onChange,
  readOnly,
  type,
  value
}) => {
  const empty = value === undefined || value === ''
  return (
    <label className='Textfield'>
      <div className='Textfield-icon-wrapper'>
        {
          icon
          ? <div className='Textfield-icon'>{icon}</div>
          : null
        }
        <div className='Textfield-wrapper'>
          <input
            autoFocus={autoFocus}
            className={classnames('Textfield-input', {
              'Textfield-input--error': error
            })}
            defaultValue={defaultValue}
            disabled={disabled}
            name={name}
            onChange={onChange}
            readOnly={readOnly}
            type={type}
            value={value}
          />
          <span
            className={classnames('Textfield-label', {
              'Textfield-label--floatup': (!float || !empty)
            })}
          >
            {label}
          </span>
          <span className='Textfield-error'>{error}</span>
        </div>
      </div>
    </label>
  )
}

Textfield.propTypes = {
  autoFocus: React.PropTypes.bool,
  disabled: React.PropTypes.bool,
  error: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.bool
  ]),
  float: React.PropTypes.bool,
  icon: React.PropTypes.element,
  label: React.PropTypes.string,
  name: React.PropTypes.string,
  onChange: React.PropTypes.func,
  readOnly: React.PropTypes.bool,
  type: React.PropTypes.oneOf(['text', 'password', 'email', 'search', 'tel', 'url', 'number']),
  value: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ]),
  defaultValue: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ])
}

Textfield.defaultProps = {
  autoFocus: false,
  disabled: false,
  float: true,
  readOnly: false,
  type: 'text'
}

export default Textfield

@@ -78,16 +78,65 @@
 ld = (%7B%0A
+  autoCapitalize,%0A  autoComplete,%0A  autoCorrect,%0A
   autoFo
@@ -140,16 +140,16 @@
 oFocus,%0A
-
   defaul
@@ -235,16 +235,30 @@
 adOnly,%0A
+  spellCheck,%0A
   type,%0A
@@ -587,16 +587,138 @@
  %3Cinput%0A
+            autoCapitalize=%7BautoCapitalize%7D%0A            autoComplete=%7BautoComplete%7D%0A            autoCorrect=%7BautoCorrect%7D%0A
         
@@ -1020,16 +1020,52 @@
 adOnly%7D%0A
+            spellCheck=%7BspellCheck%7D%0A
         
@@ -1444,24 +1444,145 @@
 opTypes = %7B%0A
+  autoComplete: React.PropTypes.string,%0A  autoCorrect: React.PropTypes.string,%0A  autoCapitalize: React.PropTypes.string,%0A
   autoFocus:
@@ -1897,16 +1897,16 @@
 s.func,%0A
-
   readOn
@@ -1931,16 +1931,54 @@
 s.bool,%0A
+  spellCheck: React.PropTypes.string,%0A
   type: 

add autoComplete autoCorrect autoCapitalize and spellCheck as optional props