bee-table/src/lib/multiSelect.js

Table ui component for react

import React, { Component } from "react";
import {ObjectAssign} from './util';
/**
 * 参数: 过滤表头
 * @param {*} Table
 * @param {*} Checkbox
 * @param {*} Popover
 * @param {*} Icon
 */

export default function multiSelect(Table, Checkbox) {

  return class MultiSelect extends Component {
    static defaultProps = {
      prefixCls: "u-table-mult-select",
      getSelectedDataFunc:()=>{}
    }

    constructor(props) {
      super(props);
      let obj = this.getCheckedOrIndeter(props.data);
      this.state = {
        ...obj,
        data:ObjectAssign(props.data),
      }
    }

    componentWillReceiveProps(nextProps){
      if('data' in nextProps){
        let obj = this.getCheckedOrIndeter(nextProps.data);
        this.setState({
          ...obj,
          data:ObjectAssign(nextProps.data),
        })
      }
    }

    /**
     * @param {*} data 
     */
    getCheckedOrIndeter(data){
      let obj = {};
      let checkStatus = this.setChecked(data);
      if(!checkStatus){
        obj.checkedAll = false;
        obj.indeterminate = false;
        return obj;
      }
      if(checkStatus == 'indeter'){
        obj.indeterminate = true;
        obj.checkedAll = false;
      }else if(checkStatus == 'all'){
        obj.checkedAll = true;
        obj.indeterminate = false;
      }
      return obj;
    }

    /**
     * 判断数据是否全部选中
     * @param {*} data 
     * reutnr  string  all(全选)、indeter(半选)
     */
    setChecked(data){
      if(!this.isArray(data))return false;
      if(data.length == 0)return false;
      let count = 0;
      let disabledCount = 0;
      data.forEach(da=>{
        if(da._checked && !da._disabled){
          count ++;
        }
        if(da._disabled){
          disabledCount ++;
        }
      })

      if(data.length == count + disabledCount && count>0){
        return "all";
      }
      return count == 0?false:"indeter";
    }

    /**
     * 判断是否是数组
     * @param {*} o 
     */
    isArray(o){
        return Object.prototype.toString.call(o)=='[object Array]';
    }


    onAllCheckChange=()=>{
      let {data,checkedAll,indeterminate} = this.state;
      let check = false;
      if(checkedAll){
        check = false;
      }else{
        // if(indeterminate){
        //   check = true;
        // }else{
        //   check = true;
        // }
        check = true;
      }
      let selectList = [];
      
      data.forEach(item => {
        if(!item._disabled){
          item._checked = check;
        }
       
        if(item._checked){
          selectList.push(item);
        }
      });
      if(selectList.length > 0){
        indeterminate = true;
      }else{
        indeterminate = false;
      }
      this.setState({
        indeterminate:indeterminate,
        checkedAll:check
      });
      this.props.getSelectedDataFunc(selectList);
    }

    handleClick=()=>{
      
    }
 
    onCheckboxChange = (text, record, index) => () => {
      let {data} = this.state;
      let selectList = [];
      record._checked = record._checked?false:true;
      let obj = this.getCheckedOrIndeter(data);
      this.setState({
        data:data,
        ...obj
      })
      data.forEach((da)=>{
        if(da._checked){
          selectList.push(da);
        }
      })
      this.props.getSelectedDataFunc(selectList,record,index);
    };

    

    getDefaultColumns=(columns)=>{
      let {checkedAll,indeterminate} = this.state;
      let checkAttr = {checked:checkedAll?true:false};
      const data = this.props.data;
      const dataLength = data.length;
      let disabledCount = 0;
      indeterminate?checkAttr.indeterminate = true:"";
      //设置表头Checkbox是否可以点击
      data.forEach((item,index,arr)=>{
        if(item._disabled){
          disabledCount++;
        }
      })

      let _defaultColumns =[{
          className: 'u-table-multiSelect-column',
          title: (
            <Checkbox
              className="table-checkbox"
              {...checkAttr}
              disabled={disabledCount==dataLength?true:false}
              onChange={this.onAllCheckChange}
            />
          ),
          key: "checkbox",
          dataIndex: "checkbox",
          fixed:"left",
          width: 49, 
          render: (text, record, index) => {
            let attr = {};
            record._disabled?attr.disabled = record._disabled:"";
            return <Checkbox
                key={index}
                className="table-checkbox"
                {...attr}
                checked={record._checked}
                onClick={this.handleClick}
                onChange={this.onCheckboxChange(text, record, index)}
              />
          }
        }]
        return _defaultColumns.concat(columns);
    }

    // 实现行点击时触发多选框勾选的需求
    onRowClick = (record,index,event) =>{
      this.onCheckboxChange('',record, index)();
      if( this.props.onRowClick ){
        this.props.onRowClick(record,index,event);
      }
    }

    render() {
      const {columns} = this.props;
      const {data} = this.state;
      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} onRowClick={this.onRowClick}/>
    }
  };
}