@krowdy-ui/views/ListInfo/ListInfo.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 _core = require("@krowdy-ui/core");

var _views = require("@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["default"].createElement(_core.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["default"].createElement(_core.Card, {
    className: classes.container,
    elevation: 4
  }, header ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.header
  }, header), _ref2) : null, /*#__PURE__*/_react["default"].createElement("div", null, list.length ? /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_views.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["default"].object,
  header: _propTypes["default"].element,
  hover: _propTypes["default"].bool,
  list: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    _id: _propTypes["default"].string.isRequired,
    icon: _propTypes["default"].element,
    src: _propTypes["default"].string,
    subtitle: _propTypes["default"].string,
    title: _propTypes["default"].string
  })),
  onChange: _propTypes["default"].func,
  selectedId: _propTypes["default"].string
} : void 0;

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

exports["default"] = _default;