@appbuckets/react-ui/esm/RxTable/lib/useDataFiltering.js

Just Another React UI Framework

import { __read, __assign } from 'tslib';
import * as React from 'react';

/* --------
 * Hook Definition
 * -------- */
function useDataFiltering(enabled, config) {
  var columns = config.columns,
    data = config.data,
    filterLogic = config.filterLogic;
  // ----
  // Internal State
  // ----
  var _a = __read(
      React.useState(
        columns.reduce(function (acc, column) {
          if (column.filter) {
            acc[column.key] = column.filter.initialValue;
          }
          return acc;
        }, {})
      ),
      2
    ),
    filters = _a[0],
    setFilteringValues = _a[1];
  // ----
  // Handlers
  // ----
  var setFilter = React.useCallback(
    function (columnKey, value) {
      setFilteringValues(function (curr) {
        var _a;
        return __assign(
          __assign({}, curr),
          ((_a = {}), (_a[columnKey] = value), _a)
        );
      });
    },
    [setFilteringValues]
  );
  // ----
  // Filtering Data
  // ----
  var filteredData = React.useMemo(
    function () {
      /** If no filter, return entire data */
      if (!enabled) {
        return data;
      }
      /** Init a regexp pool to save regexp once per time */
      var regExpPool = {};
      /** Get only filter columns */
      var filterColumns = columns.filter(function (column) {
        if (!column.filter) {
          return false;
        }
        if (column.filter.type === 'input') {
          return (
            typeof filters[column.key] === 'string' &&
            !!filters[column.key].length
          );
        }
        if (column.filter.type === 'regexp') {
          /** Get current value */
          var value = filters[column.key];
          /** If is invalid, abort */
          if (typeof value !== 'string' || !value.length) {
            return false;
          }
          /** If value is valid, save the regexp into pool */
          regExpPool[column.key] = new RegExp(
            value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'),
            column.filter.flags || 'i'
          );
          return true;
        }
        if (column.filter.type === 'checkbox') {
          return (
            typeof filters[column.key] === 'boolean' && !!filters[column.key]
          );
        }
        if (column.filter.type === 'select') {
          return (
            filters[column.key] !== null && filters[column.key] !== undefined
          );
        }
        if (column.filter.type === 'multi-select') {
          return (
            Array.isArray(filters[column.key]) && filters[column.key].length > 0
          );
        }
        return false;
      });
      /** If no columns are able to filter data, return entire data set */
      if (!filterColumns.length) {
        return data;
      }
      /** Filter data using columns */
      return data.filter(function (row, index, array) {
        return filterColumns.reduce(function (show, next) {
          /** Assert filter realy exists */
          if (!next.filter) {
            return show;
          }
          /** Get the filter show value */
          var couldShowNext =
            next.filter.type === 'regexp'
              ? !!regExpPool[next.key]
                ? next.filter.show(regExpPool[next.key], row, index, array)
                : true
              : next.filter.show(filters[next.key], row, index, array);
          /** Concatenate result */
          return filterLogic === 'and'
            ? show && couldShowNext
            : show || couldShowNext;
        }, filterLogic === 'and');
      });
    },
    [columns, data, filterLogic, filters, enabled]
  );
  // ----
  // Return tools
  // ----
  return {
    filteredData: filteredData,
    filters: filters,
    setFilter: setFilter,
  };
}

export { useDataFiltering as default };