File: //var/www/design.system/src/molecules/Inputs/Input/Input.tsx
import React, { forwardRef } from 'react';
import styles from './Input.module.scss';
import cn from 'classnames';
import Body from '../../../atoms/Typography/Body/Body.tsx';
interface IInputProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
value?: string;
placeholder?: string;
label?: string;
disabled?: boolean;
isError?: boolean;
onChange?: (value: string) => void;
className?: string;
}
/**
* Поддерживает все стандартные пропсы HTMLInputElement.
*
* Полную документацию смотрите сайте: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
*/
const Input = forwardRef<HTMLInputElement, IInputProps>(
(
{ value, placeholder, label, disabled, isError, onChange, className, ...rest }: IInputProps,
ref
) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange?.(e.target.value);
};
return (
<div
className={cn(
styles.root,
{
[styles.disabled]: disabled,
[styles.isError]: isError,
},
className
)}
>
{label && <Body className={styles.label}>{label}</Body>}
<input
ref={ref}
type="text"
value={value}
placeholder={placeholder}
className={styles.input}
onChange={handleChange}
disabled={disabled}
{...rest}
/>
</div>
);
}
);
export default Input;