mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
some touch ups on unit
This commit is contained in:
parent
5722773467
commit
a8cf2dc501
@ -14,6 +14,15 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
|
|||||||
expanded: false,
|
expanded: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const value = this.props.selectProps.value[this.props.selectProps.value.length - 1].value;
|
||||||
|
console.log(value);
|
||||||
|
|
||||||
|
if (value && this.props.options.some(option => option.value === value)) {
|
||||||
|
this.setState({ expanded: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
componentDidUpdate(nextProps) {
|
componentDidUpdate(nextProps) {
|
||||||
if (nextProps.selectProps.inputValue !== '') {
|
if (nextProps.selectProps.inputValue !== '') {
|
||||||
this.setState({ expanded: true });
|
this.setState({ expanded: true });
|
||||||
|
@ -8,11 +8,16 @@ import kbn from '../../../utils/kbn';
|
|||||||
interface Props {
|
interface Props {
|
||||||
onSelected: (item: any) => {} | void;
|
onSelected: (item: any) => {} | void;
|
||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
|
width?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class UnitPicker extends PureComponent<Props> {
|
export default class UnitPicker extends PureComponent<Props> {
|
||||||
|
static defaultProps = {
|
||||||
|
width: 12,
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { defaultValue, onSelected } = this.props;
|
const { defaultValue, onSelected, width } = this.props;
|
||||||
|
|
||||||
const unitGroups = kbn.getUnitFormats();
|
const unitGroups = kbn.getUnitFormats();
|
||||||
|
|
||||||
@ -42,6 +47,13 @@ export default class UnitPicker extends PureComponent<Props> {
|
|||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
} as React.CSSProperties),
|
} as React.CSSProperties),
|
||||||
|
valueContainer: () =>
|
||||||
|
({
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
maxWidth: '90px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
} as React.CSSProperties),
|
||||||
};
|
};
|
||||||
|
|
||||||
const value = groupOptions.map(group => {
|
const value = groupOptions.map(group => {
|
||||||
@ -51,7 +63,7 @@ export default class UnitPicker extends PureComponent<Props> {
|
|||||||
return (
|
return (
|
||||||
<Select
|
<Select
|
||||||
classNamePrefix="gf-form-select-box"
|
classNamePrefix="gf-form-select-box"
|
||||||
className="width-20 gf-form-input--form-dropdown"
|
className={`width-${width} gf-form-input--form-dropdown`}
|
||||||
defaultValue={value}
|
defaultValue={value}
|
||||||
isSearchable={true}
|
isSearchable={true}
|
||||||
options={groupOptions}
|
options={groupOptions}
|
||||||
|
@ -58,7 +58,7 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
|
|||||||
<Label width={5}>Stat</Label>
|
<Label width={5}>Stat</Label>
|
||||||
<SimplePicker
|
<SimplePicker
|
||||||
defaultValue={statOptions.find(option => option.value === this.props.options.stat.value)}
|
defaultValue={statOptions.find(option => option.value === this.props.options.stat.value)}
|
||||||
width={11}
|
width={12}
|
||||||
options={statOptions}
|
options={statOptions}
|
||||||
getOptionLabel={i => i.text}
|
getOptionLabel={i => i.text}
|
||||||
getOptionValue={i => i.value}
|
getOptionValue={i => i.value}
|
||||||
|
Loading…
Reference in New Issue
Block a user