Merge pull request #1417 from openmsupply/#1405-multiline-cell

#1405 Multiline Cell component

src/widgets/DataTable/Cell.js

@@ -13,27 +13,31 @@ 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 }) => {
-  if (debug) console.log(`- Cell: ${value}`);
-  const internalViewStyle = getAdjustedStyle(viewStyle, width, isLastCell);
+const Cell = React.memo(
+  ({ value, textStyle, viewStyle, width, isLastCell, numberOfLines, debug }) => {
+    if (debug) console.log(`- Cell: ${value}`);
+    const internalViewStyle = getAdjustedStyle(viewStyle, width, isLastCell);
 
-  return (
-    <View style={internalViewStyle}>
-      <Text ellipsizeMode="tail" numberOfLines={1} style={textStyle}>
-        {value}
-      </Text>
-    </View>
-  );
-});
+    return (
+      <View style={internalViewStyle}>
+        <Text ellipsizeMode="tail" numberOfLines={numberOfLines} style={textStyle}>
+          {value}
+        </Text>
+      </View>
+    );
+  }
+);
 
 Cell.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   textStyle: PropTypes.object,
   viewStyle: PropTypes.object,
   width: PropTypes.number,
   isLastCell: PropTypes.bool,
+  numberOfLines: PropTypes.number,
   debug: PropTypes.bool,
 };
 
@@ -43,6 +47,7 @@ Cell.defaultProps = {
   viewStyle: {},
   width: 0,
   isLastCell: false,
+  numberOfLines: 2,
   debug: false,
 };