mirror of https://github.com/sualko/cloud_bbb
51 lines
1006 B
TypeScript
51 lines
1006 B
TypeScript
import React, {
|
|
useState, useEffect, InputHTMLAttributes, SyntheticEvent,
|
|
} from 'react';
|
|
|
|
export interface SubmitInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
type?: 'text' | 'number';
|
|
initialValue?: string;
|
|
name: string;
|
|
onSubmitValue: (value: string) => void;
|
|
focus?: boolean;
|
|
}
|
|
|
|
export const SubmitInput = ({
|
|
type = 'text',
|
|
initialValue = '',
|
|
name,
|
|
onSubmitValue,
|
|
focus,
|
|
min,
|
|
max,
|
|
...rest
|
|
}: SubmitInputProps): JSX.Element => {
|
|
const [value, setValue] = useState<string>(initialValue);
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue ?? '');
|
|
}, [initialValue]);
|
|
|
|
const onSubmit = (e: SyntheticEvent) => {
|
|
e.preventDefault();
|
|
onSubmitValue(value);
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={onSubmit}>
|
|
<input
|
|
value={value}
|
|
type={type}
|
|
id={`bbb-${name}`}
|
|
name={name}
|
|
onChange={(ev) => setValue((ev.target as HTMLInputElement).value)}
|
|
onBlur={() => onSubmitValue(value)}
|
|
autoFocus={focus}
|
|
min={min}
|
|
max={max}
|
|
{...rest}
|
|
/>
|
|
</form>
|
|
);
|
|
};
|