Skip to main content

change-rule

Description​

Fires each time a change is made to the filtering rule

Usage​

"change-rule": ({
  id: string | string,
  rule: {
    id?: string,
    parent?: string,
    data?: rule[],
    glue?: "and" | "or",
    field?: string, 
    $temp?: boolean,
    type?: string,
    predicate?: "month" | "year", 
    filter?: string,
    includes?: any[],
    value?:  any,
  }; 
}) => void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the id of a field for which the rule is updated
  • rule - (required) a filtering rule with the following parameters:
    • id - (optional) the rule id
    • parent - (optional) parent id if any
    • data - (optional) an array with the rule object parameters for each item
    • $temp - (optional) set to true by default, which means that a group is added only temporarily before changes are saved
    • glue - (optional) "and" | "or"
    • field - (optional) the id of a field
    • type - (optional) the type of a value: "text" (default, for string values), "number", "date", "tuple"
    • predicate - (optional) additional predicate for date types: "month" | "year"
    • filter - (optional) the filter operator
    • includes - (optional) an array of the included values (strings, numbers or dates)
    • value - (optional) the value passed to the field

Example​

import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";

function App() {
  const { fields, options } = getData();

  // If you access the FilterBuilder instance via its API (for example through an `init` callback prop),
  // you can subscribe to the internal event. When used with the component API the event name is camelCased.
  const init = (api) => {
    api.on("changeRule", ev => {
      console.log("The id of the field for which the rule was changed:", ev.id);
      // access rule if needed
      // console.log(ev.rule);
    });
  };

  return (
    `<FilterBuilder
      options={options}
      fields={fields}
      init={init}
    />`
  );
}

export default App;

Related articles: