Ссылка на компонент ref
пробрасывается в HTML Input.
onChange
и value
позволяют управлять содержимым инпута.
label
и placeholder
позволяют указать дополнительную информацию для пользователя.
import { Button } from '@eisgs/button';
const [value, setValue] = React.useState('');
const inputRef = React.useRef();
const handleInputFocus = () => inputRef.current.focus();
<div style={{ display: 'inline-flex', alignItems: 'flex-start' }}>
<Input
ref={inputRef}
placeholder="Укажите значение"
value={value}
onChange={setValue}
onBlur={console.log}
/>
<Button onClick={handleInputFocus}>
Фокус
</Button>
</div>
Для применения плавающего заголовка необходимо передать флаг floatingLabel
.
const [value, setValue] = React.useState('');
<div className="w300">
<Input
floatingLabel
label="Описание"
value={value}
onChange={setValue}
/>
</div>
maxLength
позволяет ограничить количество символов при вводе.
validate
позволяет проверить значение в поле ввода.
error
- строка с текстом ошибки.
const [valueInputOne, setValueInputOne] = React.useState('');
const [errorInputOne, setErrorInputOne] = React.useState('');
const validateFunction = (val) => {
if (val.length && val !== 'яблоко') {
setErrorInputOne('значение должно быть яблоко');
return false;
} else {
setErrorInputOne('');
return true;
}
};
<div className="w300">
<Input
label="Инпут с функцией валидации"
maxLength={6}
validate={validateFunction}
value={valueInputOne}
onChange={setValueInputOne}
error={errorInputOne}
/>
<Input
label="Значение инпута невалидно"
error="Произошла ошибка"
/>
<Input
label="Значение инпута невалидно"
warning="Произошла ошибка"
/>
</div>
mask
позволяет задать маску ввода.
maskChar
позволяет закрывать незаполненные значения маски определенным символом.
formatChars
позволяет определять символы форматирования маски.
unmask
позволяет вернуть значение инпута без маски.
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]' };
<div className="w300">
<Input
mask={firstMask}
value={firstInputValue}
onChange={setFirstInputValue}
placeholder='A/777/AA'
label='Обычная маска'
/>
<Input
mask={secondMask}
maskChar='*'
value={secondInputValue}
onChange={setSecondInputValue}
placeholder='+7(999)999-99-99'
label='Маска с использованием maskChar'
/>
<Input
mask={thirdMask}
value={thirdInputValue}
onChange={setThirdInputValue}
placeholder='12:12'
label='Маска с использованием formatChars'
formatChars={formatChars}
/>
<Input
mask={forthMask}
value={fourthInputValue}
onChange={setFourthInputValue}
placeholder='XX-XX-00'
label='Маска с использованием unmask'
unmask
/>
</div>
disabled
блокирует ввод значений.
Для того чтобы скрыть placeholder
при disabled
и отсутствии value
,
необходимо передать флаг hidePlaceholderWhenDisabled
.
const rowProps = {
className:"w600",
style: { display: 'flex', alignItems: 'flex-end', gap: 40 }
};
<>
<div {...rowProps}>
<Input
disabled
label="Disabled Empty"
placeholder="Подсказка"
value=""
/>
<Input
disabled
floatingLabel
label="Disabled Empty"
placeholder="Подсказка"
value=""
/>
</div>
<div {...rowProps}>
<Input
disabled
hidePlaceholderWhenDisabled
label="Disabled Empty (hidden placeholder)"
placeholder="Подсказка"
value=""
/>
<Input
disabled
floatingLabel
hidePlaceholderWhenDisabled
label="Disabled Empty (hidden placeholder)"
placeholder="Подсказка"
value=""
/>
</div>
<div {...rowProps}>
<Input
disabled
label="Disabled Filled"
placeholder="Подсказка"
value="Текст"
/>
<Input
disabled
floatingLabel
label="Disabled Filled"
placeholder="Подсказка"
value="Текст"
/>
</div>
</>
Компонент принимает все пропсы от react-number-format
(см. https://github.com/s-yadav/react-number-format/tree/v4.5.0#props).
Для ввода доступны только цифры.
import { NumericInput } from '@eisgs/input';
const [firstInputValue, setFirstInputValue] = React.useState('');
const [secondInputValue, setSecondInputValue] = React.useState('');
<div className="w300">
<NumericInput
label="Цифровой инпут"
placeholder="Цифровой инпут"
onChange={setFirstInputValue}
value={firstInputValue}
/>
<NumericInput
floatingLabel
label="Цифровой инпут"
onChange={setSecondInputValue}
value={secondInputValue}
/>
</div>
Можно передать в validate функцию, объект RegExp или регулярное выражение в виде строки.
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;
}
};
<>
<div className="w300">
<NumericInput
placeholder="Цифровой инпут"
label="Инпут с функцией валидации"
validate={validateFunction}
onChange={setValue}
value={value}
error={errorInputOne}
/>
</div>
<div className="w300">
<NumericInput
placeholder="Цифровой инпут"
label="Значение инпута невалидно"
error="Произошла ошибка"
/>
</div>
<div className="w300">
<NumericInput
placeholder="Цифровой инпут"
label="Значение инпута невалидно"
warning="Произошла ошибка"
/>
</div>
</>
В параметре decimalScale
можно ограничить количество знаков после запятой.
import { NumericInput } from '@eisgs/input';
const [value, setValue] = React.useState();
<div className="w300">
<NumericInput
placeholder="Количество знаков после запятой - 2"
onChange={setValue}
value={value}
decimalScale="2"
/>
</div>
Разделитель групп разрядов задается в параметре thousandSeparator
.
import { NumericInput } from '@eisgs/input';
const [value, setValue] = React.useState();
<div className="w300">
<NumericInput
onChange={setValue}
value={value}
thousandSeparator=" "
/>
</div>
Кастомный разделитель для дробной части числа задается в параметре decimalSeparator
(по умолчанию точка).
import { NumericInput } from '@eisgs/input';
const [value, setValue] = React.useState();
<div className="w300">
<NumericInput
onChange={setValue}
value={value}
decimalSeparator=","
/>
</div>
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();
}
};
<div className="w300">
<SearchInput
withClear
loading={reqData.loading}
value={reqData.value}
onChange={handleSearch}
placeholder="Найти"
onKeyDown={handleKeyDown}
/>
<SearchInput
withClear
floatingLabel
loading={reqData.loading}
value={reqData.value}
onChange={handleSearch}
label="Найти"
onKeyDown={handleKeyDown}
/>
</div>
При передаче hint
отобразится подсказка
<Input label="Описание" hint="Подсказка"/>
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 =>
<div key={item} style={{marginBottom: 40}}>
<Typography type="p1" styles={`margin-bottom: 40px`}>{item}</Typography>
{stateList.map((props, index) => (
<div style={{display: 'flex', gap: 40}} key={index}>
{extraList.map((extraProps, extraIndex) => (
<Input
{...props}
{...extraProps}
view={item}
key={`${index}-${extraIndex}`}
styles={`max-width: 168px`}
/>
))}
</div>
))}
</div>
)}
</>
Параметр suffix
позволяет добавить дополнительный контент справа
import { NumericInput } from '@eisgs/input';
import { createSvgIcon } from "@eisgs/icon";
const RoubleIcon = createSvgIcon(
<path d="M5.66412 13.0001V4.43213H7.92012C8.96812 4.43213 9.74412 4.64413 10.2481 5.06813C10.7601 5.49213 11.0161 6.10813 11.0161 6.91613C11.0161 7.46013 10.8921 7.92813 10.6441 8.32013C10.3961 8.70413 10.0281 9.00013 9.54012 9.20813C9.06012 9.41613 8.46412 9.52013 7.75212 9.52013H6.74412V13.0001H5.66412ZM4.62012 11.3681V10.5881H8.72412V11.3681H4.62012ZM4.62012 9.52013V8.60813H7.36812V9.52013H4.62012ZM7.59612 8.60813C8.08412 8.60813 8.49612 8.55613 8.83212 8.45213C9.17612 8.34813 9.44012 8.17613 9.62412 7.93613C9.80812 7.69613 9.90012 7.36813 9.90012 6.95213C9.90012 6.40813 9.73212 6.00413 9.39612 5.74013C9.06012 5.47613 8.53612 5.34413 7.82412 5.34413H6.74412V8.60813H7.59612Z" fill="#9BA9AD"/>,
'RoubleIcon'
);
const metriсSuffix = (value) => <span>м{value && <sup>{value}</sup>}</span>;
<div className="w300">
<NumericInput placeholder="Укажите сумму" suffix={<RoubleIcon/>}/>
<NumericInput placeholder="Укажите сумму" suffix="млн. руб."/>
<NumericInput placeholder="Укажите длину" suffix={metriсSuffix()}/>
<NumericInput placeholder="Укажите площадь" suffix={metriсSuffix(2)}/>
<NumericInput placeholder="Укажите объем" suffix={metriсSuffix(3)}/>
</div>