feat: Add manual filters (#146)

feat: Add manual filters
reactioncommerce · Jan 29, 2020 · f220a04 · f220a04
2 parents 8228b90 + a41d6ea
commit f220a04
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 11 deletions.
diff --git a/package/src/components/DataTable/DataTable.js b/package/src/components/DataTable/DataTable.js
@@ -103,6 +103,7 @@ const DataTable = React.forwardRef(function DataTable(props, ref) {
     shouldShowAdditionalFilters,
     onRowClick,
     onRemoveFilter,
+    onRemoveManualFilter,
     isLoading,
 
     // Props from the useTable hook
@@ -120,7 +121,7 @@ const DataTable = React.forwardRef(function DataTable(props, ref) {
     previousPage,
     debounceSetGlobalFilter,
     setPageSize,
-    state: { pageIndex, pageSize, filters }
+    state: { pageIndex, pageSize, filters, manualFilters }
   } = props;
   const classes = useStyles();
   const theme = useTheme();
@@ -336,8 +337,10 @@ const DataTable = React.forwardRef(function DataTable(props, ref) {
       <DataTableFilterChipBar
         columns={flatColumns}
         filters={filters}
+        manualFilters={manualFilters}
         labels={labels}
         onRemove={onRemoveFilter}
+        onRemoveManualFilter={onRemoveManualFilter}
       />
       <div className={classes.tableWrapper}>
         <Table ref={ref} {...getTableProps()}>
@@ -619,6 +622,10 @@ DataTable.propTypes = {
    * Event triggered when a filter is removed with the `(key, multiSelectValueIfAvailable) => {}` signature.
    */
   onRemoveFilter: PropTypes.func,
+  /**
+   * Event triggered when a manual filter is removed with the `(key) => {}` signature.
+   */
+  onRemoveManualFilter: PropTypes.func,
   /**
    * Event triggered when a row is clicked
    */

diff --git a/package/src/components/DataTable/DataTable.md b/package/src/components/DataTable/DataTable.md
@@ -169,17 +169,28 @@ 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, filtersByKey }) => {
+  const onFetchData = useCallback(async ({
+    globalFilter,
+    pageIndex,
+    pageSize,
+    filters,
+    filtersByKey,
+    manualFilters,
+    manualFiltersByKey
+  }) => {
     console.log("Fetch Data")
     console.log("-- Global Filter", globalFilter)
     console.log("-- Raw Filters", filters)
     console.log("-- Filters by object key", filtersByKey)
+    console.log("-- Manual filters", manualFilters)
+    console.log("-- Manual filters by object key", manualFiltersByKey)
 
     // Trigger loading animation
     setIsLoading(true);
 
     // Get data from an API.
     const { data: apiData } = await getPaginatedData({
+      orderIds: manualFilters.length && manualFilters[0].value,
       filters: {
         searchText: globalFilter,
         ...filtersByKey
@@ -245,7 +256,8 @@ function TableExample() {
   const {
     refetch,
     fetchData,
-    toggleAllRowsSelected
+    toggleAllRowsSelected,
+    setManualFilters
   } = dataTableProps;
 
   // Create options for the built-in ActionMenu in the DataTable
@@ -338,6 +350,20 @@ function TableExample() {
           </Button>
         </Box>
 
+        <Box paddingRight={2}>
+          <Button
+            color="primary"
+            variant="outlined"
+            onClick={() => {
+              // This can be used for any data type, but in this case its a simulated
+              // CSV input converted to an array of IDs
+              setManualFilters("small.csv", [1,2,3])
+            }}
+          >
+            {"Set manual filters for ID (1,2,3)"}
+          </Button>
+        </Box>
+
         <Button
           color="primary"
           variant="outlined"

diff --git a/package/src/components/DataTable/helpers/DataTableFilterChipBar.js b/package/src/components/DataTable/helpers/DataTableFilterChipBar.js
@@ -22,10 +22,25 @@ function getFilterLabel(labels, filterValue) {
  * @returns {PropTypes.elementType} React component
  */
 function DataTableFilterChipBar(props) {
-  const { filters, labels, onRemove } = props;
+  const { filters, manualFilters, labels, onRemove, onRemoveManualFilter } = props;
 
   // Don't show the component if there aren't any filters to show
-  if (filters.length === 0) return null;
+  if (filters.length === 0 && manualFilters.length === 0) return null;
+
+  const manualFilterChips = manualFilters.map(({ id }) => (
+    <Box
+      key={`single_${id}`}
+      paddingRight={0.5}
+      paddingBottom={0.5}
+    >
+      <Chip
+        color="primary"
+        label={id}
+        onDelete={() => onRemoveManualFilter(id)}
+        style={{ marginRight: "4px" }}
+      />
+    </Box>
+  ));
 
   // Show filters as chips
   const chips = filters.map(({ id, value }) => {
@@ -72,6 +87,7 @@ function DataTableFilterChipBar(props) {
       display="flex"
       flexWrap="wrap"
     >
+      {manualFilterChips}
       {chips}
     </Box>
   );
@@ -80,11 +96,14 @@ function DataTableFilterChipBar(props) {
 DataTableFilterChipBar.propTypes = {
   filters: PropTypes.array,
   labels: PropTypes.object,
-  onRemove: PropTypes.func
+  manualFilters: PropTypes.array,
+  onRemove: PropTypes.func,
+  onRemoveManualFilter: PropTypes.func
 };
 
 DataTableFilterChipBar.defaultProps = {
-  onRemove: () => { }
+  onRemove: () => { },
+  onRemoveManualFilter: () => { }
 };
 
 export default DataTableFilterChipBar;
diff --git a/package/src/components/DataTable/helpers/useDataTable.js b/package/src/components/DataTable/helpers/useDataTable.js
@@ -9,6 +9,7 @@ import {
   useGlobalFilter
 } from "react-table";
 import useDataTableCellProps from "./useDataTableCellProps";
+import useDataTableManualFilter from "./useDataTableManualFilter";
 
 /**
  * Convert an array of objects to an object by id
@@ -77,6 +78,7 @@ export default function useDataTable({
       pageCount: controlledPageCount,
       ...otherProps
     },
+    useDataTableManualFilter,
     useFilters,
     useGlobalFilter,
     usePagination,
@@ -120,9 +122,11 @@ export default function useDataTable({
   const {
     setAllFilters,
     setFilter,
+    setAllManualFilters,
+    setManualFilters,
     setGlobalFilter,
     setPageSize,
-    state: { pageIndex, pageSize, filters, globalFilter, selectedRowIds, sortBy }
+    state: { pageIndex, pageSize, filters, globalFilter, manualFilters, selectedRowIds, sortBy }
   } = dataTableProps;
 
   useEffect(() => {
@@ -132,13 +136,16 @@ export default function useDataTable({
         sortBy,
         filters,
         filtersByKey: filtersArrayToObject(filters),
+        manualFilters,
+        manualFiltersByKey: filtersArrayToObject(manualFilters),
         pageIndex,
         pageSize
       });
     }
   }, [
     globalFilter,
     filters,
+    manualFilters,
     onFetchData,
     pageIndex,
     pageSize,
@@ -154,6 +161,9 @@ export default function useDataTable({
       onRowSelect({
         globalFilter,
         filters,
+        filtersByKey: filtersArrayToObject(filters),
+        manualFilters,
+        manualFiltersByKey: filtersArrayToObject(manualFilters),
         pageIndex,
         pageSize,
         selectedRows: Object.keys(selectedRowIds)
@@ -162,6 +172,7 @@ export default function useDataTable({
   }, [
     globalFilter,
     filters,
+    manualFilters,
     onFetchData,
     pageIndex,
     pageSize,
@@ -175,6 +186,9 @@ export default function useDataTable({
           row,
           data,
           filters,
+          filtersByKey: filtersArrayToObject(filters),
+          manualFilters,
+          manualFiltersByKey: filtersArrayToObject(manualFilters),
           pageIndex,
           pageSize
         });
@@ -191,14 +205,20 @@ export default function useDataTable({
     } else {
       setFilter(id, null);
     }
-  }, [filters]);
+  }, []);
+
+  const onRemoveManualFilter = useCallback((id) => {
+    setManualFilters(id, null);
+  }, []);
 
   const refetch = useCallback(() => {
     if (onFetchData) {
       onFetchData({
         globalFilter,
         filters,
         filtersByKey: filtersArrayToObject(filters),
+        manualFilters,
+        manualFiltersByKey: filtersArrayToObject(manualFilters),
         pageIndex,
         pageSize,
         sortBy
@@ -208,6 +228,7 @@ export default function useDataTable({
     globalFilter,
     filters,
     onFetchData,
+    manualFilters,
     pageIndex,
     pageSize,
     sortBy
@@ -216,10 +237,12 @@ export default function useDataTable({
   const fetchData = useCallback(({
     globalFilter: globalFilterLocal,
     filters: filtersLocal,
+    manualFilters: manualFiltersLocal,
     pageSize: pageSizeLocal
   }) => {
     setGlobalFilter(globalFilterLocal || "");
     setAllFilters(filtersLocal || []);
+    setAllManualFilters(manualFiltersLocal || []);
     setPageSize(pageSizeLocal || pageSize);
   }, []);
 
@@ -230,6 +253,7 @@ export default function useDataTable({
     isSelectable,
     onRowClick: onRowClickWrapper,
     onRemoveFilter,
+    onRemoveManualFilter,
     refetch,
     shouldShowAdditionalFilters,
     setShowAdditionalFilters