react-cm-ui/core/dataDisplay/chip/chip.js

React UI for Healthy Church

"use strict";

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));

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

var _constants = require("../../global/constants");

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

var _icon = _interopRequireDefault(require("../icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = {
  /**
   * Additional classes.
   */
  className: _propTypes["default"].string,

  /**
   * Override or extend the styles applied to Chip.
   */
  classes: _propTypes["default"].shape({
    deleteIcon: _propTypes["default"].string,
    disabled: _propTypes["default"].string,
    label: _propTypes["default"].string,
    root: _propTypes["default"].string
  }).isRequired,

  /**
   * Set the color of the Chip.
   */
  color: _propTypes["default"].oneOf(['cyan', 'green', 'orange', 'pink', 'purple', 'red', 'redOrange', 'sky', 'teal']),

  /**
   * Override the default delete icon element. Shown only if `onDelete` is set.
   */
  deleteIcon: _propTypes["default"].element,

  /**
   * If `true`, the chip should be displayed in a disabled state.
   */
  disabled: _propTypes["default"].bool
};
var defaultProps = {
  className: '',
  color: undefined,
  deleteIcon: undefined,
  disabled: false
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
  var palette = _ref.palette,
      shape = _ref.shape,
      typography = _ref.typography;
  var chipHeight = 30;
  return {
    colorCyan: {},
    colorGreen: {},
    colorOrange: {},
    colorPink: {},
    colorPurple: {},
    colorRed: {},
    colorRedOrange: {},
    colorSky: {},
    colorTeal: {},
    deleteIcon: {
      alignItems: 'center',
      borderRadius: [[0, shape.borderRadius, shape.borderRadius, 0]],
      display: 'flex',
      height: chipHeight,
      justifyContent: 'center',
      margin: 0,
      transition: 'background-color 150ms linear',
      width: 20
    },
    disabled: {
      backgroundColor: palette.action.disabled
    },
    label: {
      color: palette.text.contrastText,
      fontSize: typography.pxToRem(14),
      fontWeight: typography.fontWeightMedium
    },
    root: {
      borderRadius: shape.borderRadius,
      height: chipHeight,
      '&$colorCyan': {
        backgroundColor: palette.cyan[500],
        '& $deleteIcon': {
          backgroundColor: palette.cyan[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.cyan[600]),
          '&:hover': {
            backgroundColor: palette.cyan[600]
          }
        }
      },
      '&$colorGreen': {
        backgroundColor: palette.green[500],
        '& $deleteIcon': {
          backgroundColor: palette.green[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.green[600]),
          '&:hover': {
            backgroundColor: palette.green[600]
          }
        }
      },
      '&$colorOrange': {
        backgroundColor: palette.orange[500],
        '& $deleteIcon': {
          backgroundColor: palette.orange[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.orange[600]),
          '&:hover': {
            backgroundColor: palette.orange[600]
          }
        }
      },
      '&$colorPink': {
        backgroundColor: palette.pink[500],
        '& $deleteIcon': {
          backgroundColor: palette.pink[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.pink[600]),
          '&:hover': {
            backgroundColor: palette.pink[600]
          }
        }
      },
      '&$colorPurple': {
        backgroundColor: palette.purple[500],
        '& $deleteIcon': {
          backgroundColor: palette.purple[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.purple[600]),
          '&:hover': {
            backgroundColor: palette.purple[600]
          }
        }
      },
      '&$colorRed': {
        backgroundColor: palette.red[500],
        '& $deleteIcon': {
          backgroundColor: palette.red[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.red[600]),
          '&:hover': {
            backgroundColor: palette.red[600]
          }
        }
      },
      '&$colorRedOrange': {
        backgroundColor: palette.redOrange[500],
        '& $deleteIcon': {
          backgroundColor: palette.redOrange[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.redOrange[600]),
          '&:hover': {
            backgroundColor: palette.redOrange[600]
          }
        }
      },
      '&$colorSky': {
        backgroundColor: palette.sky[500],
        '& $deleteIcon': {
          backgroundColor: palette.sky[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.sky[600]),
          '&:hover': {
            backgroundColor: palette.sky[600]
          }
        }
      },
      '&$colorTeal': {
        backgroundColor: palette.teal[500],
        '& $deleteIcon': {
          backgroundColor: palette.teal[500],
          boxShadow: "inset 1px 0 0 ".concat(palette.teal[600]),
          '&:hover': {
            backgroundColor: palette.teal[600]
          }
        }
      },
      '&$disabled': {
        opacity: 1,
        '& $deleteIcon': {
          backgroundColor: palette.grey[300],
          boxShadow: "inset 1px 0 0 ".concat(palette.grey[400])
        }
      }
    }
  };
});
/**
 * Chips are compact elements that represent an input, attribute, or action.
 */

function Chip(props) {
  var _ClassNames;

  var className = props.className,
      color = props.color,
      deleteIcon = props.deleteIcon,
      disabled = props.disabled;
  var classes = useStyles(props);
  var rootClasses = (0, _classnames["default"])(_constants.UI_CLASS_NAME, _constants.BEM_CHIP, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.colorCyan, !disabled && color === 'cyan'), _defineProperty(_ClassNames, classes.colorGreen, !disabled && color === 'green'), _defineProperty(_ClassNames, classes.colorOrange, !disabled && color === 'orange'), _defineProperty(_ClassNames, classes.colorPink, !disabled && color === 'pink'), _defineProperty(_ClassNames, classes.colorPurple, !disabled && color === 'purple'), _defineProperty(_ClassNames, classes.colorRed, !disabled && color === 'red'), _defineProperty(_ClassNames, classes.colorRedOrange, !disabled && color === 'redOrange'), _defineProperty(_ClassNames, classes.colorSky, !disabled && color === 'sky'), _defineProperty(_ClassNames, classes.colorTeal, !disabled && color === 'teal'), _ClassNames));
  return /*#__PURE__*/_react["default"].createElement(_Chip["default"] // eslint-disable-next-line react/jsx-props-no-spreading
  , _extends({}, props, {
    className: rootClasses,
    classes: {
      disabled: classes.disabled,
      label: classes.label,
      root: classes.root
    },
    deleteIcon: deleteIcon !== null && deleteIcon !== void 0 ? deleteIcon : /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.deleteIcon
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      compact: true,
      inverse: true,
      size: "xxsmall",
      type: "times"
    }))
  }));
}

Chip.propTypes = propTypes;
Chip.defaultProps = defaultProps;
var _default = Chip;
exports["default"] = _default;