fix: DataTable QoL and fixes (#138)

fix: DataTable QoL and fixes
reactioncommerce · Jan 25, 2020 · 160f6f3 · 160f6f3
2 parents ff32c43 + f0460fe
commit 160f6f3
Show file tree

Hide file tree

Showing 16 changed files with 8,616 additions and 8,447 deletions.
diff --git a/package.json b/package.json
@@ -100,15 +100,15 @@
   },
   "dependencies": {
     "@babel/polyfill": "~7.2.5",
-    "@material-ui/core": "~4.3.2",
-    "@material-ui/lab": "~4.0.0-alpha.39",
+    "@material-ui/core": "4.9.0",
+    "@material-ui/lab": "4.0.0-alpha.40",
     "@reactioncommerce/components-context": "~1.2.0",
     "commitlint": "^8.0.0",
     "mdi-material-ui": "~5.8.0",
     "notistack": "^0.9.2",
     "prop-types": "~15.7.2",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0"
+    "react": "~16.12.0",
+    "react-dom": "~16.12.0"
   },
   "devDependencies": {
     "@babel/cli": "~7.2.3",
@@ -129,8 +129,8 @@
     "@commitlint/cli": "~7.0.0",
     "@commitlint/config-conventional": "~7.0.1",
     "@reactioncommerce/eslint-config": "~2.0.0",
-    "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^8.0.6",
+    "@testing-library/jest-dom": "5.0.2",
+    "@testing-library/react": "9.4.0",
     "adr": "~1.1.1",
     "autoprefixer": "~7.1.6",
     "babel-core": "~7.0.0-bridge.0",

diff --git a/package/package.json b/package/package.json
@@ -89,8 +89,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@material-ui/core": ">=4.3.2 < 5",
-    "@material-ui/lab": ">=~4.0.0-alpha.39",
+    "@material-ui/core": ">=4.9.0 < 5",
+    "@material-ui/lab": ">=4.0.0-alpha.40",
     "@reactioncommerce/components-context": "~1.2.0",
     "prop-types": "~15.7.2",
     "react-dom": "~16.9.0"

diff --git a/package/src/components/ActionMenu/__snapshots__/ActionMenu.test.js.snap b/package/src/components/ActionMenu/__snapshots__/ActionMenu.test.js.snap
@@ -5,7 +5,7 @@ exports[`basic snapshot - only default props 1`] = `
   <button
     aria-controls="action-menu"
     aria-haspopup="true"
-    class="MuiButtonBase-root MuiButton-root makeStyles-button-1 MuiButton-outlined MuiButton-outlinedPrimary"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-button-1 MuiButton-outlinedPrimary"
     tabindex="0"
     type="button"
   >
@@ -14,7 +14,7 @@ exports[`basic snapshot - only default props 1`] = `
     >
       Actions
       <div
-        class="MuiBox-root MuiBox-root-26"
+        class="MuiBox-root MuiBox-root-38"
       >
         <svg
           aria-hidden="true"
@@ -41,7 +41,7 @@ exports[`option onClick 1`] = `
   <button
     aria-controls="action-menu"
     aria-haspopup="true"
-    class="MuiButtonBase-root MuiButton-root makeStyles-button-269 MuiButton-outlined MuiButton-outlinedPrimary"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-button-297 MuiButton-outlinedPrimary"
     tabindex="0"
     type="button"
   >
@@ -50,7 +50,7 @@ exports[`option onClick 1`] = `
     >
       Actions
       <div
-        class="MuiBox-root MuiBox-root-294"
+        class="MuiBox-root MuiBox-root-334"
       >
         <svg
           aria-hidden="true"
@@ -77,7 +77,7 @@ exports[`option onClick with confirmation 1`] = `
   <button
     aria-controls="action-menu"
     aria-haspopup="true"
-    class="MuiButtonBase-root MuiButton-root makeStyles-button-403 MuiButton-outlined MuiButton-outlinedPrimary"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-button-445 MuiButton-outlinedPrimary"
     tabindex="0"
     type="button"
   >
@@ -86,7 +86,7 @@ exports[`option onClick with confirmation 1`] = `
     >
       Actions
       <div
-        class="MuiBox-root MuiBox-root-428"
+        class="MuiBox-root MuiBox-root-482"
       >
         <svg
           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`select an option 1`] = `
   <button
     aria-controls="action-menu"
     aria-haspopup="true"
-    class="MuiButtonBase-root MuiButton-root makeStyles-button-135 MuiButton-outlined MuiButton-outlinedPrimary"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-button-149 MuiButton-outlinedPrimary"
     tabindex="0"
     type="button"
   >
@@ -122,7 +122,7 @@ exports[`select an option 1`] = `
     >
       Actions
       <div
-        class="MuiBox-root MuiBox-root-160"
+        class="MuiBox-root MuiBox-root-186"
       >
         <svg
           aria-hidden="true"

diff --git a/package/src/components/Button/__snapshots__/Button.test.js.snap b/package/src/components/Button/__snapshots__/Button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`basic snapshot - only default props 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root myBtn MuiButton-text"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text myBtn"
     tabindex="0"
     type="button"
   >
@@ -22,7 +22,7 @@ exports[`basic snapshot - only default props 1`] = `
 exports[`error button snapshot 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root myBtn MuiButton-contained MuiButton-containedPrimary makeStyles-containedPrimary-35"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained myBtn MuiButton-containedPrimary makeStyles-containedPrimary-47"
     tabindex="0"
     type="button"
   >
@@ -41,7 +41,7 @@ exports[`error button snapshot 1`] = `
 exports[`error button snapshot 2`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root myBtn MuiButton-outlined MuiButton-outlinedPrimary makeStyles-outlinedPrimary-69"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined myBtn MuiButton-outlinedPrimary makeStyles-outlinedPrimary-93"
     tabindex="0"
     type="button"
   >
@@ -60,7 +60,7 @@ exports[`error button snapshot 2`] = `
 exports[`isWaiting button snapshot 1`] = `
 <DocumentFragment>
   <button
-    class="MuiButtonBase-root MuiButton-root myBtn MuiButton-text Mui-disabled Mui-disabled"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text myBtn Mui-disabled Mui-disabled"
     disabled=""
     tabindex="-1"
     type="button"
@@ -70,7 +70,7 @@ exports[`isWaiting button snapshot 1`] = `
     >
       Upload
       <div
-        class="MuiCircularProgress-root makeStyles-buttonProgress-100 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+        class="MuiCircularProgress-root makeStyles-buttonProgress-136 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
         role="progressbar"
         style="width: 16px; height: 16px;"
       >

diff --git a/package/src/components/ConfirmDialog/__snapshots__/ConfirmDialog.test.js.snap b/package/src/components/ConfirmDialog/__snapshots__/ConfirmDialog.test.js.snap
@@ -2,7 +2,8 @@
 
 exports[`basic snapshot - with opening the dialog 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiDialog-paperFullWidth MuiPaper-rounded"
+  aria-labelledby="confirm-action-dialog-title"
+  class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiDialog-paperFullWidth MuiPaper-elevation24 MuiPaper-rounded"
   role="dialog"
 >
   <div

diff --git a/package/src/components/DataTable/DataTable.js b/package/src/components/DataTable/DataTable.js
@@ -118,7 +118,7 @@ const DataTable = React.forwardRef(function DataTable(props, ref) {
     gotoPage,
     nextPage,
     previousPage,
-    setGlobalFilter,
+    debounceSetGlobalFilter,
     setPageSize,
     state: { pageIndex, pageSize, filters }
   } = props;
@@ -268,7 +268,7 @@ const DataTable = React.forwardRef(function DataTable(props, ref) {
                 fullWidth
                 margin="dense"
                 placeholder={labels.globalFilterPlaceholder}
-                onChange={(event) => setGlobalFilter(event.target.value)}
+                onChange={(event) => debounceSetGlobalFilter(event.target.value)}
                 variant="outlined"
               />
               <Box paddingLeft={2}>
@@ -530,6 +530,10 @@ DataTable.propTypes = {
    * Row data as an array of objects
    */
   data: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Set the global text filter on a delay
+   */
+  debounceSetGlobalFilter: PropTypes.func,
   /**
    * Flattened array of the original column data
    */

diff --git a/package/src/components/DataTable/DataTable.md b/package/src/components/DataTable/DataTable.md
@@ -14,10 +14,9 @@ This example uses many of the available features of the DataTable.
 
 ```jsx
 import { useMemo, useEffect, useCallback, forwardRef, useState } from "react";
-import { Box, Checkbox, Link, Typography } from "@material-ui/core";
+import { Box, Button, Divider, Link, Typography } from "@material-ui/core";
 import { useDataTable } from "./";
 import { getPaginatedData } from "./mocks/sampleData";
-// import data from "./mocks/orders.json";
 import Chip from "../Chip";
 import DataTableFilter, { makeDataTableColumnFilter } from "../DataTableFilter";
 import dateFormat from "dateformat";
@@ -170,10 +169,11 @@ function TableExample() {
   // Fetch data callback whenever the table requires more data to properly display.
   // This is the case if theres an update with pagination, filtering or sorting.
   // This function is called on the initial load of the table to fet the first set of results.
-  const onFetchData = useCallback(async ({ globalFilter, pageIndex, pageSize, filters }) => {
+  const onFetchData = useCallback(async ({ globalFilter, pageIndex, pageSize, filters, filtersByKey }) => {
     console.log("Fetch Data")
     console.log("-- Global Filter", globalFilter)
-    console.log("-- Filters", filters)
+    console.log("-- Raw Filters", filters)
+    console.log("-- Filters by object key", filtersByKey)
 
     // Trigger loading animation
     setIsLoading(true);
@@ -182,7 +182,7 @@ function TableExample() {
     const { data: apiData } = await getPaginatedData({
       filters: {
         searchText: globalFilter,
-        ...filters
+        ...filtersByKey
       },
       offset: pageIndex * pageSize,
       limit: (pageIndex + 1) * pageSize,
@@ -242,12 +242,17 @@ function TableExample() {
     getRowID: (row, index) => row.id,
   })
 
-  const { toggleAllRowsSelected } = dataTableProps;
+  const {
+    refetch,
+    fetchData,
+    toggleAllRowsSelected
+  } = dataTableProps;
 
-      // Create options for the built-in ActionMenu in the DataTable
+  // Create options for the built-in ActionMenu in the DataTable
   const actionMenuOptions = useMemo(() => [{
     label: "Filter by file",
     onClick: () => {
+      toggleAllRowsSelected(false);
       console.log("Filter by file");
     }
   }, {
@@ -256,7 +261,7 @@ function TableExample() {
     confirmMessage: `Are you sure you want to publish ${selectedRows.length} products to your storefront?`,
     isDisabled: selectedRows.length === 0,
     onClick: () => {
-      toggleAllRowsSelected(false);
+      refetch();
       console.log(`Published ${selectedRows.length} products`);
     }
   }, {
@@ -265,7 +270,7 @@ function TableExample() {
     confirmMessage: `Are you sure you want to make ${selectedRows.length} products visible to customers?`,
     isDisabled: selectedRows.length === 0,
     onClick: () => {
-      toggleAllRowsSelected(false);
+      refetch();
       console.log(`Made ${selectedRows.length} products visible`);
     }
   }, {
@@ -274,7 +279,7 @@ function TableExample() {
     confirmMessage: `Are you sure you want to make ${selectedRows.length} products hidden from customers?`,
     isDisabled: selectedRows.length === 0,
     onClick: () => {
-      toggleAllRowsSelected(false);
+      refetch();
       console.log(`Made ${selectedRows.length} products hidden`);
     }
   }, {
@@ -283,7 +288,7 @@ function TableExample() {
     confirmMessage: `Are you sure you want to duplicate ${selectedRows.length} products?`,
     isDisabled: selectedRows.length === 0,
     onClick: () => {
-      toggleAllRowsSelected(false);
+      refetch();
       console.log(`Duplicated ${selectedRows.length} products`);
     }
   }, {
@@ -292,18 +297,63 @@ function TableExample() {
     confirmMessage: `Are you sure you want to archive ${selectedRows.length} products? This will hide them from both admins and customers.`,
     isDisabled: selectedRows.length === 0,
     onClick: () => {
-      toggleAllRowsSelected(false);
+      refetch();
       console.log(`Archived ${selectedRows.length} products`);
     }
   }], [selectedRows]);
 
 
   return (
-    <DataTable
-      {...dataTableProps}
-      actionMenuProps={{ options: actionMenuOptions }}
-      isLoading={isLoading}
-    />
+    <Box>
+      <DataTable
+        {...dataTableProps}
+        actionMenuProps={{ options: actionMenuOptions }}
+        isLoading={isLoading}
+      />
+      <Divider />
+      <Box display="flex" paddingTop={2}>
+        <Box display="flex" alignItems="center" paddingRight={2}>
+          <Typography>{"Custom controls"}</Typography>
+        </Box>
+        <Box paddingRight={2}>
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={() => {
+              // Use fetch data if you want to force the onFetchData callback to execute
+              // All options are optional.
+              fetchData({
+                globalFilter: "processing",
+                filters: [
+                  {
+                    id: "fulfillmentStatus",
+                    value: "unfulfilled"
+                  }
+                ],
+                pageSize: 20,
+              })
+            }}
+          >
+            {"Load unfulfilled orders"}
+          </Button>
+        </Box>
+
+        <Button
+          color="primary"
+          variant="outlined"
+          onClick={() => {
+            // A global clear all filters button
+            fetchData({
+              globalFilter: null,
+              filters: null,
+              pageSize: 10,
+            })
+          }}
+        >
+          {"Clear all filters"}
+        </Button>
+      </Box>
+    </Box>
   );
 }