Merge remote-tracking branch 'origin/#1043-data-table-rewrite' into #…

…1065-remove-old-code
msupply-foundation · Sep 24, 2019 · e2caf08 · e2caf08
2 parents 6af1f17 + 2e35f1e
commit e2caf08
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 116 deletions.
diff --git a/src/globalStyles/colors.js b/src/globalStyles/colors.js
@@ -18,3 +18,4 @@ export const SUSSOL_ORANGE = '#e95c30';
 export const TRANSPARENT = 'rgba(0, 0, 0, 0)';
 export const WARM_GREY = '#9b9b9b';
 export const WARMER_GREY = '#a8aaac';
+export const WHITE = '#FFFFFF';
diff --git a/src/pages/CustomerInvoicePage.js b/src/pages/CustomerInvoicePage.js
@@ -76,17 +76,13 @@ export const CustomerInvoicePage = ({ transaction, runWithLoadingIndicator, rout
   const onAddMasterList = () =>
     runWithLoadingIndicator(() => dispatch(PageActions.addMasterListItems('Transaction')));
 
-  const renderPageInfo = useCallback(
-    () => (
-      <PageInfo
-        columns={getPageInfoColumns(pageObject, dispatch, PageActions)}
-        isEditingDisabled={isFinalised}
-      />
-    ),
-    [comment, theirRef, isFinalised]
-  );
+  const pageInfoColumns = useCallback(getPageInfoColumns(pageObject, dispatch, PageActions), [
+    comment,
+    theirRef,
+    isFinalised,
+  ]);
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'totalQuantity':
         return PageActions.editTotalQuantity;
@@ -96,7 +92,7 @@ export const CustomerInvoicePage = ({ transaction, runWithLoadingIndicator, rout
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {
@@ -114,6 +110,7 @@ export const CustomerInvoicePage = ({ transaction, runWithLoadingIndicator, rout
   const renderRow = useCallback(
     listItem => {
       const { item, index } = listItem;
+
       const rowKey = keyExtractor(item);
       return (
         <DataTableRow
@@ -155,7 +152,7 @@ export const CustomerInvoicePage = ({ transaction, runWithLoadingIndicator, rout
     <DataTablePageView>
       <View style={pageTopSectionContainer}>
         <View style={pageTopLeftSectionContainer}>
-          {renderPageInfo()}
+          <PageInfo columns={pageInfoColumns} isEditingDisabled={isFinalised} />
           <SearchBar onChangeText={onFilterData} style={searchBar} value={searchTerm} />
         </View>
         <View style={pageTopRightSectionContainer}>

diff --git a/src/pages/CustomerInvoicesPage.js b/src/pages/CustomerInvoicesPage.js
@@ -73,15 +73,15 @@ export const CustomerInvoicesPage = ({
     [showFinalised]
   );
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'remove':
         if (propName === 'onCheckAction') return PageActions.selectRow;
         return PageActions.deselectRow;
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {

diff --git a/src/pages/CustomerRequisitionPage.js b/src/pages/CustomerRequisitionPage.js
@@ -74,24 +74,19 @@ export const CustomerRequisitionPage = ({ requisition, runWithLoadingIndicator,
   const onSetSuppliedToSuggested = () =>
     runWithLoadingIndicator(() => dispatch(PageActions.setSuppliedToSuggested()));
 
-  const renderPageInfo = useCallback(
-    () => (
-      <PageInfo
-        columns={getPageInfoColumns(pageObject, dispatch, PageActions)}
-        isEditingDisabled={isFinalised}
-      />
-    ),
-    [comment, isFinalised]
-  );
+  const pageInfoColumns = useCallback(getPageInfoColumns(pageObject, dispatch, PageActions), [
+    comment,
+    isFinalised,
+  ]);
 
-  const getAction = colKey => {
+  const getAction = useCallback(colKey => {
     switch (colKey) {
       case 'suppliedQuantity':
         return PageActions.editSuppliedQuantity;
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {
@@ -145,7 +140,7 @@ export const CustomerRequisitionPage = ({ requisition, runWithLoadingIndicator,
     <DataTablePageView>
       <View style={pageTopSectionContainer}>
         <View style={pageTopLeftSectionContainer}>
-          {renderPageInfo()}
+          <PageInfo columns={pageInfoColumns} isEditingDisabled={isFinalised} />
           <SearchBar onChangeText={onFilterData} value={searchTerm} />
         </View>
         <View style={pageTopRightSectionContainer}>

diff --git a/src/pages/StocktakeEditPage.js b/src/pages/StocktakeEditPage.js
@@ -94,17 +94,12 @@ export const StocktakeEditPage = ({
   const onManageStocktake = () =>
     reduxDispatch(gotoStocktakeManagePage({ stocktake, stocktakeName: stocktake.name }));
 
-  const renderPageInfo = useCallback(
-    () => (
-      <PageInfo
-        columns={getPageInfoColumns(pageObject, dispatch, PageActions)}
-        isEditingDisabled={isFinalised}
-      />
-    ),
-    [comment, isFinalised]
-  );
+  const pageInfoColumns = useCallback(getPageInfoColumns(pageObject, dispatch, PageActions), [
+    comment,
+    isFinalised,
+  ]);
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'countedTotalQuantity':
         return PageActions.editCountedQuantity;
@@ -118,7 +113,7 @@ export const StocktakeEditPage = ({
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {
@@ -178,7 +173,7 @@ export const StocktakeEditPage = ({
     <DataTablePageView>
       <View style={pageTopSectionContainer}>
         <View style={pageTopLeftSectionContainer}>
-          {renderPageInfo()}
+          <PageInfo columns={pageInfoColumns} isEditingDisabled={isFinalised} />
           <SearchBar onChangeText={onFilterData} value={searchTerm} />
         </View>
         <View style={pageTopRightSectionContainer}>

diff --git a/src/pages/StocktakeManagePage.js b/src/pages/StocktakeManagePage.js
@@ -50,15 +50,15 @@ export const StocktakeManagePage = ({
     if (stocktake) dispatch(PageActions.selectItems(stocktake.itemsInStocktake));
   }, []);
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'selected':
         if (propName === 'onCheckAction') return PageActions.selectRow;
         return PageActions.deselectRow;
       default:
         return null;
     }
-  };
+  }, []);
 
   const onFilterData = value => dispatch(PageActions.filterData(value));
   const onNameChange = value => dispatch(PageActions.editName(value));

diff --git a/src/pages/StocktakesPage.js b/src/pages/StocktakesPage.js
@@ -63,15 +63,15 @@ export const StocktakesPage = ({ routeName, currentUser, dispatch: reduxDispatch
     return reduxDispatch(gotoStocktakeManagePage({ stocktakeName: '' }));
   };
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'remove':
         if (propName === 'onCheckAction') return PageActions.selectRow;
         return PageActions.deselectRow;
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {

diff --git a/src/pages/SupplierInvoicePage.js b/src/pages/SupplierInvoicePage.js
@@ -55,17 +55,13 @@ export const SupplierInvoicePage = ({ routeName, transaction }) => {
   const onConfirmDelete = () => dispatch(PageActions.deleteTransactionBatches());
   const onCloseModal = () => dispatch(PageActions.closeModal());
 
-  const renderPageInfo = useCallback(
-    () => (
-      <PageInfo
-        columns={getPageInfoColumns(pageObject, dispatch, PageActions)}
-        isEditingDisabled={isFinalised}
-      />
-    ),
-    [comment, theirRef, isFinalised]
-  );
+  const pageInfoColumns = useCallback(getPageInfoColumns(pageObject, dispatch, PageActions), [
+    comment,
+    theirRef,
+    isFinalised,
+  ]);
 
-  const getAction = (columnKey, propName) => {
+  const getAction = useCallback((columnKey, propName) => {
     switch (columnKey) {
       case 'totalQuantity':
         return PageActions.editTotalQuantity;
@@ -77,7 +73,7 @@ export const SupplierInvoicePage = ({ routeName, transaction }) => {
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {
@@ -134,7 +130,7 @@ export const SupplierInvoicePage = ({ routeName, transaction }) => {
     <DataTablePageView>
       <View style={pageTopSectionContainer}>
         <View style={pageTopLeftSectionContainer}>
-          {renderPageInfo()}
+          <PageInfo columns={pageInfoColumns} isEditingDisabled={isFinalised} />
           <SearchBar onChangeText={onFilterData} value={searchTerm} />
         </View>
         <View style={pageTopRightSectionContainer}>

diff --git a/src/pages/SupplierInvoicesPage.js b/src/pages/SupplierInvoicesPage.js
@@ -66,15 +66,15 @@ export const SupplierInvoicesPage = ({
     onCloseModal();
   };
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'remove':
         if (propName === 'onCheckAction') return PageActions.selectRow;
         return PageActions.deselectRow;
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {

diff --git a/src/pages/SupplierRequisitionPage.js b/src/pages/SupplierRequisitionPage.js
@@ -88,17 +88,13 @@ export const SupplierRequisitionPage = ({ requisition, runWithLoadingIndicator,
   const onAddFromMasterList = () =>
     runWithLoadingIndicator(() => dispatch(PageActions.addMasterListItems('Requisition')));
 
-  const renderPageInfo = useCallback(
-    () => (
-      <PageInfo
-        columns={getPageInfoColumns(pageObject, dispatch, PageActions)}
-        isEditingDisabled={isFinalised}
-      />
-    ),
-    [comment, theirRef, isFinalised]
-  );
+  const pageInfoColumns = useCallback(getPageInfoColumns(pageObject, dispatch, PageActions), [
+    comment,
+    theirRef,
+    isFinalised,
+  ]);
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'requiredQuantity':
         return PageActions.editRequisitionItemRequiredQuantity;
@@ -108,7 +104,7 @@ export const SupplierRequisitionPage = ({ requisition, runWithLoadingIndicator,
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {
@@ -259,7 +255,7 @@ export const SupplierRequisitionPage = ({ requisition, runWithLoadingIndicator,
     <DataTablePageView>
       <View style={pageTopSectionContainer}>
         <View style={pageTopLeftSectionContainer}>
-          {renderPageInfo()}
+          <PageInfo columns={pageInfoColumns} isEditingDisabled={isFinalised} />
           <SearchBar onChangeText={onFilterData} value={searchTerm} />
         </View>
         <View style={pageTopRightSectionContainer}>

diff --git a/src/pages/SupplierRequisitionsPage.js b/src/pages/SupplierRequisitionsPage.js
@@ -92,15 +92,15 @@ export const SupplierRequisitionsPage = ({
     reduxDispatch(createSupplierRequisition({ ...requisitionParameters, currentUser }));
   };
 
-  const getAction = (colKey, propName) => {
+  const getAction = useCallback((colKey, propName) => {
     switch (colKey) {
       case 'remove':
         if (propName === 'onCheckAction') return PageActions.selectRow;
         return PageActions.deselectRow;
       default:
         return null;
     }
-  };
+  }, []);
 
   const getModalOnSelect = () => {
     switch (modalKey) {

diff --git a/src/widgets/DataTable/CheckableCell.js b/src/widgets/DataTable/CheckableCell.js
@@ -48,12 +48,9 @@ const CheckableCell = React.memo(
 
     const onPressAction = isChecked ? onUncheckAction : onCheckAction;
 
-    const renderCheck = () => {
-      if (isDisabled) {
-        return isChecked ? DisabledCheckedComponent : DisabledUncheckedComponent;
-      }
-      return isChecked ? CheckedComponent : UncheckedComponent;
-    };
+    const renderCheck = isChecked
+      ? (isDisabled && DisabledCheckedComponent) || CheckedComponent
+      : (isDisabled && DisabledUncheckedComponent) || UncheckedComponent;
 
     return (
       <TouchableCell
@@ -80,10 +77,10 @@ CheckableCell.propTypes = {
   columnKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   isChecked: PropTypes.bool,
   isDisabled: PropTypes.bool,
-  CheckedComponent: PropTypes.element.isRequired,
-  UncheckedComponent: PropTypes.element.isRequired,
-  DisabledCheckedComponent: PropTypes.element,
-  DisabledUncheckedComponent: PropTypes.element,
+  CheckedComponent: PropTypes.func.isRequired,
+  UncheckedComponent: PropTypes.func.isRequired,
+  DisabledCheckedComponent: PropTypes.func,
+  DisabledUncheckedComponent: PropTypes.func,
   onCheckAction: PropTypes.func.isRequired,
   onUncheckAction: PropTypes.func.isRequired,
   dispatch: PropTypes.func.isRequired,

diff --git a/src/widgets/DataTable/DataTable.js b/src/widgets/DataTable/DataTable.js
@@ -96,6 +96,11 @@ const DataTable = React.memo(({ renderRow, renderHeader, style, data, columns, .
     [numberOfEditableCells]
   );
 
+  const renderItem = useCallback(
+    rowItem => renderRow(rowItem, focusNextCell, getCellRef, adjustToTop),
+    [renderRow]
+  );
+
   return (
     <RefContext.Provider value={contextValue}>
       {renderHeader && renderHeader()}
@@ -105,7 +110,7 @@ const DataTable = React.memo(({ renderRow, renderHeader, style, data, columns, .
         data={data}
         keyboardShouldPersistTaps="always"
         style={style}
-        renderItem={rowItem => renderRow(rowItem, focusNextCell, getCellRef, adjustToTop)}
+        renderItem={renderItem}
         {...otherProps}
       />
     </RefContext.Provider>

diff --git a/src/widgets/PageInfo.js b/src/widgets/PageInfo.js
@@ -111,7 +111,7 @@ const renderInfoComponent = (isEditingDisabled, columnIndex, color, rowData, row
  *                            col1: row1 col2: row1
  *                            col1: row2 col2: row2
  */
-export const PageInfo = props => {
+const PageInfoComponent = props => {
   const { columns, isEditingDisabled, titleColor, infoColor } = props;
 
   return (
@@ -148,16 +148,18 @@ export const PageInfo = props => {
   );
 };
 
+export const PageInfo = React.memo(PageInfoComponent);
+
 export default PageInfo;
 
-PageInfo.propTypes = {
+PageInfoComponent.propTypes = {
   columns: PropTypes.array.isRequired,
   isEditingDisabled: PropTypes.bool,
   titleColor: PropTypes.string,
   infoColor: PropTypes.string,
 };
 
-PageInfo.defaultProps = {
+PageInfoComponent.defaultProps = {
   isEditingDisabled: false,
   infoColor: SUSSOL_ORANGE,
   titleColor: DARK_GREY,