@procore/core-react/dist/FileList/FileList.js

React library of Procore Design Guidelines

var _excluded = ["items", "downloadAllUrl", "getDownloadUrl", "getViewUrl", "getName", "qa"],
  _excluded2 = ["name", "viewUrl", "downloadUrl"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { Archive, Download } from '@procore/core-icons/dist';
import React from 'react';
import { Box } from '../Box/Box';
import { Link } from '../Link/Link';
import { Tooltip } from '../Tooltip/Tooltip';
import { Typography } from '../Typography/Typography';
import { useI18nContext } from '../_hooks/I18n';
import { StyledFileListDownloadAll, StyledFileListItem, StyledFileListItemDownloadIcon } from './FileList.styles';
export var defaultGetViewUrl = function defaultGetViewUrl(item) {
  return item.viewUrl;
};
export var defaultGetDownloadUrl = function defaultGetDownloadUrl(item) {
  return item.downloadUrl;
};
export var defaultGetName = function defaultGetName(item) {
  return item.name;
};

/**

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-filelist--demo)

 @see [Design Guidelines](https://design.procore.com/file-list)

 */
export var FileList = /*#__PURE__*/React.forwardRef(function FileList(_ref, ref) {
  var items = _ref.items,
    downloadAllUrl = _ref.downloadAllUrl,
    _ref$getDownloadUrl = _ref.getDownloadUrl,
    getDownloadUrl = _ref$getDownloadUrl === void 0 ? defaultGetDownloadUrl : _ref$getDownloadUrl,
    _ref$getViewUrl = _ref.getViewUrl,
    getViewUrl = _ref$getViewUrl === void 0 ? defaultGetViewUrl : _ref$getViewUrl,
    _ref$getName = _ref.getName,
    getName = _ref$getName === void 0 ? defaultGetName : _ref$getName,
    qa = _ref.qa,
    props = _objectWithoutProperties(_ref, _excluded);
  var I18n = useI18nContext();
  var length = items.length;
  var isDownloadAllVisible = length > 1 && downloadAllUrl;
  if (length === 0) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref
  }, props), isDownloadAllVisible && /*#__PURE__*/React.createElement(StyledFileListDownloadAll, {
    variant: "tertiary",
    size: "sm",
    icon: /*#__PURE__*/React.createElement(Archive, null),
    href: downloadAllUrl,
    tabIndex: 0
  }, I18n.t('core.fileList.downloadAll')), /*#__PURE__*/React.createElement(Box, {
    as: "ul"
  }, items.map(function (item, i) {
    var _qa$item;
    var name = getName(item);
    var downloadUrl = getDownloadUrl(item);
    return /*#__PURE__*/React.createElement(Item, {
      name: name,
      downloadUrl: getDownloadUrl(item),
      viewUrl: getViewUrl(item),
      "data-qa": qa === null || qa === void 0 ? void 0 : (_qa$item = qa.item) === null || _qa$item === void 0 ? void 0 : _qa$item.call(qa, item),
      key: "".concat(name, "-").concat(downloadUrl)
    });
  })));
});
export function Item(_ref2) {
  var name = _ref2.name,
    viewUrl = _ref2.viewUrl,
    downloadUrl = _ref2.downloadUrl,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var I18n = useI18nContext();
  return /*#__PURE__*/React.createElement(StyledFileListItem, props, viewUrl ? /*#__PURE__*/React.createElement(Typography, {
    intent: "body",
    weight: "semibold"
  }, /*#__PURE__*/React.createElement(Link, {
    href: viewUrl,
    target: "_blank",
    tabIndex: 0
  }, name)) : /*#__PURE__*/React.createElement(Typography, {
    intent: "body",
    color: "gray15"
  }, name), downloadUrl && /*#__PURE__*/React.createElement(Tooltip, {
    overlay: I18n.t('core.fileList.download')
  }, /*#__PURE__*/React.createElement(StyledFileListItemDownloadIcon, {
    "aria-label": I18n.t('core.fileList.download'),
    href: downloadUrl,
    icon: /*#__PURE__*/React.createElement(Download, {
      size: "sm"
    }),
    size: "sm",
    variant: "tertiary"
  })));
}
//# sourceMappingURL=FileList.js.map