@mui-treasury/mockup/components/listItem/BlueListItem.js

"use strict";

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

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

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

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

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

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

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

var useStyles = (0, _styles.makeStyles)(function () {
  return {
    root: {
      paddingLeft: 24,
      paddingTop: 16,
      paddingBottom: 16
    },
    rootActive: function rootActive(_ref) {
      var _ref$accentColor = _ref.accentColor,
          accentColor = _ref$accentColor === void 0 ? '#ffffff' : _ref$accentColor;
      return {
        backgroundColor: 'rgba(0,0,0,0.38)',
        '&:before': {
          content: '" "',
          display: 'block',
          width: 3,
          height: '100%',
          position: 'absolute',
          left: 0,
          top: 0,
          backgroundColor: accentColor,
          borderTopRightRadius: 3,
          borderBottomRightRadius: 3
        }
      };
    },
    icon: function icon(_ref2) {
      var _ref2$accentColor = _ref2.accentColor,
          accentColor = _ref2$accentColor === void 0 ? '#ffffff' : _ref2$accentColor;
      return {
        minWidth: 40,
        opacity: 0.6,
        color: accentColor
      };
    },
    primary: {
      color: '#fff',
      textTransform: 'uppercase',
      fontSize: 12,
      fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
      fontWeight: 900,
      opacity: 0.6
    },
    iconActive: function iconActive() {
      return {
        opacity: 0.87
      };
    },
    primaryActive: {
      opacity: 1
    }
  };
});

var BlueListItem = function BlueListItem(_ref3) {
  var active = _ref3.active,
      accentColor = _ref3.accentColor,
      icon = _ref3.icon,
      primaryText = _ref3.primaryText,
      secondaryText = _ref3.secondaryText;
  var styles = useStyles({
    accentColor: accentColor
  });
  return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
    className: (0, _clsx["default"])(styles.root, active && styles.rootActive)
  }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
    className: (0, _clsx["default"])(styles.icon, active && styles.iconActive)
  }, icon), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
    classes: {
      primary: (0, _clsx["default"])(styles.primary, active && styles.primaryActive)
    },
    primaryTypographyProps: {
      noWrap: true
    },
    primary: primaryText,
    secondary: secondaryText
  }));
};

BlueListItem.propTypes = {
  active: _propTypes["default"].bool,
  accentColor: _propTypes["default"].string,
  icon: _propTypes["default"].node,
  primaryText: _propTypes["default"].string,
  secondaryText: _propTypes["default"].string
};
BlueListItem.defaultProps = {
  active: false,
  accentColor: undefined,
  icon: undefined,
  primaryText: undefined,
  secondaryText: undefined
};
var _default = BlueListItem;
exports["default"] = _default;