@eisgs/input

$3

Ссылка на компонент ref пробрасывается в HTML Input.

onChange и value позволяют управлять содержимым инпута.

label и placeholder позволяют указать дополнительную информацию для пользователя.

``jsx
import { Button } from '@eisgs/button';

const [value, setValue] = React.useState('');
const inputRef = React.useRef();

const handleInputFocus = () => inputRef.current.focus();

Для применения плавающего заголовка необходимо передать флаг floatingLabel.

`jsx
const [value, setValue] = React.useState('');

maxLength позволяет ограничить количество символов при вводе.

validate позволяет проверить значение в поле ввода.

error - строка с текстом ошибки.

`jsx
const [valueInputOne, setValueInputOne] = React.useState('');
const [errorInputOne, setErrorInputOne] = React.useState('');

const validateFunction = (val) => {
if (val.length && val !== 'яблоко') {
setErrorInputOne('значение должно быть яблоко');
return false;
} else {
setErrorInputOne('');
return true;
}
};

mask позволяет задать маску ввода.

maskChar позволяет закрывать незаполненные значения маски определенным символом.

formatChars позволяет определять символы форматирования маски.

unmask позволяет вернуть значение инпута без маски.

`jsx

const [firstInputValue, setFirstInputValue] = React.useState('');
const [secondInputValue, setSecondInputValue] = React.useState('1');
const [thirdInputValue, setThirdInputValue] = React.useState('');
const [fourthInputValue, setFourthInputValue] = React.useState('');
const firstMask = 'a/999/aa';
const secondMask = '+7(999)999-99-99';
const thirdMask = '||:||';
const forthMask = 'ХХ-ХХ-99'

const formatChars = { '|': '[0-9]' };

disabled блокирует ввод значений.

Для того чтобы скрыть placeholder при disabled и отсутствии value,
необходимо передать флаг hidePlaceholderWhenDisabled.

`jsx
const rowProps = {
className:"w600",
style: { display: 'flex', alignItems: 'flex-end', gap: 40 }
};

<>


Компонент принимает все пропсы от react-number-format (см. https://github.com/s-yadav/react-number-format/tree/v4.5.0#props).

Для ввода доступны только цифры.

`jsx
import { NumericInput } from '@eisgs/input';

const [firstInputValue, setFirstInputValue] = React.useState('');
const [secondInputValue, setSecondInputValue] = React.useState('');

`jsx
import { NumericInput } from '@eisgs/input';

const [value, setValue] = React.useState();
const [valueInputOne, setValueInputOne] = React.useState('');
const [errorInputOne, setErrorInputOne] = React.useState('');

const validateFunction = (val) => {
if (val && val < 100) {
setErrorInputOne('значение должно быть меньше 100');
return false;
} else {
setErrorInputOne('');
return true;
}
};

<>


В параметре decimalScale можно ограничить количество знаков после запятой.

`jsx
import { NumericInput } from '@eisgs/input';

const [value, setValue] = React.useState();

Разделитель групп разрядов задается в параметре thousandSeparator.

`jsx
import { NumericInput } from '@eisgs/input';

const [value, setValue] = React.useState();

Кастомный разделитель для дробной части числа задается в параметре decimalSeparator (по умолчанию точка).

`jsx
import { NumericInput } from '@eisgs/input';

const [value, setValue] = React.useState();

`jsx
import { SearchInput } from '@eisgs/input';

const [reqData, setReqData] = React.useState({
value: '',
loading: false,
});

const search = () => {
setReqData((data) => ({ ...data, loading: true }));
setTimeout(() => setReqData((data) => ({ ...data, loading: false })), 3000);
};

const handleSearch = (value) => setReqData({ value });

const handleKeyDown = (event) => {
//Отправка запроса по нажатию на Enter
if (event.keyCode === 13) {
search();
}
};

При передаче hint отобразится подсказка

`jsx

`

$3

`jsx

import { Typography } from "@eisgs/typography";

const viewList = ['desktop', 'mobile'];
const stateList = [
{placeholder: 'Подсказка'},
{label: 'Подсказка', placeholder: 'Подсказка'},
{label: 'Подсказка', placeholder: 'Подсказка', floatingLabel: true}
];
const extraList = [
{},
{value: 'Текст'},
{value: 'Текст', error: 'Текст ошибки'},
{disabled: true},
{disabled: true, value: 'Текст'}
];

<>
{viewList.map(item =>