ad-manage/src/components/ImgPreview/index.tsx

import React, { useCallback } from "react"
import './index.less'
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel'
import { CloseOutlined } from "@ant-design/icons";
import { Button } from "antd";

interface Props {
    data: string[],
    show: boolean,
    hidden: (value: boolean) => void
}

function ImgPreview (props: Props) {
    let {data, show = false, hidden} = props
    const handleHidden = useCallback((e) => {
        e.stopPropagation()
        e.preventDefault()
        hidden(false)
    },[])
    return <div id="imgPreview" style={{display: show && data.length > 0 ? 'block' : 'none'}}>
        <Button type="text" className="close" onClick={(e)=>{handleHidden(e)}}><CloseOutlined /></Button>
        <div className="back" onClick={(e)=>{handleHidden(e)}}></div>
        <Carousel>
            {
                data?.map((item: string, index: number) => <div key={index}>
                    <img src={item} />
                </div>)
            }
        </Carousel>
    </div>
}

export default React.memo(ImgPreview)