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

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

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

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

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

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

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

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

var _MessageAction = require("./Message.Action.css");

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

var MessageAction = function MessageAction(props, context) {
  var children = props.children,
      className = props.className,
      from = props.from,
      ltr = props.ltr,
      read = props.read,
      rtl = props.rtl,
      timestamp = props.timestamp,
      to = props.to,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "className", "from", "ltr", "read", "rtl", "timestamp", "to"]);
  var theme = context.theme;
  var componentClassName = (0, _classnames.default)('c-MessageAction', theme && "is-theme-" + theme, className);
  var isThemeEmbed = theme === 'embed';
  var textSize = isThemeEmbed ? '12' : '14';
  var textShade = isThemeEmbed ? 'faint' : 'default';

  var getTextMarkup = function getTextMarkup() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
      className: "c-MessageAction__text",
      shade: textShade,
      size: textSize,
      children: children
    });
  };

  var getTimestampMarkup = function getTimestampMarkup() {
    if (isThemeEmbed) return null;
    return timestamp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageAction.TimestampUI, {
      className: "c-MessageAction__timestamp",
      read: read,
      timestamp: timestamp
    });
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MessageAction.ActionUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    className: componentClassName,
    just: "center",
    isThemeEmbed: isThemeEmbed,
    children: [getTextMarkup(), getTimestampMarkup()]
  }));
};

exports.MessageAction = MessageAction;

function noop() {}

MessageAction.contextTypes = {
  theme: noop
};
MessageAction.defaultProps = {
  'data-cy': 'MessageAction'
};
MessageAction.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Provides author information and applies "From" styles. */
  from: _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,

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

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

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

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