Skip to main content
Version: v7 / v8

Rule

The Rule component represents individual query conditions. It calls the useRule hook to prepare props for its subcomponents.

Subcomponents​

By default, subcomponents are rendered by RuleComponents. When a rule's field has a matchModes property that evaluates to an array with one or more elements, RuleComponentsWithSubQuery is used instead.

RuleComponents​

Renders these components in order within a React.Fragment:

  • Shift actions1
  • Drag handle2
  • Field selector
  • Operator selector3
  • Value source selector4 5
  • Value editor5
  • Clone rule button6
  • Lock rule button7
  • Remove rule button

RuleComponentsWithSubQuery​

Renders these components in order within a React.Fragment:

  • Shift actions1
  • Drag handle2
  • Field selector
  • Match mode editor
  • Rule group header components8
  • Clone rule button6
  • Lock rule button7
  • Remove rule button
  • Rule group body components8

Footnotes​

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

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

  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 the following conditions are met: (1) The arity property of the rule's operator is not "unary" and is not a number less than 2, and (2) autoSelectOperator is true or the rule's operator doesn't match translations.operators.placeholderName. ↩ ↩2

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

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

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