Grafana/UI: Unit picker should not set a category as unit (#30638)

* Grafana/UI: Unit picker should not set a category as a unit

When clicking categories for units the category is set as the unit until a leaf node is selected.
This change exposes the changeOnSelect property from rc-cascader and sets it to false for the unit picker.

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
This commit is contained in:
Oscar Kilhed 2021-01-26 13:42:08 +01:00 committed by GitHub
parent f109f06485
commit b0b9158a1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions

View File

@ -13,6 +13,8 @@ interface CascaderProps {
separator?: string; separator?: string;
placeholder?: string; placeholder?: string;
options: CascaderOption[]; options: CascaderOption[];
/** Changes the value for every selection, including branch nodes. Defaults to true. */
changeOnSelect?: boolean;
onSelect(val: string): void; onSelect(val: string): void;
/** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/ /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
width?: number; width?: number;
@ -69,6 +71,8 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
}; };
} }
static defaultProps = { changeOnSelect: true };
flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => { flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => {
let selectOptions: Array<SelectableValue<string[]>> = []; let selectOptions: Array<SelectableValue<string[]>> = [];
for (const option of options) { for (const option of options) {
@ -174,7 +178,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
}; };
render() { render() {
const { allowCustomValue, placeholder, width } = this.props; const { allowCustomValue, placeholder, width, changeOnSelect } = this.props;
const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state; const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
return ( return (
@ -195,7 +199,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
<RCCascader <RCCascader
onChange={onChangeCascader(this.onChange)} onChange={onChangeCascader(this.onChange)}
options={this.props.options} options={this.props.options}
changeOnSelect changeOnSelect={changeOnSelect}
value={rcValue.value} value={rcValue.value}
fieldNames={{ label: 'label', value: 'value', children: 'items' }} fieldNames={{ label: 'label', value: 'value', children: 'items' }}
expandIcon={null} expandIcon={null}

View File

@ -56,6 +56,7 @@ export class UnitPicker extends PureComponent<Props> {
width={width} width={width}
initialValue={current && current.label} initialValue={current && current.label}
allowCustomValue allowCustomValue
changeOnSelect={false}
formatCreateLabel={formatCreateLabel} formatCreateLabel={formatCreateLabel}
options={groupOptions as CascaderOption[]} options={groupOptions as CascaderOption[]}
placeholder="Choose" placeholder="Choose"