@krowdy-ui/views/esm/ListInfoItem/ListInfoItem.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { Avatar, ListItem, ListItemAvatar, ListItemText, withStyles } from '@krowdy-ui/core';
import { Done as DoneIcon, Domain as DomainIcon } from '@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.createElement(DoneIcon, {
  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.createElement(ListItem, {
    button: Boolean(onChange),
    classes: {
      button: clsx(classes.root, classes[variant], hover ? classes.hover : classes.hoverDefault),
      gutters: classes.gutters,
      root: clsx(classes.root, classes[variant], variantHover && classes.variantHover)
    },
    disabled: disabled,
    onClick: onChange ? onChange(_id) : undefined
  }, input || /*#__PURE__*/React.createElement(ListItemAvatar, {
    classes: {
      root: classes.listItemAvatar
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    alt: title,
    className: clsx(classes.avatar, classes[avatarSize], src && classes.color),
    src: src,
    variant: src ? 'circle' : 'rounded'
  }, Icon ? /*#__PURE__*/React.createElement(Icon, {
    className: classes.image
  }) : /*#__PURE__*/React.createElement(DomainIcon, {
    className: classes.image
  }))), /*#__PURE__*/React.createElement(ListItemText, {
    classes: {
      primary: classes.primary,
      secondary: classes.secondary
    },
    primary: title,
    primaryTypographyProps: primaryTypographyProps,
    secondary: subtitle,
    secondaryTypographyProps: secondaryTypographyProps
  }), selected ? _ref5 : null, /*#__PURE__*/React.createElement("div", {
    className: clsx(rightIconHover && classes.rightIconHover)
  }, rightIcon ? rightIcon : null));
};

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