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

packages/tree/src/TreeRoot.tsx
177 строк4 KB
Pavel Uryadyshev
feat(tree): добавлена поддержка виртуализации
01 ноя 2024, 16:22
01 ноя 2024, 16:22d146fcb
'use client'

/* eslint-disable react/prop-types */

import * as React from 'react'
import { getTreeProperty, scrollNodeIntoView, TreeFocusMode } from './common'
import { TreeItem, TreeSelectMode, useKeyboard } from './hooks'
import { useTreeContext, useTreeSelectionContext } from './contexts'
import { TreeRootProps, TreeImperativeHandlersRef } from './types'
import { TreeCheckMode } from './hooks/useCheck'

const _TreeRoot = React.forwardRef(
  <TItem extends unknown = TreeItem>(
    {
      nodeKeys,
      getIsChecked,
      getIsExpanded,
      getIsIndeterminate,
      toggleCheck,
      toggleExpand,
      onKeyDown,
      onFocus,
      onBlur,
      getTreeNodeData,
      getIsSelected,
      toggleSelectRange,
      getTreeNodeVisibleChildren,
      getParentRootNode,
      toggleSelect,
      className,
      children,
      getFirstSelectedKey,
      tree,
      onTreeKeyDown,
      disableFocusTreeOnItemClick,
      disableExpand,
      checkable,
      selectable,
      selectMode = TreeSelectMode.strict,
      getLastSelectedKey,
      disabled,
      getIsLoading,
      onMouseDown,
      focusMode = TreeFocusMode.default,
      enableScrollToFocusedNode = false,
      /* Глушим EsLint, чтобы spread-оператор не подсовывал checkMode в DOM-элемент */
      /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
      checkMode = TreeCheckMode.affect,
      ...rest
    }: React.PropsWithChildren<TreeRootProps<TItem>>,
    ref: React.Ref<TreeImperativeHandlersRef<TItem>>
  ): React.ReactElement | null => {
    const { handleBlur, handleFocus, handleKeyDown } = useKeyboard<TItem>({
      nodeKeys,
      getIsChecked,
      getIsExpanded,
      getIsIndeterminate,
      toggleCheck,
      toggleExpand,
      onKeyDown,
      onFocus,
      onBlur,
      getTreeNodeData,
      getIsSelected,
      toggleSelectRange,
      toggleSelect,
      getFirstSelectedKey,
      getLastSelectedKey,
      onTreeKeyDown,
      disableFocusTreeOnItemClick,
      disableExpand,
      checkable,
      selectable,
      selectMode,
      disabled,
      focusMode,
      enableScrollToFocusedNode,
    })
    const { treeRef, components } = useTreeContext<TItem>()
    const { focusedItemKey, savedFocusedItemKey } = useTreeSelectionContext()

    const { TreeMain } = components

    const handleMouseDown = (event: React.MouseEvent<HTMLUListElement>) => {
      onMouseDown?.(event)

      if (disableFocusTreeOnItemClick) {
        event.preventDefault()
      }
    }

    const getFocusItem = React.useCallback(() => {
      const featureFocusedKey =
        focusMode === TreeFocusMode.selected
          ? getFirstSelectedKey() || savedFocusedItemKey
          : savedFocusedItemKey

      const key = focusedItemKey || featureFocusedKey

      if (key) {
        return getTreeNodeData(key)
      }

      return undefined
    }, [
      focusMode,
      getTreeNodeData,
      getFirstSelectedKey,
      focusedItemKey,
      savedFocusedItemKey,
    ])

    const scrollToNode = (key: React.Key, options?: ScrollIntoViewOptions) => {
      scrollNodeIntoView(treeRef.current, key, options)
    }

    React.useImperativeHandle(
      ref,
      () => ({
        getElementRef: () => treeRef,
        handleBlur,
        handleFocus,
        handleKeyDown,
        getFocusItem,
        toggleSelectRange,
        toggleCheck,
        toggleExpand,
        toggleSelect,
        getTreeNodeVisibleChildren,
        getParentRootNode,
        scrollToNode,
      }),
      [
        handleBlur,
        handleFocus,
        handleKeyDown,
        treeRef,
        toggleSelectRange,
        toggleCheck,
        toggleExpand,
        toggleSelect,
        getTreeNodeVisibleChildren,
        getParentRootNode,
        getFocusItem,
        scrollToNode,
      ]
    )

    if (!TreeMain) {
      return null
    }

    return (
      <TreeMain
        ref={treeRef}
        role="tree"
        aria-label="Tree"
        tree={tree}
        {...rest}
        {...getTreeProperty()}
        className={className}
        onBlur={handleBlur}
        onFocus={handleFocus}
        onKeyDown={handleKeyDown}
        onMouseDown={handleMouseDown}
      >
        {children}
      </TreeMain>
    )
  }
)

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