packages/tree/examples/TreeLoadingError.tsx - develop - Bybaleshqa/Forktest

packages/tree/examples/TreeLoadingError.tsx
134 строки3 KB
Pavel Uryadyshev
fix(tree): оптимизирована работа компонента Tree
11 окт 2024, 11:54
11 окт 2024, 11:548afbdcb
import * as React from 'react'
import {
  Tree,
  TreeItem,
  Modal,
  ModalHeader,
  ModalBody,
  Text,
  ModalFooter,
  Button,
  TreeImperativeHandlersRef,
} from '@v-uik/base'
import { TreeNodeItem } from '../src'

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

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 TreeLoadingError: React.FC = () => {
  const [dataSourceForLoading, setDataSourceForLoading] =
    React.useState(dataSource)
  const [hasError, setHasError] = React.useState(false)

  const treeRef = React.useRef<TreeImperativeHandlersRef | null>(null)

  const lastExpandedItemWithError = React.useRef<TreeNodeItem | null>(null)

  const handleClose = () => {
    setHasError(false)
  }

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

    if (Math.round(Math.random() * 100) < 70) {
      setHasError(true)
      lastExpandedItemWithError.current = item
      throw new Error('Custom error')
    }

    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)

    lastExpandedItemWithError.current = null
  }

  const handleRetry = () => {
    if (!lastExpandedItemWithError.current || !treeRef.current) {
      return
    }
    treeRef.current.toggleExpand(lastExpandedItemWithError.current.key)

    handleClose()
  }

  return (
    <>
      <Tree
        ref={treeRef}
        dataSource={dataSourceForLoading}
        onLoadData={handleLoadData}
      />
      <Modal open={hasError} onClose={handleClose}>
        <ModalHeader
          closeButtonProps={{
            'aria-label': 'Close modal',
          }}
        >
          Error
        </ModalHeader>
        <ModalBody>
          <Text>An error occurred while loading data</Text>
        </ModalBody>
        <ModalFooter>
          <Button kind="outlined" onClick={handleRetry}>
            Try Again
          </Button>
          <Button onClick={handleClose}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </>
  )
}