useValueEditor()
useValueEditor<
F
,O
>(props
:ValueEditorProps
<F
,O
>):UseValueEditor
Defined in: packages/react-querybuilder/src/components/ValueEditor.tsx:290
This hook is primarily concerned with multi-value editors like date range pickers, editors for 'in' and 'between' operators, etc.
Type Parameters
Type Parameter | Default type |
---|---|
F extends {[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; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Cl...; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : null | InputType ; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; placeholder? : string ; subproperties? : FlexibleOptionList <{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Classname | unde...>; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | (operator : string ) => ValueEditorType ; values? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; valueSources? : ValueSources | ValueSourceFlexibleOptions | (operator : string ) => ValueSources | ValueSourceFlexibleOptions; }, operator : string ) => boolean ; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : null | InputType ; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; placeholder? : string ; subproperties? : FlexibleOptionList <{[key : string ]: unknown ; className? : Classname | undefined; comparator? : string | (f : { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Classname | unde..., operator : string ) => boolean ; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : InputType | null | undefined; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; placeholder? : string ; subproperties? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className...; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources? : ValueSources | ValueSourceFlexibleOptions | ((operator: string) => ValueSources | ValueSourceFlexibleOptions) | undefined; }>; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | (operator : string ) => ValueEditorType ; values? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; valueSources? : ValueSources | ValueSourceFlexibleOptions | (operator : string ) => ValueSources | ValueSourceFlexibleOptions; } | {[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; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Cl...; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : null | InputType ; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; placeholder? : string ; subproperties? : FlexibleOptionList <{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Classname | unde...>; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | (operator : string ) => ValueEditorType ; values? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; valueSources? : ValueSources | ValueSourceFlexibleOptions | (operator : string ) => ValueSources | ValueSourceFlexibleOptions; }, operator : string ) => boolean ; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : null | InputType ; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; placeholder? : string ; subproperties? : FlexibleOptionList <{[key : string ]: unknown ; className? : Classname | undefined; comparator? : string | (f : { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className?: Classname | unde..., operator : string ) => boolean ; defaultOperator? : string ; defaultValue? : any ; disabled? : boolean ; id? : string ; inputType? : InputType | null | undefined; label : string ; matchModes? : boolean | MatchMode [] | FlexibleOption <MatchMode >[]; name : string ; operators? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; placeholder? : string ; subproperties? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; ... 11 more ...; className...; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values? : FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources? : ValueSources | ValueSourceFlexibleOptions | ((operator: string) => ValueSources | ValueSourceFlexibleOptions) | undefined; }>; validator? : RuleValidator ; value : string ; valueEditorType? : ValueEditorType | (operator : string ) => ValueEditorType ; values? : FlexibleOptionList <{[key : string ]: unknown ; disabled? : boolean ; label : string ; name : string ; value : string ; }>; valueSources? : ValueSources | ValueSourceFlexibleOptions | (operator : string ) => ValueSources | ValueSourceFlexibleOptions; } |
O extends string | string |
Parameters
Parameter | Type |
---|---|
props | ValueEditorProps <F , O > |
Returns
The value as an array (valueAsArray
), a change handler for
series of editors (multiValueHandler
), a processed version of the
parseNumbers
prop (parseNumberMethod
), and the classname(s) to be applied
to each editor in editor series (valueListItemClassName
).
NOTE: The following logic only applies if skipHook
is not true
. To avoid
automatically updating the value
, pass { skipHook: true }
.
If the value
is an array of non-zero length, the operator
is not one of
the known multi-value operators ("between", "notBetween", "in", "notIn"), and
the type
is not "multiselect", then the value
will be set to the first
element of the array (i.e., value[0]
).
The same thing will happen if inputType
is "number" and value
is a string
containing a comma, since <input type="number">
doesn't handle commas.
Examples
// Consider the following rule:
`{ field: "f1", operator: "in", value: ["twelve","fourteen"] }`
// If `operator` changes to "=", the value will be reset to "twelve".
// Consider the following rule:
`{ field: "f1", operator: "between", value: "12,14" }`
// If `operator` changes to "=", the value will be reset to "12".
API documentation is generated from the latest commit on the main
branch. It may be somewhat inconsistent with official releases of React Query Builder.