@snack-uikit/fields 0.18.3 → 0.19.0

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

@@ -0,0 +1,166 @@
+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>;
+};
+
+export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps) {
+  let itemRefs: RefObject<HTMLElement>[] = [];
+  let newItems: ItemProps[] = [];
+  let ids: Array<string | number> = [];
+  let expandedIds: Array<string | number> = [];
+
+  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/FieldSelect/types.ts

@@ -6,6 +6,7 @@ import {
   BaseItemProps,
   DroplistProps,
   GroupItemProps,
+  ItemContentProps,
   NextListItemProps,
   SelectionMultipleState,
   SelectionSingleState,
@@ -15,17 +16,33 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { FieldDecoratorProps } from '../FieldDecorator';
 
-// eslint-disable-next-line no-use-before-define
-export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
+// 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'> &
-  BaseItemProps['content'] & { value: string | number } & Pick<TagProps, 'appearance'>;
+  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 GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & {
+  options: OptionProps[];
+};
 export type NestListOptionProps = Pick<NextListItemProps, 'type' | 'onSublistOpenChanged' | 'id'> &
   BaseOptionProps & { options: OptionProps[] };
 
@@ -65,6 +82,10 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & { options: Opt
 
 type FiledSelectCommonProps = WithSupportProps<{
   options: OptionProps[];
+
+  pinTop: OptionProps[];
+  pinBottom: OptionProps[];
+
   searchable?: boolean;
   /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
   showCopyButton?: boolean;
@@ -98,20 +119,16 @@ type FiledSelectCommonProps = WithSupportProps<{
 
   selectedOptionFormatter?: SelectedOptionFormatter;
 }> &
-  Pick<
-    DroplistProps,
-    'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'
-  >;
+  Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered'>;
 
 export type FieldSelectSingleProps = FieldSelectPrivateProps &
   Omit<SelectionSingleState, 'mode'> &
   WrapperProps &
   FiledSelectCommonProps;
 
-export type FieldSelectMultipleProps = FieldSelectPrivateProps & { removeByBackspace?: boolean } & Omit<
-    SelectionMultipleState,
-    'mode'
-  > &
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
+  removeByBackspace?: boolean;
+} & Omit<SelectionMultipleState, 'mode'> &
   Omit<FiledSelectCommonProps, 'showCopyButton'>;
 
 export type FieldSelectProps =

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

@@ -7,8 +7,6 @@ export function extractListProps({
   noDataState,
   noResultsState,
   errorDataState,
-  pinTop,
-  pinBottom,
   dataFiltered,
   loading,
   footer,
@@ -19,8 +17,6 @@ export function extractListProps({
     noDataState,
     noResultsState,
     errorDataState,
-    pinTop,
-    pinBottom,
     dataFiltered,
     loading,
     footer,

package/src/components/FieldSelect/utils/options.ts

@@ -1,6 +1,7 @@
-import { flattenItems, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+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';
 

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

@@ -24,7 +24,7 @@ export function isNextListOptionProps(option: any): option is NestListOptionProp
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isGroupOptionProps(option: any): option is GroupOptionProps {
-  return 'options' in option && option['type'] === undefined;
+  return 'options' in option && option['type'] === 'group';
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,5 +1,6 @@
-import { flattenItems, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { ItemId, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
 
+import { flattenItems } from '../legacy';
 import { ItemWithId, OptionProps } from '../types';
 import { transformOptionsToItems } from './options';
 
@@ -13,7 +14,7 @@ export function updateItems({
   selectedItem,
 }: {
   options: OptionProps[];
-  value: SelectionSingleValueType;
+  value?: ItemId;
   selectedItem?: ItemWithId;
   currentItems?: ItemProps[];
 }) {
@@ -67,14 +68,23 @@ export function updateMultipleItems({
     };
   }
 
+  const foundedValue: (number | string)[] = [];
+
   let newItems: ItemProps[] = originalItems;
   let newSelectedItems = selectedItems;
 
   const flattenOriginalItems = flattenItems(originalItems);
 
-  const foundItems: ItemWithId[] = flattenOriginalItems.filter(item => value.includes(item.id));
+  // 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(
-    value => !flattenOriginalItems.find(item => item.id === value),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value => !flattenOriginalItems.find((item: any) => item.id === value),
   );
 
   if (nonFoundValues.length) {