@risecx/carespace-chat-ui/lib/components/Messages/List/ListMessage.js

carespace-chat-ui React component

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Button = _interopRequireDefault(require("../../Button"));

require("./list.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var ListMessage = function ListMessage(props) {
  var _props$data = props.data,
      image_url = _props$data.image_url,
      title = _props$data.title,
      subtitle = _props$data.subtitle,
      _props$data$elements = _props$data.elements,
      elements = _props$data$elements === void 0 ? [] : _props$data$elements,
      _props$data$buttons = _props$data.buttons,
      buttons = _props$data$buttons === void 0 ? [] : _props$data$buttons;
  var isImageList = elements.some(function (e) {
    return e.hasOwnProperty('default_action');
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "card " + (!isImageList ? 'list' : '') + " sc-message--list"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "list-container"
  }, /*#__PURE__*/_react["default"].createElement("ul", null, elements.map(function (_ref, index) {
    var title = _ref.title,
        subtitle = _ref.subtitle,
        image_url = _ref.image_url,
        _ref$buttons = _ref.buttons,
        buttons = _ref$buttons === void 0 ? [] : _ref$buttons;
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: index
    }, /*#__PURE__*/_react["default"].createElement("img", {
      src: image_url
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "list-content"
    }, /*#__PURE__*/_react["default"].createElement("h5", null, title), /*#__PURE__*/_react["default"].createElement("p", null, subtitle), buttons.map(function (button, index) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "buttons"
      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
        key: index
      }, button, {
        onClick: function onClick() {
          return props.onPostBack(button);
        }
      })));
    })));
  })), buttons && /*#__PURE__*/_react["default"].createElement("div", {
    className: "buttons"
  }, buttons.map(function (button, index) {
    return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
      key: index
    }, button, {
      onClick: function onClick() {
        return props.onPostBack(button);
      }
    }));
  }))));
};

var _default = ListMessage;
exports["default"] = _default;
module.exports = exports.default;