pc-admin/src/components/DragableUploadImageList/Item.jsx

import React from 'react'
import { Icon } from 'antd'

export default (props) => {
    const { dataset = {}, onPreview, onDelete, onClick, onSticky } = props
    const { url } = dataset

    const handlePreview = () => {
        onPreview && onPreview(dataset)
    }

    const handleDelete = () => {
        onDelete && onDelete(dataset)
    }

    const handleClick = () => {
        return onClick ? onClick(dataset) : null
    }

    const handleSticky = () => {
        onSticky && onSticky(dataset)
    }

    return (
        <div className="ant-upload-list-picture-card-container">
            <span>
                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
                    <div className="ant-upload-list-item-info">
                        <span>
                            <a className="ant-upload-list-item-thumbnail" href={url} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
                                <img className="ant-upload-list-item-image" src={url} alt="image" />
                            </a>
                        </span>
                    </div>

                    <span className="ant-upload-list-item-actions">
                        <Icon type="vertical-align-top" className="anticon anticon-eye-o" onClick={handleSticky} />
                        <Icon type="eye" className="anticon anticon-eye-o" onClick={handlePreview} />
                        <Icon type="delete" onClick={handleDelete} />
                    </span>
                </div>
            </span>
        </div>
    )
}