packages/tree/src/components/_components/TreeNodeExpander/TreeNodeExpander.tsx - develop - Bybaleshqa/Forktest

packages/tree/src/components/_components/TreeNodeExpander/TreeNodeExpander.tsx
111 строк3 KB
Nikita
fix: исправлена типизация data-атрибутов
13 ноя 2024, 10:27
13 ноя 2024, 10:273d6493e
'use client'

import * as React from 'react'
import { useTreeContext, useTreeFeatureFlagsContext } 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'> & {
      /**
       * Флаг отображения пустого контейнера без кнопки
       */
      mock?: boolean
      /**
       * Свойства кнопки expand
       * @param buttonProps.onClick - обработчик нажатия на элемент
       * @param buttonProps.onBlur - обработчик потери фокуса с элемента
       * @param buttonProps.onFocus - обработчик фокуса на элемент
       * @param buttonProps - остальные нативные атрибуты элемента button
       */
      buttonProps?: ComponentPropsWithAttributes<
        ComponentPropsWithRefFix<'button'>
      >
      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 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

    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>
  )
}