@helpscout/hsds-react/components/MessageCard/MessageCard.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.MessageCard = void 0;

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

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

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

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

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

var _MessageCard = _interopRequireDefault(require("./MessageCard.Button"));

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

var _MessageCard2 = require("./MessageCard.css");

var _MessageCard3 = require("./components/MessageCard.Title");

var _MessageCard4 = require("./components/MessageCard.Subtitle");

var _MessageCard5 = require("./components/MessageCard.Image");

var _MessageCard6 = require("./components/MessageCard.Action");

var _MessageCard7 = require("./components/MessageCard.Body");

var _MessageCard8 = require("./components/MessageCard.Content");

var _MessageCard9 = require("./components/survey/MessageCard.Survey");

var _MessageCard10 = _interopRequireDefault(require("./components/MessageCard.UrlAttachmentImage"));

var _MessageCard11 = _interopRequireDefault(require("./components/MessageCard.ArticleCard"));

var _MessageCard12 = require("./components/MessageCard.Video");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var MessageCard = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var onShow = _ref.onShow,
      inProp = _ref.in,
      image = _ref.image,
      video = _ref.video,
      action = _ref.action,
      animationDuration = _ref.animationDuration,
      animationEasing = _ref.animationEasing,
      animationSequence = _ref.animationSequence,
      children = _ref.children,
      title = _ref.title,
      subtitle = _ref.subtitle,
      onBodyClick = _ref.onBodyClick,
      body = _ref.body,
      withAnimation = _ref.withAnimation,
      className = _ref.className,
      align = _ref.align,
      isMobile = _ref.isMobile,
      isWithBoxShadow = _ref.isWithBoxShadow,
      _ref$variables = _ref.variables,
      variables = _ref$variables === void 0 ? [] : _ref$variables,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["onShow", "in", "image", "video", "action", "animationDuration", "animationEasing", "animationSequence", "children", "title", "subtitle", "onBodyClick", "body", "withAnimation", "className", "align", "isMobile", "isWithBoxShadow", "variables"]);

  var _useState = (0, _react.useState)(false),
      visible = _useState[0],
      setVisible = _useState[1];

  var isShown = (0, _react.useRef)(false);
  var isMounted = (0, _react.useRef)(true);
  (0, _react.useEffect)(function () {
    return function () {
      isMounted.current = false;
    };
  }, []);
  var hasImage = (0, _react.useCallback)(function () {
    return image && image.url;
  }, [image]);
  var makeMessageVisible = (0, _react.useCallback)(function () {
    setTimeout(function () {
      isMounted.current && setVisible(true);
    }, 0);
  }, []);
  var videoHtml = video ? video.html : undefined;
  (0, _react.useEffect)(function () {
    if (inProp && !hasImage() && !isShown.current && !videoHtml) {
      makeMessageVisible();
    }
  }, [inProp, hasImage, videoHtml, makeMessageVisible]);
  (0, _react.useEffect)(function () {
    if (visible && !isShown.current) {
      onShow();
      isShown.current = true;
    }
  }, [visible, onShow]);

  var getClassName = function getClassName() {
    return (0, _classnames.default)(MessageCard.className, align && "is-align-" + align, className, isMobile && 'is-mobile', isWithBoxShadow && "is-with-box-shadow");
  };

  return inProp ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard2.MessageCardWrapperUI, {
    className: "c-MessageCardWrapper",
    visible: visible,
    withAnimation: withAnimation,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MessageCard2.MessageCardUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: getClassName(),
      ref: ref,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard3.MessageCardTitle, {
        title: title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard4.MessageCardSubtitle, {
        subtitle: subtitle
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MessageCard8.MessageCardContent, {
        withMargin: !!(title || subtitle),
        render: !!(body || image || children || video),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard7.MessageCardBody, {
          body: body,
          onClick: onBodyClick,
          variables: variables
        }), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard5.MessageCardImage, {
          image: image,
          onLoad: makeMessageVisible
        }) : null, video ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard12.MessageCardVideo, {
          video: video,
          onLoad: makeMessageVisible
        }) : null, children]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageCard6.MessageCardAction, {
        action: action
      })]
    }))
  }) : null;
}));

exports.MessageCard = MessageCard;

function noop() {}

MessageCard.defaultProps = {
  align: 'right',
  animationSequence: '',
  'data-cy': 'MessageCard',
  innerRef: noop,
  in: true,
  isMobile: false,
  isWithBoxShadow: true,
  onBodyClick: noop,
  onShow: noop,
  withAnimation: false
};
MessageCard.propTypes = {
  /** Render-prop that is placed in the CTA section of the Message. */
  action: _propTypes.default.func,

  /** Apply styles for left or right-aligned Message. */
  align: _propTypes.default.oneOf(['left', 'right']),

  /** The duration (in `ms`) for the animation sequence. */
  animationDuration: _propTypes.default.number,

  /** Determines the CSS easing transition function. */
  animationEasing: _propTypes.default.string,

  /** Names of animation styles to apply. */
  animationSequence: _propTypes.default.string,

  /** Main text of the Message. */
  body: _propTypes.default.string,

  /** The className of the component. */
  className: _propTypes.default.string,
  ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
    current: _propTypes.default.instanceOf(Element)
  })]),

  /** Programatically triggering the animation. */
  in: _propTypes.default.bool,

  /** Adds mobile styles */
  isMobile: _propTypes.default.bool,

  /** Adds a box shadow. */
  isWithBoxShadow: _propTypes.default.bool,

  /** Callback invoked when the body of the Message is clicked. */
  onBodyClick: _propTypes.default.func,

  /** Subtitle of the Message. */
  subtitle: _propTypes.default.string,

  /** Title of the Message. */
  title: _propTypes.default.string,

  /** Definition of the Message image */
  image: _propTypes.default.shape({
    url: _propTypes.default.string.isRequired,
    width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    altText: _propTypes.default.string
  }),

  /** Definition of the Message video */
  video: _propTypes.default.shape({
    html: _propTypes.default.string.isRequired
  }),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Callback invoked when the MessageCard is show to the user. */
  onShow: _propTypes.default.func,

  /** Enable animations when showing the Message. */
  withAnimation: _propTypes.default.bool,

  /** List of variables that can be highlighted inside Message. */
  variables: _propTypes.default.arrayOf(_propTypes.default.shape({
    id: _propTypes.default.string.isRequired,
    display: _propTypes.default.string
  }))
};
MessageCard.className = 'c-MessageCard';
MessageCard.Button = _MessageCard.default;
MessageCard.UrlAttachmentImage = _MessageCard10.default;
MessageCard.ArticleCard = _MessageCard11.default;
MessageCard.Survey = _MessageCard9.MessageCardSurvey;
var _default = MessageCard;
exports.default = _default;