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;
|
||||
|
||||
export function SegmentInput<T>({
|
||||
value,
|
||||
value: initialValue,
|
||||
onChange,
|
||||
Component,
|
||||
className,
|
||||
}: React.PropsWithChildren<SegmentInputProps<T>>) {
|
||||
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);
|
||||
useClickAway(ref, () => setExpanded(false));
|
||||
|
||||
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`
|
||||
@ -39,10 +42,18 @@ export function SegmentInput<T>({
|
||||
onChange={item => {
|
||||
const { width } = measureText(item.target.value, FONT_SIZE);
|
||||
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