@krowdy-ui/core/Checkbox/Checkbox.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"] = void 0;

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

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

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

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

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

var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));

var _styles = require("@material-ui/styles");

var _capitalize = _interopRequireDefault(require("../utils/capitalize"));

var _colorManipulator = require("../styles/colorManipulator");

var _excluded = ["color", "classes", "className"];
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    checked: {},
    colorError: {
      '&$checked': {
        '&:hover': {
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          },
          // Reset on touch devices, it doesn't add specificity
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.error.main, theme.palette.action.hoverOpacity)
        },
        color: theme.palette.error.main
      },
      '&$disabled': {
        color: theme.palette.action.disabled
      }
    },
    colorKrowdy: {
      '&$checked': {
        '&:hover': {
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          },
          // Reset on touch devices, it doesn't add specificity
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.krowdy.main, theme.palette.action.hoverOpacity)
        },
        color: theme.palette.krowdy.main
      },
      '&$disabled': {
        color: theme.palette.action.disabled
      }
    },
    disabled: {}
  };
}, {
  name: 'KrowdyCheckbox'
});

function Checkbox(_ref) {
  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'secondary' : _ref$color,
      _ref$classes = _ref.classes,
      classesProps = _ref$classes === void 0 ? {} : _ref$classes,
      _ref$className = _ref.className,
      classNameProps = _ref$className === void 0 ? {} : _ref$className,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var classes = useStyles();
  var className = (0, _clsx["default"])(classNameProps, classes["color".concat((0, _capitalize["default"])(color))]);
  if (color === 'krowdy' || color === 'error') color = 'secondary';
  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
    classes: (0, _extends2["default"])({}, classesProps, {
      checked: (0, _clsx["default"])(classesProps.checked, classes.checked),
      disabled: (0, _clsx["default"])(classesProps.disabled, classes.disabled)
    }),
    className: className,
    color: color
  }, props));
}

process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
  /**
   * @ignore
   */
  className: _propTypes["default"].string,

  /**
   * @ignore
   */
  classes: _propTypes["default"].object,

  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: _propTypes["default"].oneOf(['primary', 'secondary', 'default', 'krowdy', 'error'])
} : void 0;
var _default = Checkbox;
exports["default"] = _default;