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

千米公有云业务组件库

/**
 * QMSearchForm 通过store与其他组件（table,grid）耦合
 * 
 * @author gcy[of1518]
 * @date 16/10/11
 */
import React, { Component } from 'react'
import { Checkbox, Radio } from 'antd'
import { Relax } from 'iflux2'
import { OrderedMap } from 'immutable'

const RadioButton = Radio.Button
const RadioGroup = Radio.Group

import {
  cellSelectQL,
  allCheckedQL,
  currentDataQL,
  notCheckedQL,
  limitQL,
  selectValueQL,
  fileTypeQL,
} from '../ql'

const noop = () => { }

@Relax
export default class ToolBar extends Component {
  static defaultProps = {
    selects: cellSelectQL,
    onCellSelectedClear: noop,
    allChecked: allCheckedQL,
    onCellSelect: noop,
    currentData: currentDataQL,
    notChecked: notCheckedQL,
    limit: limitQL,
    elementOnChange: noop,
    onFetch: noop,
    selectValue: selectValueQL,
    fileType: fileTypeQL,
  }

  onCheckboxChange(e) {
    let map = OrderedMap({})

    this.props.currentData
      .filter(i => i.get('isCate') != 1)
      .forEach(i => (map = map.set(i.get('id'), i)))
    if (this.props.allChecked) {
      this.props.onCellSelect(this.props.selects.filter((i, k) => !map.has(k)))
    } else {
      this.props.onCellSelect(this.props.selects.merge(map))
    }
  }

  selectText() {
    let _selects = this.props.selects.count()
    let _limit = this.props.limit
    if (_selects <= 0) {
      return '请选择文件'
    }
    if (_selects >= _limit) {
      return '已选中了' + _limit + '个文件,不能选择更多文件'
    }
    return '已选中了' + _selects + '个文件,还能选择' + (_limit - _selects) + '个文件'
  }

  onChange = e => {
    let value = e.target.value
    this.props.elementOnChange({
      index: 'fileType',
      source: { index: 'fileType', value: value, group: 'simple' },
    })
    this.props.onCellSelectedClear()
    this.props.onFetch({ group: 'simple' })
  }


  render() {
    let map = OrderedMap({})
    this.props.currentData
      .filter(i => i.get('isCate') != 1)
      .forEach(i => (map = map.set(i.get('id'), i)))
    let disabledProps = {}

    if (this.props.selects.merge(map).size > this.props.limit) {
      disabledProps = { disabled: true }
    }
    if (this.props.fileType === 'all') {
      return (
        <div className="pusht">
          <RadioGroup
            onChange={this.onChange.bind(this)}
            defaultValue="all"
            size="small"
            className="pushr">
            <RadioButton value="all" checked={this.props.selectValue === 'all' ? 'checked' : ''}>
              全部
            </RadioButton>
            <RadioButton value="pic">图片</RadioButton>
            <RadioButton value="video">视频</RadioButton>
          </RadioGroup>
          <Checkbox
            checked={this.props.allChecked && map.count() > 0}
            indeterminate={!this.props.allChecked && !this.props.notChecked}
            {...disabledProps}
            onChange={this.onCheckboxChange.bind(this)}
          />
          <span style={{ paddingLeft: 0 }}>{this.selectText()}</span>
        </div>
      )
    } else {
      return (
        <span>
          <Checkbox
            checked={this.props.allChecked && map.count() > 0}
            indeterminate={!this.props.allChecked && !this.props.notChecked}
            {...disabledProps}
            onChange={this.onCheckboxChange.bind(this)}
          />
          <span>{this.selectText()}</span>
        </span>
      )
    }
  }
}