@helpscout/hsds-react/components/Message/Message.Attachment.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.MessageAttachment = 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 _Link = _interopRequireDefault(require("../Link"));

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

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

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

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

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

var MessageAttachment = function MessageAttachment(props, context) {
  var body = props.body,
      children = props.children,
      className = props.className,
      download = props.download,
      filename = props.filename,
      isUploading = props.isUploading,
      onClick = props.onClick,
      openDownloadInNewTab = props.openDownloadInNewTab,
      size = props.size,
      uploadingMessage = props.uploadingMessage,
      url = props.url,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["body", "children", "className", "download", "filename", "isUploading", "onClick", "openDownloadInNewTab", "size", "uploadingMessage", "url"]);
  var theme = context.theme;
  var componentClassName = (0, _classnames.default)('c-MessageAttachment', !url && 'has-noUrl', theme && "is-theme-" + theme, className);
  var textClassName = (0, _classnames.default)('c-MessageAttachment__text', !url && 'has-noUrl');
  var title = download && filename ? "Download " + filename : null;
  var filenameMarkup = url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
    className: "c-MessageAttachment__link",
    download: download,
    href: url,
    onClick: onClick,
    target: openDownloadInNewTab ? '_blank' : null,
    title: title,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
      truncate: true,
      className: "c-MessageAttachment__linkText",
      children: filename
    })
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.TextUI, {
    className: textClassName,
    truncate: true,
    children: filename
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message2.default, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    bubbleClassName: "c-MessageMedia__bubble",
    caption: isUploading ? uploadingMessage : null,
    className: componentClassName,
    icon: "attachment",
    isLoading: isUploading,
    size: size,
    children: filenameMarkup
  }));
};

exports.MessageAttachment = MessageAttachment;

function noop() {}

MessageAttachment.defaultProps = {
  'data-cy': 'MessageAttachment',
  download: true,
  onClick: noop,
  openDownloadInNewTab: true,
  isUploading: false,
  size: 'md',
  uploadingMessage: 'Uploading…'
};
MessageAttachment.contextTypes = {
  theme: noop
};
MessageAttachment.propTypes = {
  body: _propTypes.default.string,

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

  /** Determines if the file can be downloaded on click. Default `true`. */
  download: _propTypes.default.oneOfType([_propTypes.default.bool, _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,

  /** The name of the file. */
  filename: _propTypes.default.string,

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

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

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

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

  /** Opens downloadable links in new tab. Default `true`. */
  openDownloadInNewTab: _propTypes.default.bool,

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

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

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

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

  /** Customizes the uploading message text. */
  uploadingMessage: _propTypes.default.string,

  /** The URL of the file. */
  url: _propTypes.default.string,

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

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

  /** 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,
  type: _propTypes.default.oneOf(['action', 'message', '']),
  icon: _propTypes.default.string,

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