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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { Typography, Popover, Checkbox, Paper, withStyles } from '@krowdy-ui/core';
import { TreeView, TreeItem } from '@material-ui/lab';
import { ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon } from '@material-ui/icons';
import clsx from 'clsx';
import PropTypes from 'prop-types';
export var styles = {
  containerPaper: {
    padding: 12,
    width: 300
  },
  flex: {
    alignItems: 'center',
    display: 'flex'
  },
  pointer: {
    cursor: 'pointer'
  }
};

var _ref4 = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);

var _ref5 = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);

var _ref7 = /*#__PURE__*/React.createElement(ArrowDropUpIcon, 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.useState(null),
      _React$useState2 = _slicedToArray(_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 _extends({}, option, {
          checked: checked,
          subOptions: option.subOptions.map(function (subOption) {
            return _extends({}, 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 _extends({}, subOption, {
            checked: checked
          });
        });
        return _extends({}, option, {
          checked: newSubOptions.every(function (_ref3) {
            var checked = _ref3.checked;
            return checked;
          }),
          subOptions: newSubOptions
        });
      });
      onChange(newOptions);
    };
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.flex, classes.pointer),
    onClick: _handleClick
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "h6"
  }, label), _ref4), /*#__PURE__*/React.createElement(Popover, {
    anchorEl: anchorEl,
    anchorOrigin: {
      horizontal: 'right',
      vertical: 'top'
    },
    onClose: handleClose,
    open: open,
    transformOrigin: {
      horizontal: 'center',
      vertical: 'bottom'
    }
  }, /*#__PURE__*/React.createElement(Paper, {
    className: classes.containerPaper
  }, /*#__PURE__*/React.createElement(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.createElement(TreeItem, {
      key: key,
      label: /*#__PURE__*/React.createElement("div", {
        className: classes.flex
      }, /*#__PURE__*/React.createElement(Checkbox, {
        checked: option.checked,
        color: "primary",
        onChange: _handleClickOption(option.key),
        onClick: _handleClickCheckBox,
        size: "small"
      }), /*#__PURE__*/React.createElement(Typography, {
        variant: "h6"
      }, label)),
      nodeId: key
    }, subOptions && subOptions.map(function (subOption) {
      var key = subOption.key,
          label = subOption.label;
      return /*#__PURE__*/React.createElement(TreeItem, {
        key: key,
        label: /*#__PURE__*/React.createElement("div", {
          className: classes.flex
        }, /*#__PURE__*/React.createElement(Checkbox, {
          checked: subOption.checked,
          color: "primary",
          onChange: _handleClickOption(subOption.key),
          onClick: _handleClickCheckBox,
          size: "small"
        }), /*#__PURE__*/React.createElement(Typography, null, label)),
        nodeId: key
      });
    }));
  })))));
};

process.env.NODE_ENV !== "production" ? MultiCheckBox.propTypes = {
  classes: PropTypes.object,
  label: PropTypes.string,
  onChange: PropTypes.func,
  options: PropTypes.arrayOf(PropTypes.shape({
    checked: PropTypes.bool,
    key: PropTypes.string,
    label: PropTypes.string,
    subOptions: PropTypes.arrayOf(PropTypes.shape({
      checked: PropTypes.bool,
      key: PropTypes.string,
      label: PropTypes.string
    }))
  }))
} : void 0;
export default withStyles(styles, {
  name: 'MultiCheckBox'
})(MultiCheckBox);