Rule

The Rule component represents query conditions. Rule calls the useRule hook to prepare the subcomponent props.

Subcomponents

Subcomponents are rendered by RuleComponents by default. If the matchModes property of a rule's field evaluates to an array with one or more elements, then RuleComponentsWithSubQuery is used instead.

RuleComponents

Renders a React.Fragment containing components in this order:

• Shift actions¹
• Drag handle²
• Field selector
• Operator selector³
• Value source selector^{4 5}
• Value editor⁵
• Clone rule button⁶
• Lock rule button⁷
• Remove rule button

RuleComponentsWithSubQuery

Renders a React.Fragment containing components in this order:

• Shift actions¹
• Drag handle²
• Field selector
• Match mode editor
• Rule group header components⁸
• Clone rule button⁶
• Lock rule button⁷
• Remove rule button
• Rule group body components⁸

Footnotes

1. Only rendered if showShiftActions is true. ↩ ↩²

2. Only rendered if enableDragAndDrop is true. ↩ ↩²

3. Only rendered if autoSelectField is true or the rule's field doesn't match translations.fields.placeholderName. ↩

4. Only rendered if the rule's operator is neither "null" nor "notNull" and the derived valueSources array has more than one element. ↩

5. Only rendered when all of these conditions are met:

   • The arity property of the rule's operator is not "unary" and is not a number less than 2
   • autoSelectOperator is true or the rule's operator doesn't match translations.operators.placeholderName
   ↩ ↩²

6. Only rendered if showCloneButtons is true. ↩ ↩²

7. Only rendered if showLockButtons is true. ↩ ↩²

8. The wrapper element around these components is a <div> by default. Customize it with the groupComponentsWrapper prop. ↩ ↩²