@krowdy-ui/views/MultiCheckBox/MultiCheckBox.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _core = require("@krowdy-ui/core");

var _lab = require("@material-ui/lab");

var _icons = require("@material-ui/icons");

var _clsx = _interopRequireDefault(require("clsx"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var styles = {
  containerPaper: {
    padding: 12,
    width: 300
  },
  flex: {
    alignItems: 'center',
    display: 'flex'
  },
  pointer: {
    cursor: 'pointer'
  }
};
exports.styles = styles;

var _ref4 = /*#__PURE__*/_react["default"].createElement(_icons.ArrowDropDown, null);

var _ref5 = /*#__PURE__*/_react["default"].createElement(_icons.ArrowDropDown, null);

var _ref7 = /*#__PURE__*/_react["default"].createElement(_icons.ArrowDropUp, null);

var MultiCheckBox = function MultiCheckBox(_ref) {
  var options = _ref.options,
      _ref$onChange = _ref.onChange,
      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
      label = _ref.label,
      classes = _ref.classes,
      expandAllDefault = _ref.expandAllDefault;

  var _React$useState = _react["default"].useState(null),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      anchorEl = _React$useState2[0],
      setAnchorEl = _React$useState2[1];

  var _handleClick = function _handleClick(event) {
    return options.length && setAnchorEl(event.currentTarget);
  };

  var handleClose = function handleClose() {
    setAnchorEl(null);
  };

  var open = Boolean(anchorEl);

  var _handleClickCheckBox = function _handleClickCheckBox(e) {
    return e.stopPropagation();
  };

  var _handleClickOption = function _handleClickOption(key) {
    return function (_ref2) {
      var checked = _ref2.target.checked;
      var newOptions = options.map(function (option) {
        var isOptionSelected = option.key === key;
        if (isOptionSelected) return (0, _extends2["default"])({}, option, {
          checked: checked,
          subOptions: option.subOptions.map(function (subOption) {
            return (0, _extends2["default"])({}, subOption, {
              checked: checked
            });
          })
        });
        var isSubOptionSelected = option.subOptions.some(function (subOption) {
          return subOption.key === key;
        });
        if (!isSubOptionSelected) return option;
        var newSubOptions = option.subOptions.map(function (subOption) {
          if (subOption.key !== key) return subOption;
          return (0, _extends2["default"])({}, subOption, {
            checked: checked
          });
        });
        return (0, _extends2["default"])({}, option, {
          checked: newSubOptions.every(function (_ref3) {
            var checked = _ref3.checked;
            return checked;
          }),
          subOptions: newSubOptions
        });
      });
      onChange(newOptions);
    };
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.flex, classes.pointer),
    onClick: _handleClick
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    variant: "h6"
  }, label), _ref4), /*#__PURE__*/_react["default"].createElement(_core.Popover, {
    anchorEl: anchorEl,
    anchorOrigin: {
      horizontal: 'right',
      vertical: 'top'
    },
    onClose: handleClose,
    open: open,
    transformOrigin: {
      horizontal: 'center',
      vertical: 'bottom'
    }
  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
    className: classes.containerPaper
  }, /*#__PURE__*/_react["default"].createElement(_lab.TreeView, {
    defaultCollapseIcon: _ref5,
    defaultExpanded: expandAllDefault ? options.map(function (_ref6) {
      var key = _ref6.key;
      return key;
    }) : undefined,
    defaultExpandIcon: _ref7
  }, options.map(function (option) {
    var key = option.key,
        subOptions = option.subOptions,
        label = option.label;
    return /*#__PURE__*/_react["default"].createElement(_lab.TreeItem, {
      key: key,
      label: /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.flex
      }, /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
        checked: option.checked,
        color: "primary",
        onChange: _handleClickOption(option.key),
        onClick: _handleClickCheckBox,
        size: "small"
      }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
        variant: "h6"
      }, label)),
      nodeId: key
    }, subOptions && subOptions.map(function (subOption) {
      var key = subOption.key,
          label = subOption.label;
      return /*#__PURE__*/_react["default"].createElement(_lab.TreeItem, {
        key: key,
        label: /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.flex
        }, /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
          checked: subOption.checked,
          color: "primary",
          onChange: _handleClickOption(subOption.key),
          onClick: _handleClickCheckBox,
          size: "small"
        }), /*#__PURE__*/_react["default"].createElement(_core.Typography, null, label)),
        nodeId: key
      });
    }));
  })))));
};

process.env.NODE_ENV !== "production" ? MultiCheckBox.propTypes = {
  classes: _propTypes["default"].object,
  label: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    checked: _propTypes["default"].bool,
    key: _propTypes["default"].string,
    label: _propTypes["default"].string,
    subOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      checked: _propTypes["default"].bool,
      key: _propTypes["default"].string,
      label: _propTypes["default"].string
    }))
  }))
} : void 0;

var _default = (0, _core.withStyles)(styles, {
  name: 'MultiCheckBox'
})(MultiCheckBox);

exports["default"] = _default;