@helpscout/hsds-react/components/Message/Message.Media.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.MessageMedia = 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 _classnames = _interopRequireDefault(require("classnames"));

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

var _classNames = require("../../utilities/classNames");

var _Link = _interopRequireDefault(require("../Link"));

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

var _Modal = _interopRequireDefault(require("../Modal"));

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

var _MessageMedia = require("./Message.Media.css");

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

function noop() {}

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

  function MessageMedia() {
    var _this;

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

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

    _this.getCaption = function () {
      var _this$props = _this.props,
          caption = _this$props.caption,
          error = _this$props.error,
          errorMessage = _this$props.errorMessage;
      var text = caption;

      if (error) {
        text = (0, _lodash.default)(error) ? error : errorMessage;
      }

      return text;
    };

    _this.getSpinnerMarkup = function () {
      return _this.props.isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
        className: "c-MessageMedia__loadingSpinner",
        size: "xs"
      });
    };

    _this.getCaptionMarkup = function () {
      var captionText = _this.getCaption();

      var spinnerMarkup = _this.getSpinnerMarkup();

      var tryAgainMarkup = _this.getTryAgainMarkup();

      var shouldRender = captionText || spinnerMarkup || tryAgainMarkup;
      return shouldRender && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "c-MessageMedia__caption",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message.default, {
          size: "11",
          children: [spinnerMarkup, captionText, tryAgainMarkup]
        })
      });
    };

    _this.getMediaMarkup = function (_temp) {
      var _ref = _temp === void 0 ? {} : _temp,
          src = _ref.src,
          maxHeight = _ref.maxHeight,
          maxWidth = _ref.maxWidth;

      var _this$props2 = _this.props,
          height = _this$props2.height,
          onMediaClick = _this$props2.onMediaClick,
          onMediaLoad = _this$props2.onMediaLoad,
          imageAlt = _this$props2.imageAlt,
          imageUrl = _this$props2.imageUrl,
          width = _this$props2.width;
      var imageSrc = src || imageUrl;
      if (!imageSrc) return null;
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "c-MessageMedia__media",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageMedia.ImageUI, {
          alt: imageAlt,
          block: true,
          className: "c-MessageMedia__mediaImage",
          height: height,
          onClick: onMediaClick,
          onLoad: onMediaLoad,
          maxHeight: maxHeight,
          maxWidth: maxWidth,
          src: imageSrc,
          title: imageAlt,
          shape: "rounded",
          width: width
        })
      });
    };

    _this.getTryAgainMarkup = function () {
      var _this$props3 = _this.props,
          error = _this$props3.error,
          showErrorTryAgainLink = _this$props3.showErrorTryAgainLink,
          tryAgainLabel = _this$props3.tryAgainLabel;
      if (!error || !showErrorTryAgainLink) return null;
      var markup = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        className: "c-MessageMedia__tryAgainActionWrapper",
        children: [' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
          className: "c-MessageMedia__tryAgainAction",
          onClick: _this.handleOnTryAgainClick,
          children: tryAgainLabel
        })]
      });
      return markup;
    };

    _this.handleOnTryAgainClick = function (event) {
      event.preventDefault();
      event.stopPropagation();

      _this.props.onErrorTryAgainClick(event);
    };

    return _this;
  }

  var _proto = MessageMedia.prototype;

  _proto.render = function render() {
    var _this$props4 = this.props,
        body = _this$props4.body,
        children = _this$props4.children,
        className = _this$props4.className,
        caption = _this$props4.caption,
        errorMessage = _this$props4.errorMessage,
        error = _this$props4.error,
        height = _this$props4.height,
        imageUrl = _this$props4.imageUrl,
        imageAlt = _this$props4.imageAlt,
        isUploading = _this$props4.isUploading,
        maxHeight = _this$props4.maxHeight,
        maxWidth = _this$props4.maxWidth,
        modalAnimationDuration = _this$props4.modalAnimationDuration,
        modalAnimationEasing = _this$props4.modalAnimationEasing,
        modalAnimationSequence = _this$props4.modalAnimationSequence,
        modalCardClassName = _this$props4.modalCardClassName,
        modalClassName = _this$props4.modalClassName,
        modalWrapperClassName = _this$props4.modalWrapperClassName,
        overlayAnimationDuration = _this$props4.overlayAnimationDuration,
        onErrorTryAgainClick = _this$props4.onErrorTryAgainClick,
        onMediaClick = _this$props4.onMediaClick,
        onMediaLoad = _this$props4.onMediaLoad,
        openMediaInModal = _this$props4.openMediaInModal,
        showErrorTryAgainLink = _this$props4.showErrorTryAgainLink,
        thumbnailImageUrl = _this$props4.thumbnailImageUrl,
        tryAgainLabel = _this$props4.tryAgainLabel,
        width = _this$props4.width,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["body", "children", "className", "caption", "errorMessage", "error", "height", "imageUrl", "imageAlt", "isUploading", "maxHeight", "maxWidth", "modalAnimationDuration", "modalAnimationEasing", "modalAnimationSequence", "modalCardClassName", "modalClassName", "modalWrapperClassName", "overlayAnimationDuration", "onErrorTryAgainClick", "onMediaClick", "onMediaLoad", "openMediaInModal", "showErrorTryAgainLink", "thumbnailImageUrl", "tryAgainLabel", "width"]);
    var theme = this.context.theme;
    var isThemeEmbed = theme === 'embed';
    var maybeOpenMediaInModal = !isThemeEmbed && openMediaInModal;
    var componentClassName = (0, _classnames.default)('c-MessageMedia', error && 'is-error', className);
    var bem = (0, _classNames.BEM)(componentClassName);
    var inlineCaptionMarkup = this.getCaptionMarkup();
    var mediaMarkup = this.getMediaMarkup({
      src: thumbnailImageUrl || imageUrl,
      maxWidth: maxWidth,
      maxHeight: maxHeight
    });
    var modalMediaMarkup = this.getMediaMarkup({
      maxWidth: 980,
      maxHeight: 820
    });
    var mediaContainerMarkup = imageUrl ? maybeOpenMediaInModal ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-MessageMedia__mediaContainer",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
        modalAnimationDuration: modalAnimationDuration,
        modalAnimationEasing: modalAnimationEasing,
        modalAnimationSequence: modalAnimationSequence,
        overlayAnimationDuration: overlayAnimationDuration,
        trigger: mediaMarkup,
        className: (0, _classnames.default)('c-MessageMedia__modal', modalClassName, bem.element('modal')),
        cardClassName: (0, _classnames.default)('c-MessageMedia__modalCard', modalCardClassName, bem.element('modalCard')),
        wrapperClassName: (0, _classnames.default)('c-MessageMedia__modalWrapper', modalWrapperClassName, bem.element('modalWrapper')),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default.Body, {
          scrollFade: false,
          isSeamless: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default.Content, {
            children: modalMediaMarkup
          })
        })
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-MessageMedia__mediaContainer",
      children: mediaMarkup
    }) : null;
    var mediaContentMarkup = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "c-MessageMedia__mediaContent",
      children: [mediaContainerMarkup, inlineCaptionMarkup]
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageMedia.MediaUI, (0, _extends2.default)({}, rest, {
      bubbleClassName: "c-MessageMedia__bubble",
      className: componentClassName,
      size: "sm",
      children: mediaContentMarkup
    }));
  };

  return MessageMedia;
}(_react.default.Component);

exports.MessageMedia = MessageMedia;
MessageMedia.defaultProps = {
  className: '',
  'data-cy': 'MessageMedia',
  errorMessage: "Couldn't send.",
  onErrorTryAgainClick: noop,
  onMediaClick: noop,
  onMediaLoad: noop,
  openMediaInModal: true,
  maxHeight: 250,
  maxWidth: 350,
  modalAnimationDuration: 250,
  modalAnimationEasing: 'ease',
  overlayAnimationDuration: 250,
  modalAnimationSequence: 'fade up',
  showErrorTryAgainLink: true,
  tryAgainLabel: 'Try again',
  isUploading: false
};
MessageMedia.contextTypes = {
  theme: noop
};
MessageMedia.propTypes = {
  /** Description of the media. */
  caption: _propTypes.default.string,

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

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

  /** Customizes the error caption. */
  errorMessage: _propTypes.default.string,

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

  /** Height of the image. */
  height: _propTypes.default.number,

  /** Alt/title of the media image. */
  imageAlt: _propTypes.default.string,

  /** URL of the media image. */
  imageUrl: _propTypes.default.string,

  /** Renders the uploading spinner UI. Default `false`. */
  isUploading: _propTypes.default.bool,

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

  /** Max-height of the media content. */
  maxHeight: _propTypes.default.number,

  /** Max-width of the media content. */
  maxWidth: _propTypes.default.number,

  /** Custom [animation](../Animate) duration for the child [Card](../Card) component. */
  modalAnimationDuration: _propTypes.default.number,

  /** Custom [animation](../Animate) easing for the child [Card](../Card) component. */
  modalAnimationEasing: _propTypes.default.string,

  /** Custom [animation](../Animate) sequence for the child [Card](../Card) component. */
  modalAnimationSequence: _propTypes.default.string,

  /** Custom class names for the [Modal](../Modal) card. */
  modalCardClassName: _propTypes.default.string,

  /** Custom class names for the [Modal](../Modal). */
  modalClassName: _propTypes.default.string,

  /** Custom class names for the [Modal](../Modal) wrapper. */
  modalWrapperClassName: _propTypes.default.string,

  /** Callback when "Try again" action is clicked. */
  onErrorTryAgainClick: _propTypes.default.func,

  /** Callback when the media image is clicked. */
  onMediaClick: _propTypes.default.func,

  /** Callback when the media image is loaded. */
  onMediaLoad: _propTypes.default.func,

  /** Opens the media image in a Modal when clicked. Default `true`. */
  openMediaInModal: _propTypes.default.bool,

  /** Custom [animation](../Animate) duration for the child [Overlay](../Overlay) component. */
  overlayAnimationDuration: _propTypes.default.number,

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

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

  /** Shows the "Try again" action, if error. Default `true`. */
  showErrorTryAgainLink: _propTypes.default.bool,

  /** URL of the media image (thumbnail). */
  thumbnailImageUrl: _propTypes.default.string,

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

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

  /** Label for the "Try Again" action, on error. */
  tryAgainLabel: _propTypes.default.string,

  /** Width of the image. */
  width: _propTypes.default.number,

  /** Applies "primary" styles. */
  primary: _propTypes.default.bool,
  icon: _propTypes.default.string,

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

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

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

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

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

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