@cloud-ru/uikit-product-mobile-fields 0.11.24

package/src/hooks/dateHandlers/useDateField.ts

@@ -0,0 +1,275 @@
+import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject, useCallback, useMemo, useRef } from 'react';
+
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { isBrowser } from '@snack-uikit/utils';
+
+import {
+  DEFAULT_LOCALE,
+  FocusSlot,
+  MASK,
+  MODES,
+  NO_SECONDS_MODE,
+  SLOT_ORDER,
+  SlotKey,
+  SLOTS,
+  SLOTS_PLACEHOLDER,
+} from '../../constants';
+import { Mode, TimeMode } from '../../types';
+import { parseDate } from '../../utils/dateFields';
+import { useDateFieldHelpersForMode } from './useDateFieldHelpersForMode';
+
+type BaseProps = {
+  inputRef: RefObject<HTMLInputElement>;
+  readonly?: boolean;
+  locale?: Intl.Locale;
+  setIsOpen(v: boolean): void;
+  showSeconds?: boolean;
+};
+
+type UseDateFieldProps =
+  | ({
+      mode: Mode;
+      onChange?(value: Date | undefined): void;
+    } & BaseProps)
+  | ({
+      mode: TimeMode;
+      onChange?: TimePickerProps['onChangeValue'];
+    } & BaseProps);
+
+export function useDateField({
+  inputRef,
+  onChange,
+  readonly,
+  locale = DEFAULT_LOCALE,
+  setIsOpen,
+  mode,
+  showSeconds,
+}: UseDateFieldProps) {
+  const dateTimeMode = mode === MODES.DateTime && !showSeconds ? NO_SECONDS_MODE : mode;
+  const slotsInfo = SLOTS[dateTimeMode];
+  const mask = MASK[dateTimeMode][locale.baseName] || MASK[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotsPlaceholder =
+    SLOTS_PLACEHOLDER[dateTimeMode][locale.baseName] || SLOTS_PLACEHOLDER[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotOrder = SLOT_ORDER[dateTimeMode];
+  const {
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+    setFocus,
+    updateSlot,
+    getSlot,
+    isLikeDate,
+    isAllSelected,
+    tryToCompleteInput,
+    isValidInput,
+  } = useDateFieldHelpersForMode({ inputRef, mode: dateTimeMode });
+
+  const focusSlotKey = useMemo(() => slotOrder[0], [slotOrder]);
+  const focusSlotRef = useRef<FocusSlot>(focusSlotKey);
+
+  const setInputFocus = useCallback(
+    (focusSlot?: FocusSlot) => {
+      if (!inputRef.current || readonly) {
+        return;
+      }
+
+      if (isBrowser() && document.activeElement !== inputRef.current) {
+        focusSlotRef.current = focusSlot || focusSlotKey;
+        inputRef.current.focus();
+        return;
+      }
+
+      const focusSlotValue = focusSlot || focusSlotRef.current;
+
+      if (isLikeDate() && focusSlotValue === focusSlotKey) {
+        return;
+      }
+
+      if (!inputRef.current.value) {
+        inputRef.current.value = mask;
+        setFocus(focusSlotKey);
+        return;
+      }
+
+      if (focusSlot !== 'auto') {
+        setFocus(focusSlotValue);
+        return;
+      }
+
+      const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
+
+      if (slotKey) {
+        const { start, end } = slotsInfo[slotKey];
+        inputRef.current.setSelectionRange(start, end);
+      }
+    },
+    [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo],
+  );
+
+  const handleClick = useCallback(() => {
+    setInputFocus('auto');
+  }, [setInputFocus]);
+
+  const handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void = () => {
+    onChange && isLikeDate() && onChange(parseDate(inputRef.current?.value || ''));
+  };
+
+  const checkInputAndGoNext = useCallback(
+    (slotKey: SlotKey | undefined) => {
+      if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
+        return;
+      }
+
+      if (isValidInput()) {
+        setFocus(getNextSlotKey(slotKey));
+        return;
+      }
+
+      switch (slotKey) {
+        case SlotKey.Day:
+          updateSlot(SlotKey.Month, slotsPlaceholder?.[SlotKey.Month] ?? '');
+          setFocus(SlotKey.Month);
+          return;
+        case SlotKey.Year:
+        case SlotKey.Month:
+          updateSlot(SlotKey.Day, slotsPlaceholder?.[SlotKey.Day] ?? '');
+          setFocus(SlotKey.Day);
+          return;
+        default:
+          setFocus(getNextSlotKey(slotKey));
+      }
+    },
+    [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (inputRef.current && !readonly) {
+        if (e.key !== 'Tab') {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+
+        if (e.key !== 'ArrowDown') {
+          setIsOpen(false);
+        }
+
+        if (e.key === 'Escape') {
+          inputRef.current.blur();
+          return;
+        }
+
+        if (e.key === 'Enter') {
+          tryToCompleteInput();
+        }
+
+        const clickIndex = inputRef.current.selectionStart;
+        const slotKey = getSlotKeyFromIndex(clickIndex);
+
+        if (slotKey) {
+          const value = getSlot(slotKey);
+          const { max } = slotsInfo[slotKey];
+
+          const numberValue = Number(value) || 0;
+
+          if (e.key === 'ArrowRight') {
+            if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
+              inputRef.current.selectionStart = inputRef.current.value.length;
+              return;
+            }
+            setFocus(getNextSlotKey(slotKey));
+            return;
+          }
+
+          if (e.key === 'ArrowLeft') {
+            setFocus(getPrevSlotKey(slotKey));
+            return;
+          }
+
+          if (e.key === 'Backspace') {
+            if (isAllSelected()) {
+              inputRef.current.value = mask;
+              setFocus(focusSlotKey);
+            } else {
+              updateSlot(slotKey, slotsPlaceholder[slotKey] ?? '');
+            }
+          }
+
+          if (/^\d+$/.test(e.key)) {
+            const slotValue = parseInt(numberValue.toString() + e.key, 10) || 0;
+
+            const valueLength = slotValue.toString().length;
+            const maxLength = max.toString().length;
+
+            if (valueLength < maxLength) {
+              slotValue && updateSlot(slotKey, slotValue);
+
+              if (slotValue * 10 > max) {
+                checkInputAndGoNext(slotKey);
+              }
+            } else if (valueLength > maxLength) {
+              if (Number(e.key) * 10 > max) {
+                updateSlot(slotKey, e.key);
+                checkInputAndGoNext(slotKey);
+              } else {
+                Number(e.key) && updateSlot(slotKey, e.key);
+              }
+            } else {
+              if (slotValue <= max) {
+                updateSlot(slotKey, slotValue);
+                checkInputAndGoNext(slotKey);
+              } else {
+                if (Number(e.key) * 10 > max) {
+                  updateSlot(slotKey, e.key);
+                  checkInputAndGoNext(slotKey);
+                } else {
+                  Number(e.key) && updateSlot(slotKey, e.key);
+                }
+              }
+            }
+          }
+          const newDate = parseDate(isLikeDate() ? inputRef.current.value : '');
+          onChange?.(newDate);
+        }
+      }
+    },
+    [
+      inputRef,
+      readonly,
+      getSlotKeyFromIndex,
+      setIsOpen,
+      tryToCompleteInput,
+      getSlot,
+      slotsInfo,
+      isLikeDate,
+      onChange,
+      isAllSelected,
+      slotOrder,
+      setFocus,
+      getNextSlotKey,
+      getPrevSlotKey,
+      mask,
+      focusSlotKey,
+      updateSlot,
+      slotsPlaceholder,
+      checkInputAndGoNext,
+    ],
+  );
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(() => {
+    if (!readonly && inputRef.current?.value === mask) {
+      inputRef.current.value = '';
+    }
+    focusSlotRef.current = focusSlotKey;
+  }, [inputRef, mask, readonly, focusSlotKey]);
+
+  return {
+    handleKeyDown,
+    handleChange,
+    handleClick,
+    setInputFocus,
+    value: inputRef.current?.value,
+    mask,
+    handleBlur,
+  };
+}

package/src/hooks/dateHandlers/useDateFieldHelpersForMode.ts

@@ -0,0 +1,145 @@
+import { RefObject, useCallback, useMemo } from 'react';
+
+import { MODES, NO_SECONDS_MODE, SlotKey, SLOTS, TIME_MODES } from '../../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../../types';
+import { getNextSlotKeyHandler, getPrevSlotKeyHandler, getSlotKeyFromIndexHandler } from '../../utils/dateFields';
+
+export function useDateFieldHelpersForMode({
+  inputRef,
+  mode,
+}: {
+  inputRef: RefObject<HTMLInputElement>;
+  mode: Mode | TimeMode | NoSecondsMode;
+}) {
+  const setFocus = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        const { start, end } = SLOTS[mode][slotKey];
+
+        inputRef.current.setSelectionRange(start, end);
+      }
+    },
+    [mode, inputRef],
+  );
+
+  const isAllSelected = useCallback(
+    () => inputRef.current?.value.length === inputRef.current?.selectionEnd && inputRef.current?.selectionStart === 0,
+    [inputRef],
+  );
+
+  const getSlot = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        return inputRef.current.value.slice(SLOTS[mode][slotKey].start, SLOTS[mode][slotKey].end);
+      }
+
+      return '';
+    },
+    [mode, inputRef],
+  );
+
+  const isLikeDate = useCallback(() => {
+    if (inputRef.current) {
+      return Object.keys(SLOTS[mode]).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+    }
+    return false;
+  }, [mode, getSlot, inputRef]);
+
+  const isValidInput = useCallback((): boolean => {
+    const isTimeMode = Object.values(TIME_MODES).includes(mode as TimeMode);
+
+    if (isTimeMode) {
+      return true;
+    }
+
+    const day = parseInt(getSlot(SlotKey.Day), 10);
+    const month = parseInt(getSlot(SlotKey.Month), 10);
+    const year = parseInt(getSlot(SlotKey.Year), 10);
+
+    if (!month || !day) {
+      return true;
+    }
+
+    const date = new Date(year || /* високосный год = */ 2020, month - 1, day);
+
+    return date.getDate() === day;
+  }, [getSlot, mode]);
+
+  const tryToCompleteInput = useCallback((): boolean => {
+    let isCompleted: boolean;
+
+    const parsedSlotsData = Object.keys(SLOTS[mode]).reduce(
+      (res, key) => {
+        const slotKey = key as SlotKey;
+        res[slotKey] = parseInt(getSlot(slotKey), 10);
+        return res;
+      },
+      {} as Record<SlotKey, number>,
+    );
+
+    const {
+      [SlotKey.Day]: day,
+      [SlotKey.Month]: month,
+      [SlotKey.Year]: year,
+      [SlotKey.Hours]: hours,
+      [SlotKey.Minutes]: minutes,
+      [SlotKey.Seconds]: seconds,
+    } = parsedSlotsData;
+
+    const yearSlotMeta = SLOTS[mode][SlotKey.Year];
+    const isDateCompleted = Boolean(day && month && year >= yearSlotMeta?.min && year <= yearSlotMeta?.max);
+    const isTimeCompleted = [
+      hours,
+      minutes,
+      ...(mode === MODES.DateTime || mode === TIME_MODES.FullTime ? [seconds] : []),
+    ].every(value => value !== undefined);
+
+    if (mode === MODES.DateTime || mode === NO_SECONDS_MODE) {
+      isCompleted = isDateCompleted && isTimeCompleted;
+    } else if (mode === TIME_MODES.FullTime || mode === TIME_MODES.NoSeconds) {
+      isCompleted = isTimeCompleted;
+    } else {
+      isCompleted = isDateCompleted;
+    }
+
+    if (isCompleted && inputRef.current) {
+      const lastPosition = inputRef.current?.value.length;
+      inputRef.current.selectionStart = lastPosition;
+      inputRef.current.selectionEnd = lastPosition;
+    }
+
+    return isCompleted;
+  }, [getSlot, inputRef, mode]);
+
+  const updateSlot = useCallback(
+    (slotKey: string, slotValue: number | string) => {
+      if (inputRef.current) {
+        const { start, end, max } = SLOTS[mode][slotKey];
+
+        inputRef.current.value =
+          inputRef.current.value.slice(0, start) +
+          slotValue.toString().padStart(max.toString().length, '0') +
+          inputRef.current.value.slice(end);
+        setFocus(slotKey);
+      }
+    },
+    [inputRef, setFocus, mode],
+  );
+
+  const getNextSlotKey = useMemo(() => getNextSlotKeyHandler(mode), [mode]);
+  const getPrevSlotKey = useMemo(() => getPrevSlotKeyHandler(mode), [mode]);
+  const getSlotKeyFromIndex = useMemo(() => getSlotKeyFromIndexHandler(mode), [mode]);
+
+  return {
+    isAllSelected,
+    isValidInput,
+    tryToCompleteInput,
+    getSlot,
+    updateSlot,
+    setFocus,
+    isLikeDate,
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+  };
+}

package/src/hooks/dateHandlers/useFocusHandlers.ts

@@ -0,0 +1,46 @@
+import { FocusEvent, useCallback, useRef } from 'react';
+
+type Options = {
+  onFocusByKeyboard?: (e: FocusEvent<HTMLInputElement>) => void;
+  onFocusByClick?: (e: FocusEvent<HTMLInputElement>) => void;
+};
+
+/**
+ * Позволяет разделить обработку получения фокуса в результате клика или с клавиатуры.
+ * Основано на том факте что событию фокуса в результате клика предшествует событие onMouseDown.
+ */
+export function useFocusHandlers({ onFocusByKeyboard, onFocusByClick }: Options) {
+  const isFocused = useRef(false);
+  const isMouseDown = useRef(false);
+
+  const onFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      isFocused.current = true;
+
+      if (isMouseDown.current) {
+        onFocusByClick?.(e);
+        isMouseDown.current = false;
+      } else {
+        onFocusByKeyboard?.(e);
+      }
+    },
+    [isMouseDown, onFocusByClick, onFocusByKeyboard],
+  );
+
+  const onBlur = useCallback(() => {
+    isFocused.current = false;
+    isMouseDown.current = false;
+  }, []);
+
+  const onMouseDown = useCallback(() => {
+    if (!isFocused.current) {
+      isMouseDown.current = true;
+    }
+  }, [isFocused]);
+
+  return {
+    onFocus,
+    onBlur,
+    onMouseDown,
+  };
+}

package/src/hooks/dateHandlers/useHandlers.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+type Handler<T> = (e: T) => void;
+
+/**
+ * Вызывает обработчики события по порядку
+ */
+export function useHandlers<T>(handlers: (Handler<T> | undefined)[]) {
+  return useCallback(
+    (e: T) => {
+      handlers.forEach(handler => handler?.(e));
+    },
+    [handlers],
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './dateHandlers';
+export * from './useCopyButton';
+export * from './usePostfix';
+export * from './usePrefix';
+export * from './useValueControl';

package/src/hooks/styles.module.scss

@@ -0,0 +1,17 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields';
+
+.prefix {
+  color: styles-tokens-fields.$sys-neutral-text-support;
+
+  &[data-disabled] {
+    opacity: styles-tokens-fields.$opacity-a056;
+  }
+}
+
+.postfix {
+  color: styles-tokens-fields.$sys-neutral-text-support;
+
+  &[data-disabled] {
+    opacity: styles-tokens-fields.$opacity-a056;
+  }
+}

package/src/hooks/useCopyButton.tsx

@@ -0,0 +1,47 @@
+import { RefObject, useMemo } from 'react';
+
+import { BUTTON_SIZE_MAP, ButtonProps, Size } from '@snack-uikit/input-private';
+
+import { ButtonCopyValue } from '../helperComponents';
+import { AsyncValueRequest } from '../types';
+
+type UseCopyButtonProps = {
+  copyButtonRef: RefObject<HTMLButtonElement>;
+  showCopyButton: boolean;
+  valueToCopy: string;
+  size: Size;
+  onValueRequest?(): AsyncValueRequest;
+  disabled?: boolean;
+  prefix?: string;
+  postfix?: string;
+};
+
+export function useCopyButton({
+  copyButtonRef,
+  showCopyButton,
+  size,
+  valueToCopy,
+  onValueRequest,
+  disabled,
+  prefix = '',
+  postfix = '',
+}: UseCopyButtonProps): ButtonProps {
+  return useMemo(
+    () => ({
+      id: 'copy',
+      active: true,
+      ref: copyButtonRef,
+      show: showCopyButton,
+      render: props => (
+        <ButtonCopyValue
+          {...props}
+          size={BUTTON_SIZE_MAP[size]}
+          valueToCopy={(prefix ?? '') + valueToCopy + (postfix ?? '')}
+          onValueRequest={onValueRequest}
+          disabled={disabled}
+        />
+      ),
+    }),
+    [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy, prefix, postfix],
+  );
+}

package/src/hooks/usePostfix.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useMemo } from 'react';
+
+import { InactiveItem } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+export function usePostfix({ postfix, disabled }: { postfix?: ReactNode; disabled?: boolean }): InactiveItem {
+  return useMemo(
+    () => ({
+      id: 'postfix',
+      active: false,
+      show: Boolean(postfix),
+      render: props => (
+        <div {...props} className={styles.postfix} data-test-id='field-postfix' data-disabled={disabled || undefined}>
+          {postfix}
+        </div>
+      ),
+    }),
+    [disabled, postfix],
+  );
+}

package/src/hooks/usePrefix.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useMemo } from 'react';
+
+import { InactiveItem } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+export function usePrefix({ prefix, disabled }: { prefix?: ReactNode; disabled?: boolean }): InactiveItem {
+  return useMemo(
+    () => ({
+      id: 'prefix',
+      active: false,
+      show: Boolean(prefix),
+      render: props => (
+        <div {...props} data-test-id='field-prefix' className={styles.prefix} data-disabled={disabled || undefined}>
+          {prefix}
+        </div>
+      ),
+    }),
+    [disabled, prefix],
+  );
+}

package/src/hooks/useValueControl.ts

@@ -0,0 +1,15 @@
+import { useUncontrolledProp } from 'uncontrollable';
+
+type UseValueControl<TValue> = {
+  value?: TValue;
+  onChange?(value: TValue): void;
+  defaultValue?: TValue;
+};
+
+export function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>) {
+  return useUncontrolledProp<TValue>(value, defaultValue, (newValue: TValue) => {
+    const newState = typeof newValue === 'function' ? newValue(value) : newValue;
+
+    onChange?.(newState);
+  });
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils/adaptiveField';
+export { setNonce } from '@snack-uikit/fields';

package/src/styles.module.scss

@@ -0,0 +1,55 @@
+@use "@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element";
+@use "@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields";
+
+$sizes: 's', 'm';
+$icon-sizes: (
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s
+);
+
+@mixin button-styles {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+
+  color: styles-tokens-fields.$sys-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'buttons', $size);
+
+      svg {
+        width: styles-tokens-fields.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-fields.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: styles-tokens-fields.$sys-neutral-text-support;
+  }
+
+  &:focus-visible {
+    @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-s);
+
+    color: styles-tokens-fields.$sys-neutral-text-support;
+    outline-color: styles-tokens-fields.$sys-available-complementary;
+    outline-offset: styles-tokens-fields.$spacing-state-focus-offset;
+  }
+
+  &:active {
+    color: styles-tokens-fields.$sys-neutral-text-main;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: styles-tokens-fields.$sys-neutral-text-disabled;
+  }
+}

package/src/types/allFields.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../constants';
+
+export type AsyncValueRequest = Promise<{ success: boolean; value?: string }>;
+
+export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
+
+export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;

package/src/types/dateFields.ts

@@ -0,0 +1,14 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { MODES, NO_SECONDS_MODE, TIME_MODES } from '../constants';
+
+export type Slot = {
+  start: number;
+  end: number;
+  max: number;
+  min: number;
+};
+
+export type Mode = ValueOf<typeof MODES>;
+export type TimeMode = ValueOf<typeof TIME_MODES>;
+export type NoSecondsMode = typeof NO_SECONDS_MODE;