Fields Predefined

Installation

npm i @cloud-ru/uikit-product-fields-predefined

getSymbolsRangeFromMask

helper

Возвращает кол-во символов для маски - со скобками и без

FieldPhone

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | value | string | - | Значение input | | onChange | ((value: string, e?: ChangeEvent<HTMLInputElement>) => void) & ((value: string) => void) | - | Колбек смены значения | | id | string | - | Значение html-атрибута id | | name | string | - | Значение html-атрибута name | | disabled | boolean | false | Является ли поле деактивированным | | readonly | boolean | false | Является ли поле доступным только для чтения | | onFocus | FocusEventHandler<HTMLInputElement> | - | Колбек обработки получения фокуса | | onBlur | FocusEventHandler<HTMLInputElement> | - | Колбек обработки потери фокуса | | autoComplete | string \| boolean | false | Включен ли автокомплит для поля | | autoFocus | boolean | false | Включен ли авто-фокус для поля | | onPaste | ClipboardEventHandler<HTMLInputElement> | - | Колбек обработки вставки значения | | spellCheck | boolean | true | Значение атрибута spellcheck (проверка орфографии) | | pattern | string | - | Регулярное выражение валидного инпута | | className | string | - | CSS-класс | | label | string | - | Лейбл | | labelTooltip | ReactNode | - | Всплывающая подсказка лейбла | | required | boolean | - | Является ли поле обязательным | | caption | string | - | Подпись справа от лейбла | | hint | string | - | Подсказка внизу | | showHintIcon | boolean | - | Отображать иконку подсказки | | size | enum Size: "s", "m", "l" | - | Размер | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | type | "text" | "tel" | "email" | - | | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | onClearButtonClick | () => void | - | Колбек клика по кнопке очистки поля | | scrollList | boolean | - | Включить скролл для основной части списка стран | | searchPlaceholder | string | - | | | onChangeCountry | (country: FieldPhoneOptionsProps) => void | - | | | options | CountrySettings | - | options — объект конфигурации для изменения стандартного списка стран | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

useCountries

Props

| name | type | default value | description | |------|------|---------------|-------------| | overriddenOptions | FieldPhoneOptionsProps[] | - | Список элементов выпадающего списка со странами, который будет передан в селект-компонент и переопределит список объявленных стран внутри пакета | | includedCountries | ({ readonly value: "russia"; readonly iso2: "RU"; readonly mask: "XXX XXX-XX-XX"; readonly caption: "+7"; readonly beforeContent: Element; readonly enabled: true; } \| { readonly value: "abkhazia"; ... 4 more ...; readonly enabled: true; } \| ... 156 more ... \| { ...; })[] | - | Список стран, которые должны отображаться в селекторе (будут выбраны из перечня стран, объявленных внутри пакета) | | excludedCountries | ({ readonly value: "russia"; readonly iso2: "RU"; readonly mask: "XXX XXX-XX-XX"; readonly caption: "+7"; readonly beforeContent: Element; readonly enabled: true; } \| { readonly value: "abkhazia"; ... 4 more ...; readonly enabled: true; } \| ... 156 more ... \| { ...; })[] | - | Список стран, которые будут исключены из списка объявленных стран внутри пакета |

SelectCreate

Props

| name | type | default value | description | |------|------|---------------|-------------| | selectProps* | FieldSelectProps | - | Пропсы прокидываемые в селект | | submitHandler* | () => Promise<string \| void> | - | Коллбек создания новой опции, при успешном выполнении возвращает value новой опции | | entityName* | EntityName | - | Тип объекта для создания новой опции (в единственном числе вин.падеже для кнопки Создать и множественном числе) | | createLayoutProps* | CreateLayoutModalProps \| CreateLayoutDrawerProps | - | Пропсы передаваемые в модалку или дровер создания новой опции | | createLayoutType* | "modal" | "drawer" | - | По клику на кнопку создания открывать модальное окно или дровер | | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | onRefetch | VoidFunction | - | Коллбек рефетча запроса на получение списка опций в случае ошибки (при передаче dataError в selectProps). | | className | string | - | CSS-класс | | afterClose | VoidFunction | - | Коллбек после закрытия модального окна/дровера | | entityIcon | JSXElementConstructor<{ size?: number; className?: string; }> | - | Иконка сервиса | | permission | "none" | "canRead" | "canCreate" | - | Управление состоянием компонента в зависимости от прав пользователя (по дефолту permission = 'canCreate') |

FieldAi

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | onSubmit* | (value: string) => void | - | Колбек действия при отправке | | value | string | - | HTML-аттрибут value | | onChange | (value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void | - | Колбек смены значения | | inputMode | enum InputMode: "search", "none", "text", "tel", "email", "decimal", "numeric", "url" | - | Режим работы экранной клавиатуры | | id | string | - | HTML-аттрибут id | | name | string | - | HTML-аттрибут name | | maxLength | number | - | Максимальное кол-во символов | | disabled | boolean | - | Является ли поле деактивированным | | readonly | boolean | - | Является ли поле доступным только на чтение | | onFocus | FocusEventHandler<HTMLTextAreaElement> | - | Колбек получения фокуса | | onBlur | FocusEventHandler<HTMLTextAreaElement> | - | Колбек потери фокуса | | autoFocus | boolean | - | Включен ли авто-фокус | | onKeyDown | KeyboardEventHandler<HTMLTextAreaElement> | - | Колбек нажатия клавиши клавиатуры | | className | string | - | CSS-класс | | caption | string | - | Подпись справа от лейбла | | hint | string | - | Подсказка внизу | | showHintIcon | boolean | - | Отображать иконку подсказки | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | minRows | number | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен | | maxRows | number | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен | | resizable | boolean | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) | | secure | boolean \| "password" | - | Режим ввода sensitive данных (пароля, API ключей, токенов, etc) | | onResetContextClick | () => void | - | Действие при клике по кнопке сброса контекста | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

FieldChat

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | handleSubmit* | (value: string) => void | - | Колбек действия при отправке | | value | string | - | HTML-аттрибут value | | onChange | (value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void | - | Колбек смены значения | | inputMode | enum InputMode: "search", "none", "text", "tel", "email", "decimal", "numeric", "url" | - | Режим работы экранной клавиатуры | | id | string | - | HTML-аттрибут id | | name | string | - | HTML-аттрибут name | | maxLength | number | - | Максимальное кол-во символов | | disabled | boolean | - | Является ли поле деактивированным | | readonly | boolean | - | Является ли поле доступным только на чтение | | onFocus | FocusEventHandler<HTMLTextAreaElement> | - | Колбек получения фокуса | | onBlur | FocusEventHandler<HTMLTextAreaElement> | - | Колбек потери фокуса | | autoFocus | boolean | - | Включен ли авто-фокус | | onKeyDown | KeyboardEventHandler<HTMLTextAreaElement> | - | Колбек нажатия клавиши клавиатуры | | className | string | - | CSS-класс | | caption | string | - | Подпись справа от лейбла | | showHintIcon | boolean | - | Отображать иконку подсказки | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | minRows | number | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен | | maxRows | number | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен | | resizable | boolean | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) | | attachment | Pick<FileUploadProps, "onFilesUpload" \| "accept"> & { files?: File[]; onFileDelete: (file?: File) => void; } | - | |

AIDisclaimer

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | |

FieldName

Поле имя c локальным стейтом и валидацией

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | value | string | - | Значение input | | onChange | (value: string, e?: ChangeEvent<HTMLInputElement>) => void | - | Колбек смены значения | | id | string | - | Значение html-атрибута id | | name | string | - | Значение html-атрибута name | | maxLength | number | - | Максимальная длина вводимого значения | | disabled | boolean | false | Является ли поле деактивированным | | readonly | boolean | false | Является ли поле доступным только для чтения | | onFocus | FocusEventHandler<HTMLInputElement> | - | Колбек обработки получения фокуса | | onBlur | FocusEventHandler<HTMLInputElement> | - | Колбек обработки потери фокуса | | autoComplete | string \| boolean | false | Включен ли автокомплит для поля | | autoFocus | boolean | false | Включен ли авто-фокус для поля | | onPaste | ClipboardEventHandler<HTMLInputElement> | - | Колбек обработки вставки значения | | onKeyDown | KeyboardEventHandler<HTMLInputElement> | - | Колбек обработки начала нажатия клавиши клавиатуры | | spellCheck | boolean | true | Значение атрибута spellcheck (проверка орфографии) | | pattern | string | - | Регулярное выражение валидного инпута | | className | string | - | CSS-класс | | labelTooltip | ReactNode | - | Всплывающая подсказка лейбла | | required | boolean | - | Является ли поле обязательным | | showHintIcon | boolean | - | Отображать иконку подсказки | | size | enum Size: "s", "m", "l" | - | Размер | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | prefix | ReactNode | - | Произвольный префикс для поля | | prefixIcon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка-префикс для поля | | postfix | ReactNode | - | Произвольный постфикс для поля | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | button | Button | - | Кнопка действия внутри поля | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | onClearButtonClick | () => void | - | Колбек клика по кнопке очистки поля | | showLabel | boolean | - | | | customSchema | StringSchema<string, AnyObject, undefined, ""> | - | | | onValidationError | (error: ValidationError) => void | - | Колбэк, вызываемый при изменении ошибки валидации | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

FieldNameRHF

Поле имя c оберткой для React Hook Form

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | controllerProps* | Omit<ControllerProps<FieldValues>, "disabled" \| "render" \| "rules"> | - | Режим контроллера с использованием react-hook-form | | value | string | - | Значение input | | onChange | (value: string, e?: ChangeEvent<HTMLInputElement>) => void | - | Колбек смены значения | | id | string | - | Значение html-атрибута id | | name | string | - | Значение html-атрибута name | | maxLength | number | - | Максимальная длина вводимого значения | | disabled | boolean | false | Является ли поле деактивированным | | readonly | boolean | false | Является ли поле доступным только для чтения | | onFocus | FocusEventHandler<HTMLInputElement> | - | Колбек обработки получения фокуса | | onBlur | FocusEventHandler<HTMLInputElement> | - | Колбек обработки потери фокуса | | autoComplete | string \| boolean | false | Включен ли автокомплит для поля | | autoFocus | boolean | false | Включен ли авто-фокус для поля | | onPaste | ClipboardEventHandler<HTMLInputElement> | - | Колбек обработки вставки значения | | onKeyDown | KeyboardEventHandler<HTMLInputElement> | - | Колбек обработки начала нажатия клавиши клавиатуры | | spellCheck | boolean | true | Значение атрибута spellcheck (проверка орфографии) | | pattern | string | - | Регулярное выражение валидного инпута | | className | string | - | CSS-класс | | labelTooltip | ReactNode | - | Всплывающая подсказка лейбла | | required | boolean | - | Является ли поле обязательным | | showHintIcon | boolean | - | Отображать иконку подсказки | | size | enum Size: "s", "m", "l" | - | Размер | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | prefix | ReactNode | - | Произвольный префикс для поля | | prefixIcon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка-префикс для поля | | postfix | ReactNode | - | Произвольный постфикс для поля | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | button | Button | - | Кнопка действия внутри поля | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | onClearButtonClick | () => void | - | Колбек клика по кнопке очистки поля | | showLabel | boolean | - | | | customSchema | StringSchema<string, AnyObject, undefined, ""> | - | | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

FieldDescription

Поле описание c локальным стейтом и валидацией

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | value | string | - | HTML-аттрибут value | | onChange | (value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void | - | Колбек смены значения | | id | string | - | HTML-аттрибут id | | maxLength | number | 255 | Максимальное кол-во символов | | disabled | boolean | - | Является ли поле деактивированным | | readonly | boolean | - | Является ли поле доступным только на чтение | | onFocus | FocusEventHandler<HTMLTextAreaElement> | - | Колбек получения фокуса | | onBlur | FocusEventHandler<HTMLTextAreaElement> | - | Колбек потери фокуса | | autoFocus | boolean | - | Включен ли авто-фокус | | onKeyDown | KeyboardEventHandler<HTMLTextAreaElement> | - | Колбек нажатия клавиши клавиатуры | | spellCheck | boolean | true | Включение проверки орфографии | | className | string | - | CSS-класс | | labelTooltip | ReactNode | - | Всплывающая подсказка лейбла | | required | boolean | - | Является ли поле обязательным | | showHintIcon | boolean | - | Отображать иконку подсказки | | size | enum Size: "s", "m", "l" | m | Размер | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | minRows | number | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен | | maxRows | number | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен | | resizable | boolean | true | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) | | customSchema | StringSchema<string, AnyObject, undefined, ""> | - | | | addButton | boolean | - | Поле появляется по кнопке "Добавить описание" (только для опционального поля) | | onValidationError | (error: ValidationError) => void | - | Колбэк, вызываемый при изменении ошибки валидации (только в standalone режиме) | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

FieldDescriptionRHF

Поле описание c оберткой для React Hook Form

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | controllerProps* | Omit<ControllerProps<FieldValues>, "disabled" \| "render" \| "rules"> | - | Режим контроллера с использованием react-hook-form | | value | string | - | HTML-аттрибут value | | onChange | (value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void | - | Колбек смены значения | | id | string | - | HTML-аттрибут id | | maxLength | number | 255 | Максимальное кол-во символов | | disabled | boolean | - | Является ли поле деактивированным | | readonly | boolean | - | Является ли поле доступным только на чтение | | onFocus | FocusEventHandler<HTMLTextAreaElement> | - | Колбек получения фокуса | | onBlur | FocusEventHandler<HTMLTextAreaElement> | - | Колбек потери фокуса | | autoFocus | boolean | - | Включен ли авто-фокус | | onKeyDown | KeyboardEventHandler<HTMLTextAreaElement> | - | Колбек нажатия клавиши клавиатуры | | spellCheck | boolean | true | Включение проверки орфографии | | className | string | - | CSS-класс | | labelTooltip | ReactNode | - | Всплывающая подсказка лейбла | | required | boolean | - | Является ли поле обязательным | | showHintIcon | boolean | - | Отображать иконку подсказки | | size | enum Size: "s", "m", "l" | m | Размер | | validationState | enum ValidationState: "error", "default", "warning", "success" | - | Состояние валидации | | labelTooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | top | Расположение подсказки лейбла | | error | string | - | | | allowMoreThanMaxLength | boolean | - | Можно ли вводить больше разрешённого кол-ва символов | | showCopyButton | boolean | - | Отображение кнопки Копировать для поля (актуально только для readonly = true) | | onCopyButtonClick | () => void | - | Колбек клика по кнопке Копировать для поля | | showClearButton | boolean | true | Отображение кнопки очистки поля | | minRows | number | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен | | maxRows | number | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен | | resizable | boolean | true | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) | | customSchema | StringSchema<string, AnyObject, undefined, ""> | - | | | addButton | boolean | - | Поле появляется по кнопке "Добавить описание" (только для опционального поля) | | ref | LegacyRef<HTMLInputElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} | | key | Key | - | |

Changelog