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

packages/tree/examples/TreeCustomComponents.tsx
237 строк5 KB
Урядышев Павел Александрович
refactor(tree,tree-dnd): исправление документации и фикс багов
11 июл 2025, 10:49
11 июл 2025, 10:496aa8bed
import * as React from 'react'
import {
  Tree,
  TreeNodeCheckboxProps,
  TreeItem,
  TreeNodeContentProps,
  TreeNodeIconProps,
  TreeNodeExpandButtonProps,
  TreeNodeExpandIconProps,
  TreeNodeItem,
  TreeNodeLoadingIndicatorProps,
  TreeMainProps,
  TreeMainItemProps,
  TreeItemsListProps,
  TreeNodeProps,
  defaultTreeComponents,
} from '@v-uik/tree'

const dataSource: TreeItem[] = [
  {
    key: 'node-0',
    label: 'node-0',
    loadable: true,
  },
  {
    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 { Item: DefaultItem, Node: DefaultNode } = defaultTreeComponents

const Content: React.FC<TreeNodeContentProps> = ({ children }) => {
  return <i>{children}</i>
}

const Icon: React.FC<TreeNodeIconProps> = ({ canExpand }) => {
  return <span>{canExpand ? '☗' : '☖'}</span>
}

const ExpandButton: React.FC<TreeNodeExpandButtonProps> = ({
  nodeKey,
  children,
  onClick,
}) => {
  return (
    <div
      role="button"
      aria-label={`Expand node ${nodeKey}`}
      style={{ display: 'flex', alignSelf: 'center' }}
      onClick={onClick as unknown as React.MouseEventHandler<HTMLDivElement>}
    >
      {children}
    </div>
  )
}

const ExpandIcon: React.FC<TreeNodeExpandIconProps> = ({ expanded }) => {
  return <span>{expanded ? '⇣' : '⇢'}</span>
}

const LoadingIndicator: React.FC<TreeNodeLoadingIndicatorProps> = () => {
  return <i>Loading...</i>
}

const TreeMain: React.FC<TreeMainProps> = ({ tree, ...rest }) => (
  <ul {...rest} data-test-id="tree" />
)

const Item: React.FC<TreeMainItemProps> = ({ nodeIndex, nodeKey }) => {
  if (!DefaultItem) {
    return null
  }

  return (
    <DefaultItem
      nodeIndex={nodeIndex}
      nodeKey={nodeKey}
      data-test-item-id={nodeKey}
    >
      <span>{nodeIndex + 1}) </span>
    </DefaultItem>
  )
}

const Checkbox: React.FC<TreeNodeCheckboxProps> = ({
  nodeKey,
  data,
  indeterminate,
  checked,
  onChange,
}) => {
  const handleRef = (el: HTMLInputElement | null) => {
    if (el && indeterminate) {
      el.indeterminate = true
    }
  }

  return (
    <input
      key={`${nodeKey}-${String(indeterminate)}`}
      ref={handleRef}
      type="checkbox"
      checked={checked}
      aria-label={`Checkbox for ${String(data.label)}`}
      onChange={onChange}
    />
  )
}

const ItemsList = ({
  children,
  ...restProps
}: React.PropsWithChildren<TreeItemsListProps>): React.ReactElement | null => {
  return (
    <ul role="group" data-test-id="group-items-list" {...restProps}>
      {children}
    </ul>
  )
}

const Node = (props: TreeNodeProps): React.ReactElement | null => {
  if (!DefaultNode) {
    return null
  }

  return (
    <div data-test-id={props.nodeKey}>
      <DefaultNode {...props} />
    </div>
  )
}

const updateTreeData = (
  existingNodes: TreeItem[],
  key: React.Key,
  newChildren: TreeItem[]
): TreeItem[] =>
  existingNodes.map((node) => {
    if (node.key === key) {
      return {
        ...node,
        children: newChildren,
      }
    }
    if (node.children) {
      return {
        ...node,
        children: updateTreeData(node.children, key, newChildren),
      }
    }

    return node
  })

const delay = (time: number): Promise<void> => {
  return new Promise((resolve) => setTimeout(resolve, time))
}

export const TreeCustomComponents: React.FC = () => {
  const [dataSourceForLoading, setDataSourceForLoading] =
    React.useState(dataSource)

  const handleLoadData = async (item: TreeNodeItem<TreeItem>) => {
    await delay(1000)

    const newTree = updateTreeData(dataSourceForLoading, item.key, [
      {
        key: `${item.key}-0`,
        label: `${item.key}-0`,
      },
      {
        key: `${item.key}-1`,
        label: `${item.key}-1`,
        loadable: true,
        children: [
          {
            key: `${item.key}-1-0`,
            label: `${item.key}-1-0`,
          },
        ],
      },
    ])
    setDataSourceForLoading(newTree)
  }

  return (
    <Tree
      checkable
      showIcons
      components={{
        Checkbox,
        Content,
        Icon,
        ExpandButton,
        ExpandIcon,
        LoadingIndicator,
        TreeMain,
        Item,
        ItemsList,
        Node,
      }}
      dataSource={dataSourceForLoading}
      onLoadData={handleLoadData}
    />
  )
}