diff --git a/src/components/Text/TextStylePropTypes.js b/src/components/Text/TextStylePropTypes.js new file mode 100644 index 00000000..986d9915 --- /dev/null +++ b/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' + ]) +} diff --git a/src/components/Text/index.js b/src/components/Text/index.js new file mode 100644 index 00000000..9d58672a --- /dev/null +++ b/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 ( + + ) + } +} + +export default Text diff --git a/src/modules/Text/index.spec.js b/src/components/Text/index.spec.js similarity index 61% rename from src/modules/Text/index.spec.js rename to src/components/Text/index.spec.js index 54e59ca8..27a405a5 100644 --- a/src/modules/Text/index.spec.js +++ b/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() - - assert.ok( - (result.props.className).indexOf(className) > -1, - '"className" was not transferred' - ) - }) - test('prop "component"', () => { const type = 'a' const result = ReactTestUtils.renderIntoDocument() @@ -49,19 +38,43 @@ suite('Text', () => { ) }) + test.skip('prop "numberOfLines"', () => {}) + + test('prop "onPress"', (done) => { + const result = ReactTestUtils.renderIntoDocument() + 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() assert.deepEqual( initial.props.style, - TextDefaultStyle, - 'default "style" is incorrect' + Text.defaultProps.style ) - const unsupported = shallowRender() + const unsupported = shallowRender() 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() + const root = React.findDOMNode(result) + + assert.equal( + root.getAttribute('data-testid'), + testID + ) + }) }) diff --git a/src/modules/Text/TextStylePropTypes.js b/src/modules/Text/TextStylePropTypes.js deleted file mode 100644 index c414398e..00000000 --- a/src/modules/Text/TextStylePropTypes.js +++ /dev/null @@ -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' -} diff --git a/src/modules/Text/index.js b/src/modules/Text/index.js deleted file mode 100644 index b648c9cf..00000000 --- a/src/modules/Text/index.js +++ /dev/null @@ -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 ( - - ) - } -} - -export default Text