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

package/src/components/MobileFieldDate/MobileFieldDate.tsx

@@ -0,0 +1,375 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { CalendarSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { Calendar, CalendarProps } from '@snack-uikit/calendar';
+import { FieldDecorator, FieldDecoratorProps } from '@snack-uikit/fields';
+import {
+  ButtonProps,
+  ICON_SIZE,
+  InputPrivate,
+  InputPrivateProps,
+  runAfterRerender,
+  SIZE,
+  useButtonNavigation,
+  useClearButton,
+} from '@snack-uikit/input-private';
+import { Scroll } from '@snack-uikit/scroll';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { CONTAINER_VARIANT, DEFAULT_LOCALE, MODES, SlotKey, VALIDATION_STATE } from '../../constants';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { useCopyButton, useDateField, useFocusHandlers, useHandlers } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
+import styles from './styles.module.scss';
+
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoFocus'>;
+
+type WrapperProps = Pick<
+  FieldDecoratorProps,
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'caption'
+  | 'hint'
+  | 'showHintIcon'
+  | 'size'
+  | 'validationState'
+  | 'labelTooltipPlacement'
+  | 'error'
+>;
+
+type FieldDateWithSeconds = {
+  mode: typeof MODES.DateTime;
+  showSeconds?: boolean;
+};
+
+type FieldDateOwnProps = {
+  /** Открыт date-picker */
+  open?: boolean;
+  /** Колбек открытия пикера */
+  onOpenChange?(value: boolean): void;
+  /** Значение поля */
+  value?: Date;
+  /** Колбек смены значения */
+  onChange?(value: Date | undefined): void;
+  /** Отображение кнопки копирования */
+  showCopyButton?: boolean;
+  /**
+   * Отображение кнопки Очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
+} & Pick<CalendarProps, 'buildCellProps'> &
+  (
+    | {
+        mode: typeof MODES.Date;
+      }
+    | FieldDateWithSeconds
+  );
+
+export type MobileFieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
+
+export const MobileFieldDate = forwardRef<HTMLInputElement, MobileFieldDateProps>(
+  (
+    {
+      id,
+      name,
+      value: valueProp,
+      disabled = false,
+      readonly = false,
+      showCopyButton: showCopyButtonProp = true,
+      showClearButton: showClearButtonProp = true,
+      open,
+      onOpenChange,
+      onChange,
+      onFocus,
+      onBlur: onBlurProp,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      caption,
+      hint,
+      showHintIcon,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
+      buildCellProps,
+      error,
+      mode,
+      autoFocus,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+
+    const localRef = useRef<HTMLInputElement>(null);
+    const clearButtonRef = useRef<HTMLButtonElement>(null);
+    const copyButtonRef = useRef<HTMLButtonElement>(null);
+    const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
+    const showDropList = isOpen && !readonly && !disabled;
+    const showAdditionalButton = Boolean(valueProp && !disabled);
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
+    const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const showSeconds = mode === 'date-time' ? ((rest as FieldDateWithSeconds).showSeconds ?? true) : undefined;
+    const fieldValidationState = getValidationState({ validationState, error });
+
+    const navigationStartRef: CalendarProps['navigationStartRef'] = useRef(null);
+
+    const checkForLeavingFocus = useCallback(
+      <T extends HTMLInputElement | HTMLButtonElement>(event: KeyboardEvent<T>) => {
+        if (event.key === 'ArrowDown') {
+          setIsOpen(true);
+          setTimeout(() => navigationStartRef.current?.focus(), 0);
+        }
+      },
+      [setIsOpen],
+    );
+
+    const handleClear = useCallback(() => {
+      onChange && onChange(undefined);
+      if (localRef.current?.value) {
+        localRef.current.value = '';
+      }
+
+      if (required) {
+        localRef.current?.focus();
+        setIsOpen(true);
+      } else {
+        localRef.current?.blur();
+        setIsOpen(false);
+      }
+    }, [onChange, required, setIsOpen]);
+
+    const getStringDateValue = useCallback(
+      (date: Date | undefined) => {
+        if (!date) return '';
+
+        if (mode === 'date') {
+          return date.toLocaleDateString(DEFAULT_LOCALE);
+        }
+
+        return date.toLocaleString(DEFAULT_LOCALE, {
+          year: 'numeric',
+          month: 'numeric',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: showSeconds ? '2-digit' : undefined,
+        });
+      },
+      [mode, showSeconds],
+    );
+
+    const valueToCopy = getStringDateValue(valueProp);
+    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
+    const calendarIcon: ButtonProps = useMemo(
+      () => ({
+        active: false,
+        show: true,
+        id: 'calendarIcon',
+        render: props => (
+          <CalendarSVG {...props} size={calendarIconSize} className={styles.calendarIcon} data-size={size} />
+        ),
+      }),
+      [calendarIconSize, size],
+    );
+
+    const memorizedButtons = useMemo(
+      () => [clearButtonSettings, copyButtonSettings, calendarIcon],
+      [clearButtonSettings, copyButtonSettings, calendarIcon],
+    );
+
+    const {
+      value,
+      handleChange,
+      handleClick: dateInputClickHandler,
+      handleKeyDown: dateInputKeyDownHandler,
+      handleBlur: dateInputBlurHandler,
+      mask,
+      setInputFocus,
+    } = useDateField({
+      inputRef: localRef,
+      onChange,
+      readonly,
+      locale: DEFAULT_LOCALE,
+      setIsOpen,
+      mode,
+      showSeconds,
+    });
+
+    const setInputFocusFromButtons = useCallback(
+      () => setInputFocus(mode === 'date' ? SlotKey.Year : SlotKey.Seconds),
+      [mode, setInputFocus],
+    );
+
+    const {
+      postfixButtons,
+      inputTabIndex,
+      onInputKeyDown: navigationInputKeyDownHandler,
+      setInitialTabIndices,
+    } = useButtonNavigation({
+      setInputFocus: setInputFocusFromButtons,
+      inputRef: localRef,
+      postfixButtons: memorizedButtons,
+      onButtonKeyDown: checkForLeavingFocus,
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+
+    const handleSelectDate = (date: Date) => {
+      onChange && onChange(date);
+      localRef.current?.focus();
+      setIsOpen(false);
+
+      if (localRef.current) {
+        localRef.current.value = getStringDateValue(date);
+      }
+    };
+
+    const handleCalendarFocusLeave: CalendarProps['onFocusLeave'] = () => {
+      setInitialTabIndices();
+      // TODO: find out why it works not as expected (focus is moved to the next element instead of the focused one)
+      // maybe floating-ui causes the problem
+      runAfterRerender(() => {
+        setInputFocus(SlotKey.Day);
+        setIsOpen(false);
+      });
+    };
+
+    const handleInputKeyDown = useHandlers<KeyboardEvent<HTMLInputElement>>([
+      checkForLeavingFocus,
+      dateInputKeyDownHandler,
+      navigationInputKeyDownHandler,
+    ]);
+
+    useEffect(() => {
+      if (open) {
+        localRef.current?.focus();
+      }
+    }, [open]);
+
+    useEffect(() => {
+      if (localRef.current && document.activeElement !== localRef.current) {
+        localRef.current.value = getStringDateValue(valueProp);
+      }
+    }, [getStringDateValue, valueProp]);
+
+    const onFocusByKeyboard = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        setInputFocus();
+        onFocus?.(e);
+      },
+      [onFocus, setInputFocus],
+    );
+
+    const inputHandlers = useFocusHandlers({
+      onFocusByClick: onFocus,
+      onFocusByKeyboard,
+    });
+
+    const onBlur = useHandlers([dateInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+
+    const onClick = useCallback(
+      (e: MouseEvent<HTMLInputElement>) => {
+        dateInputClickHandler();
+        if (isOpen) {
+          // stop the event because want picker to stay opened
+          e.stopPropagation();
+        }
+      },
+      [dateInputClickHandler, isOpen],
+    );
+
+    return (
+      <FieldDecorator
+        className={className}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
+        labelFor={id}
+        required={required}
+        caption={caption}
+        hint={hint}
+        disabled={disabled}
+        readonly={readonly}
+        showHintIcon={showHintIcon}
+        size={size}
+        error={error}
+        validationState={fieldValidationState}
+        {...extractSupportProps(rest)}
+      >
+        <MobileDropdown
+          {...(readonly || disabled
+            ? { open: false }
+            : {
+                open: showDropList,
+                onOpenChange: setIsOpen,
+              })}
+          content={
+            <Scroll
+              className={cn(styles.calendarWrapper, mode === 'date-time' ? styles.dateTimeWrapper : styles.dateWrapper)}
+              data-size={size}
+              barHideStrategy='never'
+            >
+              <Calendar
+                mode={mode}
+                size='l'
+                value={valueProp}
+                showSeconds={showSeconds}
+                onChangeValue={handleSelectDate}
+                buildCellProps={buildCellProps}
+                navigationStartRef={navigationStartRef}
+                onFocusLeave={handleCalendarFocusLeave}
+                locale={DEFAULT_LOCALE}
+                data-test-id='field-date__calendar'
+              />
+            </Scroll>
+          }
+        >
+          <FieldContainerPrivate
+            className={styles.container}
+            size={size}
+            validationState={fieldValidationState}
+            disabled={disabled}
+            readonly={readonly}
+            variant={CONTAINER_VARIANT.SingleLine}
+            focused={showDropList}
+            inputRef={localRef}
+            postfix={postfixButtons}
+          >
+            <InputPrivate
+              ref={mergeRefs(ref, localRef)}
+              data-size={size}
+              value={value || ''}
+              placeholder={mask}
+              onChange={handleChange}
+              onFocus={inputHandlers.onFocus}
+              onMouseDown={inputHandlers.onMouseDown}
+              onBlur={onBlur}
+              onKeyDown={handleInputKeyDown}
+              onClick={onClick}
+              disabled={disabled}
+              readonly={readonly}
+              tabIndex={inputTabIndex}
+              type='text'
+              inputMode='numeric'
+              className={styles.readonlyCursor}
+              id={id}
+              name={name}
+              autoFocus={autoFocus}
+              data-test-id='field-date__input'
+            />
+          </FieldContainerPrivate>
+        </MobileDropdown>
+      </FieldDecorator>
+    );
+  },
+);

package/src/components/MobileFieldDate/constants.ts

@@ -0,0 +1,33 @@
+import { Slot } from './types';
+
+export enum SlotKey {
+  Day = 'D',
+  Month = 'M',
+  Year = 'Y',
+}
+
+export const MASK: Record<string, string> = {
+  'ru-RU': 'ДД.ММ.ГГГГ',
+  'en-US': 'DD.MM.YYYY',
+};
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+
+export const SLOTS: Record<SlotKey | string, Slot> = {
+  [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
+  [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
+  [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
+} as const;
+
+export const SLOTS_PLACEHOLDER: Record<string, Record<string, string>> = {
+  'ru-RU': {
+    [SlotKey.Day]: 'ДД',
+    [SlotKey.Month]: 'ММ',
+    [SlotKey.Year]: 'ГГГГ',
+  },
+  'en-US': {
+    [SlotKey.Day]: 'DD',
+    [SlotKey.Month]: 'MM',
+    [SlotKey.Year]: 'YYYY',
+  },
+};

package/src/components/MobileFieldDate/index.ts

@@ -0,0 +1,2 @@
+export * from './MobileFieldDate';
+export { parseDate } from './utils';

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

@@ -0,0 +1,75 @@
+@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', 'l';
+$icons-sizes: (
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s,
+);
+
+.triggerClassName {
+  --offset: #{styles-tokens-fields.$space-drop-list-drop-offset};
+
+  display: block;
+  width: 100%;
+}
+
+.dateWrapper {
+  height: 384px;
+}
+
+.dateTimeWrapper {
+  height: 458px;
+  padding-bottom: 8px;
+}
+
+input.readonlyCursor {
+  cursor: pointer;
+  caret-color: transparent;
+}
+
+.calendarWrapper {
+  width: 100%;
+
+  &[data-size='s'] {
+    min-width: 240px;
+    min-height: 256px;
+  }
+  &[data-size='m'] {
+    min-width: 280px;
+    min-height: 308px;
+  }
+  &[data-size='l'] {
+    min-width: 304px;
+    min-height: 328px;
+  }
+}
+
+.container {
+  .calendarIcon {
+    color: styles-tokens-fields.$sys-neutral-text-light;
+
+    @each $size in $sizes {
+      &[data-size='#{$size}'] {
+        width: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-fields.simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+
+  &:hover,
+  &:focus-within,
+  &[data-focused] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-support;
+    }
+  }
+
+  &[data-disabled],
+  &[data-readonly] {
+    .calendarIcon {
+      color: styles-tokens-fields.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/components/MobileFieldDate/types.ts

@@ -0,0 +1,6 @@
+export type Slot = {
+  start: number;
+  end: number;
+  max: number;
+  min: number;
+};

package/src/components/MobileFieldDate/utils.ts

@@ -0,0 +1,49 @@
+import { SlotKey, SLOTS } from './constants';
+
+export function getSlotKey(index: number | null) {
+  if (index !== null) {
+    for (const key in SLOTS) {
+      if (index >= SLOTS[key].start && index <= SLOTS[key].end) {
+        return key;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function getNextSlotKey(slotKey: string | null) {
+  switch (slotKey) {
+    case SlotKey.Day: {
+      return SlotKey.Month;
+    }
+    case SlotKey.Month:
+    case SlotKey.Year:
+    default: {
+      return SlotKey.Year;
+    }
+  }
+}
+
+export function getPrevSlotKey(slotKey: string | null) {
+  switch (slotKey) {
+    case SlotKey.Year: {
+      return SlotKey.Month;
+    }
+    case SlotKey.Month:
+    case SlotKey.Day:
+    default: {
+      return SlotKey.Day;
+    }
+  }
+}
+
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+
+export function parseDate(date: string) {
+  const values = date.split('.');
+  return new Date(Number(values[2]), Number(values[1]) - 1, Number(values[0]));
+}

package/src/components/MobileFieldSelect/MobileFieldSelect.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+
+import { MobileFieldSelectMultiple } from './MobileFieldSelectMultiple';
+import { MobileFieldSelectSingle } from './MobileFieldSelectSingle';
+import { MobileFieldSelectProps } from './types';
+import { isFieldSelectMultipleProps, isFieldSelectSingleProps } from './utils';
+
+export const MobileFieldSelect = forwardRef<HTMLInputElement, MobileFieldSelectProps>((props, ref) => {
+  if (isFieldSelectMultipleProps(props)) {
+    return <MobileFieldSelectMultiple {...props} ref={ref} />;
+  }
+
+  if (isFieldSelectSingleProps(props)) {
+    return <MobileFieldSelectSingle {...props} ref={ref} />;
+  }
+
+  return null;
+});