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

package/src/components/MobileFieldSelect/types.ts

@@ -0,0 +1,156 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { FieldDecoratorProps } from '@snack-uikit/fields';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+import {
+  AccordionItemProps,
+  BaseItemProps,
+  DroplistProps,
+  GroupItemProps,
+  ItemContentProps,
+  NextListItemProps,
+  SelectionMultipleState,
+  SelectionSingleState,
+} from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
+
+export type OptionProps =
+  // eslint-disable-next-line no-use-before-define
+  | BaseOptionProps
+  // eslint-disable-next-line no-use-before-define
+  | AccordionOptionProps
+  // eslint-disable-next-line no-use-before-define
+  | GroupOptionProps
+  // eslint-disable-next-line no-use-before-define
+  | NestListOptionProps;
+
+// eslint-disable-next-line no-use-before-define
+export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
+
+export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> &
+  Pick<ItemContentProps, 'option' | 'caption' | 'description'> & { value: string | number } & Pick<
+    TagProps,
+    'appearance'
+  >;
+
+export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & { options: OptionProps[] };
+
+export type GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & {
+  options: OptionProps[];
+};
+export type NestListOptionProps = Pick<NextListItemProps, 'type' | 'onSublistOpenChanged' | 'id'> &
+  BaseOptionProps & { options: OptionProps[] };
+
+export type InputProps = Pick<
+  InputPrivateProps,
+  'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'autoFocus'
+>;
+
+export type WrapperProps = Pick<
+  FieldDecoratorProps,
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'caption'
+  | 'hint'
+  | 'showHintIcon'
+  | 'size'
+  | 'validationState'
+  | 'labelTooltipPlacement'
+  | 'error'
+>;
+
+export type ItemWithId = (BaseItemProps | AccordionItemProps | NextListItemProps) & {
+  placeholder?: boolean;
+  appearance?: TagProps['appearance'];
+};
+
+export type SelectedOptionFormatter = (item?: ItemWithId) => string;
+
+export type SearchState = {
+  value?: string;
+  defaultValue?: string;
+  onChange?(value: string): void;
+};
+
+export type FieldSelectPrivateProps = InputProps &
+  WrapperProps & {
+    options: OptionProps[];
+    loading?: boolean;
+
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
+  };
+
+type FiledSelectCommonProps = WithSupportProps<{
+  options: OptionProps[];
+
+  pinTop?: OptionProps[];
+  pinBottom?: OptionProps[];
+
+  searchable?: boolean;
+  /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
+  showCopyButton?: boolean;
+  /**
+   * Отображение кнопки очистки поля
+   * @default true
+   */
+  showClearButton?: boolean;
+  /**
+   * Является ли поле доступным только для чтения
+   * @default false
+   */
+  readonly?: boolean;
+
+  /** Иконка-префикс для поля */
+  prefixIcon?: ReactElement;
+
+  footer?: DroplistProps['footer'];
+
+  /**
+   * Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка
+   */
+  virtualized?: boolean;
+
+  widthStrategy?: DroplistProps['widthStrategy'];
+
+  search?: SearchState;
+
+  /**
+   * Включить нечеткий поиск
+   * @default true
+   */
+  enableFuzzySearch?: boolean;
+
+  autocomplete?: boolean;
+
+  addOptionByEnter?: boolean;
+
+  open?: boolean;
+
+  onOpenChange?(open: boolean): void;
+
+  selectedOptionFormatter?: SelectedOptionFormatter;
+}> &
+  Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
+
+export type MobileFieldSelectSingleProps = FieldSelectPrivateProps &
+  Omit<SelectionSingleState, 'mode'> &
+  WrapperProps &
+  FiledSelectCommonProps;
+
+export type MobileFieldSelectMultipleProps = FieldSelectPrivateProps & {
+  removeByBackspace?: boolean;
+} & Omit<SelectionMultipleState, 'mode'> &
+  Omit<FiledSelectCommonProps, 'showCopyButton'>;
+
+export type MobileFieldSelectProps =
+  | (MobileFieldSelectSingleProps & { selection?: 'single' })
+  | (MobileFieldSelectMultipleProps & { selection: 'multiple' });

package/src/components/MobileFieldSelect/utils/extractFieldDecoratorProps.ts

@@ -0,0 +1,35 @@
+import { FieldDecoratorProps } from '@snack-uikit/fields';
+
+export function extractFieldDecoratorProps({
+  error,
+  required,
+  readonly,
+  label,
+  labelTooltip,
+  labelTooltipPlacement,
+  labelFor,
+  caption,
+  hint,
+  disabled,
+  showHintIcon,
+  size,
+  validationState,
+  className,
+}: Partial<FieldDecoratorProps>): Partial<FieldDecoratorProps> {
+  return {
+    error,
+    required,
+    readonly,
+    label,
+    labelTooltip,
+    labelTooltipPlacement,
+    labelFor,
+    caption,
+    hint,
+    disabled,
+    showHintIcon,
+    size,
+    validationState,
+    className,
+  };
+}

package/src/components/MobileFieldSelect/utils/extractListProps.ts

@@ -0,0 +1,30 @@
+import { DroplistProps } from '@snack-uikit/list';
+
+import { MobileFieldSelectProps } from '../types';
+
+export function extractListProps({
+  dataError,
+  noDataState,
+  noResultsState,
+  errorDataState,
+  dataFiltered,
+  loading,
+  footer,
+  widthStrategy,
+}: Partial<MobileFieldSelectProps>): Partial<DroplistProps> {
+  return {
+    dataError,
+    noDataState,
+    noResultsState,
+    errorDataState,
+    dataFiltered,
+    loading,
+    footer,
+    widthStrategy,
+    trigger: 'clickAndFocusVisible',
+    placement: 'bottom',
+    'data-test-id': 'field-select__list',
+    scroll: true,
+    marker: true,
+  };
+}

package/src/components/MobileFieldSelect/utils/getArrowIcon.ts

@@ -0,0 +1,15 @@
+import { JSXElementConstructor } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { ICON_SIZE, SIZE, Size } from '@snack-uikit/input-private';
+import { ValueOf } from '@snack-uikit/utils';
+
+export function getArrowIcon({ size, open }: { size: Size; open: boolean }): {
+  ArrowIcon: JSXElementConstructor<{ className?: string; size: ValueOf<typeof ICON_SIZE> }>;
+  arrowIconSize: ValueOf<typeof ICON_SIZE>;
+} {
+  return {
+    ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
+    arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
+  };
+}

package/src/components/MobileFieldSelect/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './typeGuards';
+export * from './extractFieldDecoratorProps';
+export * from './extractListProps';
+export * from './options';
+export * from './updateItems';
+export * from './getArrowIcon';

package/src/components/MobileFieldSelect/utils/options.tsx

@@ -0,0 +1,88 @@
+import { ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
+
+import { flattenItems } from '../legacy';
+import { BaseOptionProps, ItemWithId, OptionProps } from '../types';
+import { isAccordionOptionProps, isGroupOptionProps, isNextListOptionProps } from './typeGuards';
+
+export function transformOptionsToItems(
+  options: OptionProps[],
+): (ItemProps & { appearance?: TagProps['appearance'] })[] {
+  return options.map(option => {
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { description, option: contentOption, caption, options, value, ...rest } = option;
+
+      return {
+        'data-test-id': 'field-select__list-option-' + option.value,
+        ...rest,
+        id: value,
+        content: { option: contentOption, caption, description },
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    if (isGroupOptionProps(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    const { description, option: contentOption, caption, value, appearance, ...rest } = option as BaseOptionProps;
+
+    return {
+      'data-test-id': 'field-select__list-option-' + option.value,
+      ...rest,
+      id: value,
+      appearance: appearance,
+      content: { description, option: contentOption, caption: caption },
+    };
+  });
+}
+
+export function findSelectedOption(
+  items: ItemProps[],
+  value: SelectionSingleValueType,
+): [ItemWithId | undefined, ItemWithId | undefined] {
+  const flatten: ItemWithId[] = flattenItems(items);
+
+  if (!value) {
+    return [undefined, undefined];
+  }
+
+  const foundItem = flatten.find(item => String(item.id) === String(value));
+  const placeholderItem = { id: value, content: { option: String(value) } };
+
+  return [foundItem, !foundItem ? placeholderItem : undefined];
+}
+
+export function findSelectedOptions(
+  items: ItemProps[],
+  value: SelectionSingleValueType[] | undefined,
+): [ItemWithId[] | undefined, ItemWithId[] | undefined] {
+  const flatten: ItemWithId[] | undefined = flattenItems(items);
+
+  if (!value || !value?.length) {
+    return [undefined, undefined];
+  }
+
+  let foundItems: ItemWithId[] | undefined;
+  let placeholderItems: ItemWithId[] | undefined;
+
+  value.forEach(value => {
+    if (flatten) {
+      const [found, placeholder] = findSelectedOption(flatten, value);
+      if (found || foundItems) {
+        foundItems = (foundItems ?? []).concat(found ?? []);
+      }
+
+      if (placeholder || placeholderItems) {
+        placeholderItems = (placeholderItems ?? []).concat(placeholder ?? []);
+      }
+    }
+  });
+
+  return [foundItems, placeholderItems];
+}

package/src/components/MobileFieldSelect/utils/typeGuards.ts

@@ -0,0 +1,38 @@
+import {
+  AccordionOptionProps,
+  BaseOptionProps,
+  GroupOptionProps,
+  MobileFieldSelectMultipleProps,
+  MobileFieldSelectSingleProps,
+  NestListOptionProps,
+} from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseOptionProps(option: any): option is BaseOptionProps {
+  return !('options' in option);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isAccordionOptionProps(option: any): option is AccordionOptionProps {
+  return 'options' in option && option['type'] === 'collapse';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNextListOptionProps(option: any): option is NestListOptionProps {
+  return 'options' in option && option['type'] === 'next-list';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isGroupOptionProps(option: any): option is GroupOptionProps {
+  return 'options' in option && option['type'] === 'group';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectMultipleProps(props: any): props is MobileFieldSelectMultipleProps {
+  return 'selection' in props && props['selection'] === 'multiple';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectSingleProps(props: any): props is MobileFieldSelectSingleProps {
+  return ('selection' in props && props['selection'] === 'single') || props['selection'] === undefined;
+}

package/src/components/MobileFieldSelect/utils/updateItems.ts

@@ -0,0 +1,121 @@
+import { ItemId, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+
+import { flattenItems } from '../legacy';
+import { ItemWithId, OptionProps } from '../types';
+import { transformOptionsToItems } from './options';
+
+export function createPlaceholderItem(value: SelectionSingleValueType) {
+  return { id: value, content: { option: String(value) }, placeholder: true };
+}
+
+export function updateItems({
+  options,
+  value,
+  selectedItem,
+}: {
+  options: OptionProps[];
+  value?: ItemId;
+  selectedItem?: ItemWithId;
+  currentItems?: ItemProps[];
+}): {
+  selectedItem?: ItemWithId;
+  items: ItemProps[];
+} {
+  const originalItems = transformOptionsToItems(options);
+
+  if (value === undefined) {
+    return {
+      selectedItem: undefined,
+      items: originalItems,
+    };
+  }
+
+  let newItems: ItemProps[] = originalItems;
+  let newSelectedItem = selectedItem;
+
+  const foundItem = flattenItems(originalItems).find(item => item.id === value);
+
+  if (!foundItem) {
+    if (selectedItem && selectedItem?.id === value) {
+      newItems = [selectedItem, ...newItems];
+    } else {
+      newSelectedItem = createPlaceholderItem(value);
+      newItems = [newSelectedItem, ...newItems];
+    }
+  } else {
+    newSelectedItem = foundItem;
+  }
+
+  return {
+    selectedItem: newSelectedItem,
+    items: newItems,
+  };
+}
+
+export function updateMultipleItems({
+  options,
+  value,
+  selectedItems,
+}: {
+  options: OptionProps[];
+  value?: SelectionSingleValueType[];
+  selectedItems?: ItemWithId[];
+  currentItems?: ItemProps[];
+}): {
+  selectedItems?: ItemWithId[];
+  items: ItemProps[];
+} {
+  const originalItems = transformOptionsToItems(options);
+
+  if (!value || !value.length) {
+    return {
+      selectedItems: undefined,
+      items: originalItems,
+    };
+  }
+
+  const foundedValue: (number | string)[] = [];
+
+  let newItems: ItemProps[] = originalItems;
+  let newSelectedItems = selectedItems;
+
+  const flattenOriginalItems = flattenItems(originalItems);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const foundItems: ItemWithId[] = flattenOriginalItems.filter((item: any) => {
+    if (value.includes(item.id) && !foundedValue.includes(item.id)) {
+      foundedValue.push(item.id);
+      return true;
+    }
+  });
+  const nonFoundValues: SelectionSingleValueType[] = value.filter(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value => !flattenOriginalItems.find((item: any) => item.id === value),
+  );
+
+  if (nonFoundValues.length) {
+    const nonFoundItems = nonFoundValues.map(
+      value => selectedItems?.find(selectedItem => selectedItem.id === value) || createPlaceholderItem(value),
+    );
+
+    newSelectedItems = [...foundItems, ...nonFoundItems];
+    newItems = [...nonFoundItems, ...newItems];
+  } else {
+    newSelectedItems = foundItems;
+  }
+
+  return {
+    selectedItems: newSelectedItems.sort((a, b) => {
+      if (b.disabled && !a.disabled) {
+        return 1;
+      }
+
+      if (a.disabled && !b.disabled) {
+        return -1;
+      }
+
+      return 0;
+    }),
+    items: newItems,
+  };
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './AdaptiveField';
+export * from './MobileFieldSelect';
+export * from './MobileFieldDate';

package/src/constants/allFields.ts

@@ -0,0 +1,11 @@
+export const VALIDATION_STATE = {
+  Default: 'default',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'success',
+} as const;
+
+export const CONTAINER_VARIANT = {
+  SingleLine: 'single-line-container',
+  MultiLine: 'multi-line-container',
+} as const;

package/src/constants/dateFields.ts

@@ -0,0 +1,127 @@
+import { Mode, NoSecondsMode, Slot, TimeMode } from '../types';
+
+export enum SlotKey {
+  Day = 'D',
+  Month = 'M',
+  Year = 'Y',
+  Hours = 'h',
+  Minutes = 'm',
+  Seconds = 's',
+}
+
+export const MODES = {
+  Date: 'date',
+  DateTime: 'date-time',
+} as const;
+
+export const TIME_MODES = {
+  FullTime: 'full-time',
+  NoSeconds: 'no-seconds',
+} as const;
+
+export const NO_SECONDS_MODE = 'date-time-no-sec';
+
+export const MASK: Record<Mode | TimeMode | NoSecondsMode, Record<string, string>> = {
+  [MODES.Date]: {
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY',
+  },
+  [MODES.DateTime]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+    'en-US': 'DD.MM.YYYY, hh:mm:ss',
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм',
+    'en-US': 'DD.MM.YYYY, hh:mm',
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': 'чч:мм:сс',
+    'en-US': 'hh:mm:ss',
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': 'чч:мм',
+    'en-US': 'hh:mm',
+  },
+};
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+
+const DATE_SLOTS = {
+  [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 },
+};
+
+const TIME_SLOTS = (shift: number, showSeconds: boolean) => ({
+  [SlotKey.Hours]: { start: shift, end: shift + 2, max: 23, min: 0 },
+  [SlotKey.Minutes]: { start: shift + 3, end: shift + 5, max: 59, min: 0 },
+  ...(showSeconds ? { [SlotKey.Seconds]: { start: shift + 6, end: shift + 8, max: 59, min: 0 } } : {}),
+});
+
+export const SLOTS: Record<Mode | TimeMode | NoSecondsMode, Record<SlotKey | string, Slot>> = {
+  [MODES.Date]: DATE_SLOTS,
+  [MODES.DateTime]: { ...DATE_SLOTS, ...TIME_SLOTS(12, true) },
+  [NO_SECONDS_MODE]: { ...DATE_SLOTS, ...TIME_SLOTS(12, false) },
+  [TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+  [TIME_MODES.NoSeconds]: TIME_SLOTS(0, false),
+};
+
+export type FocusSlot = SlotKey | 'auto';
+
+export const SLOT_ORDER: Record<Mode | TimeMode | NoSecondsMode, SlotKey[]> = {
+  [MODES.Date]: [SlotKey.Day, SlotKey.Month, SlotKey.Year],
+  [MODES.DateTime]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [NO_SECONDS_MODE]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes],
+  [TIME_MODES.FullTime]: [SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [TIME_MODES.NoSeconds]: [SlotKey.Hours, SlotKey.Minutes],
+};
+
+const RU_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'ДД',
+  [SlotKey.Month]: 'ММ',
+  [SlotKey.Year]: 'ГГГГ',
+};
+
+const RU_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'чч',
+  [SlotKey.Minutes]: 'мм',
+  [SlotKey.Seconds]: 'сс',
+};
+
+const EN_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'DD',
+  [SlotKey.Month]: 'MM',
+  [SlotKey.Year]: 'YYYY',
+};
+
+const EN_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'hh',
+  [SlotKey.Minutes]: 'mm',
+  [SlotKey.Seconds]: 'ss',
+};
+
+export const SLOTS_PLACEHOLDER: Record<
+  Mode | TimeMode | NoSecondsMode,
+  Record<string, Partial<Record<SlotKey, string>>>
+> = {
+  [MODES.Date]: {
+    'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+    'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+  },
+  [MODES.DateTime]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER },
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': RU_TIME_SLOTS_PLACEHOLDER,
+    'en-US': EN_TIME_SLOTS_PLACEHOLDER,
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': { ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';