You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.0 KiB
38 lines
1.0 KiB
import React from 'react';
|
|
import { cx } from '@emotion/css';
|
|
import { Input } from '@grafana/ui';
|
|
import { useShadowedState } from '../useShadowedState';
|
|
import { paddingRightClass } from './styles';
|
|
|
|
type Props = {
|
|
value: string | undefined;
|
|
onChange: (value: string | undefined) => void;
|
|
isWide?: boolean;
|
|
placeholder?: string;
|
|
};
|
|
|
|
export const InputSection = ({ value, onChange, isWide, placeholder }: Props): JSX.Element => {
|
|
const [currentValue, setCurrentValue] = useShadowedState(value);
|
|
|
|
const onBlur = () => {
|
|
// we send empty-string as undefined
|
|
const newValue = currentValue === '' ? undefined : currentValue;
|
|
onChange(newValue);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Input
|
|
placeholder={placeholder}
|
|
className={cx(isWide ?? false ? 'width-14' : 'width-8', paddingRightClass)}
|
|
type="text"
|
|
spellCheck={false}
|
|
onBlur={onBlur}
|
|
onChange={(e) => {
|
|
setCurrentValue(e.currentTarget.value);
|
|
}}
|
|
value={currentValue ?? ''}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|