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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
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 const styles = {
  containerPaper: {
    padding: 12,
    width: 300
  },
  flex: {
    alignItems: 'center',
    display: 'flex'
  },
  pointer: {
    cursor: 'pointer'
  }
};

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

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

var _ref3 = /*#__PURE__*/React.createElement(ArrowDropUpIcon, null);

const MultiCheckBox = ({
  options,
  onChange = () => {},
  label,
  classes,
  expandAllDefault
}) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const _handleClick = event => options.length && setAnchorEl(event.currentTarget);

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  const _handleClickCheckBox = e => e.stopPropagation();

  const _handleClickOption = key => ({
    target: {
      checked
    }
  }) => {
    const newOptions = options.map(option => {
      const isOptionSelected = option.key === key;
      if (isOptionSelected) return _extends({}, option, {
        checked,
        subOptions: option.subOptions.map(subOption => _extends({}, subOption, {
          checked
        }))
      });
      const isSubOptionSelected = option.subOptions.some(subOption => subOption.key === key);
      if (!isSubOptionSelected) return option;
      const newSubOptions = option.subOptions.map(subOption => {
        if (subOption.key !== key) return subOption;
        return _extends({}, subOption, {
          checked
        });
      });
      return _extends({}, option, {
        checked: newSubOptions.every(({
          checked
        }) => 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), _ref), /*#__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: _ref2,
    defaultExpanded: expandAllDefault ? options.map(({
      key
    }) => key) : undefined,
    defaultExpandIcon: _ref3
  }, options.map(option => {
    const {
      key,
      subOptions,
      label
    } = option;
    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(subOption => {
      const {
        key,
        label
      } = subOption;
      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);