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

packages/tree-dnd/examples/TreeDragAndDropCustomData.tsx

111 строк2 KB

Урядышев Павел Александрович

docs(tree-dnd): доработана документация и добавлен пример с сортировкой по алфавиту

08 сен 2025, 21:01

08 сен 2025, 21:01fb6509a

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

type MyItem = Omit<TreeItem, 'draggable' | 'dropTarget' | 'children'> & {
  canDrop?: boolean
  canDrag?: boolean
  subitems?: MyItem[]
}

const dataSource: MyItem[] = [
  {
    key: 'node-0',
    label: 'node-0',
    canDrag: false,
    subitems: [
      {
        key: 'node-0-0',
        label: 'node-0-0',
        subitems: [
          {
            key: 'node-0-0-0',
            label: 'node-0-0-0',
            canDrop: false,
          },
          {
            key: 'node-0-0-1',
            label: 'node-0-0-1',
            canDrag: false,
          },
        ],
      },
      {
        key: 'node-0-1',
        label: 'node-0-1',
        subitems: [
          {
            key: 'node-0-1-0',
            label: 'node-0-1-0',
            canDrag: false,
          },
          {
            key: 'node-0-1-1',
            label: 'node-0-1-1',
            canDrag: false,
          },
        ],
      },
    ],
  },
  {
    key: 'node-1',
    label: 'node-1',
    canDrag: false,
    subitems: [
      {
        key: 'node-1-0',
        label: 'node-1-0',
        subitems: [
          {
            key: 'node-1-0-0',
            label: 'node-1-0-0',
            canDrop: false,
          },
          {
            key: 'node-1-0-1',
            label: 'node-1-0-1',
            canDrop: false,
          },
        ],
      },
      {
        key: 'node-1-1',
        label: 'node-1-1',
        subitems: [
          {
            key: 'node-1-1-0',
            label: 'node-1-1-0',
            canDrop: false,
          },
          {
            key: 'node-1-1-1',
            label: 'node-1-1-1',
            canDrop: false,
          },
        ],
      },
    ],
  },
]

export const TreeDragAndDropCustomData = (): React.ReactElement => {
  return (
    <Tree
      defaultDataSource={dataSource}
      getters={{
        getTreeItemDraggable: (item) => item.canDrag,
        getTreeItemDropTarget: (item) => item.canDrop,
        getTreeItemChildren: (item) => item.subitems,
        getTreeItemChildrenKey: () => 'subitems',
      }}
      defaultExpandedKeys={[
        'node-0',
        'node-1',
        'node-0-0',
        'node-0-1',
        'node-1-0',
        'node-1-1',
      ]}
    />
  )
}