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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
var _Icon;
import React, { useCallback, useRef } from 'react';
import classnames from 'classnames';
import Button from "../button/Button.js";
import Icon from "../../components/Icon.js";
import FormStatus from "../../components/FormStatus.js";
import ProgressIndicator from "../../components/progress-indicator/index.js";
import P from "../../elements/P.js";
import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_png_medium as png, file_jpg_medium as jpg, file_word_medium as doc, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from "../../icons/index.js";
import { getClosestParent } from "../../shared/component-helper.js";
import useUpload, { isFileEqual } from "./useUpload.js";
import { getFileTypeFromExtension } from "./UploadVerify.js";
import UploadFileLink from "./UploadFileListLink.js";
export const fileExtensionImages = {
  png,
  jpg,
  pdf,
  doc,
  docx: doc,
  odt: doc,
  xls,
  ppt,
  csv,
  txt,
  xml,
  file
};
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?.size > 0 ? URL.createObjectURL(file) : null;
  const cellRef = useRef();
  const exists = useExistsHighlight(id, file);
  const isDuplicate = !allowDuplicates && exists;
  const handleDisappearFocus = useCallback(() => {
    const cellElement = cellRef.current;
    const focusElement = getClosestParent('.dnb-upload', cellElement)?.querySelector('.dnb-upload__file-input-button');
    focusElement?.focus({
      preventScroll: true
    });
  }, [cellRef]);
  const onDeleteHandler = useCallback(() => {
    handleDisappearFocus();
    onDelete();
  }, [handleDisappearFocus, onDelete]);
  return React.createElement("li", {
    className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', isDuplicate && 'dnb-upload__file-cell--highlight'),
    ref: cellRef
  }, React.createElement("div", {
    className: "dnb-upload__file-cell__content"
  }, React.createElement("div", {
    className: "dnb-upload__file-cell__content__left"
  }, getFileIcon(file, {
    isLoading
  }, hasWarning), getTitle()), getDeleteButton()), getWarning());
  function getTitle() {
    return isLoading ? _div || (_div = React.createElement("div", {
      className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
    }, loadingText)) : React.createElement("div", {
      className: "dnb-upload__file-cell__text-container"
    }, React.createElement(UploadFileLink, {
      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.createElement("div", null, React.createElement(Button, _extends({
      icon: TrashIcon,
      variant: "tertiary",
      icon_position: "left",
      disabled: isLoading
    }, deleteButtonProps, {
      onClick: onDeleteHandler
    }), deleteButtonText));
  }
  function getDescription() {
    if (!description) {
      return null;
    }
    return _P || (_P = React.createElement(P, {
      className: "dnb-upload__text",
      top: "xx-small",
      size: "small"
    }, description));
  }
  function getWarning() {
    if (!hasWarning) {
      return null;
    }
    return _FormStatus || (_FormStatus = React.createElement(FormStatus, {
      top: "small",
      text: errorMessage,
      stretch: true
    }));
  }
};
export default UploadFileListCell;
function useExistsHighlight(id, file) {
  const {
    internalFiles
  } = useUpload(id);
  const [exists, updateExists] = React.useState(false);
  const timerRef = React.useRef();
  const clearTimers = () => {
    clearTimeout(timerRef.current);
  };
  React.useEffect(() => {
    const exists = internalFiles.some(({
      exists,
      file: f
    }) => {
      return exists && isFileEqual(file, f);
    });
    if (exists) {
      updateExists(true);
      clearTimers();
      timerRef.current = setTimeout(() => updateExists(false), 1500);
    }
    return clearTimers;
  }, [file, internalFiles]);
  return exists;
}
export function getFileIcon(file, loading, hasWarning) {
  if (loading?.isLoading) {
    var _loading$size;
    return React.createElement(ProgressIndicator, {
      size: (_loading$size = loading?.size) !== null && _loading$size !== void 0 ? _loading$size : 'default'
    });
  }
  if (hasWarning) return _Icon || (_Icon = React.createElement(Icon, {
    icon: ExclamationIcon
  }));
  let iconFileType = getFileTypeFromExtension(file);
  if (!iconFileType) {
    const mimeParts = file.type.split('/');
    iconFileType = fileExtensionImages[mimeParts[0]] || fileExtensionImages[mimeParts[1]];
  }
  if (!Object.hasOwn(fileExtensionImages, iconFileType)) {
    iconFileType = 'file';
  }
  return React.createElement(Icon, {
    icon: fileExtensionImages[iconFileType]
  });
}
//# sourceMappingURL=UploadFileListCell.js.map