Update Text props and implementation

src/components/Text/TextStylePropTypes.js

@@ -0,0 +1,31 @@
+import { pickProps } from '../../modules/filterObjectProps'
+import CoreComponent from '../CoreComponent'
+
+export default {
+  ...pickProps(CoreComponent.stylePropTypes, [
+    'backgroundColor',
+    'color',
+    'direction',
+    'font',
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'margin',
+    'marginBottom',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'padding',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    'textAlign',
+    'textDecoration',
+    'textTransform',
+    'whiteSpace',
+    'wordWrap'
+  ])
+}

src/components/Text/index.js

@@ -0,0 +1,65 @@
+import { pickProps } from '../../modules/filterObjectProps'
+import CoreComponent from '../CoreComponent'
+import React, { PropTypes } from 'react'
+import TextStylePropTypes from './TextStylePropTypes'
+
+const styles = {
+  initial: {
+    color: 'inherit',
+    display: 'inline-block',
+    font: 'inherit',
+    margin: 0,
+    padding: 0,
+    wordWrap: 'break-word'
+  },
+  singleLineStyle: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}
+
+class Text extends React.Component {
+  static propTypes = {
+    children: PropTypes.any,
+    component: CoreComponent.propTypes.component,
+    numberOfLines: PropTypes.number,
+    onPress: PropTypes.func,
+    style: PropTypes.shape(TextStylePropTypes),
+    testID: CoreComponent.propTypes.testID
+  }
+
+  static stylePropTypes = TextStylePropTypes
+
+  static defaultProps = {
+    component: 'span',
+    style: styles.initial
+  }
+
+  _onPress(e) {
+    if (this.props.onPress) this.props.onPress(e)
+  }
+
+  render() {
+    const { children, component, numberOfLines, style, testID } = this.props
+    const resolvedStyle = pickProps(style, Object.keys(TextStylePropTypes))
+
+    return (
+      <CoreComponent
+        children={children}
+        className={'Text'}
+        component={component}
+        onClick={this._onPress.bind(this)}
+        style={{
+          ...(styles.initial),
+          ...resolvedStyle,
+          ...(numberOfLines === 1 && styles.singleLineStyle)
+        }}
+        testID={testID}
+      />
+    )
+  }
+}
+
+export default Text

src/components/Text/index.spec.js

@@ -1,7 +1,6 @@
 import assert from 'assert'
 import React from 'react/addons'
 
-import { TextDefaultStyle } from './TextStylePropTypes'
 import Text from '.'
 
 const ReactTestUtils = React.addons.TestUtils
@@ -27,16 +26,6 @@ suite('Text', () => {
     assert.equal(result.props.children, children)
   })
 
-  test('prop "className"', () => {
-    const className = 'className'
-    const result = shallowRender(<Text className={className} />)
-
-    assert.ok(
-      (result.props.className).indexOf(className) > -1,
-      '"className" was not transferred'
-    )
-  })
-
   test('prop "component"', () => {
     const type = 'a'
     const result = ReactTestUtils.renderIntoDocument(<Text component={type} />)
@@ -49,19 +38,43 @@ suite('Text', () => {
     )
   })
 
+  test.skip('prop "numberOfLines"', () => {})
+
+  test('prop "onPress"', (done) => {
+    const result = ReactTestUtils.renderIntoDocument(<Text onPress={onPress} />)
+    const root = React.findDOMNode(result)
+    ReactTestUtils.Simulate.click(root)
+
+    function onPress(e) {
+      assert(true, 'the "onPress" callback was never called')
+      assert.ok(e.nativeEvent)
+      done()
+    }
+  })
+
   test('prop "style"', () => {
     const initial = shallowRender(<Text />)
     assert.deepEqual(
       initial.props.style,
-      TextDefaultStyle,
-      'default "style" is incorrect'
+      Text.defaultProps.style
     )
 
-    const unsupported = shallowRender(<Text style={{ unsupported: 'true' }} />)
+    const unsupported = shallowRender(<Text style={{ flexDirection: 'row' }} />)
     assert.deepEqual(
-      unsupported.props.style.unsupported,
+      unsupported.props.style.flexDirection,
       null,
       'unsupported "style" properties must not be transferred'
     )
   })
+
+  test('prop "testID"', () => {
+    const testID = 'Example.text'
+    const result = ReactTestUtils.renderIntoDocument(<Text testID={testID} />)
+    const root = React.findDOMNode(result)
+
+    assert.equal(
+      root.getAttribute('data-testid'),
+      testID
+    )
+  })
 })

src/modules/Text/TextStylePropTypes.js

@@ -1,11 +0,0 @@
-import { StylePropTypes } from '../react-native-web-style'
-import { ViewStylePropTypes } from '../View/ViewStylePropTypes'
-
-export default {
-  ...ViewStylePropTypes,
-  ...StylePropTypes.TypographicPropTypes
-}
-
-export const TextDefaultStyle = {
-  display: 'inline'
-}

src/modules/Text/index.js

@@ -1,37 +0,0 @@
-import { pickProps } from '../filterObjectProps'
-import { WebStyleComponent } from '../react-native-web-style'
-import React, { PropTypes } from 'react'
-import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes'
-
-class Text extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    component: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string
-    ]),
-    style: PropTypes.shape(TextStylePropTypes)
-  }
-
-  static defaultProps = {
-    className: '',
-    component: 'span'
-  }
-
-  render() {
-    const { className, style, ...other } = this.props
-    const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes))
-    const mergedStyle = { ...TextDefaultStyle, ...filteredStyle }
-
-    return (
-      <WebStyleComponent
-        {...other}
-        className={`Text ${className}`}
-        style={mergedStyle}
-      />
-    )
-  }
-}
-
-export default Text