|
@@ -0,0 +1,101 @@
|
|
|
+import { Popover, Space } from 'antd'
|
|
|
+import React, { useMemo } from 'react'
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ creativeComponents: {
|
|
|
+ brand?: {
|
|
|
+ value: {
|
|
|
+ brandName: string
|
|
|
+ }
|
|
|
+ }[],
|
|
|
+ description?: {
|
|
|
+ value: {
|
|
|
+ content: string
|
|
|
+ }
|
|
|
+ }[],
|
|
|
+ video?: {
|
|
|
+ value: {
|
|
|
+ videoUrl: string
|
|
|
+ }
|
|
|
+ }[],
|
|
|
+ image?: {
|
|
|
+ value: {
|
|
|
+ imageUrl: string
|
|
|
+ }
|
|
|
+ }[]
|
|
|
+ }
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 预览
|
|
|
+ */
|
|
|
+const BoxOther: React.FC<Props> = ({ creativeComponents }) => {
|
|
|
+
|
|
|
+
|
|
|
+ let el = useMemo(() => {
|
|
|
+ let video = creativeComponents?.video?.[0]?.value?.videoUrl
|
|
|
+ let imageUrl = creativeComponents?.image
|
|
|
+ let titles = creativeComponents?.brand
|
|
|
+ let descriptions = creativeComponents?.description
|
|
|
+ if (video) {
|
|
|
+ return <div>
|
|
|
+ <Popover
|
|
|
+ placement='right'
|
|
|
+ content={<div>
|
|
|
+ {titles && titles?.length > 0 && <Space direction="vertical">
|
|
|
+ {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
|
|
|
+ </Space>}
|
|
|
+ {descriptions && descriptions?.length > 0 && <Space direction="vertical">
|
|
|
+ {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{item?.value?.content}</small>)}
|
|
|
+ </Space>}
|
|
|
+ <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
|
|
|
+ <video src={video} style={{ width: 250 }} controls />
|
|
|
+ </Space>
|
|
|
+ </div>}
|
|
|
+ destroyTooltipOnHide
|
|
|
+ mouseEnterDelay={0.5}
|
|
|
+ >
|
|
|
+ <Space style={{ width: '100%' }}>
|
|
|
+ <video src={video} style={{ maxHeight: 18, maxWidth: 25 }} />
|
|
|
+ <span>{titles?.[0]?.value?.brandName}</span>
|
|
|
+ </Space>
|
|
|
+ </Popover>
|
|
|
+ </div>
|
|
|
+ } else if (imageUrl && imageUrl?.length > 0) {
|
|
|
+ return <Popover
|
|
|
+ placement='right'
|
|
|
+ content={<div
|
|
|
+ style={{ maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}
|
|
|
+ >
|
|
|
+ <Space direction="vertical">
|
|
|
+ {titles && titles?.length > 0 && <Space direction="vertical">
|
|
|
+ {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
|
|
|
+ </Space>}
|
|
|
+ {descriptions && descriptions?.length > 0 && <Space direction="vertical">
|
|
|
+ {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{item?.value?.content}</small>)}
|
|
|
+ </Space>}
|
|
|
+ <Space wrap style={{ maxWidth: 500 }}>
|
|
|
+ {imageUrl?.map((item, index) => <img key={index} src={item?.value?.imageUrl} height={100} />)}
|
|
|
+ </Space>
|
|
|
+ </Space>
|
|
|
+ </div>}
|
|
|
+ destroyTooltipOnHide
|
|
|
+ mouseEnterDelay={0.5}
|
|
|
+ >
|
|
|
+ {imageUrl?.[0]?.value?.imageUrl ? <img src={imageUrl?.[0]?.value?.imageUrl} height={18} /> : <span>无图片地址</span>}
|
|
|
+ </Popover>
|
|
|
+ } else if (titles && titles?.length > 0) {
|
|
|
+ return <span>{titles?.[0]?.value?.brandName}</span>
|
|
|
+ } else if (descriptions && descriptions?.length > 0) {
|
|
|
+ return <span>{descriptions?.[0]?.value?.content}</span>
|
|
|
+ } else {
|
|
|
+ return <span>--</span>
|
|
|
+ }
|
|
|
+
|
|
|
+ }, [creativeComponents])
|
|
|
+
|
|
|
+ return <div style={{ overflow: 'hidden', overflowX: 'auto' }}>
|
|
|
+ {el}
|
|
|
+ </div>
|
|
|
+}
|
|
|
+
|
|
|
+export default React.memo(BoxOther)
|