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

var styles = function styles(theme) {
  return {
    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 _ref2 = /*#__PURE__*/React.createElement(Divider, null);

var ListInfo = function ListInfo(_ref) {
  var classes = _ref.classes,
      header = _ref.header,
      list = _ref.list,
      hover = _ref.hover,
      onChange = _ref.onChange,
      selectedId = _ref.selectedId;
  return /*#__PURE__*/React.createElement(Card, {
    className: classes.container,
    elevation: 4
  }, header ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.header
  }, header), _ref2) : null, /*#__PURE__*/React.createElement("div", null, list.length ? /*#__PURE__*/React.createElement(List, {
    className: classes.list
  }, list.map(function (_ref3) {
    var icon = _ref3.icon,
        src = _ref3.src,
        title = _ref3.title,
        subtitle = _ref3.subtitle,
        _id = _ref3._id;
    return /*#__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);