From 8bba9926a96e1651da27e3a8c38aad876b66457c Mon Sep 17 00:00:00 2001 From: josh Date: Tue, 15 Oct 2019 17:08:33 +1300 Subject: [PATCH 1/4] Add pure Cell component --- src/Cell.js | 88 ++++++++++++++++++++++------------------------------- 1 file changed, 36 insertions(+), 52 deletions(-) diff --git a/src/Cell.js b/src/Cell.js index 561470d..72df38e 100644 --- a/src/Cell.js +++ b/src/Cell.js @@ -1,66 +1,50 @@ -/* @flow weak */ +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 + * in a row. Removing the borderRight if true. */ +const Cell = React.memo( + ({ value, textStyle, viewStyle, width, isLastCell, 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, - numberOfLines: PropTypes.number, -}; + isLastCell: PropTypes.bool, + debug: PropTypes.bool, +} Cell.defaultProps = { - width: 1, - numberOfLines: 1, -}; + value: '', + textStyle: {}, + viewStyle: {}, + width: 0, + isLastCell: false, + debug: false, +} -const defaultStyles = StyleSheet.create({ - cell: { - flex: 1, - justifyContent: 'center', - }, -}); +export default Cell From c8067c6e1af2b3330ab3329be2d3f8e808ac94d9 Mon Sep 17 00:00:00 2001 From: josh Date: Tue, 15 Oct 2019 18:50:52 +1300 Subject: [PATCH 2/4] Add removed old tests --- __tests__/Cell.spec.js | 35 ----------------------------------- 1 file changed, 35 deletions(-) delete mode 100644 __tests__/Cell.spec.js 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); - }); -}); From ba337c061847b5115118b81d3afd52f142309868 Mon Sep 17 00:00:00 2001 From: josh Date: Sat, 19 Oct 2019 20:16:44 +1300 Subject: [PATCH 3/4] Add maxLines prop --- src/Cell.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Cell.js b/src/Cell.js index 72df38e..8cd03f2 100644 --- a/src/Cell.js +++ b/src/Cell.js @@ -1,3 +1,4 @@ +/* eslint-disable react/forbid-prop-types */ import React from 'react' import PropTypes from 'prop-types' import { View, Text } from 'react-native' @@ -12,16 +13,17 @@ import { getAdjustedStyle } from './utilities' * @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, debug }) => { + ({ value, textStyle, viewStyle, width, isLastCell, maxLines, debug }) => { if (debug) console.log(`- Cell: ${value}`) const internalViewStyle = getAdjustedStyle(viewStyle, width, isLastCell) return ( - + {value} @@ -35,6 +37,7 @@ Cell.propTypes = { viewStyle: PropTypes.object, width: PropTypes.number, isLastCell: PropTypes.bool, + maxLines: PropTypes.number, debug: PropTypes.bool, } @@ -44,6 +47,7 @@ Cell.defaultProps = { viewStyle: {}, width: 0, isLastCell: false, + maxLines: 2, debug: false, } From 752b204e914c3633f60061ad2b9739271a172b66 Mon Sep 17 00:00:00 2001 From: josh Date: Mon, 21 Oct 2019 17:20:31 +1300 Subject: [PATCH 4/4] Add renaming of new prop name --- src/Cell.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/Cell.js b/src/Cell.js index 8cd03f2..186f321 100644 --- a/src/Cell.js +++ b/src/Cell.js @@ -17,13 +17,25 @@ import { getAdjustedStyle } from './utilities' * in a row. Removing the borderRight if true. */ const Cell = React.memo( - ({ value, textStyle, viewStyle, width, isLastCell, maxLines, debug }) => { + ({ + value, + textStyle, + viewStyle, + width, + isLastCell, + numberOfLines, + debug, + }) => { if (debug) console.log(`- Cell: ${value}`) const internalViewStyle = getAdjustedStyle(viewStyle, width, isLastCell) return ( - + {value} @@ -37,7 +49,7 @@ Cell.propTypes = { viewStyle: PropTypes.object, width: PropTypes.number, isLastCell: PropTypes.bool, - maxLines: PropTypes.number, + numberOfLines: PropTypes.number, debug: PropTypes.bool, } @@ -47,7 +59,7 @@ Cell.defaultProps = { viewStyle: {}, width: 0, isLastCell: false, - maxLines: 2, + numberOfLines: 2, debug: false, }