qm-bus/src/GalleryBox/components/GalleryBody.js

千米公有云业务组件库

import React, { Component } from 'react'
import { Row, Col, Button, Spin } from 'antd'
import { Relax } from 'iflux2'
import { QMIcon } from 'qm-ui'
import { ScrollPagination, Gallery } from 'qm-ux'

import PictureItem from './PictureItem'
import Search from './Search'
import ToolBar from './ToolBar'
import GalleryTable from './GalleryTable'
import { limitQL, scopeQL, fileTypeQL } from '../ql'
import MobileImageUpload from './MobileImageUpload'

const noop = () => { }

@Relax
export default class GalleryBody extends Component {
  static defaultProps = {
    limit: limitQL,
    netLoading: false,
    scope: scopeQL,
    fileType: fileTypeQL,

    close: noop,
    expand: noop,
    uploadSwitch: noop,
    switchview: noop,
  }

  state = {
    visible: false,
    interval: null,
  }

  _onUploadEnable() {
    this.props.uploadSwitch(true)
  }

  uploadMobile = () => {
    this.setState({ visible: true })
  }

  componentDidMount() {
    var that = this
    if (window.Server) {
      var interval = setInterval(() => {
        that.setState({ hash: Math.random() })
      }, 10000)

      this.setState({ interval })
    }
  }

  componentWillUnmount() {
    if (this.state.interval) {
      clearInterval(this.state.interval)
    }
  }

  handleCancel = () => {
    this.setState({ visible: false })
  }

  render() {
    let { fileType: type, scope, switchview, JudgementPlatform } = this.props
    const isPersonal = scope === 'personal'
    let url = isPersonal
      ? `api/user/gallery/item/list?fileType=${type}&cateFilter=true`
      : `api/gallery/item/list?fileType=${type}&cateFilter=true`
    let stylePadding = isPersonal ? { paddingLeft: 0 } : {}
    let { hash } = this.state
    return (
      <div className="picture-container" style={stylePadding}>
        <GalleryTable netHost="v_app_api" netUrl={url} ref="dataView" hash={hash}>
          <Row className="table-toolbar">
            <Col span={16}>
              <Button
                type="primary"
                onClick={() => {
                  JudgementPlatform ? this.uploadMobile() : switchview('upload')
                }}>
                <QMIcon type="upload" /> {JudgementPlatform ? '手机上传' : '点击上传'}
              </Button>
              <ToolBar />
            </Col>
            <Search />
          </Row>
          <Spin tip="加载中..." spinning={this.props.netLoading}>
            <ScrollPagination size="12" className="picture-main" height={390}>
              <Gallery span={6} emptyTip="啥都没有, 您还未上传图片或视频!">
                <PictureItem key="item" onClick={this.props.expand} limit={this.props.limit} />
              </Gallery>
            </ScrollPagination>
          </Spin>
        </GalleryTable>

        {JudgementPlatform && (
          <MobileImageUpload
            title="上传商品图片"
            visible={this.state.visible}
            cancel={this.handleCancel}
          />
        )}
      </div>
    )
  }
}