72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import { BigImage } from '@zhst/biz'
|
||
import { Space, Switch } from '@zhst/meta'
|
||
import { pick, get } from '@zhst/func'
|
||
import { BIG_IMAGE_DATA, attributeList } from '../mock'
|
||
import Img from './imgs/photo-1503185912284-5271ff81b9a8.webp'
|
||
|
||
const BigModal = (props: any) => {
|
||
const {
|
||
} = props
|
||
const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
|
||
const [showDesc, setShowDesc] = useState(true)
|
||
const [type, setType] = useState('normal')
|
||
const modalRef = useRef(null)
|
||
|
||
return (
|
||
<div style={{ padding: '32px', border: '1px solid #09f' }}>
|
||
<Space>
|
||
<span>显示属性：<Switch value={showDesc} onChange={e => setShowDesc(pre => !pre)} /></span>
|
||
</Space>
|
||
<BigImage
|
||
type={type}
|
||
ref={modalRef}
|
||
width={896}
|
||
viewHeight={'440px'}
|
||
showModeChange
|
||
onTabChange={(newVal) => setType(newVal === '1'? 'normal': 'compater')}
|
||
// ------------ 属性列表 -----------------
|
||
showDescription={showDesc}
|
||
descriptionList={attributeList}
|
||
// ------------ 图片/视频切换 -----------------
|
||
viewTopModeButtonList={[
|
||
{
|
||
key: 'image',
|
||
label: '图片'
|
||
},
|
||
{
|
||
key: 'video',
|
||
label: '视频'
|
||
}
|
||
]}
|
||
modeButtonGroupProps={{
|
||
defaultValue: 'image',
|
||
onChange: e => console.log('模式切换', e)
|
||
}}
|
||
// ------------ 导航功能 -----------------
|
||
showNavigation
|
||
onPrevButtonClick={val => console.log('pre', val)}
|
||
onNextButtonClick={val => console.log('next', val)}
|
||
// ------------ 场景图功能 -----------------
|
||
cropperImageProps={{
|
||
url: Img,
|
||
score: 50,
|
||
odList: get(dataSource, 'odRect', []),
|
||
attachImageData: get(dataSource, 'attachImg', []),
|
||
}}
|
||
// ------------ 对比图模式 -----------------
|
||
combineImageProps={{
|
||
data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
|
||
}}
|
||
// ------------ 视频模块 -----------------
|
||
videoProps={{
|
||
url: get(dataSource, 'flvUrl', '')
|
||
}}
|
||
>
|
||
</BigImage>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default BigModal
|