@helpscout/hsds-react/components/Message/Message.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.Message = 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 _Flexy = _interopRequireDefault(require("../Flexy"));

var _Text = _interopRequireDefault(require("../Text"));

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

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

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

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

var _Message5 = _interopRequireDefault(require("./Message.Chat"));

var _Message6 = _interopRequireDefault(require("./Message.Content"));

var _Message7 = _interopRequireDefault(require("./Message.Embed"));

var _Message8 = _interopRequireDefault(require("./Message.Media"));

var _Message9 = _interopRequireDefault(require("./Message.Provider"));

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

var _component = require("../../utilities/component");

var _lodash = _interopRequireDefault(require("lodash.isstring"));

var _Message10 = require("./Message.css");

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

function noop() {}

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

  function Message() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.shouldShowAvatar = function () {
      var _this$props = _this.props,
          from = _this$props.from,
          showAvatar = _this$props.showAvatar; // This prevents spacing issues when children include
      // `Message.Action` which requires the full width of the screen.

      if (_this.childrenIncludeActionTypeComponent()) return false;
      return _this.isThemeEmbed() ? from && showAvatar || false : !!showAvatar;
    };

    _this.childrenIncludeActionTypeComponent = function () {
      var children = _this.props.children;

      var childArray = _react.default.Children.toArray(children);

      return childArray.some(function (child) {
        var componentName = (0, _component.getComponentName)(child);
        return componentName === 'MessageAction';
      });
    };

    _this.isThemeEmbed = function () {
      var theme = _this.context.theme;
      return theme === 'embed';
    };

    _this.getAvatarMarkup = function () {
      var avatar = _this.props.avatar;

      var isThemeEmbed = _this.isThemeEmbed();

      if (!_this.shouldShowAvatar()) return null;
      var avatarMarkup = avatar ? /*#__PURE__*/_react.default.cloneElement(avatar, {
        shape: 'circle',
        size: isThemeEmbed ? 'xxs' : 'xs'
      }) : null;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
        className: "c-Message__avatar-block",
        children: avatarMarkup
      });
    };

    _this.getChildrenMarkup = function () {
      var _this$props2 = _this.props,
          children = _this$props2.children,
          from = _this$props2.from,
          ltr = _this$props2.ltr,
          rtl = _this$props2.rtl,
          to = _this$props2.to;
      return _react.default.Children.map(children, function (child) {
        if (!child) return child;
        return /*#__PURE__*/_react.default.cloneElement(child, {
          from: from,
          ltr: ltr,
          rtl: rtl,
          to: to
        });
      });
    };

    _this.getFromMarkup = function () {
      var from = _this.props.from;
      var fromName = (0, _lodash.default)(from) ? from : null;
      if (!(_this.isThemeEmbed() && fromName)) return null;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "c-Message__from",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
          className: "c-Message__fromText",
          block: true,
          lineHeightReset: true,
          shade: "faint",
          size: "11",
          children: fromName
        })
      });
    };

    return _this;
  }

  var _proto = Message.prototype;

  _proto.render = function render() {
    var _this$props3 = this.props,
        avatar = _this$props3.avatar,
        children = _this$props3.children,
        className = _this$props3.className,
        isNote = _this$props3.isNote,
        ltr = _this$props3.ltr,
        rtl = _this$props3.rtl,
        from = _this$props3.from,
        showAvatar = _this$props3.showAvatar,
        to = _this$props3.to,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["avatar", "children", "className", "isNote", "ltr", "rtl", "from", "showAvatar", "to"]);
    var theme = this.context.theme;
    var componentClassName = (0, _classnames.default)('c-Message', avatar && 'has-avatar', from && 'is-from', theme && "is-theme-" + theme, to && 'is-to', className);
    var avatarMarkup = this.getAvatarMarkup();
    var childrenMarkup = this.getChildrenMarkup();
    var fromMarkup = this.getFromMarkup();
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message10.MessageUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: [fromMarkup, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
        align: "top",
        gap: "xs",
        children: [from && avatarMarkup, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
          className: "c-Message__block",
          children: childrenMarkup
        }), to && avatarMarkup]
      })]
    }));
  };

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

exports.Message = Message;
Message.contextTypes = {
  theme: noop
};
Message.Action = _Message.default;
Message.Attachment = _Message2.default;
Message.Bubble = _Message3.default;
Message.Caption = _Message4.default;
Message.Chat = _Message5.default;
Message.Content = _Message6.default;
Message.Embed = _Message7.default;
Message.Media = _Message8.default;
Message.Provider = _Message9.default;
Message.defaultProps = {
  'data-cy': 'Message',
  showAvatar: true
};
Message.propTypes = {
  /** An `Avatar` component containing author details. */
  avatar: _propTypes.default.any,

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

  /** Provides author information and applies "From" styles. */
  from: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

  /** Applies the "Note" theme styles. */
  isNote: _propTypes.default.bool,

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

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

  /** Renders a space for the Avatar to appear. Default is `true`. */
  showAvatar: _propTypes.default.bool,

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

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