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

千米公有云业务组件库

import React, { Component } from 'react'
import { Checkbox } from 'antd'
import { QMImg, QMIcon } from 'qm-ui'
import { fromJS } from 'immutable'

export default class PicItem extends Component {
  static defaultProps = {
    submit: () => undefined,
  }

  constructor(props) {
    super(props)
  }

  render() {
    let _item = this.props.value.toJS()
    let { limit, cellSelected: _selects } = this.props
    let _checked = _selects.has(_item.id)
    let _cateProps = {}
    if (_item.isCate == 1) {
      _cateProps.onClick = this._onCateClick.bind(this, _item)
    } else {
      _cateProps.onClick =
        _selects.size >= limit && !_checked ? () => { } : this.onSelect.bind(this, _item)
    }
    let disabledProps = {}
    if (_selects.size >= limit && !_checked) {
      disabledProps = { disabled: true }
    }
    return (
      <div className={_checked ? 'picture-item checked' : 'picture-item'} {..._cateProps}>
        <Items item={_item} />

        <h6 className="img-title" title={_item.name}>
          {_item.name}
        </h6>
        {_item.isCate == 1 ? null : (
          <Checkbox className="img-checkbox" checked={_checked} {...disabledProps} />
        )}
      </div>
    )
  }

  /**
   * 勾选
   */
  onSelect = item => {
    let { cellSelected, onCellSelect } = this.props
    let _selects = cellSelected
    if (_selects.has(item.id)) {
      _selects = _selects.delete(item.id)
    } else {
      _selects = _selects.set(item.id, fromJS(item))
    }
    onCellSelect(_selects)
  }

  /**
   *
   * @param {*} _item
   */
  _onCateClick(_item) {
    this.props.onClick(_item.id)
    this.props.onFormReset('simple')
    this.props.elementOnChange({
      index: 'cateId',
      source: { index: 'cateId', value: _item.id, group: 'simple' },
    })
    this.props.onRefresh()
  }
}

/**
 * Image
 */
class Items extends React.Component {
  static defaultProps = {
    item: {},
    preview: () => { },
  }
  render() {
    const { item, click, preview } = this.props
    if (item.isCate === '1') {
      // folder
      return (
        <div className="img-shape" data-gh-name="进入文件夹" onClick={() => click(item)}>
          <div className="img-box">
            <span className="empty" />
            <img src="//pic.qianmi.com/qmui/v0.2/img/folder.png" />
          </div>
        </div>
      )
    }

    if (item.fileType === 'video') {
      // video
      return (
        <div className="img-shape" onClick={() => preview(item)}>
          <div className="video-box">
            <video src={QMImg.src({ src: item.path })} preload="metadata" />
          </div>
          <div className="video-play">
            <QMIcon type="qidong" style={{ color: '#fff' }} />
          </div>
        </div>
      )
    } else {
      // image
      return (
        <div className="img-shape" onClick={() => preview(item)}>
          <div className="img-box">
            <QMImg src={item.path} />
          </div>
        </div>
      )
    }
  }
}