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

package/src/components/MobileFieldSelect/hooks.tsx

@@ -0,0 +1,195 @@
+import { KeyboardEvent, KeyboardEventHandler, MouseEvent, RefObject, useCallback, useMemo, useRef } from 'react';
+import { Handler } from 'uncontrollable';
+
+import { BUTTON_SIZE_MAP, ButtonProps, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { isAccordionItemProps, isNextListItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { ButtonCopyValue } from '../../helperComponents';
+import { AsyncValueRequest } from '../../types';
+import { extractChildIds } from './legacy';
+import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
+import { isBaseOptionProps } from './utils';
+
+type UseHandleOnKeyDownProps = {
+  inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
+  onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;
+  setOpen(open: boolean): void;
+};
+
+export function useHandleOnKeyDown({
+  setOpen,
+  inputKeyDownNavigationHandler,
+  onInputKeyDownProp,
+}: UseHandleOnKeyDownProps) {
+  return useCallback(
+    (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.code === 'Space') {
+        e.stopPropagation();
+      } else {
+        onKeyDown?.(e);
+      }
+
+      if (e.code === 'ArrowUp') {
+        setOpen(false);
+      }
+
+      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+      }
+
+      if (e.key === 'Tab') {
+        setOpen(false);
+      }
+
+      inputKeyDownNavigationHandler(e);
+      onInputKeyDownProp?.(e);
+    },
+    [inputKeyDownNavigationHandler, onInputKeyDownProp, setOpen],
+  );
+}
+
+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],
+  );
+}
+
+type UseButtonsProps = {
+  readonly: boolean;
+  showClearButton: boolean;
+  showCopyButton: boolean;
+  size: 's' | 'm' | 'l';
+  onClear(): void;
+  inputRef: RefObject<HTMLInputElement>;
+  valueToCopy?: string;
+};
+
+export function useButtons({
+  readonly,
+  showClearButton,
+  showCopyButton,
+  size,
+  onClear,
+  inputRef,
+  valueToCopy = '',
+}: UseButtonsProps) {
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+
+  const buttonsRefs: (Element | null)[] = [copyButtonRef.current, clearButtonRef.current];
+
+  const clearButtonSettings = useClearButton({
+    clearButtonRef,
+    showClearButton: !readonly && showClearButton,
+    size,
+    onClear,
+  });
+  const copyButtonSettings = useCopyButton({
+    copyButtonRef,
+    showCopyButton: readonly && showCopyButton,
+    size,
+    valueToCopy,
+  });
+  const { onInputKeyDown: inputKeyDownNavigationHandler, postfixButtons } = useButtonNavigation({
+    inputRef,
+    postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+    onButtonKeyDown: undefined,
+    readonly,
+    submitKeys: ['Enter', 'Space', 'Tab'],
+  });
+
+  return { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs };
+}
+
+export function useSearchInput({
+  value,
+  onChange,
+  defaultValue,
+  selectedOptionFormatter,
+}: SearchState & { selectedOptionFormatter: SelectedOptionFormatter }) {
+  const [inputValue = '', setInputValue] = useValueControl<string>({ value, onChange, defaultValue });
+
+  const prevInputValue = useRef<string>(inputValue);
+
+  const updateInputValue = useCallback(
+    (selectedItem?: ItemWithId) => {
+      const newInputValue = selectedOptionFormatter(selectedItem);
+
+      if (inputValue !== newInputValue || prevInputValue.current !== newInputValue) {
+        setInputValue(newInputValue);
+
+        prevInputValue.current = newInputValue;
+      }
+    },
+    [inputValue, selectedOptionFormatter, setInputValue],
+  );
+
+  return { inputValue, setInputValue, prevInputValue, onInputValueChange: setInputValue, updateInputValue };
+}
+
+export function useHandleDeleteItem(setValue: Handler) {
+  return useCallback(
+    (item?: ItemWithId) => (e?: MouseEvent<HTMLButtonElement>) => {
+      e?.stopPropagation();
+
+      if (!item) {
+        return;
+      }
+
+      if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+        const removeIds = extractChildIds({ items: item.items }).concat(item.id ?? '');
+
+        setValue((value: SelectionSingleValueType[]) => value?.filter(v => !removeIds.includes(v ?? '')));
+        return;
+      }
+
+      if (isBaseOptionProps(item)) {
+        setValue((value: SelectionSingleValueType[]) =>
+          value?.filter(
+            v =>
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              v !== item.id,
+          ),
+        );
+      }
+    },
+    [setValue],
+  );
+}

package/src/components/MobileFieldSelect/index.ts

@@ -0,0 +1,13 @@
+export { MobileFieldSelect } from './MobileFieldSelect';
+
+export type {
+  MobileFieldSelectSingleProps,
+  MobileFieldSelectMultipleProps,
+  MobileFieldSelectProps,
+  OptionProps,
+  BaseOptionProps,
+  AccordionOptionProps,
+  NestListOptionProps,
+  GroupOptionProps,
+  SelectedOptionFormatter,
+} from './types';

package/src/components/MobileFieldSelect/legacy/components/Items/hooks.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from 'react';
+
+import { ItemProps, useSelectionContext } from '@snack-uikit/list';
+
+import { extractAllChildIds, extractChildIds } from '../../utils';
+
+type UseGroupItemSelectionProps = {
+  items: ItemProps[];
+  id?: string | number;
+  disabled?: boolean;
+};
+
+export function useLegacyGroupItemSelection({ id = '', items, disabled }: UseGroupItemSelectionProps) {
+  const { value, setValue, isSelectionMultiple } = useSelectionContext();
+  const { childIds, allChildIds } = useMemo(
+    () => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }),
+    [items],
+  );
+
+  const isIndeterminate = isSelectionMultiple
+    ? allChildIds.some(childId => value?.includes(childId))
+    : allChildIds.includes(value ?? '');
+  const checked = isSelectionMultiple ? allChildIds.every(childId => value?.includes(childId)) : undefined;
+
+  useEffect(() => {
+    if (isSelectionMultiple) {
+      if (checked && !value?.includes(id)) {
+        setValue?.((value: Array<number | string>) => (value ?? []).concat([id ?? '']));
+      }
+      if (!checked && value?.includes(id)) {
+        setValue?.((value: Array<number | string>) => (value ?? []).filter(itemId => itemId !== id));
+      }
+    }
+  }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+
+  const handleOnSelect = () => {
+    if (checked) {
+      setValue?.((value: Array<string | number>) =>
+        (value ?? []).filter(itemId => itemId !== id && !childIds.includes(itemId)),
+      );
+      return;
+    }
+
+    if (isIndeterminate) {
+      setValue?.((value: Array<string | number>) => Array.from(new Set([...(value ?? []), ...childIds, id])));
+      return;
+    }
+
+    setValue?.((value: Array<string | number>) => (value ?? []).concat([...childIds, id ?? '']));
+  };
+
+  return { checked, isIndeterminate, handleOnSelect };
+}

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

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/src/components/MobileFieldSelect/legacy/hooks.ts

@@ -0,0 +1,38 @@
+import FuzzySearch from 'fuzzy-search';
+import get from 'lodash/get';
+import { useCallback, useMemo } from 'react';
+
+import { ItemProps, kindFlattenItems } from '@snack-uikit/list';
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
+
+const COMMON_FIELDS_TO_SEARCH = ['content.option', 'content.caption', 'content.description'];
+
+/**
+ * Поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useSearch(items: ItemProps[], enableFuzzySearch: boolean): (value: string) => ItemProps[] {
+  const flattenItems = useMemo(() => {
+    const { flattenItems } = kindFlattenItems({ items });
+
+    return Object.values(flattenItems);
+  }, [items]);
+
+  return useCallback(
+    (search: string) => {
+      if (!enableFuzzySearch) {
+        return flattenItems.filter(item =>
+          COMMON_FIELDS_TO_SEARCH.some(key => {
+            const value: string | undefined = get(item, key);
+            return value?.toLowerCase().includes(search.toLowerCase());
+          }),
+        );
+      }
+
+      const searcher = new FuzzySearch(flattenItems, COMMON_FIELDS_TO_SEARCH, {});
+
+      return search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? searcher.search(search) : items;
+    },
+    [enableFuzzySearch, flattenItems, items],
+  );
+}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export { useSearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

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

@@ -0,0 +1,176 @@
+import { RefObject } from 'react';
+
+import {
+  AccordionItemProps,
+  BaseItemProps,
+  isAccordionItemProps,
+  isBaseItemProps,
+  isGroupItemProps,
+  isNextListItemProps,
+  ItemProps,
+  NextListItemProps,
+} from '@snack-uikit/list';
+
+type WithCollapsedItemsProps = {
+  items: ItemProps[];
+  openCollapsedItems: Array<number | string>;
+};
+
+type WithCollapsedItemsReturnType = {
+  items: ItemProps[];
+  ids: Array<string | number>;
+  expandedIds: Array<string | number>;
+  itemRefs: RefObject<HTMLElement>[];
+};
+
+export function withCollapsedItems({
+  items,
+  openCollapsedItems,
+}: WithCollapsedItemsProps): WithCollapsedItemsReturnType {
+  let itemRefs: WithCollapsedItemsReturnType['itemRefs'] = [];
+  let newItems: WithCollapsedItemsReturnType['items'] = [];
+  let ids: WithCollapsedItemsReturnType['ids'] = [];
+  let expandedIds: WithCollapsedItemsReturnType['expandedIds'] = [];
+
+  items.forEach(item => {
+    if (
+      ((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+      !item.disabled
+    ) {
+      newItems = newItems.concat([item]);
+      ids = ids.concat([item.id ?? '']);
+
+      if (item.itemRef) {
+        itemRefs = itemRefs.concat([item.itemRef]);
+      }
+    }
+
+    if (isNextListItemProps(item) && item.id && !item.disabled) {
+      expandedIds = expandedIds.concat(item.id);
+    }
+
+    if (isGroupItemProps(item)) {
+      const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
+        items: item.items,
+        openCollapsedItems,
+      });
+
+      ids = ids.concat(nestedIds);
+
+      itemRefs = itemRefs.concat(nestedItemsRefs);
+    }
+
+    if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
+      const {
+        itemRefs: nestedItemsRefs,
+        ids: nestedIds,
+        items: nestedItems,
+        expandedIds: nestedExpandedIds,
+      } = withCollapsedItems({
+        items: item.items,
+        openCollapsedItems,
+      });
+
+      ids = ids.concat(nestedIds);
+      newItems = newItems.concat(nestedItems);
+      itemRefs = itemRefs.concat(nestedItemsRefs);
+      expandedIds = expandedIds.concat(nestedExpandedIds);
+    }
+  });
+
+  return { items, itemRefs, ids, expandedIds };
+}
+
+/**
+ * Функция возвращает массив id дочерних items
+ * @function  extractItemIds
+ */
+
+export function extractItemIds(items: ItemProps[]): Array<string | number> {
+  return items.reduce(
+    (prev: Array<string | number>, item: ItemProps) => {
+      if (isGroupItemProps(item)) {
+        return prev.concat(extractItemIds(item.items));
+      }
+      return item.id ? prev.concat([item.id]) : prev;
+    },
+    [] as Array<string | number>,
+  );
+}
+
+export function extractChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
+  return items
+    .filter(
+      item =>
+        isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive),
+    )
+    .reduce(
+      (prev: Array<string | number>, item: ItemProps) => {
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+          return prev.concat([item.id ?? '']).concat(extractChildIds({ items: item.items }));
+        }
+
+        if (isGroupItemProps(item)) {
+          return prev.concat(extractChildIds({ items: item.items }));
+        }
+
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+      },
+      [] as Array<string | number>,
+    );
+}
+
+export function extractAllChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
+  return items
+    .filter(
+      item =>
+        isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.inactive),
+    )
+    .reduce(
+      (prev: Array<string | number>, item: ItemProps) => {
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+          return prev.concat([item.id ?? '']).concat(extractAllChildIds({ items: item.items }));
+        }
+
+        if (isGroupItemProps(item)) {
+          return prev.concat(extractAllChildIds({ items: item.items }));
+        }
+
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+      },
+      [] as Array<string | number>,
+    );
+}
+
+/**
+ * Функция разворачивает массив айтемов в плоский список
+ *  @function  flattenItems
+ */
+
+export function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[] {
+  const flattenItems: (BaseItemProps | AccordionItemProps | NextListItemProps)[] = [];
+
+  function flatten(item: ItemProps) {
+    if (!isGroupItemProps(item)) {
+      flattenItems.push(item);
+    }
+
+    if ('items' in item) {
+      for (const nestedItem of item.items) {
+        flatten(nestedItem);
+      }
+    }
+  }
+
+  for (const item of items) {
+    flatten(item);
+  }
+
+  return flattenItems;
+}

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

@@ -0,0 +1,176 @@
+@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';
+$containerVariant: 'single-line-container';
+$icons-sizes: (
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
+  'l': styles-tokens-element.$icon-s,
+);
+
+$base-min-width: 4px;
+
+.triggerClassName {
+  --offset: #{styles-tokens-fields.$space-drop-list-drop-offset};
+
+  width: 100%;
+}
+
+.contentWrapper {
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+
+  width: 100%;
+}
+
+.tagContainer {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: auto !important;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'select-multiple', $size);
+
+      .contentWrapper {
+        gap: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'select-multiple', $size, 'gap');
+      }
+    }
+  }
+}
+
+.container {
+  position: relative;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .inputPlug {
+        @include styles-tokens-fields.composite-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size);
+      }
+
+      .arrowIcon {
+        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 */
+        color: styles-tokens-fields.$sys-neutral-text-light;
+      }
+
+      &[data-variant='#{$containerVariant}'] {
+        .displayValue {
+          $button-width: styles-tokens-fields.simple-var($icons-sizes, $size);
+          $postfix-width: calc(var(#{styles-tokens-fields.$space-fields-postfix-gap}) + $button-width * 2);
+          $margin-right: calc(
+            #{styles-tokens-fields.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-right')} + #{styles-tokens-fields.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
+          );
+
+          width: calc(100% - $margin-right);
+          margin-right: $margin-right;
+          padding-left: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-left');
+          border-radius: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'border-radius');
+        }
+      }
+    }
+  }
+
+  &:hover,
+  &:focus-within,
+  &[data-focused] {
+    .arrowIcon {
+      color: styles-tokens-fields.$sys-neutral-text-support;
+    }
+  }
+
+  &[data-disabled],
+  &[data-readonly] {
+    .arrowIcon {
+      color: styles-tokens-fields.$sys-neutral-text-disabled;
+    }
+  }
+}
+
+.inputPlug {
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  width: fit-content;
+  max-width: 100%;
+  height: 0;
+}
+
+.inputWrapper {
+  position: relative;
+
+  display: inline-flex;
+  flex: 1;
+
+  color: transparent;
+
+  &[data-searchable='false'] {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+  }
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: styles-tokens-fields.$space-fields-postfix-gap;
+}
+
+input.readonlyCursor {
+  cursor: pointer;
+  caret-color: transparent;
+}
+
+.searchDivider {
+  margin-bottom: 4px;
+}
+
+.footer {
+  width: 100%;
+}
+
+.footerTopLine {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.counter {
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$sans-body-m);
+
+  color: styles-tokens-fields.$sys-neutral-text-light;
+}
+
+.listWrapper {
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$sans-body-m);
+
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: styles-tokens-fields.$dimension-2m;
+  color: styles-tokens-fields.$sys-neutral-text-main;
+  padding: 16px 0;
+}
+
+.body {
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$sans-body-m);
+
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: styles-tokens-fields.$dimension-2m;
+  color: styles-tokens-fields.$sys-neutral-text-main;
+}
+
+.bodyNoPadding {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+}