IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI: Segment Input change (#20925)

Browse Source 
* 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:
Erik Sundell 2019-12-06 11:50:45 +01:00 committed by GitHub
parent 413be3a6a0
commit 6f468c670a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/Segment/SegmentInput.tsx
View File

@ -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)}
/>
);
}