@krowdy-ui/views/es/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';

const styles = theme => ({
  avatar: {
    backgroundColor: theme.palette.secondary[10],
    color: theme.palette.secondary[200]
  },
  color: ({
    iconColor
  }) => ({
    backgroundColor: iconColor || 'transparent'
  }),
  dashed: {
    border: `1px dashed ${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 ${theme.palette.grey[300]}`,
    borderRadius: theme.shape.borderRadius * 2
  },
  primary: {},
  rightIconHover: {
    visibility: 'hidden'
  },
  root: ({
    width
  }) => ({
    width: width || '100%'
  }),
  secondary: {
    fontSize: 12
  },
  small: {
    height: theme.spacing(4),
    marginLeft: theme.spacing(.5),
    width: theme.spacing(4)
  },
  variantHover: ({
    variantHover
  }) => ({
    '&:hover': {
      backgroundColor: variantHover ? 'transparent' : undefined,
      border: variantHover ? `1px solid ${theme.palette.primary[300]}` : undefined
    }
  })
});

var _ref = /*#__PURE__*/React.createElement(DoneIcon, {
  color: "primary",
  fontSize: "small"
});

const ListInfoItem = ({
  classes,
  _id,
  hover,
  onChange,
  icon: Icon,
  title,
  src,
  subtitle,
  selected,
  rightIcon,
  variant = 'default',
  disabled,
  primaryTypographyProps,
  secondaryTypographyProps,
  rightIconHover,
  variantHover,
  avatarSize = 'medium',
  input
}) => /*#__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 ? _ref : 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);