@helpscout/hsds-react/components/AttachmentList/AttachmentList.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.AttachmentList = 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 _Attachment = _interopRequireDefault(require("../Attachment"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Overflow = _interopRequireDefault(require("../Overflow"));

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

var _AttachmentList = require("./AttachmentList.css");

var _Attachment2 = require("../Attachment/Attachment.Provider");

var _IconButton = _interopRequireDefault(require("../IconButton"));

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; }

function noop() {}

var AttachmentList = function AttachmentList(props) {
  var children = props.children,
      className = props.className,
      downloadAllLabel = props.downloadAllLabel,
      onDownloadAllClick = props.onDownloadAllClick,
      showDownloadAll = props.showDownloadAll,
      withOverflow = props.withOverflow,
      onScrollEnd = props.onScrollEnd,
      themeProp = props.theme,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "className", "downloadAllLabel", "onDownloadAllClick", "showDownloadAll", "withOverflow", "onScrollEnd", "theme"]);

  var attachmentChildren = _react.default.Children.toArray(children).filter(function (child) {
    return child.type && child.type === _Attachment.default;
  });

  var _ref = (0, _react.useContext)(_Attachment2.AttachmentContext) || {},
      themeContext = _ref.theme;

  var overflowCallback = (0, _react.useRef)({
    handleApplyFade: noop,
    handleScrollToEnd: noop
  });
  var theme = themeContext || themeProp;
  var isThemePreview = theme === 'preview';
  var shouldShowDownloadAll = showDownloadAll === undefined ? isThemePreview ? false : true : showDownloadAll;
  (0, _react.useEffect)(function () {
    overflowCallback.current.handleApplyFade();
    overflowCallback.current.handleScrollToEnd();
    onScrollEnd && onScrollEnd();
  }, [attachmentChildren.length, onScrollEnd]);
  var componentClassName = (0, _classnames.default)('c-AttachmentList', theme && "is-theme-" + theme, withOverflow && 'withOverflow', className);

  var getDownloadAllMarkup = function getDownloadAllMarkup() {
    if (!shouldShowDownloadAll || attachmentChildren.length <= 1) return null;

    if (isThemePreview) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
        className: "c-AttachmentList__DownloadAll",
        theme: "grey",
        icon: "inbox",
        seamless: true,
        onClick: onDownloadAllClick,
        title: downloadAllLabel
      });
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attachment.default, {
      elementClassName: "c-AttachmentList__DownloadAll",
      name: downloadAllLabel,
      onClick: onDownloadAllClick,
      type: "action",
      as: "button"
    });
  };

  var getContentMarkup = function getContentMarkup() {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AttachmentList.ContentUI, {
      className: "c-AttachmentList__content",
      children: [!isThemePreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        className: "c-AttachmentList__icon",
        name: "attachment",
        shade: "faint"
      }), attachmentChildren, getDownloadAllMarkup()]
    });
  };

  var wrappedContentMarkup = withOverflow && isThemePreview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overflow.default, {
    remapScrollDirections: true,
    refApplyFade: function refApplyFade(fn) {
      return overflowCallback.current.handleApplyFade = fn;
    },
    refScrollToEnd: function refScrollToEnd(fn) {
      return overflowCallback.current.handleScrollToEnd = fn;
    },
    children: getContentMarkup()
  }) : getContentMarkup();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AttachmentList.AttachmentListUI, (0, _extends2.default)({
    className: componentClassName
  }, (0, _getValidProps.default)(rest), {
    children: wrappedContentMarkup
  }));
};

exports.AttachmentList = AttachmentList;
AttachmentList.defaultProps = {
  'data-cy': 'AttachmentList',
  'data-testid': 'AttachmentList',
  downloadAllLabel: 'Download All',
  onDownloadAllClick: noop,
  withOverflow: true
};
AttachmentList.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

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

  /** Data attr for RTL tests. */
  'data-testid': _propTypes.default.string,

  /** Text label for the "Download All" attachment. */
  downloadAllLabel: _propTypes.default.string,

  /** Callback when the scroll container was moved to the end. */
  onScrollEnd: _propTypes.default.func,

  /** The callback when the "Download All" attachment is clicked. */
  onDownloadAllClick: _propTypes.default.func,

  /** Show/hides the "Download All" attachment. */
  showDownloadAll: _propTypes.default.bool,

  /** Adds overflow styles on the list. */
  withOverflow: _propTypes.default.bool
};
var _default = AttachmentList;
exports.default = _default;