qm-ui/src/GalleryUI.js

千米公有云管理端UI基础组件库

/**
 * @author gcy[of1518]
 * @date 16/10/11
 *
 * @description GalleryUI
 */
import React, { Component } from 'react'
import { fromJS, hash } from 'immutable'
import { Row, Col, Icon } from 'antd'

const noop = () => undefined

export default class GalleryUI extends Component {
  static defaultProps = {
    loading: false, //是否加载动画效果

    itemNode: '', //React.element
    dataSource: fromJS([]), //数据数组	Array

    rowKey: '', //行操作主键，若为空则不做选择
    selectType: 'checkout', //行旋转方式，checkout:多选；radio:单选
    cellSelected: fromJS({}), //行选择集合
    cellSelectLimit: fromJS([]), //行操作限制选择列 ，若为Function;则做计算过滤。

    onRefresh: noop, //
    onCellSelect: noop, //
    onDataItemChange: noop,
    requestData: itemData => {},
  }

  constructor(props) {
    super(props)
  }

  onDataItemChange(v, data) {
    this.props.onDataItemChange([v], data ? (data.toJS ? data : fromJS(data)) : data)
    this.forceUpdate()
  }

  render() {
    let {
      itemKey,
      dataSource,
      children,
      onRefresh,
      onCellSelect,
      cellSelected,
      elementOnChange,
      onFormReset,
    } = this.props

    if ((dataSource.toJS ? dataSource.size : dataSource.length) == 0) {
      return (
        <div className="empty-tips">
          <p className="content">
            <Icon type="exclamation-circle" />
            {this.props.emptyTip || '没有搜索到您想要的数据'}
          </p>
        </div>
      )
    }

    let childrenNode = []

    dataSource.forEach((v, k) => {
      let result = null
      let _v = v.toJS ? v : fromJS(v)
      let onDataItemChange = this.onDataItemChange.bind(this, k)
      if (typeof children === 'function') {
        result = (
          <Col
            key={!!itemKey ? _v.get(itemKey) : _v.hashCode()}
            span={String(this.props.span)}
            className={this.props.itemClass}>
            {children({ value: v, onRefresh, onCellSelect, cellSelected, onDataItemChange })}
          </Col>
        )
      } else if (React.isValidElement(children)) {
        result = (
          <Col
            key={!!itemKey ? _v.get(itemKey) : _v.hashCode()}
            span={String(this.props.span)}
            className={this.props.itemClass}>
            {React.cloneElement(children, {
              value: v,
              onRefresh,
              onCellSelect,
              cellSelected,
              onFormReset,
              elementOnChange,
              onDataItemChange,
            })}
          </Col>
        )
      }
      childrenNode.push(result)
    })
    this.props.requestData(this.props.dataSource)

    return <Row className={this.props.className}>{childrenNode}</Row>
  }
}