Documentation Checkpoint

src/filterTypes.js

@@ -0,0 +1,56 @@
+export const text = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue !== undefined
+      ? String(rowValue)
+          .toLowerCase()
+          .includes(String(filterValue).toLowerCase())
+      : true
+  })
+}
+
+export const exactText = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue !== undefined
+      ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+      : true
+  })
+}
+
+export const exactTextCase = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue !== undefined
+      ? String(rowValue) === String(filterValue)
+      : true
+  })
+}
+
+export const includes = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return filterValue.includes(rowValue)
+  })
+}
+
+export const includesAll = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return filterValue.every(val => rowValue.includes(val))
+  })
+}
+
+export const exact = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue === filterValue
+  })
+}
+
+export const between = (rows, id, filterValue) => {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue >= filterValue[0] && rowValue <= filterValue[1]
+  })
+}

src/hooks/useFilters.js

@@ -1,7 +1,8 @@
 import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
-import { defaultFilterFn, getFirstDefined } from '../utils'
+import { getFirstDefined } from '../utils'
+import * as filterTypes from '../filterTypes'
 import { addActions, actions } from '../actions'
 import { defaultState } from './useTableState'
 
@@ -33,26 +34,14 @@ export const useFilters = props => {
     debug,
     rows,
     columns,
-    filterFn = defaultFilterFn,
+    filterTypes: userFilterTypes = {},
+    defaultFilter = filterTypes.text,
     manualFilters,
     disableFilters,
     hooks,
     state: [{ filters }, setState],
   } = props
 
-  columns.forEach(column => {
-    const { id, accessor, canFilter } = column
-    column.canFilter = accessor
-      ? getFirstDefined(
-          canFilter,
-          disableFilters === true ? false : undefined,
-          true
-        )
-      : false
-    // Was going to add this to the filter hook
-    column.filterValue = filters[id]
-  })
-
   const setFilter = (id, val) => {
     return setState(old => {
       if (typeof val === 'undefined') {
@@ -86,10 +75,25 @@ export const useFilters = props => {
 
   hooks.columns.push(columns => {
     columns.forEach(column => {
-      if (column.canFilter) {
-        column.setFilter = val => setFilter(column.id, val)
-      }
+      const { id, accessor, canFilter } = column
+
+      // Determine if a column is filterable
+      column.canFilter = accessor
+        ? getFirstDefined(
+            canFilter,
+            disableFilters === true ? false : undefined,
+            true
+          )
+        : false
+
+      // Provide the column a way of updating the filter value
+      column.setFilter = val => setFilter(column.id, val)
+
+      // Provide the current filter value to the column for
+      // convenience
+      column.filterValue = filters[id]
     })
+
     return columns
   })
 
@@ -114,15 +118,33 @@ export const useFilters = props => {
             return filteredSoFar
           }
 
-          const filterMethod = column.filterMethod || filterFn
+          // Look up filter functions in this order:
+          // column function
+          // column string lookup on user filters
+          // column string lookup on built-in filters
+          // default function
+          // default string lookup on user filters
+          // default string lookup on built-in filters
+          const filterMethod =
+            getFunctionalFilter(column.filter) ||
+            userFilterTypes[column.filter] ||
+            filterTypes[column.filter] ||
+            getFunctionalFilter(defaultFilter) ||
+            userFilterTypes[defaultFilter] ||
+            filterTypes[defaultFilter]
 
-          // If 'filterAll' is set to true, pass the entire dataset to the filter method
-          if (column.filterAll) {
-            return filterMethod(filteredSoFar, columnID, filterValue, column)
+          if (!filterMethod) {
+            console.warn(
+              `Could not find a valid 'column.filter' for column with the ID: ${
+                column.id
+              }.`
+            )
+            return filteredSoFar
           }
-          return filteredSoFar.filter(row =>
-            filterMethod(row, columnID, filterValue, column)
-          )
+
+          // Pass the rows, id, filterValue and column to the filterMethod
+          // to get the filtered rows back
+          return filterMethod(filteredSoFar, columnID, filterValue, column)
         },
         rows
       )
@@ -150,7 +172,15 @@ export const useFilters = props => {
     }
 
     return filterRows(rows)
-  }, [manualFilters, filters, debug, rows, columns, filterFn])
+  }, [
+    manualFilters,
+    filters,
+    debug,
+    rows,
+    columns,
+    userFilterTypes,
+    defaultFilter,
+  ])
 
   return {
     ...props,
@@ -159,3 +189,9 @@ export const useFilters = props => {
     rows: filteredRows,
   }
 }
+
+function getFunctionalFilter(filter) {
+  if (typeof filter === 'function') {
+    return filter
+  }
+}

src/hooks/useFlexLayout.js

@@ -151,61 +151,4 @@ function getSizesForColumn(
         : getFirstDefined(width, minWidth, defaultFlex),
     maxWidth,
   }
-}
-
-// const resetRefs = () => {
-//   if (debug) console.info("resetRefs");
-//   renderedCellInfoRef.current = {};
-// };
-
-// const calculateAutoWidths = () => {
-//   RAF(() => {
-//     const newColumnMeasurements = {};
-//     Object.values(renderedCellInfoRef.current).forEach(({ column, el }) => {
-//       if (!el) {
-//         return;
-//       }
-
-//       let measurement = 0;
-
-//       const measureChildren = children => {
-//         if (children) {
-//           [].slice.call(children).forEach(child => {
-//             measurement = Math.max(
-//               measurement,
-//               Math.ceil(child.offsetWidth) || 0
-//             );
-//             measureChildren(child.children);
-//           });
-//         }
-//         return measurement;
-//       };
-
-//       const parentDims = getElementDimensions(el);
-//       measureChildren(el.children);
-
-//       newColumnMeasurements[column.id] = Math.max(
-//         newColumnMeasurements[column.id] || 0,
-//         measurement + parentDims.paddingLeft + parentDims.paddingRight
-//       );
-//     });
-
-//     const oldKeys = Object.keys(columnMeasurements);
-//     const newKeys = Object.keys(newColumnMeasurements);
-
-//     const needsUpdate =
-//       oldKeys.length !== newKeys.length ||
-//       oldKeys.some(key => {
-//         return columnMeasurements[key] !== newColumnMeasurements[key];
-//       });
-
-//     if (needsUpdate) {
-//       setState(old => {
-//         return {
-//           ...old,
-//           columnMeasurements: newColumnMeasurements
-//         };
-//       }, actions.updateAutoWidth);
-//     }
-//   });
-// };
+}

src/hooks/useSimpleLayout.js

@@ -1,28 +0,0 @@
-export const useSimpleLayout = props => {
-  const {
-    hooks: { columns: columnsHooks, getHeaderProps, getCellProps },
-  } = props
-
-  columnsHooks.push(columns => {
-    getHeaderProps.push(column => ({
-      style: {
-        boxSizing: 'border-box',
-        width: column.width !== undefined ? `${column.width}px` : 'auto',
-      },
-    }))
-
-    getCellProps.push(cell => {
-      return {
-        style: {
-          boxSizing: 'border-box',
-          width:
-            cell.column.width !== undefined ? `${cell.column.width}px` : 'auto',
-        },
-      }
-    })
-
-    return columns
-  })
-
-  return props
-}

src/utils.js

@@ -67,14 +67,6 @@ export function defaultGroupByFn(rows, grouper) {
   }, {})
 }
 
-export function defaultFilterFn(row, id, value, column) {
-  return row.values[id] !== undefined
-    ? String(row.values[id])
-        .toLowerCase()
-        .includes(String(value).toLowerCase())
-    : true
-}
-
 export function setBy(obj = {}, path, value) {
   const recurse = (obj, depth = 0) => {
     const key = path[depth]