mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
UnitPicker: Use the new Cascader implementation (#22029)
* Use Cascader for UnitPicker and add relevant props to Cascader * Fix grammar * Add placeholder for UnitPicker * Update comments
This commit is contained in:
parent
da395729c3
commit
c75ca5cf06
@ -48,6 +48,15 @@ export const withInitialValue = () => (
|
|||||||
<Cascader options={options} initialValue="3" onSelect={val => console.log(val)} />
|
<Cascader options={options} initialValue="3" onSelect={val => console.log(val)} />
|
||||||
);
|
);
|
||||||
|
|
||||||
export const withCustomValue = () => (
|
export const withCustomValue = () => {
|
||||||
<Cascader options={options} allowCustomValue initialValue="Custom Initial Value" onSelect={val => console.log(val)} />
|
const onCreateLabel = text('Custom value creation label', 'Create new value: ');
|
||||||
);
|
return (
|
||||||
|
<Cascader
|
||||||
|
options={options}
|
||||||
|
allowCustomValue
|
||||||
|
formatCreateLabel={val => onCreateLabel + val}
|
||||||
|
initialValue="Custom Initial Value"
|
||||||
|
onSelect={val => console.log(val)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
@ -8,14 +8,17 @@ import { FormInputSize } from '../Forms/types';
|
|||||||
import { Input } from '../Forms/Input/Input';
|
import { Input } from '../Forms/Input/Input';
|
||||||
import { SelectableValue } from '@grafana/data';
|
import { SelectableValue } from '@grafana/data';
|
||||||
import { css } from 'emotion';
|
import { css } from 'emotion';
|
||||||
|
|
||||||
interface CascaderProps {
|
interface CascaderProps {
|
||||||
|
/** The seperator between levels in the search */
|
||||||
separator?: string;
|
separator?: string;
|
||||||
|
placeholder?: string;
|
||||||
options: CascaderOption[];
|
options: CascaderOption[];
|
||||||
onSelect(val: string): void;
|
onSelect(val: string): void;
|
||||||
size?: FormInputSize;
|
size?: FormInputSize;
|
||||||
initialValue?: string;
|
initialValue?: string;
|
||||||
allowCustomValue?: boolean;
|
allowCustomValue?: boolean;
|
||||||
|
/** A function for formatting the message for custom value creation. Only applies when allowCustomValue is set to true*/
|
||||||
|
formatCreateLabel?: (val: string) => string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CascaderState {
|
interface CascaderState {
|
||||||
@ -30,11 +33,11 @@ interface CascaderState {
|
|||||||
export interface CascaderOption {
|
export interface CascaderOption {
|
||||||
value: any;
|
value: any;
|
||||||
label: string;
|
label: string;
|
||||||
// Items will be just flattened into the main list of items recursively.
|
/** Items will be just flattened into the main list of items recursively. */
|
||||||
items?: CascaderOption[];
|
items?: CascaderOption[];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
title?: string;
|
title?: string;
|
||||||
// Children will be shown in a submenu.
|
/** Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compability.*/
|
||||||
children?: CascaderOption[];
|
children?: CascaderOption[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -168,7 +171,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { size, allowCustomValue } = this.props;
|
const { size, allowCustomValue, placeholder } = this.props;
|
||||||
const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
|
const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -176,13 +179,14 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
|
|||||||
{isSearching ? (
|
{isSearching ? (
|
||||||
<Select
|
<Select
|
||||||
allowCustomValue={allowCustomValue}
|
allowCustomValue={allowCustomValue}
|
||||||
placeholder="Search"
|
placeholder={placeholder}
|
||||||
autoFocus={!focusCascade}
|
autoFocus={!focusCascade}
|
||||||
onChange={this.onSelect}
|
onChange={this.onSelect}
|
||||||
onBlur={this.onBlur}
|
onBlur={this.onBlur}
|
||||||
options={searchableOptions}
|
options={searchableOptions}
|
||||||
size={size || 'md'}
|
size={size || 'md'}
|
||||||
onCreateOption={this.onCreateOption}
|
onCreateOption={this.onCreateOption}
|
||||||
|
formatCreateLabel={this.props.formatCreateLabel}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<RCCascader
|
<RCCascader
|
||||||
@ -197,6 +201,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
|
|||||||
>
|
>
|
||||||
<div className={disableDivFocus}>
|
<div className={disableDivFocus}>
|
||||||
<Input
|
<Input
|
||||||
|
placeholder={placeholder}
|
||||||
value={activeLabel}
|
value={activeLabel}
|
||||||
onKeyDown={this.onInputKeyDown}
|
onKeyDown={this.onInputKeyDown}
|
||||||
onChange={() => {}}
|
onChange={() => {}}
|
||||||
|
@ -13,4 +13,5 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const simple = () => <UnitPicker onChange={val => console.log(val)} />;
|
export const simple = () => <UnitPicker useNewForms onChange={val => console.log(val)} />;
|
||||||
|
export const old = () => <UnitPicker onChange={val => console.log(val)} />;
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
|
|
||||||
import { Select } from '../Select/Select';
|
import { Select } from '../Select/Select';
|
||||||
|
import { Cascader, CascaderOption } from '../Cascader/Cascader';
|
||||||
import { getValueFormats, SelectableValue } from '@grafana/data';
|
import { getValueFormats, SelectableValue } from '@grafana/data';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onChange: (item?: string) => void;
|
onChange: (item?: string) => void;
|
||||||
value?: string;
|
value?: string;
|
||||||
width?: number;
|
width?: number;
|
||||||
|
/** Temporary flag that uses the new form styles. */
|
||||||
|
useNewForms?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatCreateLabel(input: string) {
|
function formatCreateLabel(input: string) {
|
||||||
@ -24,7 +26,7 @@ export class UnitPicker extends PureComponent<Props> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { value, width } = this.props;
|
const { value, width, useNewForms } = this.props;
|
||||||
|
|
||||||
// Set the current selection
|
// Set the current selection
|
||||||
let current: SelectableValue<string> | undefined = undefined;
|
let current: SelectableValue<string> | undefined = undefined;
|
||||||
@ -44,7 +46,13 @@ export class UnitPicker extends PureComponent<Props> {
|
|||||||
}
|
}
|
||||||
return sel;
|
return sel;
|
||||||
});
|
});
|
||||||
|
if (useNewForms) {
|
||||||
|
return {
|
||||||
|
label: group.text,
|
||||||
|
value: group.text,
|
||||||
|
items: options,
|
||||||
|
};
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
label: group.text,
|
label: group.text,
|
||||||
options,
|
options,
|
||||||
@ -56,7 +64,16 @@ export class UnitPicker extends PureComponent<Props> {
|
|||||||
current = { value, label: value };
|
current = { value, label: value };
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return useNewForms ? (
|
||||||
|
<Cascader
|
||||||
|
initialValue={current && current.label}
|
||||||
|
allowCustomValue
|
||||||
|
formatCreateLabel={formatCreateLabel}
|
||||||
|
options={groupOptions as CascaderOption[]}
|
||||||
|
placeholder="Choose"
|
||||||
|
onSelect={this.props.onChange}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
<Select
|
<Select
|
||||||
width={width}
|
width={width}
|
||||||
defaultValue={current}
|
defaultValue={current}
|
||||||
|
Loading…
Reference in New Issue
Block a user