69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import {
|
|
InputHTMLAttributes,
|
|
useEffect,
|
|
useState,
|
|
FocusEventHandler,
|
|
KeyboardEventHandler,
|
|
HTMLAttributes,
|
|
} from 'react';
|
|
import { StyledInput } from './style';
|
|
|
|
type inputProps = {
|
|
value?: string;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
width?: number;
|
|
height?: number;
|
|
maxLength?: number;
|
|
minLength?: number;
|
|
onChange?: (value: string) => void;
|
|
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
} & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
|
|
export const Input = ({
|
|
disabled,
|
|
value: valueProp,
|
|
placeholder,
|
|
maxLength,
|
|
minLength,
|
|
height,
|
|
width = 260,
|
|
onChange,
|
|
onBlur,
|
|
onKeyDown,
|
|
...otherProps
|
|
}: inputProps) => {
|
|
const [value, setValue] = useState<string>(valueProp || '');
|
|
const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
|
|
const { value } = e.target;
|
|
setValue(value);
|
|
onChange && onChange(value);
|
|
};
|
|
|
|
const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
|
|
onBlur && onBlur(e);
|
|
};
|
|
const handleKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] =
|
|
e => {
|
|
onKeyDown && onKeyDown(e);
|
|
};
|
|
useEffect(() => {
|
|
setValue(valueProp || '');
|
|
}, [valueProp]);
|
|
return (
|
|
<StyledInput
|
|
value={value}
|
|
disabled={disabled}
|
|
placeholder={placeholder}
|
|
width={width}
|
|
maxLength={maxLength}
|
|
minLength={minLength}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
onKeyDown={handleKeyDown}
|
|
height={height}
|
|
{...otherProps}
|
|
></StyledInput>
|
|
);
|
|
};
|