packages/tree/src/defaultComponents.ts - develop - kaws/ui-kit-ce

packages/tree/src/defaultComponents.ts
130 строк3 KB
Pavel Uryadyshev
feat(tree-dnd): реализован новый компонент Tree с поддержкой drag-and-drop
09 июл 2025, 13:07
09 июл 2025, 13:07a06fe68
import {
  TreeNodeExpandIcon,
  TreeNodeExpandIconProps,
  TreeNodeContent,
  TreeNodeContentProps,
  TreeNodeIcon,
  TreeNodeIconProps,
  TreeNodeExpandButton,
  TreeNodeExpandButtonProps,
  TreeMain,
  TreeMainProps,
  TreeNodeCheckbox,
  TreeNodeCheckboxProps,
  TreeNodeLoadingIndicatorProps,
  TreeNodeLoadingIndicator,
  TreeMainItem,
  TreeMainItemProps,
  TreeNode,
  TreeNodeProps,
  TreeItemsList,
  TreeItemsListProps,
} from './userComponents'
import { TreeItem } from './hooks'

export type TreeComponents<TItem = TreeItem> = {
  /**
   * Иконка кнопки скрытия/раскрытия узла дерева.
   *
   * @inner
   */
  ExpandIcon: React.ComponentType<TreeNodeExpandIconProps<TItem>> | null
  /**
   * Компонент отображаемого контента у узла дерева справа от чекбокса и всех иконок.
   *
   * @inner
   */
  Content: React.ComponentType<TreeNodeContentProps<TItem>> | null
  /**
   * Иконка узла дерева.
   *
   * @inner
   */
  Icon: React.ComponentType<TreeNodeIconProps<TItem>> | null
  /**
   * Кнопка скрытия/раскрытия узла дерева.
   *
   * @inner
   */
  ExpandButton: React.ComponentType<TreeNodeExpandButtonProps<TItem>> | null
  /**
   * Компонент чекбокса.
   *
   * @inner
   */
  Checkbox: React.ComponentType<TreeNodeCheckboxProps<TItem>> | null
  /**
   * Компонент загрузки дочерних элементов узла дерева, отображаемый вместо кнопки скрытия/раскрытия.
   *
   * @inner
   */
  LoadingIndicator: React.ComponentType<
    TreeNodeLoadingIndicatorProps<TItem>
  > | null
  /**
   * Основной компонент дерева.
   *
   * @inner
   */
  TreeMain: React.ComponentType<
    React.PropsWithChildren<TreeMainProps<TItem>>
  > | null
  /**
   * Базовый элемент дерева.
   *
   * @inner
   */
  Item: React.ComponentType<TreeMainItemProps<TItem>> | null
  /**
   * Элемент узла дерева.
   *
   * @inner
   */
  Node: React.ComponentType<TreeNodeProps<TItem>> | null
  /**
   * Список базовых элементов дерева.
   *
   * @inner
   */
  ItemsList: React.ComponentType<TreeItemsListProps> | null
}

export type TreeComponentsConfig<TItem = TreeItem> = Partial<
  TreeComponents<TItem>
>

export const defaultTreeComponents: TreeComponents = {
  Content: TreeNodeContent,
  Icon: TreeNodeIcon,
  ExpandButton: TreeNodeExpandButton,
  Checkbox: TreeNodeCheckbox,
  ExpandIcon: TreeNodeExpandIcon,
  LoadingIndicator: TreeNodeLoadingIndicator,
  TreeMain,
  Item: TreeMainItem,
  Node: TreeNode,
  ItemsList: TreeItemsList,
}

export type TreeComponentsGeneric<TItem = TreeItem> = TreeComponents<TItem>

export const getComponents = <TItem = TreeItem>(
  componentProp?: TreeComponentsConfig<TItem> | undefined
): TreeComponentsGeneric<TItem> =>
  ({
    ...defaultTreeComponents,
    ...componentProp,
  } as TreeComponentsGeneric<TItem>)

export type {
  TreeNodeCheckboxProps,
  TreeNodeContentProps,
  TreeNodeExpandButtonProps,
  TreeNodeExpandIconProps,
  TreeNodeIconProps,
  TreeNodeLoadingIndicatorProps,
  TreeMainProps,
  TreeMainItemProps,
  TreeNodeProps,
  TreeItemsListProps,
}