packages/tree/examples/TreeCustomKeyboard.tsx - develop - bearury/ui-kit-ce

packages/tree/examples/TreeCustomKeyboard.tsx

118 строк2 KB

Pavel Uryadyshev

fix(tree): оптимизирована работа компонента Tree

11 окт 2024, 11:54

11 окт 2024, 11:548afbdcb

import * as React from 'react'
import { Tree, TreeItem, TreeHandlers, TreeNodeItem } from '@v-uik/tree'

const dataSource = [
  {
    key: 'node-0',
    label: 'node-0',
    children: [
      {
        key: 'node-0-0',
        label: 'node-0-0',
        children: [
          {
            key: 'node-0-0-0',
            label: 'node-0-0-0',
          },
          {
            key: 'node-0-0-1',
            label: 'node-0-0-1',
          },
        ],
      },
      {
        key: 'node-0-1',
        label: 'node-0-1',
        children: [
          {
            key: 'node-0-1-0',
            label: 'node-0-1-0',
          },
          {
            key: 'node-0-1-1',
            label: 'node-0-1-1',
          },
        ],
      },
    ],
  },
  {
    key: 'node-1',
    label: 'node-1',
    children: [
      {
        key: 'node-1-0',
        label: 'node-1-0',
        children: [
          {
            key: 'node-1-0-0',
            label: 'node-1-0-0',
          },
          {
            key: 'node-1-0-1',
            label: 'node-1-0-1',
          },
        ],
      },
      {
        key: 'node-1-1',
        label: 'node-1-1',
        children: [
          {
            key: 'node-1-1-0',
            label: 'node-1-1-0',
          },
          {
            key: 'node-1-1-1',
            label: 'node-1-1-1',
          },
        ],
      },
    ],
  },
]

export const TreeCustomKeyboard: React.FC = () => {
  const handleTreeKeyDown = (
    event: React.KeyboardEvent<HTMLUListElement>,
    node: TreeNodeItem<TreeItem>,
    { toggleCheck, toggleExpand, toggleSelect }: TreeHandlers
  ) => {
    if (event.key === 'Enter') {
      event.preventDefault()

      toggleCheck(node.key)

      return true
    }

    if (event.key === ' ') {
      event.preventDefault()

      toggleExpand(node.key)

      return true
    }

    if (event.key === 's') {
      event.preventDefault()
      event.stopPropagation()

      toggleSelect(node.key)

      return true
    }
  }

  return (
    <Tree
      checkable
      selectable
      disableExpandOnClick
      multipleSelect
      dataSource={dataSource}
      defaultExpandedKeys={['node-0', 'node-0-0', 'node-0-1']}
      onTreeKeyDown={handleTreeKeyDown}
    />
  )
}