diff --git a/src/components/TextInput/TextInputStylePropTypes.js b/src/components/TextInput/TextInputStylePropTypes.js new file mode 100644 index 00000000..5ac21792 --- /dev/null +++ b/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' + ]) +} diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js new file mode 100644 index 00000000..f23ef716 --- /dev/null +++ b/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 ( + + ) + } +} + +export default TextInput diff --git a/src/components/TextInput/index.spec.js b/src/components/TextInput/index.spec.js new file mode 100644 index 00000000..3bb1cf3a --- /dev/null +++ b/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"', () => {}) +}) +*/ diff --git a/src/modules/TextInput/TextInputStylePropTypes.js b/src/modules/TextInput/TextInputStylePropTypes.js deleted file mode 100644 index bae73b36..00000000 --- a/src/modules/TextInput/TextInputStylePropTypes.js +++ /dev/null @@ -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' -} diff --git a/src/modules/TextInput/index.js b/src/modules/TextInput/index.js deleted file mode 100644 index ed16f881..00000000 --- a/src/modules/TextInput/index.js +++ /dev/null @@ -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 ( - - ) - } -} - -export default TextInput