@krowdy-ui/views/ListInfoItem/ListInfoItem.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 _react = _interopRequireDefault(require("react"));

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

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

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

var styles = function styles(theme) {
  return {
    avatar: {
      backgroundColor: theme.palette.secondary[10],
      color: theme.palette.secondary[200]
    },
    color: function color(_ref) {
      var iconColor = _ref.iconColor;
      return {
        backgroundColor: iconColor || 'transparent'
      };
    },
    dashed: {
      border: "1px dashed ".concat(theme.palette.grey[300]),
      borderRadius: theme.shape.borderRadius
    },
    'default': {
      borderRadius: theme.shape.borderRadius
    },
    gutters: {
      paddingLeft: theme.spacing(1),
      paddingRight: theme.spacing(1)
    },
    hover: {
      '&:hover': {
        backgroundColor: theme.palette.primary[10]
      }
    },
    hoverDefault: {
      '&:hover': {
        '& div:last-child': {
          visibility: 'visible'
        }
      }
    },
    image: {
      color: theme.palette.secondary[200]
    },
    large: {
      height: theme.spacing(7),
      width: theme.spacing(7)
    },
    listItemAvatar: {},
    medium: {},
    outlined: {
      border: "1px solid ".concat(theme.palette.grey[300]),
      borderRadius: theme.shape.borderRadius * 2
    },
    primary: {},
    rightIconHover: {
      visibility: 'hidden'
    },
    root: function root(_ref2) {
      var width = _ref2.width;
      return {
        width: width || '100%'
      };
    },
    secondary: {
      fontSize: 12
    },
    small: {
      height: theme.spacing(4),
      marginLeft: theme.spacing(.5),
      width: theme.spacing(4)
    },
    variantHover: function variantHover(_ref3) {
      var _variantHover = _ref3.variantHover;
      return {
        '&:hover': {
          backgroundColor: _variantHover ? 'transparent' : undefined,
          border: _variantHover ? "1px solid ".concat(theme.palette.primary[300]) : undefined
        }
      };
    }
  };
};

var _ref5 = /*#__PURE__*/_react["default"].createElement(_icons.Done, {
  color: "primary",
  fontSize: "small"
});

var ListInfoItem = function ListInfoItem(_ref4) {
  var classes = _ref4.classes,
      _id = _ref4._id,
      hover = _ref4.hover,
      onChange = _ref4.onChange,
      Icon = _ref4.icon,
      title = _ref4.title,
      src = _ref4.src,
      subtitle = _ref4.subtitle,
      selected = _ref4.selected,
      rightIcon = _ref4.rightIcon,
      _ref4$variant = _ref4.variant,
      variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
      disabled = _ref4.disabled,
      primaryTypographyProps = _ref4.primaryTypographyProps,
      secondaryTypographyProps = _ref4.secondaryTypographyProps,
      rightIconHover = _ref4.rightIconHover,
      variantHover = _ref4.variantHover,
      _ref4$avatarSize = _ref4.avatarSize,
      avatarSize = _ref4$avatarSize === void 0 ? 'medium' : _ref4$avatarSize,
      input = _ref4.input;
  return /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
    button: Boolean(onChange),
    classes: {
      button: (0, _clsx["default"])(classes.root, classes[variant], hover ? classes.hover : classes.hoverDefault),
      gutters: classes.gutters,
      root: (0, _clsx["default"])(classes.root, classes[variant], variantHover && classes.variantHover)
    },
    disabled: disabled,
    onClick: onChange ? onChange(_id) : undefined
  }, input || /*#__PURE__*/_react["default"].createElement(_core.ListItemAvatar, {
    classes: {
      root: classes.listItemAvatar
    }
  }, /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
    alt: title,
    className: (0, _clsx["default"])(classes.avatar, classes[avatarSize], src && classes.color),
    src: src,
    variant: src ? 'circle' : 'rounded'
  }, Icon ? /*#__PURE__*/_react["default"].createElement(Icon, {
    className: classes.image
  }) : /*#__PURE__*/_react["default"].createElement(_icons.Domain, {
    className: classes.image
  }))), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
    classes: {
      primary: classes.primary,
      secondary: classes.secondary
    },
    primary: title,
    primaryTypographyProps: primaryTypographyProps,
    secondary: subtitle,
    secondaryTypographyProps: secondaryTypographyProps
  }), selected ? _ref5 : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(rightIconHover && classes.rightIconHover)
  }, rightIcon ? rightIcon : null));
};

process.env.NODE_ENV !== "production" ? ListInfoItem.propTypes = {
  _id: _propTypes["default"].string,
  avatarSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
  classes: _propTypes["default"].object,
  disabled: _propTypes["default"].bool,
  hover: _propTypes["default"].bool,
  icon: _propTypes["default"].element,
  iconColor: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  primaryTypographyProps: _propTypes["default"].object,
  rightIcon: _propTypes["default"].element,
  rightIconHover: _propTypes["default"].bool,
  secondaryTypographyProps: _propTypes["default"].object,
  selected: _propTypes["default"].bool,
  src: _propTypes["default"].string,
  subtitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
  title: _propTypes["default"].string,
  variant: _propTypes["default"].oneOf(['default', 'dashed', 'outlined']),
  variantHover: _propTypes["default"].bool,
  width: _propTypes["default"].number
} : void 0;

var _default = (0, _core.withStyles)(styles, {
  name: 'ListInfo-item'
})(ListInfoItem);

exports["default"] = _default;