createArrayFilter

Description

The function takes filter value as an input and returns a filtered array

It uses the createFilter helper inside.

Usage

createArrayFilter(
  cfg: {
    glue?: "and" | "or",
    rules: {
      field: string,
      type?: "date" | "number" | "text" | "tuple",
      predicate?: "month" | "year",
      filter?: string,
      value?: string | number | Date,
      includes?: any[],
    }[];
  },
  options?: { orNull?: boolean }
): ((data: any[]) => any[]) | null;

Parameters

• cfg - (required) filter settings:
  • glue - (optional) the logic for combining filtering rules:
    • "and" (default) - displays records that satisfy all rules
    • "or" - displays records that satisfy at least one rule
  • rules - (required) an array of filtering rules. Each rule object can be an individual rule or a nested group. Each rule has the following properties:
    • field - (required) the ID of the field; must match the corresponding field in the fields array
    • type - (optional) filter type: "text" (default) | "number" | "date" | "tuple"
    • predicate - (optional) date part extractor for date fields: "month" | "year"
    • filter - (optional) the filter operator available for this type
    • value - (optional) the value to filter by
    • includes - (optional) an array of values to include
• options - (optional) behavior when no rules are set:
  • orNull: true - returns null when there are no rules
  • orNull: false (default) - returns the array

Returns

A function that takes an array and returns its filtered copy, or null when options.orNull is true and there are no rules.

Example

This example demonstrates how to use createArrayFilter to generate a function to filter a data array.

import { useState, useEffect } from "react";
import { getData } from "../data";
import { FilterBuilder, createArrayFilter } from "@svar-ui/react-filter";

export default function Example() {
  const { value, fields, options, data } = getData();

  const [filteredData, setFilteredData] = useState([]);

  function applyFilter(value) {
    const filter = createArrayFilter(value);
    // filter may be null if options.orNull is true and there are no rules
    if (filter) {
      setFilteredData(filter(data));
    } else {
      setFilteredData(null);
    }
  }

  // Apply initial filter on mount
  useEffect(() => {
    applyFilter(value);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    `<FilterBuilder
      value={value}
      fields={fields}
      options={options}
      onChange={({ value }) =>` applyFilter(value)}
    />
  );
}