jc-biz-components/components/media-item/index.js

jc component library based on Antd

import React from 'react'
import { isArray } from '../_utils/lang'
import { showModalWrapper } from '../modal/ModalWrapper'

function handlePreview(url) {
  const html = <img alt='preview' style={{ width: '100%' }} src={url} />
  showModalWrapper(html)
}

const JcMedia = ({ url, thumbUrl, onPreview }) => {
  const preview = e => {
    e.preventDefault()
    onPreview(url)
  }
  return (
    <div className='ant-upload-list ant-upload-list-picture-card'>
      <div className='ant-upload-list-item ant-upload-list-item-undefined' style={{ marginTop: 8 }}>
        <div className='ant-upload-list-item-info'>
          <span>
            <a className='ant-upload-list-item-thumbnail' href={url} target='_blank' rel='noopener noreferrer'>
              <img src={thumbUrl || url} />
            </a>
            <a href={url} target='_blank' rel='noopener noreferrer' className='ant-upload-list-item-name' />
          </span>
        </div>
        <span className='ant-upload-list-item-actions'>
          <a onClick={preview} rel='noopener noreferrer' title='预览文件'>
            <i className='anticon anticon-eye-o' />
          </a>
        </span>
      </div>
    </div>
  )
}

// medias == urls
const MediaItem = ({ mediaType = 'image', medias, onPreview = handlePreview }) => {
  const renderImages = () => {
    if (medias) {
      if (isArray(medias) && medias.length > 0) {
        return medias.map((item, index) => {
          return <JcMedia key={index} url={item} thumbUrl={item} onPreview={url => onPreview({ url })} />
        })
      }
    } else {
      return <p>暂无数据</p>
    }
  }

  const renderVideo = () => {
    if (medias && medias.length > 0) {
      return <JcMedia url={medias} thumbUrl={medias + '?vframe/jpg/offset/3'} onPreview={url => onPreview({ url })} />
    } else {
      return <p>暂无数据</p>
    }
  }
  return <div>{mediaType === 'image' ? renderImages() : renderVideo()}</div>
}

export default MediaItem