@krowdy-ui/views/es/ListInfo/ListInfo.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { Card, List, Divider, withStyles } from '@krowdy-ui/core';
import { ListInfoItem } from '@krowdy-ui/views';

const styles = theme => ({
  container: {
    padding: theme.spacing(1.5),
    width: 298
  },
  header: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center',
    margin: theme.spacing(1.625)
  },
  list: {
    maxHeight: 200,
    overflowY: 'auto'
  }
});

var _ref = /*#__PURE__*/React.createElement(Divider, null);

const ListInfo = ({
  classes,
  header,
  list,
  hover,
  onChange,
  selectedId
}) => /*#__PURE__*/React.createElement(Card, {
  className: classes.container,
  elevation: 4
}, header ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
  className: classes.header
}, header), _ref) : null, /*#__PURE__*/React.createElement("div", null, list.length ? /*#__PURE__*/React.createElement(List, {
  className: classes.list
}, list.map(({
  icon,
  src,
  title,
  subtitle,
  _id
}) => /*#__PURE__*/React.createElement(ListInfoItem, {
  _id: _id,
  hover: hover,
  icon: icon,
  key: _id,
  onChange: onChange,
  selected: selectedId === _id,
  src: src,
  subtitle: subtitle,
  title: title
}))) : null));

process.env.NODE_ENV !== "production" ? ListInfo.propTypes = {
  classes: PropTypes.object,
  header: PropTypes.element,
  hover: PropTypes.bool,
  list: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    icon: PropTypes.element,
    src: PropTypes.string,
    subtitle: PropTypes.string,
    title: PropTypes.string
  })),
  onChange: PropTypes.func,
  selectedId: PropTypes.string
} : void 0;
export default withStyles(styles, {
  name: 'ListInfo'
})(ListInfo);