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

DNB Eufemia Design System UI Library

"use client";

var _Icon;
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/web.url.js";
import "core-js/modules/web.url.to-json.js";
import "core-js/modules/web.url-search-params.js";
import React, { useCallback, useRef } from 'react';
import classnames from 'classnames';
import Button from '../button/Button';
import Icon from '../../components/Icon';
import FormStatus from '../../components/FormStatus';
import ProgressIndicator from '../../components/progress-indicator';
import P from '../../elements/P';
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';
import { getPreviousSibling } from '../../shared/component-helper';
import useUpload, { isFileEqual } from './useUpload';
import { getFileTypeFromExtension } from './UploadVerify';
import UploadFileLink from './UploadFileListLink';
export const fileExtensionImages = {
  png,
  jpg,
  pdf,
  doc,
  docx: doc,
  odt: doc,
  xls,
  ppt,
  csv,
  txt,
  xml,
  file
};
const UploadFileListCell = _ref => {
  var _div, _div2, _P, _FormStatus;
  let {
    id,
    uploadFile,
    onDelete,
    onClick,
    loadingText,
    deleteButtonText,
    download,
    allowDuplicates
  } = _ref;
  const {
    file,
    errorMessage,
    isLoading,
    description,
    removeDeleteButton
  } = uploadFile;
  const hasWarning = errorMessage != null;
  const imageUrl = (file === null || file === void 0 ? void 0 : file.size) > 0 ? URL.createObjectURL(file) : null;
  const cellRef = useRef();
  const exists = useExistsHighlight(id, file);
  const isDuplicate = !allowDuplicates && exists;
  const handleDisappearFocus = useCallback(() => {
    var _getPreviousSibling;
    const cellElement = cellRef.current;
    const focusElement = (_getPreviousSibling = getPreviousSibling('.dnb-upload', cellElement)) === null || _getPreviousSibling === void 0 ? void 0 : _getPreviousSibling.querySelector('.dnb-upload__file-input-button');
    focusElement === null || focusElement === void 0 ? void 0 : 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: imageUrl,
      download: download,
      onClick: onClick,
      bottom: 0
    }), getDescription());
  }
  function getDeleteButton() {
    if (removeDeleteButton) {
      return null;
    }
    return _div2 || (_div2 = React.createElement("div", null, React.createElement(Button, {
      icon: TrashIcon,
      variant: "tertiary",
      onClick: onDeleteHandler,
      icon_position: "left",
      disabled: isLoading
    }, deleteButtonText)));
  }
  function getDescription() {
    if (!description) {
      return null;
    }
    return _P || (_P = React.createElement(P, {
      className: "dnb-upload__text"
    }, 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(_ref2 => {
      let {
        exists,
        file: f
      } = _ref2;
      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 !== null && loading !== void 0 && loading.isLoading) {
    var _loading$size;
    return React.createElement(ProgressIndicator, {
      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.createElement(Icon, {
    icon: ExclamationIcon
  }));
  let iconFileType = getFileTypeFromExtension(file);
  if (!iconFileType) {
    const mimeParts = file.type.split('/');
    iconFileType = fileExtensionImages[mimeParts[0]] || fileExtensionImages[mimeParts[1]];
  }
  if (!Object.prototype.hasOwnProperty.call(fileExtensionImages, iconFileType)) {
    iconFileType = 'file';
  }
  return React.createElement(Icon, {
    icon: fileExtensionImages[iconFileType]
  });
}
//# sourceMappingURL=UploadFileListCell.js.map