qc-EnterpriseWeChat-Pro/src/pages/weComTask/components/materialMould/contentBox.tsx

import React, { useState } from "react"
import { Button, Popover, Space, Tag } from "antd"
import { PlusOutlined, EditOutlined, DeleteOutlined, DownOutlined, UpOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { MediaContentProps, MediaTypeProps } from "../../API/weMaterial/weMaterial";
import TextNews from "../newsMould/textNews";
import style from './index.less'
import useNewToken from "@/Hook/useNewToken";
import ImgNews from "../newsMould/imgNews";
import UploadButton, { MediaSize } from "./uploadButton";
import FileNews from "../newsMould/fileNews";
import VideoNews from "../newsMould/videoNews";
import { RcFile } from "antd/es/upload";
import AudioNews from "../newsMould/audioNews";
import LinkNews from "../newsMould/linkNews";
import MiniprogramNews from "../newsMould/miniprogramNews";

interface Props {
    data: MediaContentProps[]
    onChange?: (item: MediaContentProps | string, index: number, type: 'add' | 'edit' | 'del' | 'up' | 'down' | 'upV' | 'downV', mediaType?: MediaTypeProps | 'sck', file?: RcFile, name?: string) => void,
    noShowType?: Array<'text' | 'video' | 'file' | 'link' | 'voice' | 'miniprogram' | 'sck' | 'image'>,
    textCount?: number,  // 可选文案数量
    dataLength: number
    mediaSize?: MediaSize
    disabledAdd?: boolean
}
// 
/**
 * 素材库使用内容模板
 * @returns 
 */
const ContentBox: React.FC<Props> = ({ data, onChange, noShowType, dataLength, mediaSize, textCount, disabledAdd }) => {

    /****************************/
    const { token } = useNewToken()
    const [hover, setHover] = useState(-1)
    /****************************/

    // 鼠标移入
    const hoverIn = (index: number) => {
        setHover(index)
    }
    // 鼠标移出
    const hoverOut = () => {
        setHover(-1)
    }

    // 点击按钮
    const clickHandle = (item: MediaContentProps | string, index: number, type: 'add' | 'edit' | 'del' | 'up' | 'down' | 'upV' | 'downV', mediaType?: MediaTypeProps | 'sck', file?: RcFile, name?: string) => {
        onChange?.(item, index, type, mediaType, file, name)
    }

    return <>
        {data?.filter(item => textCount ? item.mediaType !== 'text' : true)?.map(((item, index) => {
            return <div
                key={index}
                onMouseEnter={() => { hoverIn(index) }}
                onMouseLeave={hoverOut}
                style={{
                    background: hover === index ? token.colorPrimaryBgHover : token.colorBgContainerDisabled,
                    borderRadius: token.borderRadius
                }}
            >
                <div className={style.left}>
                    <Tag style={{ borderRadius: '50%' }} color={token.colorPrimaryHover}>{index + 1}</Tag>
                    {item?.mediaType === 'text' ? <div key={index}><TextNews style={{ marginBottom: 0 }} strong msg={item?.textContent || ''} /></div>
                        : item?.mediaType === 'image' ? <div key={index}><ImgNews src={item?.imageUrl} preview /></div>
                            : item?.mediaType === 'video' ? <div key={index}><VideoNews src={item?.videoUrl} preview /></div>
                                : item?.mediaType === 'voice' ? <div key={index}><AudioNews url={item?.voiceUrl} times={item.mediaPlayTime} /></div>
                                    : item?.mediaType === 'miniprogram' ? <div key={index}><MiniprogramNews {...item} /></div>
                                        : item?.mediaType === 'link' ? <div key={index}><LinkNews width={240} isBlank content={{ url: item.linkUrl as string, title: item.linkTitle as string, desc: item.linkDesc as string, cover: item.linkPicurl as string }} /></div>
                                            : item?.mediaType === 'file' ? <div key={index}><FileNews fileName={item?.fileName} fileSize={item.mediaSize} fileUrl={item.fileUrl} /></div>
                                                : null}
                </div>
                <div style={{ opacity: hover === index ? 1 : 0 }} className={style.right}>
                    <Space wrap>
                        {(data.length < dataLength && !disabledAdd) && <Popover
                            placement="topRight"
                            content={<Space wrap>
                                {!(noShowType?.some(i => i === 'text')) && !textCount && <Button disabled={data.length === dataLength} onClick={() => { 
                                    clickHandle(item, index, 'add', 'text')
                                 }}>文字</Button>}
                                {!(noShowType?.some(i => i === 'image')) && <UploadButton mediaSize={mediaSize} text="图片" disabled={data.length === dataLength} type='image' onChange={(url, file, name) => {
                                    clickHandle(url, index, 'add', 'image', file, name)
                                }} />}
                                {!(noShowType?.some(i => i === 'video')) && <UploadButton mediaSize={mediaSize} text="视频" disabled={data.length === dataLength} type='video' tooltip="发送视频传送比较耗时，如果发送消息间隔设置又较短，可能会出现消息乱序，所以视频尽量压缩小一点" onChange={(url, file, name) => {
                                    clickHandle(url, index, 'add', 'video', file, name)
                                }} />}
                                {!(noShowType?.some(i => i === 'file')) && <UploadButton mediaSize={mediaSize} text="文件" disabled={data.length === dataLength} type='file' onChange={(url, file, name) => {
                                    clickHandle(url, index, 'add', 'file', file, name)
                                }} />}
                                {!(noShowType?.some(i => i === 'link')) && <Button disabled={data.length === dataLength} onClick={() => { clickHandle(item, index, 'add', 'link') }}>链接</Button>}
                                {/* {!(noShowType?.some(i => i === 'voice')) && <UploadButton mediaSize={mediaSize} text="语音" disabled={data.length === dataLength} type='voice' onChange={async (url, file, name) => {
                                    clickHandle(url, index, 'add', 'voice', file, name)
                                }} />} */}
                                {!(noShowType?.some(i => i === 'miniprogram')) && <Button disabled={data.length === dataLength} onClick={() => { clickHandle(item, index, 'add', 'miniprogram') }}>小程序</Button>}
                                {!(noShowType?.some(i => i === 'sck')) && <Button disabled={data.length === dataLength} onClick={() => { clickHandle(item, index, 'add', 'sck') }}>素材库</Button>}
                            </Space>}
                            color={token.colorBgBase}
                        >
                            <Button size="small"><PlusOutlined /></Button>
                        </Popover>}
                        {['image', 'video', 'file', 'voice'].includes(item?.mediaType as any) ? <UploadButton
                            text={<EditOutlined />}
                            mediaSize={mediaSize}
                            type={item?.mediaType}
                            size="small"
                            onChange={(url, file) => {
                                clickHandle(url, index, 'edit', item?.mediaType, file)
                            }}
                        /> : <Button size="small" onClick={() => clickHandle(item, index, 'edit', item?.mediaType)}><EditOutlined /></Button>}
                        {!disabledAdd && <Button size="small" onClick={() => clickHandle(item, index, 'del', item?.mediaType)}><DeleteOutlined /></Button>}
                        {data.length > 1 && <>
                            {data.length !== index + 1 && <>
                                <Button size="small" onClick={() => clickHandle(item, index, 'down', item?.mediaType)}><DownOutlined /></Button>
                                <Button size="small" onClick={() => clickHandle(item, index, 'downV', item?.mediaType)}><VerticalAlignBottomOutlined /></Button>
                            </>}
                            {index !== 0 && <>
                                <Button size="small" onClick={() => clickHandle(item, index, 'up', item?.mediaType)}><UpOutlined /></Button>
                                <Button size="small" onClick={() => clickHandle(item, index, 'upV', item?.mediaType)}><VerticalAlignTopOutlined /></Button>
                            </>}
                        </>}
                    </Space>
                </div>
            </div>
        }))}
    </>
}

export default React.memo(ContentBox)