@react-querybuilder/bulma
Advanced tools
Changelog
[v4.0.0] - 2021-12-28
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
).findRule
has been replaced by findPath
, which is useful in conjunction with the previously mentioned onAddRule
and onAddGroup
callbacks..queryBuilder-dragHandle { display: none; }
.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).schema
prop have been refactored to use path
or parentPath
instead of id
or parentId
: onGroupAdd
, onGroupRemove
, onPropChange
, onRuleAdd
, onRuleRemove
.ValueEditor
component was calling the useEffect
hook conditionally, which is way against the Rules of Hooks. It is now called unconditionally.formatQuery
export format is "mongodb", the resulting string can be parsed by JSON.parse
(@mylawacad)@react-querybuilder
org on npm.<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
.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.enableDragAndDrop
prop to display a drag handle on each rule and group header. Users will be able to reorder and relocate rules and groups.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.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.Changelog
[v4.0.0-beta.8] - 2021-12-24
formatQuery
export type (@mylawacad)valueProcessor
for "mongodb" export formatRuleGroup
component (@ZigZagT)disabled
prop