custom antd upload itemRender

antd-upload-retry.ts

// i tried to add retry button on antd upload list
// but no easy way to do it
// so i hack it in the following way
// the idea is interesting because i am kind of "modifying" React Node children

import produce from "immer"

const itemRender = (originNode: React.ReactElement, file: UploadFile, fileList: UploadFile[]) => {
  if(file.status === "error") {
    const {prefix} = this.props
    const targetNode = findReactChildNode(originNode, n => n?.props?.className === "ant-upload-span")
    const remoteFilename = prefix? prefix + "/" + file.name: file.name
    const children = React.Children.toArray(targetNode?.props?.children)
        children.push(<span
          key="retry"
          >
          <Loading3QuartersOutlined onClick={() => {
            file.status = "uploading"
            this.upload(remoteFilename, file.originFileObj!)
          }} />
        </span>)
    return produce(originNode, newNode => {
      const node = findReactChildNode(newNode, n => n?.props?.className === "ant-upload-span")
      if(node) {
        node.props.children = children
      }
    })
  }
  return originNode
}
          
export const findReactChildNode = (parentNode: React.ReactElement<any>, f: (node: React.ReactElement) => boolean, limit?: number): React.ReactElement<any> | undefined => {
  let tryLimit = limit === undefined?  1000: limit
  const queue = new Queue<React.ReactElement<any>>()
  queue.enqueue(parentNode)

  while (queue.length() && tryLimit) {
    const node = queue.dequeue()
    tryLimit --
    if(f(node) && (node !== parentNode)) {
      return node
    }
    node?.props?.children && React.Children.forEach(node.props.children, child => {
      queue.enqueue(child)
    })
  }
}          

@zhy0216 which library do you use for Queue ? Or it is your custom implementation?

@zhy0216 which library do you use for Queue ? Or it is your custom implementation?

custom implementation
you can use an array with a cursor to simualte it.