@react-querybuilder/bulma

@react-querybuilder/bulma

Official react-querybuilder components for Bulma.

To see them in action, check out the react-querybuilder demo or load the example in CodeSandbox.

Installation

npm i --save react-querybuilder @react-querybuilder/bulma bulma
# OR
yarn add react-querybuilder @react-querybuilder/bulma bulma

Usage

import { bulmaControlElements } from '@react-querybuilder/bulma';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
import 'bulma/bulma.sass';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilder
      fields={fields}
      query={query}
      onQueryChange={q => setQuery(q)}
      controlElements={bulmaControlElements}
    />
  );
};

Some additional styling may be necessary, e.g.:

.queryBuilder .input {
  width: auto;
}

Changelog

[v4.5.0] - 2022-06-19

Changed

TL;DR: These are probably not breaking changes.

<details> <summary>While a breaking change in a minor release technically violates <a href="https://semver.org/">semver</a>, the change in question is only "breaking" in a very rare--possibly non-existent--case. The <em>only</em> case where this change will break anything is if you use <code>formatQuery</code> with a custom <code>valueProcessor</code> that accepts fewer than three (3) arguments. Click for details...</summary>

• [#319] formatQuery will now invoke custom valueProcessor functions with different arguments based on the function's .length property, which is the number of arguments a function accepts excluding those with default values:
  • If the valueProcessor function accepts fewer than three (3) arguments, it will be called like this:

  valueProcessor(rule, { parseNumbers });
  

  The first argument is the RuleType object directly from the query. The second argument is of type ValueProcessorOptions, which is a subset of FormatQueryOptions (currently { parseNumbers?: boolean; }).
  • To maintain the current behavior (valueProcessor(field, operator, value, valueSource)), make sure the valueProcessor function accepts at least three arguments with no default values (do not use = for the first three arguments). For example, the following code will log length: 1:

  const valueProcessor = (field: string, operator = '=', value = '') => '...';
  console.log(`length: ${valueProcessor.length}`);
  

  • If you use TypeScript, these conditions will be enforced automatically.

</details>

Added

• [#319] Invoking valueProcessor with the full RuleType object provides access to much more information about specific rules. Standard properties that were previously unavailable include path, id, and disabled, but any custom properties will also be accessible.
  • The default value processors for "sql", "parameterized", "parameterized_named", "mongodb", "cel", and "spel" formats have not changed, but alternate functions using the new fn(rule, options) signature are now available:
    • defaultValueProcessorByRule
    • defaultValueProcessorCELByRule
    • defaultValueProcessorMongoDBByRule
    • defaultValueProcessorSpELByRule
• [#320]/[#323] New parser functions (also available as standalone builds in the dist folder). Click the respective "Import from [format]" button in the demo to try them out.
  • parseJsonLogic takes a JsonLogic object and converts it to RuleGroupType.
  • parseCEL takes a CEL string and converts it to RuleGroupType. Click the "Import from CEL" button in the demo.
• [#328] New utility function transformQuery recursively processes rule groups and rules with the provided ruleProcessor, ruleGroupProcessor, and other options (documentation).

Fixed

• [#323] formatQuery outputs will now escape quotation marks when appropriate:
  • For SQL ("sql", "parameterized", "parameterized_named"), single quotes will be doubled up, e.g. (firstName = 'Ra''s')
  • For other formats, double or single quotes will be escaped with a backslash if necessary (firstName == 'Ra\'s' or firstName == "Ra\"s").
• [#323] The standalone builds of formatQuery and parseSQL no longer include React and are not minified.