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

DNB Eufemia Design System UI Library

"use client";

var _Icon;
import React, { useCallback, useRef } from 'react';
import clsx from 'clsx';
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";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
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(undefined);
  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 _jsxs("li", {
    className: clsx('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', isDuplicate && 'dnb-upload__file-cell--highlight'),
    ref: cellRef,
    children: [_jsxs("div", {
      className: "dnb-upload__file-cell__content",
      children: [_jsxs("div", {
        className: "dnb-upload__file-cell__content__left",
        children: [getFileIcon(file, {
          isLoading
        }, hasWarning), getTitle()]
      }), getDeleteButton()]
    }), getWarning()]
  });
  function getTitle() {
    return isLoading ? _div || (_div = _jsx("div", {
      className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading",
      children: loadingText
    })) : _jsxs("div", {
      className: "dnb-upload__file-cell__text-container",
      children: [_jsx(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 _jsx("div", {
      children: _jsx(Button, {
        icon: TrashIcon,
        variant: "tertiary",
        iconPosition: "left",
        disabled: isLoading,
        ...deleteButtonProps,
        onClick: onDeleteHandler,
        children: deleteButtonText
      })
    });
  }
  function getDescription() {
    if (!description) {
      return null;
    }
    return _P || (_P = _jsx(P, {
      className: "dnb-upload__text",
      top: "xx-small",
      size: "small",
      children: description
    }));
  }
  function getWarning() {
    if (!hasWarning) {
      return null;
    }
    return _FormStatus || (_FormStatus = _jsx(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(undefined);
  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 _jsx(ProgressIndicator, {
      size: (_loading$size = loading?.size) !== null && _loading$size !== void 0 ? _loading$size : 'default'
    });
  }
  if (hasWarning) return _Icon || (_Icon = _jsx(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 _jsx(Icon, {
    icon: fileExtensionImages[iconFileType]
  });
}
//# sourceMappingURL=UploadFileListCell.js.map