packages/tree/src/Tree.tsx - develop - bearury/ui-kit-ce

packages/tree/src/Tree.tsx
216 строк6 KB
Урядышев Павел Александрович
refactor(tree): bug fix
10 июл 2025, 16:41
10 июл 2025, 16:4171acdc5
'use client'

import * as React from 'react'
import { TreeFocusMode, TreeSize, getTreeProperty } from './common'
import { useTree, TreeItem, TreeSelectMode } from './hooks'
import * as Getters from './hooks/getters'
import {
  TreeContextProvider,
  TreeSelectionContextProvider,
  TreeFeatureFlagsContextProvider,
  TreePropsContextProvider,
  TreeNodeContextProvider,
} from './contexts'
import { useStyles } from './styles'
import { useClassList } from '@v-uik/hooks'
import { clsx } from '@v-uik/theme'
import { TreeProps, TreeImperativeHandlersRef } from './types'
import { getComponents } from './defaultComponents'
import { TreeNodeList } from './TreeNodeList'
import { TreeRoot } from './TreeRoot'
import { TreeCheckMode } from './hooks/useCheck'

const _Tree = React.forwardRef(
  <TItem extends unknown = TreeItem>(
    props: TreeProps<TItem>,
    ref: React.Ref<TreeImperativeHandlersRef<TItem>>
  ) => {
    const treeRef = React.useRef<HTMLUListElement>(null)

    const {
      getters: {
        getTreeItemChildren = Getters.getTreeItemChildren,
        getTreeItemKey = Getters.getTreeItemKey,
        getTreeItemLabel = Getters.getTreeItemLabel,
        getTreeItemCheckDisabled = Getters.getTreeItemCheckDisabled,
        getTreeItemDisabled = Getters.getTreeItemDisabled,
        getTreeItemSelectDisabled = Getters.getTreeItemSelectDisabled,
        getTreeItemLoadable = Getters.getTreeItemLoadable,
      } = Getters,
      classes,
      className,
      dataSource,
      onNodeExpand,
      defaultExpandedKeys,
      expandedKeys,
      components,
      maxContentLines = 1,
      showIcons = false,
      showTrails = false,
      withHalfLevelSpacer = false,
      checkable = false,
      checkedKeys,
      disableExpand = false,
      defaultCheckedKeys,
      onNodeCheck,
      onNodeClick,
      getExpandButtonInnerProps,
      selectable = false,
      defaultSelectedKeys,
      selectedKeys,
      onNodeSelect,
      enableCheckOnClick = false,
      disableExpandOnClick = false,
      disableSelectOnClick = false,
      multipleSelect = false,
      disableFocusTreeOnItemClick = false,
      onTreeKeyDown,
      levelSpacer,
      disabled = false,
      onLoadData,
      disableFocusEffectOnCheckboxClick = false,
      disableFocusEffectOnClick = false,
      disableFocusEffectOnExpanderClick = false,
      getLabelCheckboxInnerProps,
      enableScrollToFocusedNode = false,
      prefixControls,
      size,
      selectMode,
      checkMode,
      focusMode,
      ...rest
    } = props

    const getters = {
      getTreeItemChildren,
      getTreeItemKey,
      getTreeItemLabel,
      getTreeItemCheckDisabled,
      getTreeItemDisabled,
      getTreeItemSelectDisabled,
      getTreeItemLoadable,
    }

    const propsWithDefaults: Pick<
      TreeProps,
      'size' | 'selectMode' | 'checkMode' | 'focusMode'
    > = {
      size: size || TreeSize.sm,
      selectMode: selectMode || TreeSelectMode.strict,
      checkMode: checkMode || TreeCheckMode.affect,
      focusMode: focusMode || TreeFocusMode.default,
    }

    const baseProps = {
      selectMode: propsWithDefaults.selectMode,
      checkMode: propsWithDefaults.checkMode,
      multipleSelect,
    }

    const treeProps = {
      size: propsWithDefaults.size,
      maxContentLines,
      disableFocusTreeOnItemClick,
      levelSpacer,
      showIcons,
      showTrails,
      withHalfLevelSpacer,
      checkable,
      disableExpand,
      onNodeClick,
      getExpandButtonInnerProps,
      selectable,
      enableCheckOnClick,
      disableExpandOnClick,
      disableSelectOnClick,
      disabled,
      onLoadData,
      disableFocusEffectOnCheckboxClick,
      disableFocusEffectOnClick,
      disableFocusEffectOnExpanderClick,
      getLabelCheckboxInnerProps,
      ...baseProps,
    }

    const tree = useTree({
      getters,
      dataSource,
      checkedKeys,
      onNodeCheck,
      onNodeExpand,
      defaultExpandedKeys,
      expandedKeys,
      defaultCheckedKeys,
      defaultSelectedKeys,
      selectedKeys,
      onNodeSelect,
      onLoadData,
      ...baseProps,
    })

    const classesList = useStyles()
    const classesMap = useClassList(classesList, classes)

    const treeClassName = clsx(classesMap.root, className, {
      [classesMap.rootExtraSmall]: propsWithDefaults.size === TreeSize.xs,
      [classesMap.rootSmall]: propsWithDefaults.size === TreeSize.sm,
      [classesMap.rootMedium]: propsWithDefaults.size === TreeSize.md,
    })

    return (
      <TreePropsContextProvider {...tree} {...props} {...propsWithDefaults}>
        <TreeContextProvider<TItem>
          getters={getters}
          classesMap={classesMap}
          components={getComponents(components)}
          treeRef={treeRef}
        >
          <TreeSelectionContextProvider
            disableFocusTreeOnItemClick={disableFocusTreeOnItemClick}
          >
            <TreeFeatureFlagsContextProvider>
              <TreeNodeContextProvider>
                <TreeRoot
                  ref={ref}
                  role="tree"
                  aria-label="Tree"
                  tabIndex={0}
                  disableFocusTreeOnItemClick={disableFocusTreeOnItemClick}
                  selectable={selectable}
                  checkable={checkable}
                  disableExpand={disableExpand}
                  selectMode={propsWithDefaults.selectMode}
                  checkMode={propsWithDefaults.checkMode}
                  focusMode={propsWithDefaults.focusMode}
                  enableScrollToFocusedNode={enableScrollToFocusedNode}
                  disabled={disabled}
                  onTreeKeyDown={onTreeKeyDown}
                  {...(multipleSelect &&
                    propsWithDefaults.selectMode === TreeSelectMode.strict && {
                      'aria-multiselectable': 'true',
                    })}
                  aria-orientation="vertical"
                  {...rest}
                  {...tree}
                  {...getTreeProperty()}
                  className={treeClassName}
                >
                  <TreeNodeList<TItem> {...tree} {...treeProps} />
                </TreeRoot>
              </TreeNodeContextProvider>
            </TreeFeatureFlagsContextProvider>
          </TreeSelectionContextProvider>
        </TreeContextProvider>
      </TreePropsContextProvider>
    )
  }
)

export const Tree = _Tree as <TItem extends unknown = TreeItem>(
  props: Omit<TreeProps<TItem>, 'ref'> & {
    /**
     *
     */
    ref?: React.Ref<TreeImperativeHandlersRef<TItem>> | null
  }
) => React.ReactElement