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

packages/tree/examples/TreeAdditionalControls.tsx
163 строки6 KB
Урядышев Павел Александрович
refactor(tree-dnd): исправления после дизайн-ревью
09 июл 2025, 18:02
09 июл 2025, 18:02f866ce9
import * as React from 'react'
import { Tree, TreeRenderAdditionalControlData } 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',
          },
        ],
      },
    ],
  },
]

const PenControl: React.FC<TreeRenderAdditionalControlData> = () => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M19.4 10L21.1 8.3C21.7 7.7 22 7 22 6.2C22 5.4 21.7 4.6 21.1 4L19.9 2.8C19.4 2.3 18.6 2 17.8 2C17 2 16.2 2.3 15.7 2.9L5.1 13.5C3.9 14.7 3.7 16.6 4.5 18.1L3.3 19.3C2.9 19.7 2.9 20.3 3.3 20.7C3.5 20.9 3.7 21 4 21C4.3 21 4.5 20.9 4.7 20.7L5.9 19.5C6.5 19.8 7.2 20 7.8 20C8.8 20 9.8 19.6 10.5 18.9L18 11.4L19.6 13L16.3 16.3C15.9 16.7 15.9 17.3 16.3 17.7C16.5 17.9 16.8 18 17 18C17.3 18 17.5 17.9 17.7 17.7L21.7 13.7C21.9 13.5 22 13.3 22 13C22 12.7 21.9 12.5 21.7 12.3L19.4 10ZM17.1 4.3C17.3 4.1 17.6 4 17.8 4C18.1 4 18.3 4.1 18.5 4.3L19.7 5.5C20.1 5.9 20.1 6.5 19.7 6.9L18 8.6L15.4 6L17.1 4.3ZM9.1 17.5C8.4 18.2 7.2 18.2 6.5 17.5C5.8 16.8 5.8 15.6 6.5 14.9L14 7.4L16.6 10L9.1 17.5Z"
        fill="black"
      />
    </svg>
  )
}

const ControlZero: React.FC<TreeRenderAdditionalControlData> = () => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9.00012 9.99982C9.00012 8.29982 10.3001 6.99982 12.0001 6.99982C13.7001 6.99982 15.0001 8.29982 15.0001 9.99982V13.9998C15.0001 15.6998 13.7001 16.9998 12.0001 16.9998C10.3001 16.9998 9.00012 15.6998 9.00012 13.9998V9.99982ZM12.0001 14.9998C12.6001 14.9998 13.0001 14.5998 13.0001 13.9998V9.99982C13.0001 9.39982 12.6001 8.99982 12.0001 8.99982C11.4001 8.99982 11.0001 9.39982 11.0001 9.99982V13.9998C11.0001 14.5998 11.4001 14.9998 12.0001 14.9998Z"
        fill="black"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13.8001 1.3998L21.8001 7.1998C22.8001 7.8998 23.3001 9.2998 22.9001 10.4998L19.8001 19.8998C19.4001 21.1998 18.3001 21.9998 17.0001 21.9998H7.0001C5.7001 21.9998 4.6001 21.1998 4.3001 19.8998L1.2001 10.4998C0.800096 9.2998 1.3001 7.9998 2.3001 7.1998L10.3001 1.3998C11.3001 0.599805 12.8001 0.599805 13.8001 1.3998ZM17.9001 19.2998L21.0001 9.8998C21.1001 9.4998 20.9001 9.0998 20.6001 8.7998L12.6001 2.9998C12.4001 2.8998 12.2001 2.7998 12.0001 2.7998C11.8001 2.7998 11.6001 2.8998 11.4001 2.9998L3.4001 8.7998C3.0001 9.0998 2.9001 9.4998 3.0001 9.8998L6.1001 19.2998C6.2001 19.6998 6.6001 19.9998 7.0001 19.9998H17.0001C17.4001 19.9998 17.8001 19.6998 17.9001 19.2998Z"
        fill="black"
      />
    </svg>
  )
}

const ControlOne: React.FC<TreeRenderAdditionalControlData> = () => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.3001 7.29981C11.6001 6.99981 12.0001 6.89981 12.4001 7.09981C12.8001 7.19981 13.0001 7.59981 13.0001 7.99981V15.9998C13.0001 16.5998 12.6001 16.9998 12.0001 16.9998C11.4001 16.9998 11.0001 16.5998 11.0001 15.9998V10.3998L10.7001 10.6998C10.3001 11.0998 9.70012 11.0998 9.30012 10.6998C8.90012 10.2998 8.90012 9.69981 9.30012 9.29981L11.3001 7.29981Z"
        fill="black"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13.8001 1.3998L21.8001 7.1998C22.8001 7.8998 23.3001 9.2998 22.9001 10.4998L19.8001 19.8998C19.4001 21.1998 18.3001 21.9998 17.0001 21.9998H7.0001C5.7001 21.9998 4.6001 21.1998 4.3001 19.8998L1.2001 10.4998C0.800096 9.2998 1.3001 7.9998 2.3001 7.1998L10.3001 1.3998C11.3001 0.599805 12.8001 0.599805 13.8001 1.3998ZM17.9001 19.2998L21.0001 9.8998C21.1001 9.4998 20.9001 9.0998 20.6001 8.7998L12.6001 2.9998C12.4001 2.8998 12.2001 2.7998 12.0001 2.7998C11.8001 2.7998 11.6001 2.8998 11.4001 2.9998L3.4001 8.7998C3.0001 9.0998 2.9001 9.4998 3.0001 9.8998L6.1001 19.2998C6.2001 19.6998 6.6001 19.9998 7.0001 19.9998H17.0001C17.4001 19.9998 17.8001 19.6998 17.9001 19.2998Z"
        fill="black"
      />
    </svg>
  )
}

export const TreeAdditionalControls: React.FC = () => {
  return (
    <Tree
      dataSource={dataSource}
      defaultExpandedKeys={['node-1']}
      suffixControls={[
        {
          id: 'pen-control',
          renderControl: (data) => <PenControl {...data} />,
        },
      ]}
      prefixControls={[
        {
          id: 'control-zero',
          renderControl: (data) => <ControlZero {...data} />,
        },
        {
          id: 'control-one',
          renderControl: (data) => <ControlOne {...data} />,
        },
      ]}
    />
  )
}