qm-bus/src/GalleryBox/index.js

千米公有云业务组件库

import './style/index.less'

import React, { Component } from 'react'
import { StoreProvider, Relax } from 'iflux2'

import AppStore from './store'
import { uploadQL, cellSelectQL } from './ql'
import GalleryPanel from './components/GalleryComponent'
import UploaderPanel from './components/Uploader'
import ProtocolPanel from './components/protocol-panel'
import Operation from './components/Operation'

@StoreProvider(AppStore)
@Relax
export default class GalleryBox extends Component {
  static defaultProps = {
    fileType: 'pic', // all | pic | video
    limit: 10, // 文件数量限制
    pic_rule: {
      limit: 10, // 图片数量限制
      size: 2, // 文件大小限制
      filetype: 'jpeg,jpg,gif,png', // 支持的文件类型
      msg: ({ limit, size, filetype }) =>
        `图片格式仅支持：${filetype}，且一次最多上传 ${limit}张，每张不能超过 ${size}MB！`,
    },
    video_rule: {
      limit: 5, // 视频数量限制
      size: 200, // 文件大小限制
      filetype: 'mp4,avi,rmvb', // 支持的文件类型
      msg: ({ limit, size, filetype }) =>
        `视频格式仅支持：${filetype}，且一次最多上传 ${limit}个，每个不能超过 ${size}MB！`,
    },
    scope: 'shop',
    selects: cellSelectQL, //
    upload: uploadQL, //
    view: 'selector', // 视图类型：selector | upload | protocol
    set: _ => _,
    setTitle: () => {}, // 修改标题
  }

  componentWillMount() {
    let { limit, scope, fileType } = this.props
    this.props.set({ limit, scope, fileType })
  }

  componentWillReceiveProps(nextProps) {
    const { setTitle } = this.props
    const { view } = nextProps
    if (setTitle && typeof setTitle === 'function') {
      const str = {
        selector: '选择文件',
        upload: '选择文件上传',
        protocol: '媒体素材上传服务协议',
      }
      setTitle(str[view])
    }
  }

  render() {
    const {
      view,
      videoSize,
      limit,
      pic_rule,
      video_rule,
      JudgementPlatform,
      uploadMobile,
    } = this.props
    return (
      <div>
        <div className="modal-wrapper" style={{ overflow: 'auto', display: '-webkit-box' }}>
          <div style={{ width: '98%', display: view === 'selector' ? 'block' : 'none' }}>
            <GalleryPanel JudgementPlatform={JudgementPlatform} uploadMobile={uploadMobile} />
          </div>
          <div style={{ width: '98%', display: view === 'upload' ? 'block' : 'none' }}>
            <UploaderPanel
              type={this.props.fileType}
              scope={this.props.scope}
              videoSize={videoSize}
              limit={limit}
              pic_rule={pic_rule}
              video_rule={video_rule}
            />
          </div>
          <div style={{ width: '98%', display: view === 'protocol' ? 'block' : 'none' }}>
            <ProtocolPanel />
          </div>
        </div>
        <Operation onClose={this.props.close} onSave={this.onSave} />
      </div>
    )
  }

  onSave = () => this.props.close(this.props.selects.map((v, k) => v.toJS()).toArray())
}