packages/tree/src/components/TreeNodeExpander/TreeNodeExpander.tsx - develop - kaws/ui-kit-ce

packages/tree/src/components/TreeNodeExpander/TreeNodeExpander.tsx
128 строк4 KB
Урядышев Павел Александрович
fix(tree): исправлено количество вызовов и очередность вызова свойства onNodeExpand
05 сен 2025, 13:28
05 сен 2025, 13:2863569b9
'use client'

import * as React from 'react'
import {
  useTreeContext,
  useTreeFeatureFlagsContext,
  useTreeNodeContext,
} from '../../contexts'
import { TreeItem, UseTreeReturnProps } from '../../hooks'
import { TreeBaseComponentProps } from '../../types'
import {
  ComponentPropsWithRefFix,
  ComponentPropsWithAttributes,
} from '@v-uik/common'
import { clsx } from '@v-uik/theme'

export type TreeNodeExpanderProps<TItem = TreeItem> =
  TreeBaseComponentProps<TItem> &
    Pick<UseTreeReturnProps<TItem>, 'toggleExpand'> & {
      /**
       * Флаг отображения пустого контейнера без кнопки.
       *
       * @inner
       */
      mock?: boolean
      /**
       * Свойства кнопки expand.
       *
       * @param buttonProps.onClick - Обработчик нажатия на элемент.
       * @param buttonProps.onBlur - Обработчик потери фокуса с элемента.
       * @param buttonProps.onFocus - Обработчик фокуса на элемент.
       * @param buttonProps - Остальные нативные атрибуты элемента button.
       *
       * @returns
       */
      buttonProps?: ComponentPropsWithAttributes<
        ComponentPropsWithRefFix<'button'>
      >
      /**
       *
       * @inner
       */
      disableFocusEffectOnExpanderClick?: boolean
    }

export const TreeNodeExpander = <TItem extends unknown = TreeItem>({
  toggleExpand,
  mock,
  buttonProps,
  disableFocusEffectOnExpanderClick,
  ...rest
}: TreeNodeExpanderProps<TItem>): React.ReactElement | null => {
  const {
    classesMap,
    getters: { getTreeItemLoadable },
    components: { ExpandButton, ExpandIcon, LoadingIndicator },
  } = useTreeContext<TItem>()
  const { skipFocusEffectRef, skipExpandRef, skipSelectRef } =
    useTreeFeatureFlagsContext()
  const { isNodeWasExpandedByClickRef } = useTreeNodeContext()

  const buttonClassName = clsx(
    classesMap.nodeControlContainer,
    buttonProps?.className,
    classesMap.nodeExpandButton
  )

  const handleClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    if (disableFocusEffectOnExpanderClick) {
      skipFocusEffectRef.current = true
    }
    // Выключаем раскрытие, чтобы при всплытии события TreeNodeList не триггернул раскрытие повторно
    skipExpandRef.current = true

    // Выключаем выбор, чтобы можно было раскрыть узел без снятия выбора с текущего или других узлов
    skipSelectRef.current = true

    // Помечаем, что узел был раскрыт кликом.
    isNodeWasExpandedByClickRef.current = true

    toggleExpand(rest.nodeKey)
    buttonProps?.onClick?.(event)
  }

  const handleMouseDown = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    event.preventDefault()
    buttonProps?.onMouseDown?.(event)
  }

  if (!ExpandButton) {
    return null
  }

  if (mock && !getTreeItemLoadable(rest.data)) {
    return <div className={buttonClassName} />
  }

  if (rest.loading) {
    return (
      <div className={buttonClassName}>
        {LoadingIndicator && <LoadingIndicator {...rest} />}
      </div>
    )
  }

  return (
    <ExpandButton
      type="button"
      aria-label={`${rest.expanded ? 'Close' : 'Open'} tree node ${
        rest.nodeKey
      }`}
      tabIndex={-1}
      {...buttonProps}
      className={buttonClassName}
      onClick={handleClick}
      onMouseDown={handleMouseDown}
      {...rest}
    >
      <span className={classesMap.nodeControl}>
        {ExpandIcon && <ExpandIcon {...rest} />}
      </span>
    </ExpandButton>
  )
}