@shakthillc/components/es/CheckBoxGroup/CheckBoxGroup.js

React generic components for shakthi products

import _Object$assign from "babel-runtime/core-js/object/assign";
import _Object$keys from "babel-runtime/core-js/object/keys";
import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import PropTypes from "prop-types";
import style from "./CheckBoxGroup.module.css";

var CheckBoxGroup = function (_React$Component) {
  _inherits(CheckBoxGroup, _React$Component);

  function CheckBoxGroup(props) {
    _classCallCheck(this, CheckBoxGroup);

    var _this = _possibleConstructorReturn(this, (CheckBoxGroup.__proto__ || _Object$getPrototypeOf(CheckBoxGroup)).call(this, props));

    _this.state = {
      isChecked: []
    };
    _this.onChange = _this.onChange.bind(_this);
    return _this;
  }

  _createClass(CheckBoxGroup, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var options = this.props.options;

      var isChecked = options.map(function (obj) {
        if (_Object$keys(obj).includes("flag")) {
          return obj;
        } else {
          return _Object$assign(obj, { flag: false });
        }
      });
      console.log(isChecked);
      this.setState({ isChecked: isChecked });
    }
  }, {
    key: "onChange",
    value: function onChange(targetFlag, targetValue) {
      var isChecked = this.state.isChecked;
      var onChange = this.props.onChange;

      var modifiedIsChecked = isChecked.map(function (obj) {
        if (obj.value == targetValue) {
          return _Object$assign(obj, { flag: targetFlag });
        } else {
          return obj;
        }
      });
      var returnValue = [];
      isChecked.map(function (obj) {
        if (obj.flag) {
          returnValue.push(obj.value);
        }
      });

      this.setState({
        isChecked: modifiedIsChecked
      });
      onChange && onChange(returnValue);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          disabled = _props.disabled,
          options = _props.options;
      var isChecked = this.state.isChecked;


      var optionHtml = isChecked.map(function (obj, i) {
        return React.createElement(
          "label",
          { key: i, className: style["check-box__each"] },
          obj.label.length > 0 ? obj.label : obj.value,
          React.createElement("input", {
            type: "checkbox",
            name: "checkbox",
            onChange: function onChange(e) {
              return _this2.onChange(e.currentTarget.checked, obj.value);
            },
            checked: obj.flag
          }),
          React.createElement("span", {
            className: style["check-box__checkmark"],
            value: obj.label,
            id: obj.value
          })
        );
      });
      return React.createElement(
        "div",
        { className: style["check-box"] },
        optionHtml
      );
    }
  }]);

  return CheckBoxGroup;
}(React.Component);

export default CheckBoxGroup;


CheckBoxGroup.defaultProps = {
  options: [{ value: "option1", label: "Option 1", flag: true }, { value: "option2", label: "Option 2" }, { value: "option3", label: "Option 3" }, { value: "option4", label: "Option 4", flag: true }],
  onChange: function onChange(data) {
    console.log(data);
  }
};
CheckBoxGroup.propTypes = {
  disabled: PropTypes.bool,
  options: PropTypes.arrayOf({
    value: PropTypes.string,
    label: PropTypes.number
  })
};