packages/tree-dnd/examples/TreeDragAndDropComponents.tsx - develop - kaws/ui-kit-ce

packages/tree-dnd/examples/TreeDragAndDropComponents.tsx

123 строки2 KB

Pavel Uryadyshev

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

09 июл 2025, 13:07

09 июл 2025, 13:07a06fe68

import * as React from 'react'
import {
  Tree,
  TreeNodeDragIconProps,
  TreeNodeDragButtonProps,
} from '@v-uik/tree-dnd'
import { createUseStyles } from '@v-uik/theme'

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',
          },
        ],
      },
    ],
  },
]

const useDragButtonStyles = createUseStyles({
  dragButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
    padding: 0,
  },
})

const DragButton = ({
  data,
  depth,
  disabled,
  expanded,
  loading,
  nodeKey,
  selected,
  size,
  ref,
  ...rest
}: TreeNodeDragButtonProps) => {
  const classes = useDragButtonStyles()

  return <button {...rest} className={classes.dragButton} />
}

const DragIcon = ({ nodeKey }: TreeNodeDragIconProps) => (
  <span data-test-id={nodeKey}>🟰</span>
)

export const TreeDragAndDropComponents = (): React.ReactElement => {
  return (
    <Tree
      defaultDataSource={dataSource}
      defaultExpandedKeys={['node-0']}
      components={{
        DragButton,
        DragIcon,
      }}
    />
  )
}