Update TextInput props and implementation

src/components/TextInput/TextInputStylePropTypes.js

@@ -0,0 +1,20 @@
+import { pickProps } from '../../modules/filterObjectProps'
+import View from '../View'
+import CoreComponent from '../CoreComponent'
+
+export default {
+  ...(View.stylePropTypes),
+  ...pickProps(CoreComponent.stylePropTypes, [
+    'color',
+    'direction',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecoration',
+    'textTransform'
+  ])
+}

src/components/TextInput/index.js

@@ -0,0 +1,98 @@
+import { pickProps } from '../../modules/filterObjectProps'
+import CoreComponent from '../CoreComponent'
+import React, { PropTypes } from 'react'
+import TextInputStylePropTypes from './TextInputStylePropTypes'
+
+const styles = {
+  initial: {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    borderWidth: '1px',
+    color: 'inherit',
+    font: 'inherit'
+  }
+}
+
+class TextInput extends React.Component {
+  static propTypes = {
+    autoComplete: PropTypes.bool,
+    autoFocus: PropTypes.bool,
+    defaultValue: PropTypes.string,
+    editable: PropTypes.bool,
+    keyboardType: PropTypes.oneOf(['default', 'email', 'numeric', 'search', 'tel', 'url']),
+    multiline: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onChangeText: PropTypes.func,
+    onFocus: PropTypes.func,
+    placeholder: PropTypes.string,
+    secureTextEntry: PropTypes.bool,
+    style: PropTypes.shape(TextInputStylePropTypes),
+    testID: CoreComponent.propTypes.testID
+  }
+
+  static stylePropTypes = TextInputStylePropTypes
+
+  static defaultProps = {
+    autoComplete: false,
+    autoFocus: false,
+    editable: true,
+    keyboardType: 'default',
+    multiline: false,
+    secureTextEntry: false,
+    style: styles.initial
+  }
+
+  _onBlur(e) {
+    if (this.props.onBlur) this.props.onBlur(e)
+  }
+
+  _onChange(e) {
+    if (this.props.onChangeText) this.props.onChangeText(e.target.value)
+    if (this.props.onChange) this.props.onChange(e)
+  }
+
+  _onFocus(e) {
+    if (this.props.onFocus) this.props.onFocus(e)
+  }
+
+  render() {
+    const {
+      autoComplete,
+      autoFocus,
+      defaultValue,
+      editable,
+      keyboardType,
+      multiline,
+      placeholder,
+      secureTextEntry,
+      style,
+      testID
+    } = this.props
+
+    const resolvedStyle = pickProps(style, Object.keys(TextInputStylePropTypes))
+    const type = secureTextEntry && 'password' || (keyboardType === 'default' ? '' : keyboardType)
+
+    return (
+      <CoreComponent
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        className={'TextInput'}
+        component={multiline ? 'textarea' : 'input'}
+        defaultValue={defaultValue || placeholder}
+        onBlur={this._onBlur.bind(this)}
+        onChange={this._onChange.bind(this)}
+        onFocus={this._onFocus.bind(this)}
+        readOnly={!editable}
+        style={{
+          ...(styles.initial),
+          ...resolvedStyle
+        }}
+        testID={testID}
+        type={multiline ? type : undefined}
+      />
+    )
+  }
+}
+
+export default TextInput

src/components/TextInput/index.spec.js

@@ -0,0 +1,18 @@
+/*
+import assert from 'assert'
+import React from 'react/addons'
+
+import TextInput from '.'
+
+const ReactTestUtils = React.addons.TestUtils
+
+function shallowRender(component, context = {}) {
+  const shallowRenderer = React.addons.TestUtils.createRenderer()
+  shallowRenderer.render(component, context)
+  return shallowRenderer.getRenderOutput()
+}
+
+suite.skip('TextInput', () => {
+  test('prop "children"', () => {})
+})
+*/

src/modules/TextInput/TextInputStylePropTypes.js

@@ -1,13 +0,0 @@
-import { StylePropTypes } from '../react-native-web-style'
-import ViewStylePropTypes from '../View/ViewStylePropTypes'
-
-export default {
-  ...ViewStylePropTypes,
-  ...StylePropTypes.TypographicPropTypes
-}
-
-export const TextInputDefaultStyles = {
-  background: 'transparent',
-  color: 'inherit',
-  font: 'inherit'
-}

src/modules/TextInput/index.js

@@ -1,38 +0,0 @@
-import { pickProps } from '../filterObjectProps'
-import { WebStyleComponent } from '../react-native-web-style'
-import React, { PropTypes } from 'react'
-import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes'
-
-class TextInput extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    editable: PropTypes.bool,
-    multiline: PropTypes.bool,
-    placeholder: PropTypes.string,
-    style: PropTypes.shape(TextInputStylePropTypes)
-  }
-
-  static defaultProps = {
-    editable: true,
-    multiline: false
-  }
-
-  render() {
-    const { className, editable, multiline, placeholder, style, ...other } = this.props
-    const filteredStyle = pickProps(style, Object.keys(TextInputStylePropTypes))
-    const mergedStyle = { ...TextInputDefaultStyles, ...filteredStyle }
-
-    return (
-      <WebStyleComponent
-        {...other}
-        className={`TextInput ${className}`}
-        component={multiline ? 'textarea' : 'input'}
-        disabled={!editable}
-        placeholder={placeholder}
-        style={mergedStyle}
-      />
-    )
-  }
-}
-
-export default TextInput