@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.2-credit

package/mobile/src/ui-kit/DialogManager/DialogManager.tsx

@@ -1,53 +1,32 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useOnEscape } from '../../hooks/useOnEscape';
 import { style } from '../../utils/style';
-import { type DialogOpenAction } from './DialogAction';
-import { useDialogManager } from './useDialogManager';
 import { useDialogsList } from './useDialogsList';
 
 export const DialogManager = JSX(() => {
-  const handleCloseAll = useCallback((dialogs: DialogOpenAction[]) => {
-    for (const _ of dialogs) {
-      _?.onClose && _.onClose();
-    }
-  }, []);
-
-  const handleClose = useCallback((_: DialogOpenAction) => {
-    _?.onClose && _.onClose();
-  }, []);
-
-  const dialogs = useDialogsList({ onCloseAll: handleCloseAll, onClose: handleClose });
-
-  const { close } = useDialogManager();
-
-  const escapeHandler = useCallback(({ key }: { key: string }) => {
-    if (key === 'Escape') {
-      close();
-    }
-  }, []);
+  const [dialogs, { close }] = useDialogsList();
+  const hasDialogs = Boolean(dialogs.length);
 
-  useEventListener(globalThis.document, 'keydown', escapeHandler);
+  useOnEscape(close);
 
   useEffect(() => {
-    if (dialogs.length) {
-      globalThis.document?.body.classList.add('no-scrollbar');
-      globalThis.document?.body.classList.add('overflow-hidden');
+    if (hasDialogs) {
+      globalThis.document?.body.classList.add('no-scrollbar', 'overflow-hidden');
     } else {
-      globalThis.document?.body.classList.remove('no-scrollbar');
-      globalThis.document?.body.classList.remove('overflow-hidden');
+      globalThis.document?.body.classList.remove('no-scrollbar', 'overflow-hidden');
     }
-  }, [dialogs]);
+  }, [hasDialogs]);
 
-  return dialogs.length ? (
-    <div className="fixed inset-0 z-50" role="dialog">
+  return hasDialogs ? (
+    <div className="fixed inset-0 z-50">
       {dialogs.map(({ dialog, id }, i) => (
         <div
           key={String(id || i)}
           className={style(
             'absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar bg-black/50',
             {
-              hidden: i !== dialogs.length - 1,
+              hidden: i !== dialogs.length - 1, // TODO Чего?)
             },
           )}
         >

package/mobile/src/ui-kit/DialogManager/isDialogOpen.ts

@@ -1,4 +1,4 @@
-import { type DialogOpenAction } from './DialogAction';
+import type { DialogOptions } from './DialogAction';
 
-export const isDialogOpen = (id: string, dialogs: DialogOpenAction[]): boolean =>
+export const isDialogOpen = (id: string, dialogs: DialogOptions[]): boolean =>
   Boolean(dialogs.find((item) => item.id === id, id));

package/mobile/src/ui-kit/DialogManager/useDialog.tsx

@@ -0,0 +1,32 @@
+import type { UNIComponent } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import type { DialogOptions } from './DialogAction';
+import { useDialogManager } from './useDialogManager';
+
+export function useDialog<Props extends { onClose?: () => void }>(
+  Dialog: UNIComponent<Props>,
+  initialProps: Partial<Props> = {},
+) {
+  const { open, close, ...rest } = useDialogManager();
+
+  const openDialog = useCallback(
+    (props: Props & { children?: VNode }, options: Partial<DialogOptions> = {}) =>
+      open({
+        dialog: (
+          <Dialog
+            {...initialProps}
+            {...props}
+            onClose={() => {
+              close();
+              props.onClose?.();
+            }}
+          />
+        ),
+        ...options,
+      }),
+    [Dialog, open, close],
+  );
+
+  return { open: openDialog, close, ...rest };
+}

package/mobile/src/ui-kit/DialogManager/useDialogManager.ts

@@ -1,14 +1,4 @@
+import { useEmitterWithActions } from '@redneckz/uni-jsx/lib/EventBus/useEmitterWithActions';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { type VNode } from '../../model/VNode';
 
-export interface DialogOptions {
-  id?: string;
-  onClose?: () => void;
-}
-
-export const useDialogManager = () => ({
-  open: (dialog: VNode, options: DialogOptions = {}) =>
-    defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
-  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-  closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
-});
+export const useDialogManager = () => useEmitterWithActions(defaultEventBus.emitter, 'dialog');

package/mobile/src/ui-kit/DialogManager/useDialogsList.ts

@@ -1,50 +1,19 @@
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useObservableWithActions } from '@redneckz/uni-jsx/lib/EventBus/useObservableWithActions';
 import { useList } from '@redneckz/uni-jsx/lib/hooks/useList';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import { type DialogOpenAction } from './DialogAction';
+import type { DialogOptions } from './DialogAction';
 
-interface DialogsListOptions {
-  onCloseAll?: (dialogs: DialogOpenAction[]) => void;
-  onClose?: (_: DialogOpenAction) => void;
-}
+export const useDialogsList = (): [
+  DialogOptions[],
+  { closeAll: () => void; close: () => void },
+] => {
+  const [dialogs, { push, pop, clear }] = useList<DialogOptions>();
 
-export const useDialogsList = ({
-  onCloseAll,
-  onClose,
-}: DialogsListOptions = {}): DialogOpenAction[] => {
-  const [dialogs, { push, pop, clear }] = useList<DialogOpenAction>();
+  useObservableWithActions(defaultEventBus.observable, 'dialog', {
+    open: push,
+    close: pop,
+    closeAll: clear,
+  });
 
-  const closeAll = useCallback(() => {
-    onCloseAll && onCloseAll(dialogs);
-    clear();
-  }, [dialogs, onCloseAll]);
-
-  const close = useCallback(() => {
-    onClose && onClose(dialogs[dialogs.length - 1]);
-    pop();
-  }, [dialogs, onClose]);
-
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('dialog', (action) => {
-        switch (action.type) {
-          case 'open':
-            push(action);
-            break;
-          case 'close':
-            if (action.all) {
-              closeAll();
-            } else {
-              close();
-            }
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [closeAll, close],
-  );
-
-  return dialogs;
+  return [dialogs, { close: pop, closeAll: clear }];
 };

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -1,64 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ColorPalette } from '../../model/ContentPageBase';
 import { style } from '../../utils/style';
-import { type IconName } from '../Icon/IconProps';
-import { Img } from '../Img/Img';
-import { Text } from '../Text/Text';
-import { TextWithIcon } from '../TextWithIcon/TextWithIcon';
-import { type FoldablePartProps } from './FoldablePartProps';
+import { Button, type ButtonProps } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { ToggleIcon } from '../Icon/ToggleIcon';
 
-interface DefaultFoldButtonProps {
-  className?: string;
-  label: string;
-  icon: IconName;
-  dataTheme?: ColorPalette;
-  disabled?: boolean;
-  onClick?: () => void;
+interface DefaultFoldButtonProps extends ButtonProps {
+  isUnfolded?: boolean;
+  short?: boolean;
+  label?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = 'pc', disabled = false, onClick }) => (
-    <TextWithIcon
-      tag="button"
-      onClick={onClick}
-      disabled={disabled}
-      data-theme={dataTheme}
-      justifyContent="center"
-      role="button"
-      className={style(
-        'py-4 border border-transparent outline-none focus:border-primary-text space-x-s',
-        disabled
-          ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-          : 'bg-primary-main text-white hover:bg-primary-hove',
-        className,
-      )}
-      textNode={<Text size="text-h4">{label}</Text>}
-      iconNode={
-        icon ? (
-          <Img
-            image={{
-              icon,
-              iconVersion: 'white',
-            }}
-            className="my-auto"
-            width="20"
-            height="20"
-          />
-        ) : null
-      }
-    />
+  ({
+    className,
+    isUnfolded,
+    short,
+    label = isUnfolded ? 'Скрыть' : 'Развернуть',
+    embedded,
+    ...rest
+  }) => (
+    <Button
+      className={style({ 'w-full': !short }, className)}
+      embedded={embedded}
+      shape={short ? 'default' : 'square'}
+      role="tab"
+      aria-label="Кнопка сворачивающейся секции"
+      {...rest}
+    >
+      <ButtonTitle>{label}</ButtonTitle>
+      <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? 'color' : ''} />
+    </Button>
   ),
 );
-
-export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {
-  const labels = ['Развернуть', 'Скрыть'];
-  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-
-  return (
-    <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
-      label={labels[Number(isUnfolded)]}
-      onClick={onToggle}
-    />
-  );
-};

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -1,43 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type VNode } from '../../model/VNode';
-import { type FoldablePartProps } from './FoldablePartProps';
-
-export interface FoldableProps {
-  className?: string;
-  unfoldedByDefault?: boolean;
-  isFoldButtonOnTop?: boolean;
-  renderFoldableSection: (props: FoldablePartProps) => VNode;
-  renderFoldButton?: ((props: FoldablePartProps) => VNode) | null;
-}
-
-export const Foldable = JSX<FoldableProps>(
-  ({
-    className = '',
-    isFoldButtonOnTop = false,
-    unfoldedByDefault = false,
-    renderFoldableSection,
-    renderFoldButton,
-  }) => {
-    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-
-    const onToggle = useCallback(() => {
-      setIsUnfolded((_) => !_);
-    }, []);
-
-    const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-    const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-
-    return isFoldButtonOnTop ? (
-      <div className={className} role="group">
-        {buttonNode}
-        {sectionNode}
-      </div>
-    ) : (
-      <div className={className} role="group">
-        {sectionNode}
-        {buttonNode}
-      </div>
-    );
-  },
-);
+import { type ComponentType } from '../../model/ComponentType';
+import { style } from '../../utils/style';
+import { type ARIAProps } from '../ARIAProps';
+
+export interface FoldableProps extends ARIAProps, ComponentType {}
+
+// TODO Не особо полезно, в итоге
+export const Foldable = JSX<FoldableProps>(({ className, role = 'tablist', children }) => (
+  <div className={style(className)} role={role}>
+    {children}
+  </div>
+));

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,37 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { type ComponentType } from '../../model/ComponentType';
+import { style } from '../../utils/style';
 
-export interface FoldableSectionProps {
-  className?: string;
+export interface FoldableSectionProps extends ComponentType {
   isUnfolded?: boolean;
 }
 
-export const FoldableSection = JSX<FoldableSectionProps>(
-  ({ className = '', isUnfolded, children }) => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const childrenWrapperRef = useResizeObserver(
-      (childrenWrapperEl) => {
-        if (containerRef.current) {
-          containerRef.current.style.maxHeight = isUnfolded
-            ? `${childrenWrapperEl.scrollHeight}px`
-            : '';
-        }
-      },
-      [isUnfolded],
-    );
+export const FoldableSection = JSX<FoldableSectionProps>(({ className, isUnfolded, children }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const childrenWrapperRef = useResizeObserver(
+    (childrenWrapperEl) => {
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = isUnfolded
+          ? `${childrenWrapperEl.scrollHeight}px`
+          : '';
+      }
+    },
+    [isUnfolded],
+  );
 
-    return (
-      <div
-        ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden ${
-          containerRef.current || !isUnfolded ? 'max-h-0' : ''
-        } `}
-      >
-        <div className={className} ref={childrenWrapperRef}>
-          {children}
-        </div>
+  return (
+    <div
+      ref={containerRef}
+      className={style('transition-max-h duration-300 overflow-hidden', {
+        'max-h-0': Boolean(containerRef.current || !isUnfolded),
+      })}
+      role="tabpanel"
+      aria-label="Сворачивающаяся секция"
+    >
+      <div className={className} ref={childrenWrapperRef}>
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+});

package/mobile/src/ui-kit/FormField/BaseFieldDef.ts

@@ -0,0 +1,8 @@
+export interface BaseFieldDef {
+  name?: string;
+  required?: boolean;
+  condition?: {
+    name: string;
+    values: Array<string | boolean>;
+  };
+}

package/mobile/src/ui-kit/FormField/CustomFieldProps.ts

@@ -1,8 +1,14 @@
 import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
 
 export interface CustomFieldProps {
   field: FormFieldRegisterer<any>;
   input?: FieldDef;
   url?: string;
+  params?: Record<string, any>;
+}
+
+export interface CustomFieldPropsWithTypeForm extends CustomFieldProps {
+  typeForm?: FormTypeFieldDef;
 }

package/mobile/src/ui-kit/FormField/Fields/AcquiringField.tsx

@@ -2,8 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type Option } from '../../Select/Option';
 import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
-import { validatorObj } from '../getObjectValidator';
-import { getValidation } from '../getValidation';
 
 export const ACQUIRING_TYPES: Option[] = [
   {
@@ -18,6 +16,10 @@ export const ACQUIRING_TYPES: Option[] = [
     text: 'Интернет-эквайринг',
     key: 'internet',
   },
+  {
+    text: 'SoftPOS',
+    key: 'softpos',
+  },
   {
     text: 'Все виды эквайринга',
     key: 'all',
@@ -29,7 +31,7 @@ export const AcquiringField = JSX<CustomFieldProps>(({ field, input }) => (
     label="Вид эквайринга"
     placeholder="Выберите эквайринг"
     options={ACQUIRING_TYPES}
-    {...getValidation(field('acquiringType'), validatorObj.acquiringType, input?.required)}
+    {...field(input?.name ?? '')}
   />
 ));
 

package/mobile/src/ui-kit/FormField/Fields/AddressBranchField.tsx

@@ -2,21 +2,23 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../../hooks/useBranches';
 import { useBranchesByRegions } from '../../../hooks/useBranchesByRegions';
+import { type FormTypeFieldDef } from '../../../model/FormTypeFieldDef';
 import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
-import { validatorObj } from '../getObjectValidator';
-import { getValidation } from '../getValidation';
+import { getPremium } from '../getPremium';
 
 interface RegionFieldProps extends CustomFieldProps {
   isPremium?: boolean;
 }
 
-export const AddressBranchField = JSX<RegionFieldProps>(({ field, input, isPremium = false }) => {
+export const AddressBranchField = JSX<RegionFieldProps>(({ field, input, params }) => {
+  const isPremium = getPremium(params?.typeForm as FormTypeFieldDef);
+
   const fieldRegion = field('region');
   const regionKey = fieldRegion?.value?.key as string;
   const regionText = fieldRegion?.value?.text as string;
   const addressBranch = isPremium
-    ? useBranchesByRegions()?.find((_) => _?.region === regionText)?.branches
+    ? useBranchesByRegions(isPremium)?.find((_) => _?.region === regionText)?.branches
     : useBranches(regionKey)?.filter((branch) => branch?.address);
   useEffect(() => {
     if (fieldRegion?.value?.key !== '') {
@@ -32,7 +34,7 @@ export const AddressBranchField = JSX<RegionFieldProps>(({ field, input, isPremi
         key: address,
         text: address,
       }))}
-      {...getValidation(field('addressBranch'), validatorObj.addressBranch, input?.required)}
+      {...field(input?.name ?? '')}
       isSearch={true}
     />
   );

package/mobile/src/ui-kit/FormField/Fields/AmountField.tsx

@@ -6,12 +6,12 @@ const MIN_CREDIT_AMOUNT = 1000;
 const MAX_CREDIT_AMOUNT = 1000000000;
 const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
 
-export const AmountField = JSX<CustomFieldProps>(({ field }) => (
+export const AmountField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputRange
     title="Сумма, ₽"
     items={ITEMS_CREDIT_AMOUNT}
     min={MIN_CREDIT_AMOUNT}
     max={MAX_CREDIT_AMOUNT}
-    {...field('amount')}
+    {...field(input?.name ?? '')}
   />
 ));

package/mobile/src/ui-kit/FormField/Fields/AnnualRevenueField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const AnnualRevenueField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputControl label="Годовая выручка, ₽" {...field(input?.name ?? '')} />
+));

package/mobile/src/ui-kit/FormField/Fields/ApplierTypeField.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type Option } from '../../Select/Option';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const CLIENT_KEY = 'client';
+export const REPRESENTATIVE_KEY = 'representative';
+
+export type ApplierType = Option & {
+  key: 'client' | 'representative';
+};
+
+export const APPLIER_TYPES: ApplierType[] = [
+  {
+    key: CLIENT_KEY,
+    text: 'Клиент',
+  },
+  {
+    key: REPRESENTATIVE_KEY,
+    text: 'Представитель клиента',
+  },
+];
+
+export const ApplierTypeField = JSX<CustomFieldProps>(({ field, input }) => (
+  <SelectControl
+    label="Тип обратившегося"
+    {...input}
+    options={APPLIER_TYPES}
+    {...field('applierType')}
+  />
+));

package/mobile/src/ui-kit/FormField/Fields/BankEmpoleeField.tsx

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const BankEmpoleeField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputControl
+    label="ФИО или должность обслуживавшего Вас сотрудника Банка"
+    {...field(input?.name ?? '')}
+  />
+));

package/mobile/src/ui-kit/FormField/Fields/BirthdayField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePickerControl } from '../../DatePicker/DatePickerControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const BirthdayField = JSX<CustomFieldProps>(({ field, input }) => (
+  <DatePickerControl label={input?.label || 'Дата рождения'} {...field(input?.name ?? '')} />
+));

package/mobile/src/ui-kit/FormField/Fields/CollectionCountField.tsx

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const CollectionCountField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputControl
+    label="Количество объектов инкассации"
+    isInteger={true}
+    {...field(input?.name ?? '')}
+  />
+));

package/mobile/src/ui-kit/FormField/Fields/CommentField.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
-import { validatorObj } from '../getObjectValidator';
-import { getValidation } from '../getValidation';
 
 export const CommentField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     className="col-span-2"
-    {...getValidation(field('comment'), validatorObj.comment, input?.required)}
+    {...field(input?.name ?? '')}
     placeholder="Ваше сообщение"
     isTextarea={true}
   />

package/mobile/src/ui-kit/FormField/Fields/DesiredMeetingDateField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePickerControl } from '../../DatePicker/DatePickerControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const DesiredMeetingDateField = JSX<CustomFieldProps>(({ field, input }) => (
+  <DatePickerControl label="Желаемая дата встречи" {...field(input?.name ?? '')} />
+));

package/mobile/src/ui-kit/FormField/Fields/EmailField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const EmailField = JSX<CustomFieldProps>(({ field, input }) => {
+  return <InputControl label="Электронная почта" {...field(input?.name ?? '')} {...input} />;
+});

package/mobile/src/ui-kit/FormField/Fields/Experience5YearsField.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../../utils/clamp';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const MAX_YEARS = 5;
+const MIN_YEARS = 0;
+
+export const Experience5YearsField = JSX<CustomFieldProps>(({ field, input }) => {
+  const onChange = useCallback(
+    (value: string) =>
+      field(input?.name ?? '')?.onChange?.(String(clamp(Number(value), MIN_YEARS, MAX_YEARS))),
+    [],
+  );
+
+  return (
+    <InputControl
+      label="Стаж"
+      placeholder="За последние 5 лет"
+      type="number"
+      {...field(input?.name ?? '')}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});