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

packages/tree/src/components/TreeNodeChecker/TreeNodeChecker.tsx

119 строк3 KB

Pavel Uryadyshev

feat(tree-dnd): реализован новый компонент Tree с поддержкой drag-and-drop

09 июл 2025, 13:07

09 июл 2025, 13:07a06fe68

'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 TreeNodeCheckerProps<TItem = TreeItem> =
  TreeBaseComponentProps<TItem> &
    Pick<UseTreeReturnProps<TItem>, 'toggleCheck'> & {
      /**
       *
       * @inner
       */
      checked?: boolean
      /**
       *
       * @inner
       */
      indeterminate?: boolean
      /**
       *
       * @inner
       */
      disableFocusEffectOnCheckboxClick?: boolean
      /**
       *
       * @inner
       */
      disableFocusEffectOnClick?: boolean
      /**
       *
       * @inner
       */
      labelProps?: ComponentPropsWithAttributes<
        ComponentPropsWithRefFix<'label'>
      >
    }

export const TreeNodeChecker = <TItem extends unknown = TreeItem>({
  nodeKey,
  toggleCheck,
  disableFocusEffectOnCheckboxClick,
  disableFocusEffectOnClick,
  labelProps,
  ...rest
}: TreeNodeCheckerProps<TItem>): React.ReactElement => {
  const {
    classesMap,
    components: { Checkbox },
  } = useTreeContext<TItem>()
  const { skipExpandRef, skipFocusEffectRef, skipSelectRef } =
    useTreeFeatureFlagsContext()

  const processSkipFocusEffect = () => {
    if (disableFocusEffectOnCheckboxClick || disableFocusEffectOnClick) {
      skipFocusEffectRef.current = true
    }
  }

  const handleLabelClick = (event: React.MouseEvent<HTMLLabelElement>) => {
    processSkipFocusEffect()

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

    labelProps?.onClick?.(event)
  }

  const handleCheckboxMouseDown = (
    event: React.MouseEvent<HTMLInputElement>
  ) => {
    skipExpandRef.current = true

    processSkipFocusEffect()

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

    event.preventDefault()
  }

  const handleChange = () => {
    processSkipFocusEffect()

    toggleCheck(nodeKey)
  }

  return (
    <label
      {...labelProps}
      className={clsx(
        classesMap.nodeControlContainer,
        classesMap.nodeControlContainerLabel,
        labelProps?.className
      )}
      onClick={handleLabelClick}
    >
      <span className={classesMap.nodeControl}>
        {Checkbox && (
          <Checkbox
            {...rest}
            nodeKey={nodeKey}
            inputProps={{
              tabIndex: -1,
              onMouseDown: handleCheckboxMouseDown,
            }}
            onChange={handleChange}
          />
        )}
      </span>
    </label>
  )
}