mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
UI: Segment Input change (#20925)
* Add input segment * Rename story * Cleanup * Fix lint error * More cleanup * Use measure text util * Keep value in local state
This commit is contained in:
parent
413be3a6a0
commit
6f468c670a
@ -12,18 +12,21 @@ export interface SegmentInputProps<T> extends SegmentProps<T> {
|
|||||||
const FONT_SIZE = 14;
|
const FONT_SIZE = 14;
|
||||||
|
|
||||||
export function SegmentInput<T>({
|
export function SegmentInput<T>({
|
||||||
value,
|
value: initialValue,
|
||||||
onChange,
|
onChange,
|
||||||
Component,
|
Component,
|
||||||
className,
|
className,
|
||||||
}: React.PropsWithChildren<SegmentInputProps<T>>) {
|
}: React.PropsWithChildren<SegmentInputProps<T>>) {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const [inputWidth, setInputWidth] = useState<number>(measureText(value.toString(), FONT_SIZE).width);
|
const [value, setValue] = useState<number | string>(initialValue);
|
||||||
|
const [inputWidth, setInputWidth] = useState<number>(measureText(initialValue.toString(), FONT_SIZE).width);
|
||||||
const [Label, , expanded, setExpanded] = useExpandableLabel(false);
|
const [Label, , expanded, setExpanded] = useExpandableLabel(false);
|
||||||
useClickAway(ref, () => setExpanded(false));
|
useClickAway(ref, () => setExpanded(false));
|
||||||
|
|
||||||
if (!expanded) {
|
if (!expanded) {
|
||||||
return <Label Component={Component || <a className={cx('gf-form-label', 'query-part', className)}>{value}</a>} />;
|
return (
|
||||||
|
<Label Component={Component || <a className={cx('gf-form-label', 'query-part', className)}>{initialValue}</a>} />
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputWidthStyle = css`
|
const inputWidthStyle = css`
|
||||||
@ -39,10 +42,18 @@ export function SegmentInput<T>({
|
|||||||
onChange={item => {
|
onChange={item => {
|
||||||
const { width } = measureText(item.target.value, FONT_SIZE);
|
const { width } = measureText(item.target.value, FONT_SIZE);
|
||||||
setInputWidth(width);
|
setInputWidth(width);
|
||||||
onChange(item.target.value);
|
setValue(item.target.value);
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
setExpanded(false);
|
||||||
|
onChange(value);
|
||||||
|
}}
|
||||||
|
onKeyDown={e => {
|
||||||
|
if ([13, 27].includes(e.keyCode)) {
|
||||||
|
setExpanded(false);
|
||||||
|
onChange(value);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={() => setExpanded(false)}
|
|
||||||
onKeyDown={e => [13, 27].includes(e.keyCode) && setExpanded(false)}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user