@cloud-ru/uikit-product-fields-predefined 3.0.0 → 3.0.1-preview-d01a0cca.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "3.0.0",
+  "version": "3.0.1-preview-d01a0cca.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,9 +37,11 @@
     "@cloud-ru/uikit-product-mobile-fields": "2.1.2",
     "@cloud-ru/uikit-product-mobile-modal": "2.1.3",
     "@cloud-ru/uikit-product-utils": "9.1.0",
+    "@siberiacancode/reactuse": "0.3.22",
     "@snack-uikit/attachment": "0.4.40",
     "@snack-uikit/button": "0.19.16",
     "@snack-uikit/drop-zone": "0.9.6",
+    "@snack-uikit/fields": "0.51.15",
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/input-private": "4.8.8",
     "@snack-uikit/scroll": "0.10.8",
@@ -48,7 +50,8 @@
     "awesome-phonenumber": "7.5.0",
     "classnames": "2.5.1",
     "merge-refs": "1.2.2",
-    "react-imask": "7.6.1"
+    "react-imask": "7.6.1",
+    "sass": "1.80.4"
   },
   "devDependencies": {
     "@types/merge-refs": "1.0.0",
@@ -59,5 +62,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "77212a170d04f0b142fcfaa5f9a107f9028fd06c"
+  "gitHead": "e5c9c7143ce8fc668e576438ce7316be0b931d48"
 }

package/src/components/FieldCode/FieldCode.tsx

@@ -0,0 +1,133 @@
+import cn from 'classnames';
+import { forwardRef, useImperativeHandle } from 'react';
+
+import { FieldDecorator, FieldDecoratorProps } from '@snack-uikit/fields';
+
+import { Cell, ResendCode, type ResendCodeProps } from './components';
+import { FIELD_CODE_DEFAULT_FOCUS_EFFECTS, type FieldCodeFocusEffect } from './constants';
+import { useCodeInput, UseCodeInputParams, useFieldHelpers, useFocusCell } from './hooks';
+import styles from './styles.module.scss';
+import { getCellValidationState } from './utils';
+
+export type FieldCodeRef = {
+  /** Перенести фокус на ячейку с индексом `index` */
+  moveFocus: (index: number) => void;
+  /** Убрать фокус со всех ячеек кода */
+  blurFields: () => void;
+  /** Сбросить значение кода */
+  resetCode: () => void;
+};
+
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
+  /** CSS-класс компонента */
+  className?: string;
+  /** CSS-класс ячейки кода */
+  cellClassName?: string;
+  /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+  spacing?: number[];
+  /** Подсветить пустые символы кода */
+  showEmptyChars?: boolean;
+  /** Компонент отправки нового кода */
+  resendCode?: ResendCodeProps;
+  /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
+  focusEffects?: readonly FieldCodeFocusEffect[];
+  /** Сообщение при неверном коде, если не передан свой `error` */
+  invalidCode?: string;
+  /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+  stretchCells?: boolean;
+};
+
+export type FieldCodeProps = FieldCodeOwnProps &
+  Omit<UseCodeInputParams, 'moveFocus'> &
+  Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+
+export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function FieldCode(props, ref) {
+  const {
+    codeLength,
+    className,
+    cellClassName,
+    value,
+    onChange,
+    spacing,
+    onComplete,
+    size,
+    disabled,
+    label,
+    error,
+    invalidCode,
+    showEmptyChars,
+    resendCode,
+    focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS,
+    stretchCells = false,
+    'data-test-id': dataTestId,
+  } = props;
+
+  const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
+  const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
+  const { resetCode } = useFieldHelpers({
+    onChangeCode,
+    focusEffects,
+    moveFocus,
+    showEmptyChars,
+    code,
+    codeLength,
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      moveFocus,
+      blurFields,
+      resetCode,
+    }),
+    [moveFocus, blurFields, resetCode],
+  );
+
+  const resolvedError = error ?? invalidCode;
+
+  const resolvedDecoratorProps = {
+    label,
+    disabled,
+    size,
+    error: resolvedError,
+  };
+
+  return (
+    <div
+      className={cn(styles.fieldCode, className)}
+      data-stretch-cells={stretchCells || undefined}
+      {...(dataTestId ? { 'data-test-id': dataTestId } : undefined)}
+    >
+      <FieldDecorator className={styles.fieldDecorator} {...resolvedDecoratorProps}>
+        <div className={styles.codeContainer} data-size={size} data-stretch-cells={stretchCells || undefined}>
+          {code.map((char, index) => (
+            <Cell
+              ref={inputRef => {
+                if (inputRef) {
+                  inputsRef.current[index] = inputRef;
+                }
+              }}
+              key={index}
+              className={cn(spacing?.includes(index) && styles.cellSpacing, cellClassName)}
+              stretchCells={stretchCells}
+              size={size}
+              value={char}
+              disabled={disabled}
+              autoComplete={index === 0 ? 'one-time-code' : undefined}
+              onKeyDown={e => cellHandlers.onKeyDown(e, index)}
+              onPaste={cellHandlers.onPaste}
+              onChange={e => cellHandlers.onChange(e, index)}
+              validationState={getCellValidationState(char, showEmptyChars, Boolean(resolvedError))}
+            />
+          ))}
+        </div>
+      </FieldDecorator>
+
+      {resendCode ? <ResendCode {...resendCode} size={resendCode.size ?? size} /> : null}
+    </div>
+  );
+});
+
+export type { FieldCodeFocusEffect } from './constants';
+export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/src/components/FieldCode/components/Cell/Cell.tsx

@@ -0,0 +1,35 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+
+import { FieldText, FieldTextProps } from '@snack-uikit/fields';
+
+import { ZERO_WIDTH_SPACE } from '../../constants';
+import styles from './styles.module.scss';
+
+type CellProps = {
+  /** CSS-класс ячейки кода */
+  className?: string;
+  /** Растягивать ячейку на всю доступную ширину */
+  stretchCells?: boolean;
+} & Pick<
+  FieldTextProps,
+  'size' | 'disabled' | 'value' | 'autoComplete' | 'onKeyDown' | 'onPaste' | 'onChange' | 'validationState'
+>;
+
+export const Cell = forwardRef<HTMLInputElement, CellProps>((props, ref) => {
+  const { className, size, stretchCells, value, ...fieldCellProps } = props;
+
+  return (
+    <FieldText
+      inputMode='numeric'
+      ref={ref}
+      className={cn(styles.cell, className)}
+      data-size={size}
+      data-stretch-cells={stretchCells || undefined}
+      showClearButton={false}
+      value={value === ZERO_WIDTH_SPACE ? '' : value}
+      size={size}
+      {...fieldCellProps}
+    />
+  );
+});

package/src/components/FieldCode/components/Cell/index.ts

@@ -0,0 +1 @@
+export * from './Cell';

package/src/components/FieldCode/components/Cell/styles.module.scss

@@ -0,0 +1,24 @@
+$cell-widths: (
+  's': 32px,
+  'm': 40px,
+  'l': 48px,
+);
+
+.cell {
+  flex-shrink: 0;
+
+  input {
+    text-align: center;
+  }
+
+  @each $size, $width in $cell-widths {
+    &[data-size='#{$size}']:not([data-stretch-cells]) {
+      width: $width;
+    }
+  }
+
+  &[data-stretch-cells] {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}

package/src/components/FieldCode/components/ResendCode/ResendCode.tsx

@@ -0,0 +1,33 @@
+import { UpdateSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+
+import { formatSecondsAsMmSs } from './utils';
+
+export type ResendCodeProps = {
+  /** Колбек отправки нового кода */
+  onResend: () => void;
+  /** Количество секунд до следующего отправления кода */
+  secondsToNextResend: number;
+} & Pick<ButtonFunctionProps, 'size' | 'disabled'>;
+
+export function ResendCode(props: ResendCodeProps) {
+  const { onResend, secondsToNextResend, ...buttonProps } = props;
+  const { t } = useLocale('FieldsPredefined');
+
+  return (
+    <ButtonFunction
+      label={
+        secondsToNextResend > 0
+          ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
+              timer: formatSecondsAsMmSs(secondsToNextResend),
+            })
+          : t('FieldCode.resendCodeButtons.resendCode')
+      }
+      onClick={onResend}
+      icon={<UpdateSVG />}
+      iconPosition='before'
+      {...buttonProps}
+    />
+  );
+}

package/src/components/FieldCode/components/ResendCode/index.ts

@@ -0,0 +1 @@
+export * from './ResendCode';

package/src/components/FieldCode/components/ResendCode/utils.ts

@@ -0,0 +1,5 @@
+export function formatSecondsAsMmSs(totalSeconds: number): string {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}

package/src/components/FieldCode/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Cell';
+export * from './ResendCode';

package/src/components/FieldCode/constants.ts

@@ -0,0 +1,20 @@
+export const ZERO_WIDTH_SPACE = '\u200B';
+
+/**
+ * Когда дергать `moveFocus` у `FieldCode` (массив `focusEffects`, порядок не важен).
+ * @see {@link FIELD_CODE_DEFAULT_FOCUS_EFFECTS}
+ */
+export type FieldCodeFocusEffect =
+  /** После монтирования — ячейка `0`. */
+  | 'firstCellOnMount'
+  /** После `ref.resetCode()` — ячейка `0`. */
+  | 'firstCellOnReset'
+  /** При включении `showEmptyChars` — первая пустая (все заполнены — последняя); не на каждый ввод. */
+  | 'firstCellWhenShowEmptyChars';
+
+/** Дефолтный набор для `focusEffects`. */
+export const FIELD_CODE_DEFAULT_FOCUS_EFFECTS: readonly FieldCodeFocusEffect[] = [
+  'firstCellOnMount',
+  'firstCellOnReset',
+  'firstCellWhenShowEmptyChars',
+];

package/src/components/FieldCode/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useFieldCodeValidate';
+export * from './useFocusCell';
+export * from './useFieldHelpers';

package/src/components/FieldCode/hooks/useCodeInput.ts

@@ -0,0 +1,147 @@
+import { useRefState } from '@siberiacancode/reactuse';
+import { ClipboardEvent, KeyboardEvent, useCallback, useEffect } from 'react';
+
+import { useValueControl } from '@snack-uikit/utils';
+
+import { ZERO_WIDTH_SPACE } from '../constants';
+import { isNumberChar, isStringCodeLength, isZeroWidthSpace } from '../utils';
+
+export type UseCodeInputParams = {
+  /** Количество цифр в коде (ожидается целое ≥ 1) */
+  codeLength: number;
+  /** Значение кода */
+  value?: string;
+  /** Колбек изменения значения */
+  onChange?: (code: string) => void;
+  /** Функция фокуса */
+  moveFocus: (index: number) => void;
+  /** Колбек достижения ввода всех символов кода */
+  onComplete?: (code: string) => void;
+};
+
+const buildCodeArray = (str: string, codeLength: number) =>
+  Array.from({ length: codeLength }, (_, idx) => str[idx] || ZERO_WIDTH_SPACE);
+
+export function useCodeInput(params: UseCodeInputParams) {
+  const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+
+  const [value = '', onChange] = useValueControl<string>({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue: '',
+  });
+
+  const codeRef = useRefState<string[]>(buildCodeArray(value, codeLength));
+
+  const updateCodeByIndex = useCallback(
+    (index: number, newChar: string) => {
+      codeRef.current[index] = newChar;
+      onChange?.(codeRef.current.join(''));
+    },
+    [codeRef, onChange],
+  );
+
+  const updateFullCode = useCallback(
+    (newCode: string) => {
+      codeRef.current = newCode.split('');
+
+      onChange?.(newCode);
+      moveFocus(codeLength - 1);
+      onComplete?.(newCode);
+    },
+    [codeLength, codeRef, moveFocus, onChange, onComplete],
+  );
+
+  const handleAfterCellUpdate = useCallback(
+    (index: number) => {
+      const normalizedCode = codeRef.current.join('');
+
+      const isLastInput = index === codeLength - 1;
+      const isAllInputsFilled = isStringCodeLength(normalizedCode, codeLength);
+      if (!isLastInput) {
+        moveFocus(index + 1);
+      } else if (isAllInputsFilled) {
+        onComplete?.(normalizedCode);
+      }
+    },
+    [codeLength, codeRef, moveFocus, onComplete],
+  );
+
+  const deleteChar = useCallback(
+    (index: number) => {
+      if (codeRef.current[index] && !isZeroWidthSpace(codeRef.current[index])) {
+        updateCodeByIndex(index, ZERO_WIDTH_SPACE);
+      } else if (index > 0) {
+        moveFocus(index - 1);
+      }
+    },
+    [codeRef, moveFocus, updateCodeByIndex],
+  );
+
+  const onAutoCompleteInput = useCallback(
+    (code: string, index: number) => {
+      if (isStringCodeLength(code, codeLength)) {
+        updateFullCode(code);
+        return;
+      }
+
+      if (!isNumberChar(code)) {
+        return;
+      }
+
+      updateCodeByIndex(index, code);
+      handleAfterCellUpdate(index);
+    },
+    [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode],
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>, index: number) => {
+      switch (e.key) {
+        case 'ArrowLeft':
+          moveFocus(index - 1);
+          break;
+        case 'ArrowRight':
+          moveFocus(index + 1);
+          break;
+        case 'Backspace':
+          deleteChar(index);
+          break;
+        default:
+          if (isNumberChar(e.key)) {
+            e.preventDefault();
+            updateCodeByIndex(index, e.key);
+            handleAfterCellUpdate(index);
+          }
+          break;
+      }
+    },
+    [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex],
+  );
+
+  const onPaste = useCallback(
+    (e: ClipboardEvent<HTMLInputElement>) => {
+      const codeInput = e?.clipboardData.getData('text') ?? '';
+      if (!isStringCodeLength(codeInput, codeLength)) {
+        return;
+      }
+
+      updateFullCode(codeInput);
+    },
+    [codeLength, updateFullCode],
+  );
+
+  useEffect(() => {
+    codeRef.current = buildCodeArray(value, codeLength);
+  }, [codeLength, codeRef, value]);
+
+  return {
+    code: codeRef.current,
+    cellHandlers: {
+      onKeyDown,
+      onPaste,
+      onChange: onAutoCompleteInput,
+    },
+    onChangeCode: onChange,
+  };
+}

package/src/components/FieldCode/hooks/useFieldCodeValidate.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { isNumberChar } from '../utils';
+
+export type UseFieldCodeValidateParams = {
+  /** Ожидаемая длина кода (цифр) */
+  codeLength: number;
+};
+
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export function useFieldCodeValidate(params: UseFieldCodeValidateParams) {
+  const { codeLength } = params;
+  const { t } = useLocale('FieldsPredefined');
+
+  return useCallback(
+    (value?: string | number) => {
+      const str = value != null ? String(value) : '';
+      const digits = str.split('').filter(isNumberChar).join('');
+      if (digits.length === 0) {
+        return t('FieldCode.required');
+      }
+
+      if (digits.length < codeLength) {
+        return t('FieldCode.minLength', { count: codeLength });
+      }
+
+      return undefined;
+    },
+    [codeLength, t],
+  );
+}

package/src/components/FieldCode/hooks/useFieldHelpers.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { type FieldCodeFocusEffect } from '../constants';
+import { getFirstEmptyCellIndex } from '../utils';
+
+type UseFieldHelpersParams = {
+  onChangeCode: (code: string) => void;
+  moveFocus: (index: number) => void;
+  focusEffects: readonly FieldCodeFocusEffect[];
+  showEmptyChars?: boolean;
+  code: readonly string[];
+  codeLength: number;
+};
+
+export function useFieldHelpers(params: UseFieldHelpersParams) {
+  const { onChangeCode, moveFocus, focusEffects: focusEffectsProp, showEmptyChars, code, codeLength } = params;
+
+  const focusEffectsKey = [...focusEffectsProp].sort().join(',');
+  const focusEffects = useMemo(
+    () => [...focusEffectsProp],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusEffectsKey],
+  );
+
+  const resetCode = useCallback(() => {
+    onChangeCode('');
+
+    if (focusEffects.includes('firstCellOnReset')) {
+      moveFocus(0);
+    }
+  }, [focusEffects, moveFocus, onChangeCode]);
+
+  useEffect(() => {
+    if (focusEffects.includes('firstCellOnMount')) {
+      moveFocus(0);
+    }
+  }, [focusEffects, moveFocus]);
+
+  useEffect(() => {
+    if (!focusEffects.includes('firstCellWhenShowEmptyChars') || !showEmptyChars) {
+      return;
+    }
+
+    const emptyIndex = getFirstEmptyCellIndex(code);
+    if (emptyIndex >= 0) {
+      moveFocus(emptyIndex);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showEmptyChars, focusEffects, moveFocus, codeLength]);
+
+  return { resetCode };
+}

package/src/components/FieldCode/hooks/useFocusCell.ts

@@ -0,0 +1,29 @@
+import { useCallback, useRef } from 'react';
+
+export function useFocusCell(codeLength: number) {
+  const inputsRef = useRef<HTMLInputElement[]>([]);
+
+  const focusInput = useCallback(
+    (index: number) => {
+      inputsRef.current[index]?.focus();
+    },
+    [inputsRef],
+  );
+
+  const moveFocus = useCallback(
+    (newIndex: number) => {
+      if (newIndex >= 0 && newIndex < codeLength) {
+        focusInput(newIndex);
+      }
+    },
+    [codeLength, focusInput],
+  );
+
+  const blurFields = useCallback(() => {
+    inputsRef.current.forEach(input => {
+      input?.blur();
+    });
+  }, [inputsRef]);
+
+  return { inputsRef, moveFocus, blurFields };
+}

package/src/components/FieldCode/index.ts

@@ -0,0 +1,2 @@
+export * from './FieldCode';
+export { useFieldCodeValidate, type UseFieldCodeValidateParams } from './hooks/useFieldCodeValidate';

package/src/components/FieldCode/styles.module.scss

@@ -0,0 +1,48 @@
+@use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+@use 'sass:map';
+
+.fieldCode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  &[data-stretch-cells] {
+    width: 100%;
+  }
+}
+
+.fieldDecorator {
+  width: unset;
+}
+
+.codeContainer {
+  display: flex;
+  justify-content: center;
+
+  $container-gaps: (
+    's': 8px,
+    'm': 8px,
+    'l': 12px,
+  );
+
+  @each $size, $gap in $container-gaps {
+    &[data-size='#{$size}'] {
+      gap: $gap;
+    }
+  }
+}
+
+.cellSpacing {
+  $spacing-sizes: (
+    's': 8px,
+    'm': 8px,
+    'l': 12px,
+  );
+
+  @each $size, $margin-right in $spacing-sizes {
+    &[data-size='#{$size}'] {
+      margin-right: $margin-right;
+    }
+  }
+}

package/src/components/FieldCode/utils.ts

@@ -0,0 +1,23 @@
+import { FieldTextProps } from '@snack-uikit/fields';
+
+import { ZERO_WIDTH_SPACE } from './constants';
+
+export const isNumberChar = (char: string) => /^\d$/.test(char);
+export const isStringCodeLength = (input: string, codeLength: number) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+export const isZeroWidthSpace = (value: string) => value === ZERO_WIDTH_SPACE;
+
+export function getFirstEmptyCellIndex(code: readonly string[]): number {
+  return code.findIndex(isZeroWidthSpace);
+}
+
+export const getCellValidationState = (
+  value: string,
+  showEmptyChars?: boolean,
+  error?: boolean,
+): FieldTextProps['validationState'] => {
+  if (showEmptyChars) {
+    return isZeroWidthSpace(value) ? 'error' : 'default';
+  }
+
+  return error ? 'error' : 'default';
+};

package/src/components/index.ts

@@ -5,3 +5,4 @@ export * from './AIDisclaimer';
 export * from './FieldName';
 export * from './FieldDescription';
 export * from './FieldMask';
+export * from './FieldCode';