packages/tree/src/Tree.tsx - develop - Bybaleshqa/Forktest

packages/tree/src/Tree.tsx
199 строк6 KB
Pavel Uryadyshev
feat(tree): добавлена поддержка виртуализации
01 ноя 2024, 16:22
01 ноя 2024, 16:22d146fcb
'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,
} 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,
      size = TreeSize.sm,
      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,
      selectMode = TreeSelectMode.strict,
      checkMode = TreeCheckMode.affect,
      disableFocusTreeOnItemClick = false,
      onTreeKeyDown,
      levelSpacer,
      disabled = false,
      onLoadData,
      disableFocusEffectOnCheckboxClick = false,
      disableFocusEffectOnClick = false,
      disableFocusEffectOnExpanderClick = false,
      focusMode = TreeFocusMode.default,
      getLabelCheckboxInnerProps,
      enableScrollToFocusedNode = false,
      ...rest
    } = props

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

    const baseProps = {
      selectMode,
      checkMode,
      multipleSelect,
    }

    const treeProps = {
      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]: size === TreeSize.xs,
      [classesMap.rootSmall]: size === TreeSize.sm,
      [classesMap.rootMedium]: size === TreeSize.md,
    })

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

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