cuz/src/components/IndexGroup/index.js

Front-end modular development kit.

import React from 'react';
import Checkbox from './Checkbox';
import { Col, Row } from '../Grid';

const CheckboxGroup = React.createClass({
  propTypes: {
    data: React.PropTypes.array,
    col: React.PropTypes.number,
    max: React.PropTypes.number,
    onSelect: React.PropTypes.func,
    children: React.PropTypes.any,
  },

  getDefaultProps() {
    return {
      data: []
    };
  },

  handleChange(item, event) {
    const { onSelect } = this.props;
    const { groupNum, index } = item;
    const data = this.state === null ? this.props.data.concat() : this.state.data.concat();
    let checkedNum = 0;
    let isMax = false;
    if (this.state === null) {
      data.map((group) => {
        group.items.map((dataitem) => {
          if (dataitem.checked === true) checkedNum++;
        });
      });
    } else {
      checkedNum = this.state.checkedNum;
    }
    const checked = event.target.checked;
    const selectedArray = [];
    if (checked) checkedNum++;
    else checkedNum--;
    if (checkedNum > this.props.max) {
      data[groupNum].items[index].checked = !checked;
      checkedNum--;
      isMax = true;
    } else {
      item.checked = checked;
      data[groupNum].items[index].checked = checked;
    }
    this.setState({
      data,
      checkedNum,
    });
    data.map((group) => {
      group.items.map((dataitem) => {
        if (dataitem.checked === true) selectedArray.push(dataitem);
      });
    });
    if (onSelect) {
      onSelect(item, selectedArray, isMax, data);
    }
  },

  renderCheckboxItem(items, groupNum) {
    const checkboxItem = [];
    const data = this.state === null ? this.props.data : this.state.data;
    items.map((item, index) => {
      checkboxItem.push(
        <Col key={index} sm={this.props.col}>
          <Checkbox
            type="checkbox"
            { ...item }
            groupNum={groupNum}
            index={index}
            checked={data[groupNum].items[index].checked}
            onSelect={this.handleChange} />
        </Col>
      );
    });
    return checkboxItem;
  },

  renderCheckboxGroup() {
    const { data } = this.props;
    const checkboxGroup = [];
    data.map((item, index) => {
      checkboxGroup.push(
        <div key={index} className="checkbox-group">
          <div className="checkbox-group-title">{item.type}</div>
          <div className="checkbox-group-container">
            <Row>
              {this.renderCheckboxItem(item.items, index)}
            </Row>
          </div>
        </div>
      );
    });
    return checkboxGroup;
  },

  render() {
    return (
      <div className="checkbox-container">
      {this.renderCheckboxGroup()}
      </div>
    );
  }
});

export default CheckboxGroup;