@snack-uikit/tree 0.1.8-preview-85c5f47b.0

package/src/helpers.ts

@@ -0,0 +1,107 @@
+import { ParentNode, TreeNodeId, TreeNodeProps } from './types';
+
+function findAllChildNodeIds(nodes: TreeNodeProps[]): TreeNodeId[] {
+  const stack = [...nodes];
+  const ids: TreeNodeId[] = [];
+
+  let node: TreeNodeProps | undefined;
+
+  while ((node = stack.pop())) {
+    if (!node.disabled) {
+      ids.push(node.id);
+
+      if (node.nested?.length) {
+        stack.push(...node.nested);
+      }
+    }
+  }
+
+  return ids;
+}
+
+export function checkNestedNodesSelection(nodes: TreeNodeProps[], selectedKeys: TreeNodeId[]) {
+  const allIds = findAllChildNodeIds(nodes);
+
+  const selected = allIds.filter(id => selectedKeys.includes(id));
+  const someSelected = selected.length > 0;
+  const allSelected = someSelected && allIds.length === selected.length;
+
+  return {
+    someSelected: !allSelected && someSelected,
+    allSelected,
+  };
+}
+
+export function findAllExpandedChildNodeIds(nodes: TreeNodeProps[], expandedNodes: TreeNodeId[]) {
+  const stack = [...nodes];
+  const ids: TreeNodeId[] = [];
+
+  let node: TreeNodeProps | undefined;
+
+  while ((node = stack.shift())) {
+    ids.push(node.id);
+
+    if (node.nested?.length && expandedNodes.includes(node.id)) {
+      stack.unshift(...node.nested);
+    }
+  }
+
+  return ids;
+}
+
+export function lookupTreeForSelectedNodes({
+  node,
+  selectedNodes,
+  parentNode,
+}: {
+  node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>;
+  selectedNodes: TreeNodeId[];
+  parentNode?: ParentNode;
+}) {
+  const { nested } = node;
+
+  const childSelection = nested?.length ? checkNestedNodesSelection(nested, selectedNodes) : undefined;
+  const isSelected = childSelection
+    ? childSelection.someSelected || childSelection.allSelected
+    : selectedNodes.includes(node.id);
+
+  let updatedSelectedNodes: string[] = [];
+
+  const allIdsFromNode = [node.id];
+
+  if (nested?.length) {
+    allIdsFromNode.push(...findAllChildNodeIds(nested));
+  }
+
+  if (isSelected) {
+    updatedSelectedNodes = selectedNodes.filter(id => !allIdsFromNode.includes(id));
+  } else {
+    updatedSelectedNodes = selectedNodes.concat(allIdsFromNode);
+  }
+
+  if (parentNode) {
+    let parent: ParentNode | undefined = parentNode;
+
+    while (parent) {
+      if (parent.nested?.length) {
+        const parentNestedSelection = checkNestedNodesSelection(parent.nested, updatedSelectedNodes);
+
+        if (isSelected) {
+          if (parentNestedSelection.allSelected || parentNestedSelection.someSelected) {
+            const parentIdIndex = updatedSelectedNodes.findIndex(id => id === parent?.id);
+
+            if (parentIdIndex > -1) {
+              updatedSelectedNodes.splice(parentIdIndex, 1);
+            }
+          }
+        } else if (!isSelected && parentNestedSelection.allSelected) {
+          updatedSelectedNodes.push(parent.id);
+        }
+      }
+
+      parent = parent.parentNode;
+    }
+  }
+
+  return updatedSelectedNodes;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { OnNodeClick, TreeNodeId, TreeNodeProps } from './types';

package/src/types.ts

@@ -0,0 +1,97 @@
+import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { SelectionMode } from './constants';
+
+export type TreeNodeId = string;
+
+export type BaseTreeNode = WithSupportProps<{
+  /** Идентификатор элемента */
+  id: TreeNodeId;
+  /** Имя элемента */
+  title: string;
+  /** Является ли элемент деактивированным */
+  disabled?: boolean;
+  /** Обработчик клика по элементу */
+  onClick?: MouseEventHandler;
+  className?: string;
+}>;
+
+export type ChildTreeNode = BaseTreeNode & {
+  /** Иконка дочернего элемента */
+  icon?: ReactNode;
+  nested?: never;
+  expandedIcon?: never;
+  collapsedIcon?: never;
+};
+
+export type ParentTreeNode = BaseTreeNode & {
+  icon?: never;
+  /** Иконка элемента-родителя в открытом состоянии */
+  expandedIcon?: ReactNode;
+  /** Иконка элемента-родителя в закрытом состоянии */
+  collapsedIcon?: ReactNode;
+  /** Вложенные элементы дерева */
+  nested: (ChildTreeNode | ParentTreeNode)[];
+};
+
+export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
+
+export type ParentNode = Pick<TreeNodeProps, 'id' | 'nested'> & { parentNode?: ParentNode };
+
+export type OnNodeClick = (node: TreeNodeProps, e: MouseEvent) => void;
+
+export type TreeCommonProps = {
+  /** Данные для отрисовки */
+  data: TreeNodeProps[];
+  /**
+   * Режим выбора элементов:
+   * <br> - `Single` - одиночный выбор
+   * <br> - `Multi` - множественный выбор
+   */
+  selectionMode?: SelectionMode;
+  /** Обработчик клика по элементу дерева */
+  onNodeClick?: OnNodeClick;
+  /** Состояние для раскрытых элементов */
+  expandedNodes?: TreeNodeId[];
+  /** Колбэк при раскрытии/закрытии элементов */
+  onExpand?(expandedKeys: TreeNodeId[], nodeId: TreeNodeId): void;
+  /** Состояние для выбранных элементов */
+  selected?: TreeNodeId[] | TreeNodeId;
+  /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
+  onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
+  /** Дополнительные действия для элемента-родителя */
+  parentActions?(node: TreeNodeProps): ItemSingleProps[];
+  /** Дополнительные действия для элемента-потомка */
+  nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+  /** Флаг отвечающий за отображение линий вложенности */
+  showLines?: boolean;
+  className?: string;
+};
+
+export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
+  selectionMode: SelectionMode.Single;
+  /** Состояние для выбраного элемента */
+  /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
+  selected?: TreeNodeId;
+  /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
+  onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+};
+
+export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
+  selectionMode: SelectionMode.Multi;
+  /**
+   * Состояние для выбраных элементов:
+   * <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк
+   */
+  selected?: TreeNodeId[];
+  /**
+   * Колбэк при изменении выбраных элементов:
+   * <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк
+   */
+  onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
+};
+
+export type TreeBaseProps = TreeMultiSelect | TreeSingleSelect;