@helpscout/hsds-react/components/Message/Message.Chat.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.MessageChat = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Message = _interopRequireDefault(require("./Message.Bubble"));

var _Message2 = _interopRequireDefault(require("./Message.Caption"));

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Spinner = _interopRequireDefault(require("../Spinner"));

var _classnames = _interopRequireDefault(require("classnames"));

var _MessageChat = require("./Message.Chat.css");

var _jsxRuntime = require("react/jsx-runtime");

var MessageChat = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(MessageChat, _React$PureComponent);

  function MessageChat() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = MessageChat.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        body = _this$props.body,
        bubbleClassName = _this$props.bubbleClassName,
        caption = _this$props.caption,
        captionSize = _this$props.captionSize,
        metaPosition = _this$props.metaPosition,
        children = _this$props.children,
        className = _this$props.className,
        error = _this$props.error,
        errorMessage = _this$props.errorMessage,
        read = _this$props.read,
        from = _this$props.from,
        icon = _this$props.icon,
        isLoading = _this$props.isLoading,
        isNote = _this$props.isNote,
        ltr = _this$props.ltr,
        rtl = _this$props.rtl,
        size = _this$props.size,
        timestamp = _this$props.timestamp,
        title = _this$props.title,
        to = _this$props.to,
        typing = _this$props.typing,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["body", "bubbleClassName", "caption", "captionSize", "metaPosition", "children", "className", "error", "errorMessage", "read", "from", "icon", "isLoading", "isNote", "ltr", "rtl", "size", "timestamp", "title", "to", "typing"]);
    var theme = this.context.theme;
    var isThemeEmbed = theme === 'embed';
    var componentClassName = (0, _classnames.default)('c-MessageChat', from && 'is-from', to && 'is-to', className);
    var chatProps = {
      body: body,
      children: children,
      from: from,
      icon: icon,
      ltr: ltr,
      rtl: rtl,
      timestamp: timestamp,
      to: to
    };
    var captionMarkup = caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message2.default, {
      className: "c-MessageChat__caption",
      size: captionSize,
      children: caption
    }) : null;
    var loadingMarkup = isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
      className: "c-MessageChat__metaState",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
        className: "c-MessageChat__loadingSpinner",
        size: "xs"
      })
    }) : null;
    var errorMarkup = error ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-MessageChat__error",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message2.default, {
        className: "c-MessageChat__errorMessage",
        children: typeof error === 'string' ? error : errorMessage
      })
    }) : null;
    var metaMarkup = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
      className: "c-MessageChat__meta",
      gap: "xs",
      children: [loadingMarkup, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default.Block, {
        className: "c-MessageChat__metaBlock",
        children: [captionMarkup, errorMarkup]
      })]
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageChat.ChatBlockUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      meta: metaMarkup,
      metaPosition: metaPosition,
      read: read,
      isEmbed: isThemeEmbed
    }, chatProps, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, (0, _extends2.default)({}, chatProps, {
        className: bubbleClassName,
        isNote: isNote,
        size: size,
        title: title,
        typing: typing
      }))
    }));
  };

  return MessageChat;
}(_react.default.PureComponent);

exports.MessageChat = MessageChat;

function noop() {}

MessageChat.contextTypes = {
  theme: noop
};
MessageChat.defaultProps = {
  'data-cy': 'MessageChat',
  error: false,
  errorMessage: "Couldn't send.",
  isLoading: false,
  metaPosition: 'bottom'
};
MessageChat.propTypes = {
  body: _propTypes.default.string,

  /** Custom class names for the child Bubble component. */
  bubbleClassName: _propTypes.default.string,

  /** Renders a Caption. */
  caption: _propTypes.default.string,

  /** Adjusts the size of the Caption text. */
  captionSize: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Provides author information and applies "From" styles. */
  from: _propTypes.default.any,

  /** Applies "note" styles. */
  isNote: _propTypes.default.bool,

  /** Applies left-to-right text styles. */
  ltr: _propTypes.default.bool,

  /** Determines if the Message is read. */
  read: _propTypes.default.bool,

  /** Applies right-to-left text styles. */
  rtl: _propTypes.default.bool,

  /** Determines the size of the component. */
  size: _propTypes.default.oneOf(['md', 'sm', '']),

  /** Timestamp for the Message. */
  timestamp: _propTypes.default.string,

  /** Renders a Heading title in the component. */
  title: _propTypes.default.string,

  /** Provides author information and applies "To" styles. */
  to: _propTypes.default.any,

  /** Renders TypingDots within the component. */
  typing: _propTypes.default.bool,

  /** Renders the error caption. Default `false`. */
  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),

  /** Customizes the error caption. */
  errorMessage: _propTypes.default.string,
  icon: _propTypes.default.string,
  isLoading: _propTypes.default.bool,
  metaPosition: _propTypes.default.oneOf(['top', 'bottom']),

  /** Callback when Bubble clicked. */
  onBubbleClick: _propTypes.default.func,

  /** Callback when clicked. */
  onClick: _propTypes.default.func,

  /** Applies "primary" styles. */
  primary: _propTypes.default.bool,
  type: _propTypes.default.oneOf(['action', 'message', '']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = MessageChat;
exports.default = _default;