#40 pure row

src/Row.js

@@ -1,93 +1,75 @@
-/* @flow weak */
+import React, { useContext, useCallback } from 'react'
+import PropTypes from 'prop-types'
 
-/**
- * mSupply Mobile
- * Sustainable Solutions (NZ) Ltd. 2016
- */
+import { TouchableOpacity } from 'react-native'
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  View,
-  ViewPropTypes,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
+import TouchableNoFeedback from './TouchableNoFeedback'
 
-export class Row extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: props.isExpanded,
-    };
-    this.onPress = this.onPress.bind(this);
-  }
+import RefContext from './RefContext'
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isExpanded !== this.state.isExpanded) {
-      this.setState({ isExpanded: nextProps.isExpanded });
+/**
+ * Renders a row of children as outputted by renderCells render prop
+ * Tap gesture events will be captured in this component for any taps
+ * on cells within this container which do not handle the event themselves.
+ *
+ * onFocus on a child will scroll the underlying list to this row.
+ *
+ * @param {object}        rowData     Data to pass to renderCells callback
+ * @param {string|number} rowKey      Unique key associated to row
+ * @param {object}        rowState    State to pass to renderCells callBack
+ * @param {func}          onPress     function to call on pressing the row.
+ * @param {object}        viewStyle   Style object for the wrapping View component
+ * @param {boolean}       debug       Set to `true` to console.log(`Row: ${rowKey}`)
+ * @param {number}        rowIndex    index of this row within DataTable.
+ * @param {func}          renderCells renderProp callBack for rendering cells
+ *                                    based on rowData and rowState
+ *                                    `(rowKey, columnKey) => {...}`
+ */
+const Row = React.memo(
+  ({
+    rowData,
+    rowState,
+    rowKey,
+    renderCells,
+    style,
+    onPress,
+    debug,
+    rowIndex,
+  }) => {
+    if (debug) {
+      console.log('=================================')
+      console.log(`Row: ${rowKey}`)
     }
-  }
 
-  onPress() {
-    this.setState({ isExpanded: !this.state.isExpanded });
-    this.props.onPress();
-  }
+    const { adjustToTop } = useContext(RefContext)
+    const onPressRow = useCallback(() => onPress(rowData), [onPress, rowData])
+    const onFocus = () => adjustToTop(rowIndex)
 
-  render() {
-    const { style, expandedRowStyle, children, renderExpansion, onPress, ...touchableOpacityProps } = this.props;
-    const rowStyle = this.state.isExpanded && expandedRowStyle ? expandedRowStyle : style;
-    if (renderExpansion) {
-      return (
-        <TouchableOpacity
-          {...touchableOpacityProps}
-          style={[defaultStyles.row, rowStyle]}
-          onPress={this.onPress}
-        >
-          <View style={defaultStyles.cellContainer}>
-            {children}
-          </View>
-          {this.state.isExpanded && renderExpansion()}
-        </TouchableOpacity>
-      );
-    }
-    if (onPress) {
-      return (
-        <TouchableOpacity
-          {...touchableOpacityProps}
-          style={[defaultStyles.row, { flexDirection: 'row' }, rowStyle]}
-          onPress={this.onPress}
-        >
-          {children}
-        </TouchableOpacity>
-      );
-    }
+    const Container = onPress ? TouchableOpacity : TouchableNoFeedback
     return (
-      <View style={[defaultStyles.row, { flexDirection: 'row' }, rowStyle]}>
-        {children}
-      </View>
-    );
+      <Container onPress={onPressRow} style={style} onFocus={onFocus}>
+        {renderCells(rowData, rowState, rowKey, rowIndex)}
+      </Container>
+    )
   }
-}
+)
 
 Row.propTypes = {
-  style: ViewPropTypes.style,
-  children: PropTypes.any,
+  rowData: PropTypes.any.isRequired,
+  rowState: PropTypes.any,
+  rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  renderCells: PropTypes.func.isRequired,
+  style: PropTypes.object,
   onPress: PropTypes.func,
-  isExpanded: PropTypes.bool,
-  renderExpansion: PropTypes.func,
-};
+  debug: PropTypes.bool,
+  rowIndex: PropTypes.number.isRequired,
+}
+
+Row.defaultProps = {
+  rowState: null,
+  style: {},
+  onPress: null,
+  debug: true,
+}
 
-const defaultStyles = StyleSheet.create({
-  row: {
-    flexDirection: 'column',
-    flexWrap: 'nowrap',
-    justifyContent: 'flex-start',
-    alignItems: 'stretch',
-    backgroundColor: '#d6f3ff',
-  },
-  cellContainer: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-});
+export default Row