/* eslint-disable react/prop-types */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { Text, TouchableOpacity, TouchableOpacityPropTypes } from 'react-native';

import TouchableNoFeedback from './TouchableNoFeedback';

import { getAdjustedStyle } from './utilities';

/**
 * Renders a cell with value (or renderChildren) that is touchable
 *
 * @param {string|number} value The value to render in cell
 * @param {string|number} rowKey Unique key associated to row cell is in
 * @param {string|number} columnKey Unique key associated to column cell is in
 * @param {func} onPressAction Action creator for handling focusing of this cell.
 *                          `(rowKey, columnKey) => {...}`
 * @param {func} dispatch Reducer dispatch callback for handling actions
 * @param {func} renderChildren Reducer dispatch callback for handling actions
 * @param {func} TouchableComponent Override containing element of TouchableCell
 * Additional props spread into TouchableComponent
 * @param {object} containerStyle Style object for the containing Touchable component
 * @param {object} textStyle Style object for the inner Text component
 * @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 TouchableCell = React.memo(
  ({
    value,
    rowKey,
    columnKey,
    onPressAction,
    dispatch,
    renderChildren,
    TouchableComponent,
    containerStyle,
    width,
    textStyle,
    isLastCell,
    debug,
    isDisabled,
    ...otherProps
  }) => {
    if (debug) console.log(`- TouchableCell: ${rowKey},${columnKey}`);

    const onPress = () => dispatch(onPressAction(rowKey, columnKey));

    const internalContainerStyle = getAdjustedStyle(containerStyle, width, isLastCell);
    const Container = isDisabled ? TouchableNoFeedback : TouchableComponent || TouchableOpacity;
    const content = renderChildren ? renderChildren(value) : <Text style={textStyle}>{value}</Text>;

    return (
      <Container style={internalContainerStyle} onPress={onPress} {...otherProps}>
        {content}
      </Container>
    );
  }
);

TouchableCell.propTypes = {
  ...TouchableOpacityPropTypes,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  columnKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onPressAction: PropTypes.func.isRequired,
  dispatch: PropTypes.func.isRequired,
  renderChildren: PropTypes.func.isRequired,
  TouchableComponent: PropTypes.node,
  containerStyle: PropTypes.object,
  textStyle: PropTypes.object,
  isLastCell: PropTypes.bool,
  width: PropTypes.number,
  debug: PropTypes.bool,
  isDisabled: PropTypes.bool,
};

TouchableCell.defaultProps = {
  value: '',
  containerStyle: {},
  textStyle: {},
  TouchableComponent: null,
  isLastCell: false,
  width: 0,
  debug: false,
  isDisabled: false,
};

export default TouchableCell;

@@ -1,42 +1,4 @@
-/* eslint-disable react/prop-types */%0A
 /* e
@@ -38,16 +38,16 @@
 ypes */%0A
+
 import R
@@ -605,197 +605,44 @@
 ress
-Action Action creator for handling focusing of this cell.%0A *                          %60(rowKey, columnKey) =%3E %7B...%7D%60%0A * @param %7Bfunc%7D dispatch Reducer dispatch callback for handling actions
+ Callback when this cell is touched.
 %0A * 
@@ -1316,28 +1316,8 @@
 ress
-Action,%0A    dispatch
 ,%0A  
@@ -1564,16 +1564,20 @@
  onPress
+Cell
  = () =%3E
@@ -1581,30 +1581,15 @@
  =%3E 
-dispatch(
 onPress
-Action
 (row
@@ -1603,17 +1603,16 @@
 lumnKey)
-)
 ;%0A%0A    c
@@ -1970,16 +1970,20 @@
 %7BonPress
+Cell
 %7D %7B...ot
@@ -2336,16 +2336,16 @@
 quired,%0A
+
   onPres
@@ -2349,53 +2349,8 @@
 ress
-Action: PropTypes.func.isRequired,%0A  dispatch
 : Pr

Add update TouchableCell to use a callback