diff --git a/__tests__/Cell.spec.js b/__tests__/Cell.spec.js deleted file mode 100644 index b1ae409..0000000 --- a/__tests__/Cell.spec.js +++ /dev/null @@ -1,35 +0,0 @@ -jest.unmock('../Cell'); -jest.unmock('enzyme'); - -import { Cell } from '../Cell'; -import React from 'react'; -import { View, Text, Image } from 'react-native'; - -import { shallow } from 'enzyme'; - -describe('Cell', () => { - it('renders a view', () => { - const wrapper = shallow( - - ); - expect(wrapper.find(View).length).toBe(1); - }); - - it('renders some string in a Text component', () => { - const wrapper = shallow( - Foo - ); - expect(wrapper.contains('Foo')).toBe(true); - expect(wrapper.find(Text).length).toBe(1); - }); - - it('renders any other components (i.e. an Image and a Text component containing "Foo")', () => { - const wrapper = shallow( - Foo - ); - expect(wrapper.find(View).length).toBe(1); - expect(wrapper.find(Text).length).toBe(1); - expect(wrapper.contains('Foo')).toBe(true); - expect(wrapper.find(Image).length).toBe(1); - }); -}); diff --git a/src/Cell.js b/src/Cell.js index 561470d..186f321 100644 --- a/src/Cell.js +++ b/src/Cell.js @@ -1,66 +1,66 @@ -/* @flow weak */ +/* eslint-disable react/forbid-prop-types */ +import React from 'react' +import PropTypes from 'prop-types' +import { View, Text } from 'react-native' +import { getAdjustedStyle } from './utilities' /** - * mSupply Mobile - * Sustainable Solutions (NZ) Ltd. 2016 + * Renders a cell that displays a string/number value within + * a react-native `Text` component. + * + * @param {string|number} value The value to render in cell + * @param {Object} viewStyle Style object for the containing View + * @param {Object} textStyle Style object for the inner Text + * @param {Number} width optional flex property to inject into styles. + * @param {Bool} isLastCell Indicator for if this cell is the last + * @param {Number} maxLiens Maximum number of lines for the Text component + * in a row. Removing the borderRight if true. */ +const Cell = React.memo( + ({ + value, + textStyle, + viewStyle, + width, + isLastCell, + numberOfLines, + debug, + }) => { + if (debug) console.log(`- Cell: ${value}`) + const internalViewStyle = getAdjustedStyle(viewStyle, width, isLastCell) -import React from 'react'; -import PropTypes from 'prop-types'; -import { - StyleSheet, - Text, - View, - ViewPropTypes, -} from 'react-native'; - -/** - * Renders a Cell that supports having a string as children, or any component. - * @param {object} props Properties passed where component was created. - * @prop {StyleSheet} style Style of the Cell (View props) - * @prop {StyleSheet} textStyle Style of the text in the Cell - * @prop {number} width Flexbox flex property, gives weight to the Cell width - * @prop {string} text Text to render in Cell - * @return {React.Component} A single View with children - */ -export function Cell(props) { - const { style, numberOfLines, textStyle, width, children, ...viewProps } = props; - - // Render string child in a Text Component - if (typeof children === 'string' || typeof children === 'number') { return ( - - - {children} + + + {value} - ); + ) } - // Render any non-string child component(s) - return ( - - {children} - - ); -} +) Cell.propTypes = { - ...ViewPropTypes, - style: ViewPropTypes.style, - textStyle: Text.propTypes.style, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + textStyle: PropTypes.object, + viewStyle: PropTypes.object, width: PropTypes.number, - children: PropTypes.any, + isLastCell: PropTypes.bool, numberOfLines: PropTypes.number, -}; + debug: PropTypes.bool, +} Cell.defaultProps = { - width: 1, - numberOfLines: 1, -}; + value: '', + textStyle: {}, + viewStyle: {}, + width: 0, + isLastCell: false, + numberOfLines: 2, + debug: false, +} -const defaultStyles = StyleSheet.create({ - cell: { - flex: 1, - justifyContent: 'center', - }, -}); +export default Cell