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