RuleComponents()

RuleComponents(props: RuleProps<string, string> & RuleProps<string, string> & { classNames: { cloneRule: string; dragHandle: string; fields: string; lockRule: string; operators: string; removeRule: string; shiftActions: string; value: string; valueSource: string; }; cloneRule: ActionElementEventHandler; fieldData: { [key: string]: unknown; className: Classname; comparator: string | (f: { [key: string]: unknown; className: Classname; comparator: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; cl...; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: null | InputType; label: string; name: string; operators: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | (operator: string) => ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSources: ValueSources | (operator: string) => ValueSources; }, operator: string) => boolean; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: null | InputType; label: string; name: string; operators: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | (operator: string) => ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSources: ValueSources | (operator: string) => ValueSources; }; generateOnChangeHandler: (prop: "value" | "disabled" | "field" | "operator" | "valueSource" | "combinatorPreceding") => ValueChangeEventHandler; hideValueControls: boolean; inputType: null | InputType; onChangeField: ValueChangeEventHandler; onChangeOperator: ValueChangeEventHandler; onChangeValue: ValueChangeEventHandler; onChangeValueSource: ValueChangeEventHandler; operators: OptionList<FullOperator<string>>; outerClassName: string; removeRule: ActionElementEventHandler; shiftRuleDown: (event?: MouseEvent<Element, MouseEvent>, _context?: any) => void; shiftRuleUp: (event?: MouseEvent<Element, MouseEvent>, _context?: any) => void; toggleLockRule: ActionElementEventHandler; validationResult: boolean | ValidationResult; valueEditorSeparator: ReactNode; valueEditorType: ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSourceOptions: ValueSourceOptions; valueSources: ValueSources; }): ReactNode

Defined in: packages/react-querybuilder/src/components/Rule.tsx:76

Renders a React.Fragment containing an array of form controls for managing a RuleType.

Parameters

Parameter Type

props RuleProps<string, string> & RuleProps<string, string> & { classNames: { cloneRule: string; dragHandle: string; fields: string; lockRule: string; operators: string; removeRule: string; shiftActions: string; value: string; valueSource: string; }; cloneRule: ActionElementEventHandler; fieldData: { [key: string]: unknown; className: Classname; comparator: string | (f: { [key: string]: unknown; className: Classname; comparator: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; value?: string | undefined; label: string; disabled?: boolean | undefined; name: string; }> | undefined; ... 9 more ...; cl...; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: null | InputType; label: string; name: string; operators: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | (operator: string) => ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSources: ValueSources | (operator: string) => ValueSources; }, operator: string) => boolean; defaultOperator: string; defaultValue: any; disabled: boolean; id: string; inputType: null | InputType; label: string; name: string; operators: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; placeholder: string; validator: RuleValidator; value: string; valueEditorType: ValueEditorType | (operator: string) => ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSources: ValueSources | (operator: string) => ValueSources; }; generateOnChangeHandler: (prop: "value" | "disabled" | "field" | "operator" | "valueSource" | "combinatorPreceding") => ValueChangeEventHandler; hideValueControls: boolean; inputType: null | InputType; onChangeField: ValueChangeEventHandler; onChangeOperator: ValueChangeEventHandler; onChangeValue: ValueChangeEventHandler; onChangeValueSource: ValueChangeEventHandler; operators: OptionList<FullOperator<string>>; outerClassName: string; removeRule: ActionElementEventHandler; shiftRuleDown: (event?: MouseEvent<Element, MouseEvent>, _context?: any) => void; shiftRuleUp: (event?: MouseEvent<Element, MouseEvent>, _context?: any) => void; toggleLockRule: ActionElementEventHandler; validationResult: boolean | ValidationResult; valueEditorSeparator: ReactNode; valueEditorType: ValueEditorType; values: FlexibleOptionList<{ [key: string]: unknown; disabled: boolean; label: string; name: string; value: string; }>; valueSourceOptions: ValueSourceOptions; valueSources: ValueSources; }

Parameter	Type
`props`	`RuleProps`<`string`, `string`> & `RuleProps`<`string`, `string`> & { `classNames`: { `cloneRule`: `string`; `dragHandle`: `string`; `fields`: `string`; `lockRule`: `string`; `operators`: `string`; `removeRule`: `string`; `shiftActions`: `string`; `value`: `string`; `valueSource`: `string`; }; `cloneRule`: `ActionElementEventHandler`; `fieldData`: { `[key: string]`: `unknown`; `className`: `Classname`; `comparator`: `string` \| (`f`: { `[key: string]`: `unknown`; `className`: `Classname`; `comparator`: string \| ((f: { [x: string]: unknown; label: string; disabled?: boolean \| undefined; name: string; value: string; id?: string \| undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; value?: string \| undefined; label: string; disabled?: boolean \| undefined; name: string; }> \| undefined; ... 9 more ...; cl...; `defaultOperator`: `string`; `defaultValue`: `any`; `disabled`: `boolean`; `id`: `string`; `inputType`: `null` \| `InputType`; `label`: `string`; `name`: `string`; `operators`: `FlexibleOptionList`<{ `[key: string]`: `unknown`; `disabled`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `placeholder`: `string`; `validator`: `RuleValidator`; `value`: `string`; `valueEditorType`: `ValueEditorType` \| (`operator`: `string`) => `ValueEditorType`; `values`: `FlexibleOptionList`<{ `[key: string]`: `unknown`; `disabled`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources`: `ValueSources` \| (`operator`: `string`) => `ValueSources`; }, `operator`: `string`) => `boolean`; `defaultOperator`: `string`; `defaultValue`: `any`; `disabled`: `boolean`; `id`: `string`; `inputType`: `null` \| `InputType`; `label`: `string`; `name`: `string`; `operators`: `FlexibleOptionList`<{ `[key: string]`: `unknown`; `disabled`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `placeholder`: `string`; `validator`: `RuleValidator`; `value`: `string`; `valueEditorType`: `ValueEditorType` \| (`operator`: `string`) => `ValueEditorType`; `values`: `FlexibleOptionList`<{ `[key: string]`: `unknown`; `disabled`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSources`: `ValueSources` \| (`operator`: `string`) => `ValueSources`; }; `generateOnChangeHandler`: (`prop`: `"value"` \| `"disabled"` \| `"field"` \| `"operator"` \| `"valueSource"` \| `"combinatorPreceding"`) => `ValueChangeEventHandler`; `hideValueControls`: `boolean`; `inputType`: `null` \| `InputType`; `onChangeField`: `ValueChangeEventHandler`; `onChangeOperator`: `ValueChangeEventHandler`; `onChangeValue`: `ValueChangeEventHandler`; `onChangeValueSource`: `ValueChangeEventHandler`; `operators`: `OptionList`<`FullOperator`<`string`>>; `outerClassName`: `string`; `removeRule`: `ActionElementEventHandler`; `shiftRuleDown`: (`event`?: `MouseEvent`<`Element`, `MouseEvent`>, `_context`?: `any`) => `void`; `shiftRuleUp`: (`event`?: `MouseEvent`<`Element`, `MouseEvent`>, `_context`?: `any`) => `void`; `toggleLockRule`: `ActionElementEventHandler`; `validationResult`: `boolean` \| `ValidationResult`; `valueEditorSeparator`: `ReactNode`; `valueEditorType`: `ValueEditorType`; `values`: `FlexibleOptionList`<{ `[key: string]`: `unknown`; `disabled`: `boolean`; `label`: `string`; `name`: `string`; `value`: `string`; }>; `valueSourceOptions`: `ValueSourceOptions`; `valueSources`: `ValueSources`; }

Returns

ReactNode

caution

API documentation is generated from the latest commit on the main branch. It may be somewhat inconsistent with official releases of React Query Builder.

Parameters​

Returns​

Parameters

Returns