@snack-uikit/list 0.11.1-preview-5d3667ec.0 → 0.11.1

package/src/components/Items/types.ts

@@ -3,26 +3,17 @@ import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'rea
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { SeparatorProps } from '../../helperComponents';
-import { ScrollProps, SearchState } from '../../types';
+import { ItemContentProps } from '../../helperComponents';
+import { ScrollProps } from '../../types';
 
-export type ItemContentProps = {
-  option: string;
-  caption?: string;
-  description?: string;
-  truncate?: {
-    option?: number;
-    description?: number;
-    variant?: TruncateStringProps['variant'];
-  };
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
 
-export type BaseItemPrivateProps = {
-  expandIcon?: ReactNode;
-  open?: boolean;
-};
+export type ItemId = string | number;
 
-export type BaseItemProps = WithSupportProps<{
+type ItemContent = ItemContentProps;
+
+export type BaseItem = WithSupportProps<{
   /**
    * Слот до основного контента
    * @type ReactElement
@@ -33,9 +24,10 @@ export type BaseItemProps = WithSupportProps<{
    * @type ReactElement
    */
   afterContent?: ReactNode;
-  /** Основной контент айтема */
-  content: ItemContentProps;
-
+  /**
+   * Основной контент айтема
+   */
+  content?: ItemContent | ReactNode;
   /** Колбек обработки клика */
   onClick?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия кнопки мыши */
@@ -46,16 +38,14 @@ export type BaseItemProps = WithSupportProps<{
   onFocus?(e: FocusEvent<HTMLElement>): void;
   /** Колбек обработки блюра */
   onBlur?(e: FocusEvent<HTMLElement>): void;
-
   /** Уникальный идентификатор */
-  id?: string | number;
-
+  id?: ItemId;
   /** Флаг неактивности элемента */
   disabled?: boolean;
 
   itemRef?: RefObject<HTMLElement>;
-  className?: string;
 
+  className?: string;
   /**
    * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
    * <br>
@@ -67,31 +57,90 @@ export type BaseItemProps = WithSupportProps<{
    */
   switch?: boolean;
 
-  key?: string | number;
-
   itemWrapRender?(item: ReactNode): ReactNode;
 }>;
 
-type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
+type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
 
 // eslint-disable-next-line no-use-before-define
-export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
 
-export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
+export type AccordionItem = BaseItemWithoutNonGroup & {
+  items: Item[];
   type: 'collapse';
 };
 
-export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
-  items: ItemProps[];
-  type: 'next-list';
-  placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
-  search?: SearchState;
-  onSublistOpenChanged?(open: boolean, id?: string | number): void;
-  loading?: boolean;
-} & ScrollProps;
-
-export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
-  items: ItemProps[];
-  id?: string | number;
+export type NextListItem = BaseItemWithoutNonGroup &
+  ScrollProps & {
+    items: Item[];
+    type: 'next-list';
+
+    onSublistOpenChanged?(open: boolean, id?: ItemId): void;
+
+    loading?: boolean;
+    dataError?: boolean;
+    dataFiltered?: boolean;
+
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+  };
+
+type CommonGroupItem = {
+  label?: string;
+  truncate?: {
+    variant?: TruncateStringProps['variant'];
+  };
+  mode?: 'primary' | 'secondary';
+  divider?: boolean;
+};
+
+export type GroupItem = CommonGroupItem & {
+  items: Item[];
+  type: 'group';
+};
+
+export type GroupSelectItem = CommonGroupItem & {
+  items: Item[];
+  type: 'group-select';
+
+  id?: ItemId;
+  itemRef?: RefObject<HTMLElement>;
 };
+
+type RequiredFields<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+export type Flatten<T, K extends keyof T> = RequiredFields<T, K>;
+
+export type CommonFlattenProps = {
+  items: ItemId[];
+  allChildIds: ItemId[];
+};
+
+export type FlattenBaseItem = Flatten<BaseItem, 'id'>;
+export type FlattenNextListItem = Flatten<Omit<NextListItem, 'items'>, 'id'>;
+export type FlattenGroupListItem = Omit<GroupItem, 'items'> & { id: ItemId };
+export type FlattenGroupSelectListItem = Flatten<Omit<GroupSelectItem, 'items'>, 'id'>;
+export type FlattenAccordionItem = Flatten<Omit<AccordionItem, 'items'>, 'id'>;
+
+export type FlattenItem =
+  | FlattenBaseItem
+  | ((FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem) &
+      CommonFlattenProps);
+
+export type FocusFlattenItem = {
+  key: ItemId;
+  id: ItemId;
+
+  originalId: ItemId;
+  parentId?: ItemId;
+
+  itemRef?: RefObject<HTMLElement>;
+  type?: 'next-list' | 'collapse' | 'group' | 'group-select';
+
+  disabled?: boolean;
+} & CommonFlattenProps;
+
+export type ItemProps = Item;
+export type BaseItemProps = BaseItem;
+export type GroupItemProps = GroupItem;
+export type NextListItemProps = NextListItem;
+export type AccordionItemProps = AccordionItem;
+export type GroupSelectItemProps = GroupSelectItem;

package/src/components/Items/utils.ts

@@ -1,71 +1,218 @@
 import { createRef } from 'react';
 
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
+import { ItemContentProps } from '../../helperComponents';
+import {
+  AccordionItem,
+  AnyType,
+  BaseItem,
+  FlattenItem,
+  FocusFlattenItem,
+  GroupItem,
+  GroupSelectItem,
+  Item,
+  ItemId,
+  NextListItem,
+} from './types';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isBaseItemProps(item: any): item is BaseItemProps {
-  return 'content' in item;
+export function isBaseItem<ReturnType = BaseItem>(item: AnyType): item is ReturnType {
+  return item && !('items' in item);
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isAccordionItemProps(item: any): item is AccordionItemProps {
-  return 'items' in item && item['type'] === 'collapse';
+export function isAccordionItem<ReturnType = AccordionItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'collapse';
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isNextListItemProps(item: any): item is NextListItemProps {
-  return 'items' in item && item['type'] === 'next-list';
+export function isNextListItem<ReturnType = NextListItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'next-list';
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isGroupItemProps(item: any): item is GroupItemProps {
-  return 'items' in item && item['type'] === undefined;
+export function isGroupItem<ReturnType = GroupItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'group';
+}
+export function isGroupSelectItem<ReturnType = GroupSelectItem>(item: AnyType): item is ReturnType {
+  return item && 'items' in item && item['type'] === 'group-select';
+}
+export function isContentItem(item: AnyType): item is ItemContentProps {
+  return typeof item === 'object' && item['option'] !== undefined;
 }
 
-export function getSlicedItems({
-  items,
-  hasSearch,
-  pinTop,
-  pinBottom,
-  footerRefs,
-}: {
-  items: ItemProps[];
-  hasSearch: boolean;
-  footerRefs: ItemProps[];
-  pinTop?: ItemProps[];
-  pinBottom?: ItemProps[];
-}) {
-  const searchShift = hasSearch ? 1 : 0;
-  const pinTopNumber = pinTop?.length ?? 0;
-  const pinBottomNumber = pinBottom?.length ?? 0;
-  const footerElementsNumber = footerRefs?.length ?? 0;
+export const isBaseItemProps = isBaseItem;
+export const isAccordionItemProps = isAccordionItem;
+export const isNextListItemProps = isNextListItem;
+export const isGroupItemProps = isGroupItem;
 
-  return {
-    pinTop: items.slice(searchShift, pinTopNumber + searchShift),
-    items: items.slice(pinTopNumber + searchShift, items.length - pinBottomNumber - footerElementsNumber),
-    pinBottom: items.slice(items.length - pinBottomNumber - footerElementsNumber, items.length - footerElementsNumber),
-  };
-}
+type FlattenProps = {
+  item: Item;
+  idx: number;
+  prefix?: ItemId;
+  parentId?: ItemId;
+};
 
-export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[] {
-  return itemsProp.map((item, idx) => {
-    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
-    const itemId = item.id ?? autoId;
+type KindFlattenItemsProps = {
+  items: Item[];
+  prefix?: ItemId;
+  parentId?: ItemId;
+};
 
-    if (isGroupItemProps(item)) {
-      return { key: autoId, ...item, id: itemId, items: addItemsIds(item.items, itemId) };
-    }
+export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsProps) {
+  const flattenItems: Record<string, FlattenItem> = {};
+  const focusFlattenItems: Record<string, FocusFlattenItem> = {};
 
-    if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-      return {
-        key: autoId,
+  function flatten({ item, idx, prefix, parentId = '~main' }: FlattenProps): {
+    id: ItemId;
+    children: ItemId[];
+    focusChildren: ItemId[];
+    autoId: ItemId;
+  } {
+    const autoId = prefix !== undefined ? [prefix, idx].join('-') : String(idx);
+    const itemId = (!isGroupItem(item) ? item.id : undefined) ?? autoId;
+
+    if (isBaseItem(item)) {
+      flattenItems[itemId] = {
         ...item,
+        items: [],
+        allChildIds: [],
         id: itemId,
-        items: addItemsIds(item.items, itemId),
+      };
+
+      focusFlattenItems[autoId] = {
+        key: autoId,
+        originalId: itemId,
+        id: autoId,
+        disabled: item.disabled,
+        parentId,
+        items: [],
+        allChildIds: [],
         itemRef: item.itemRef || createRef<HTMLElement>(),
       };
+
+      return { id: itemId, children: [itemId], autoId, focusChildren: [autoId] };
+    }
+
+    let allChildIds: ItemId[] = [];
+    let allFocusChildIds: ItemId[] = [];
+    const closeChildIds: ItemId[] = [];
+    const autoChildIds: ItemId[] = [];
+
+    const { items, ...rest } = item;
+    const childActiveParent = isGroupItem(item) ? parentId ?? '~main' : autoId;
+
+    for (let idx = 0; idx < items.length; idx++) {
+      const { id, children, autoId, focusChildren } = flatten({
+        item: items[idx],
+        idx,
+        prefix: itemId,
+        parentId: childActiveParent,
+      });
+
+      autoChildIds.push(autoId);
+      closeChildIds.push(id);
+      allChildIds = allChildIds.concat(children);
+      allFocusChildIds = allFocusChildIds.concat(focusChildren);
     }
 
-    return { key: autoId, ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
-  });
+    const children = [...new Set(allChildIds.concat(closeChildIds))];
+    const focusChildren = [...new Set(allFocusChildIds.concat(autoChildIds))];
+
+    flattenItems[itemId] = {
+      ...rest,
+      id: itemId,
+      items: [],
+      allChildIds: children,
+    };
+
+    focusFlattenItems[autoId] = {
+      key: autoId,
+      originalId: itemId,
+      id: autoId,
+      parentId,
+      items: autoChildIds,
+      allChildIds: focusChildren,
+      disabled: (item.type === 'collapse' || item.type === 'next-list') && item.disabled,
+      type: item.type,
+      itemRef: (!isGroupItem(item) ? item.itemRef : undefined) ?? createRef<HTMLElement>(),
+    };
+
+    return { id: itemId, children, autoId, focusChildren };
+  }
+
+  const closeChildIds: ItemId[] = [];
+  const autoChildIds: ItemId[] = [];
+  let allChildIds: ItemId[] = [];
+
+  for (let idx = 0; idx < items.length; idx++) {
+    const { id, children, autoId } = flatten({ item: items[idx], idx, prefix, parentId });
+
+    autoChildIds.push(autoId);
+    closeChildIds.push(id);
+    allChildIds.push(id);
+    allChildIds = allChildIds.concat(children);
+  }
+
+  const children = [...new Set(allChildIds)];
+
+  return {
+    focusCloseChildIds: autoChildIds,
+    allChildIds: children,
+    flattenItems,
+    focusFlattenItems,
+  };
+}
+
+type ExtractActiveItemsProps = {
+  focusFlattenItems: Record<string, FocusFlattenItem>;
+  focusCloseChildIds: ItemId[];
+  openCollapseItems: ItemId[];
+  isSelectionMultiple?: boolean;
+};
+
+type ExtractActiveItemsReturnType = {
+  ids: ItemId[];
+  expandedIds: ItemId[];
+};
+
+export function extractActiveItems({
+  focusFlattenItems,
+  focusCloseChildIds,
+  openCollapseItems,
+  isSelectionMultiple,
+}: ExtractActiveItemsProps): ExtractActiveItemsReturnType {
+  const ids: ItemId[] = [];
+  const expandedIds: ItemId[] = [];
+
+  function internalFn(focusCloseChildIds: ItemId[]) {
+    focusCloseChildIds.forEach(id => {
+      const child = focusFlattenItems[id];
+
+      if (child.type === 'group') {
+        internalFn(child.items);
+        return;
+      }
+
+      if (!child.disabled) {
+        if (child.type === 'group-select') {
+          if (isSelectionMultiple) {
+            ids.push(child.id);
+          }
+
+          internalFn(child.items);
+          return;
+        }
+
+        ids.push(child.id);
+
+        if (child.type) {
+          expandedIds.push(id);
+
+          if (openCollapseItems.includes(child.originalId)) {
+            internalFn(child.items);
+          }
+        }
+      }
+    });
+  }
+
+  internalFn(focusCloseChildIds);
+
+  return {
+    ids,
+    expandedIds,
+  };
 }