@dnb/eufemia/cjs/components/upload/UploadFileListCell.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.fileExtensionImages = exports.default = void 0;
exports.getFileIcon = getFileIcon;
var _index = _interopRequireDefault(require("core-js-pure/stable/url/index.js"));
var _hasOwn = _interopRequireDefault(require("core-js-pure/stable/object/has-own.js"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _Icon2 = _interopRequireDefault(require("../../components/Icon.js"));
var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus.js"));
var _index2 = _interopRequireDefault(require("../../components/progress-indicator/index.js"));
var _P2 = _interopRequireDefault(require("../../elements/P.js"));
var _index3 = require("../../icons/index.js");
var _componentHelper = require("../../shared/component-helper.js");
var _useUpload = _interopRequireWildcard(require("./useUpload.js"));
var _UploadVerify = require("./UploadVerify.js");
var _UploadFileListLink = _interopRequireDefault(require("./UploadFileListLink.js"));
var _Icon;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const fileExtensionImages = exports.fileExtensionImages = {
  png: _index3.file_png_medium,
  jpg: _index3.file_jpg_medium,
  pdf: _index3.file_pdf_medium,
  doc: _index3.file_word_medium,
  docx: _index3.file_word_medium,
  odt: _index3.file_word_medium,
  xls: _index3.file_xls_medium,
  ppt: _index3.file_ppt_medium,
  csv: _index3.file_csv_medium,
  txt: _index3.file_txt_medium,
  xml: _index3.file_xml_medium,
  file: _index3.file_medium
};
const UploadFileListCell = ({
  id,
  uploadFile,
  onDelete,
  onClick,
  loadingText,
  deleteButtonText,
  download,
  allowDuplicates
}) => {
  var _div, _P, _FormStatus;
  const {
    file,
    errorMessage,
    isLoading,
    description,
    removeDeleteButton,
    deleteButtonProps,
    removeLink
  } = uploadFile;
  const hasWarning = errorMessage != null;
  const imageUrl = (file === null || file === void 0 ? void 0 : file.size) > 0 ? _index.default.createObjectURL(file) : null;
  const cellRef = (0, _react.useRef)();
  const exists = useExistsHighlight(id, file);
  const isDuplicate = !allowDuplicates && exists;
  const handleDisappearFocus = (0, _react.useCallback)(() => {
    var _getClosestParent;
    const cellElement = cellRef.current;
    const focusElement = (_getClosestParent = (0, _componentHelper.getClosestParent)('.dnb-upload', cellElement)) === null || _getClosestParent === void 0 ? void 0 : _getClosestParent.querySelector('.dnb-upload__file-input-button');
    focusElement === null || focusElement === void 0 || focusElement.focus({
      preventScroll: true
    });
  }, [cellRef]);
  const onDeleteHandler = (0, _react.useCallback)(() => {
    handleDisappearFocus();
    onDelete();
  }, [handleDisappearFocus, onDelete]);
  return _react.default.createElement("li", {
    className: (0, _classnames.default)('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', isDuplicate && 'dnb-upload__file-cell--highlight'),
    ref: cellRef
  }, _react.default.createElement("div", {
    className: "dnb-upload__file-cell__content"
  }, _react.default.createElement("div", {
    className: "dnb-upload__file-cell__content__left"
  }, getFileIcon(file, {
    isLoading
  }, hasWarning), getTitle()), getDeleteButton()), getWarning());
  function getTitle() {
    return isLoading ? _div || (_div = _react.default.createElement("div", {
      className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
    }, loadingText)) : _react.default.createElement("div", {
      className: "dnb-upload__file-cell__text-container"
    }, _react.default.createElement(_UploadFileListLink.default, {
      text: file.name,
      href: removeLink ? null : imageUrl,
      download: removeLink ? false : download,
      onClick: removeLink ? undefined : onClick,
      bottom: 0
    }), getDescription());
  }
  function getDeleteButton() {
    if (removeDeleteButton) {
      return null;
    }
    return _react.default.createElement("div", null, _react.default.createElement(_Button.default, _extends({
      icon: _index3.trash,
      variant: "tertiary",
      icon_position: "left",
      disabled: isLoading
    }, deleteButtonProps, {
      onClick: onDeleteHandler
    }), deleteButtonText));
  }
  function getDescription() {
    if (!description) {
      return null;
    }
    return _P || (_P = _react.default.createElement(_P2.default, {
      className: "dnb-upload__text",
      top: "xx-small",
      size: "small"
    }, description));
  }
  function getWarning() {
    if (!hasWarning) {
      return null;
    }
    return _FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
      top: "small",
      text: errorMessage,
      stretch: true
    }));
  }
};
var _default = exports.default = UploadFileListCell;
function useExistsHighlight(id, file) {
  const {
    internalFiles
  } = (0, _useUpload.default)(id);
  const [exists, updateExists] = _react.default.useState(false);
  const timerRef = _react.default.useRef();
  const clearTimers = () => {
    clearTimeout(timerRef.current);
  };
  _react.default.useEffect(() => {
    const exists = internalFiles.some(({
      exists,
      file: f
    }) => {
      return exists && (0, _useUpload.isFileEqual)(file, f);
    });
    if (exists) {
      updateExists(true);
      clearTimers();
      timerRef.current = setTimeout(() => updateExists(false), 1500);
    }
    return clearTimers;
  }, [file, internalFiles]);
  return exists;
}
function getFileIcon(file, loading, hasWarning) {
  if (loading !== null && loading !== void 0 && loading.isLoading) {
    var _loading$size;
    return _react.default.createElement(_index2.default, {
      size: (_loading$size = loading === null || loading === void 0 ? void 0 : loading.size) !== null && _loading$size !== void 0 ? _loading$size : 'default'
    });
  }
  if (hasWarning) return _Icon || (_Icon = _react.default.createElement(_Icon2.default, {
    icon: _index3.exclamation_medium
  }));
  let iconFileType = (0, _UploadVerify.getFileTypeFromExtension)(file);
  if (!iconFileType) {
    const mimeParts = file.type.split('/');
    iconFileType = fileExtensionImages[mimeParts[0]] || fileExtensionImages[mimeParts[1]];
  }
  if (!(0, _hasOwn.default)(fileExtensionImages, iconFileType)) {
    iconFileType = 'file';
  }
  return _react.default.createElement(_Icon2.default, {
    icon: fileExtensionImages[iconFileType]
  });
}
//# sourceMappingURL=UploadFileListCell.js.map