@react-querybuilder/chakra

@react-querybuilder/chakra

Official Chakra UI components for react-querybuilder.

To see them in action, check out the react-querybuilder demo and choose "Chakra UI" from the Style drop-down.

Installation

npm i --save react-querybuilder @react-querybuilder/chakra @chakra-ui/icons @chakra-ui/react @chakra-ui/system @emotion/react @emotion/styled framer-motion
# OR
yarn add react-querybuilder @react-querybuilder/chakra @chakra-ui/icons @chakra-ui/react @chakra-ui/system @emotion/react @emotion/styled framer-motion

Usage

import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
import {
  ChakraActionElement,
  ChakraDragHandle,
  ChakraNotToggle,
  ChakraValueEditor,
  ChakraValueSelector
} from '@react-querybuilder/chakra';

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={{
        addGroupAction: ChakraActionElement,
        addRuleAction: ChakraActionElement,
        cloneGroupAction: ChakraActionElement,
        cloneRuleAction: ChakraActionElement,
        combinatorSelector: ChakraValueSelector,
        fieldSelector: ChakraValueSelector,
        notToggle: ChakraNotToggle,
        operatorSelector: ChakraValueSelector,
        removeGroupAction: ChakraActionElement,
        removeRuleAction: ChakraActionElement,
        valueEditor: ChakraValueEditor,
        dragHandle: ChakraDragHandle
      }}
    />
  );
};

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

.chakra-select__wrapper {
  width: fit-content;
  width: -moz-fit-content; // vendor prefix required for Firefox
  display: inline-block;
}

.chakra-input {
  width: auto;
  display: inline-block;
}

.chakra-radio-group {
  display: inline-block;
}

Changelog

[v4.0.0] - 2021-12-28

Changed

• Minimum TypeScript version is now 4.5.0.
• The default styles (query-builder.css and query-builder.scss) now use flexbox. This should allow greater flexibility and more consistent styling, but you'll need to use a different stylesheet for IE due to poor flexbox support. The new IE-compatible demo page uses styles more suitable for IE.
• onAddRule and onAddGroup callbacks now pass a number[] (parentPath) as the second argument instead of a string (parentId).
• The exported method findRule has been replaced by findPath, which is useful in conjunction with the previously mentioned onAddRule and onAddGroup callbacks.
• A new drag handle element will always be rendered at the front of every rule and rule group header element, regardless of whether you enable the drag-and-drop feature (see Features section below). If drag-and-drop is disabled (the default setting), you should hide the drag handle by either 1) using the default stylesheet which hides it automatically when drag-and-drop is disabled, or 2) hiding it with a style rule like .queryBuilder-dragHandle { display: none; }.
• Cloning a rule or group will insert the clone immediately after the original item instead of as the last item of the parent group.

<details> <summary>Click to show internal changes (shouldn't affect most users)</summary>

• Dropped lodash dependency. Added immer and react-dnd.
• Rule and RuleGroup props now include path: number[], and id may be undefined.
• getLevel has been removed from the schema prop (internally we just use path.length now).
• The following functions that are part of the schema prop have been refactored to use path or parentPath instead of id or parentId: onGroupAdd, onGroupRemove, onPropChange, onRuleAdd, onRuleRemove.

</details>

Fixed

• The default ValueEditor component was calling the useEffect hook conditionally, which is way against the Rules of Hooks. It is now called unconditionally.
• [#258] When the formatQuery export format is "mongodb", the resulting string can be parsed by JSON.parse (@mylawacad)

Added

• Shiny new documentation site! https://react-querybuilder.js.org
• We now provide official compatibility components for several popular style frameworks (as seen in the demo), with more to come! Check out the @react-querybuilder org on npm.
• All props on the <QueryBuilder /> component are now optional
• <QueryBuilder /> is now a properly controlled or uncontrolled component depending on which props are passed in. If you pass a query prop, the query will not change until a new query is passed in. You should use the parameter of the onQueryChange callback to update the query prop. Typically this involves using React's useState hook. To render an uncontrolled component, don't pass a query prop. You can set the initial query by using the new defaultQuery prop, and you can still listen for changes with onQueryChange.
• The query-builder.scss file now uses variables instead of hard-coded colors and spacing. Feel free to import it and override the default values with your own theme's colors/styles/etc.
• Drag-and-drop! Pass the enableDragAndDrop prop to display a drag handle on each rule and group header. Users will be able to reorder and relocate rules and groups.
• Independent combinators! Wait...what does that even mean? When the independentCombinators prop is true, <QueryBuilder /> will insert an independent "and/or" selector between each pair of sibling rules/groups. This new feature shouldn't introduce any breaking changes since it's opt-in, i.e. if independentCombinators is undefined or false, then the <QueryBuilder /> should behave basically the same as it did in v3.x.
• New disabled prop to prevent changes to the query. All sub-components and form elements get the disabled prop as well. Pass true to disable the entire query, or pass an array of paths to disable specific rules/groups.
• parseSQL method to import queries from SQL (documentation / demo -- click the "Load from SQL" button).
• formatQuery accepts a new format type: "parameterized_named" (documentation). This new format is similar to "parameterized", but instead of anonymous ?-style bind variables, each parameter is given a unique name based on the field name and the order in the query. A corresponding paramPrefix option is available in order to use a different character than the default ":" within the sql string.