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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
var _UploadInfo, _UploadFileList, _br;
import React, { useCallback } from 'react';
import classnames from 'classnames';
import { createSpacingClasses } from "../space/SpacingHelper.js";
import Provider from "../../shared/Provider.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext, makeUniqueId } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import UploadFileInput from "./UploadFileInput.js";
import useUpload from "./useUpload.js";
import UploadDropzone from "./UploadDropzone.js";
import { UploadContext, defaultProps } from "./UploadContext.js";
import { verifyFiles } from "./UploadVerify.js";
import UploadFileList from "./UploadFileList.js";
import UploadInfo from "./UploadInfo.js";
import FormLabel from "../FormLabel.js";
export { defaultProps };
const Upload = localProps => {
  const context = React.useContext(Context);
  const {
    buttonTextSingular,
    textSingular,
    ...translations
  } = context.getTranslation(localProps).Upload;
  if ((localProps === null || localProps === void 0 ? void 0 : localProps.filesAmountLimit) === 1) {
    translations.buttonText = buttonTextSingular;
    translations.text = textSingular;
  }
  const extendedProps = extendPropsWithContext(localProps, defaultProps, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, translations, context.Upload);
  const {
    id: idProp,
    variant,
    skeleton,
    className,
    acceptedFileTypes,
    filesAmountLimit,
    fileMaxSize,
    onChange,
    onFileDelete,
    onFileClick,
    download,
    allowDuplicates,
    title,
    text,
    fileTypeTableCaption,
    fileTypeDescription,
    fileSizeDescription,
    fileAmountDescription,
    fileSizeContent,
    buttonText,
    loadingText,
    errorLargeFile,
    errorUnsupportedFile,
    errorAmountLimit,
    deleteButton,
    fileListAriaLabel,
    buttonProps,
    disableDragAndDrop,
    ...props
  } = extendedProps;
  const spacingClasses = createSpacingClasses(props);
  const id = useId(idProp);
  const {
    files,
    setFiles,
    setInternalFiles,
    getExistingFile
  } = useUpload(id);
  const onInputUpload = useCallback(newFiles => {
    const mergedFiles = [...files, ...newFiles.map(fileItem => {
      const {
        file
      } = fileItem;
      const existingFile = getExistingFile(file, files);
      fileItem.exists = Boolean(existingFile);
      fileItem.id = fileItem.exists && !allowDuplicates ? existingFile.id : makeUniqueId();
      return fileItem;
    })];
    const filesToVerify = allowDuplicates ? mergedFiles : mergedFiles.filter(({
      exists
    }) => !exists);
    const verifiedFiles = verifyFiles(filesToVerify, {
      fileMaxSize,
      acceptedFileTypes,
      errorUnsupportedFile,
      errorLargeFile
    });
    const validFiles = [...verifiedFiles].slice(0, filesAmountLimit);
    setFiles(validFiles);
    setInternalFiles(mergedFiles);
    if (typeof onChange === 'function') {
      onChange({
        files: validFiles
      });
    }
    return validFiles;
  }, [acceptedFileTypes, errorLargeFile, errorUnsupportedFile, fileMaxSize, files, filesAmountLimit, getExistingFile, onChange, setFiles, setInternalFiles]);
  const wrapperIsHeightAnimation = disableDragAndDrop || props.disabled;
  const UploadWrapper = wrapperIsHeightAnimation ? HeightAnimation : UploadDropzone;
  return React.createElement(UploadContext.Provider, {
    value: {
      ...extendedProps,
      id,
      onInputUpload
    }
  }, React.createElement(Provider, {
    skeleton: skeleton
  }, React.createElement(UploadWrapper, _extends({
    className: classnames('dnb-upload', spacingClasses, className, variant && `dnb-upload--${variant}`)
  }, !wrapperIsHeightAnimation ? {
    hideOutline: variant === 'compact'
  } : {}), variant !== 'compact' && (_UploadInfo || (_UploadInfo = React.createElement(UploadInfo, null))), variant === 'compact' && (title || text) && React.createElement(React.Fragment, null, React.createElement(CompactLabel, {
    id: id,
    title: title,
    text: text
  }), props === null || props === void 0 ? void 0 : props.children), React.createElement(UploadFileInput, _extends({
    disabled: props.disabled,
    files: files
  }, props)), _UploadFileList || (_UploadFileList = React.createElement(UploadFileList, null)))));
};
function CompactLabel(props) {
  const {
    id,
    title,
    text
  } = props;
  return React.createElement(FormLabel, {
    forId: `${id}-input`,
    vertical: true,
    className: "dnb-upload__label"
  }, React.createElement("span", null, title && React.createElement("span", null, title), title && text && (_br || (_br = React.createElement("br", null))), text && React.createElement("span", {
    className: "dnb-upload__text"
  }, text)));
}
Upload.useUpload = useUpload;
Upload._formElement = true;
Upload._supportsSpacingProps = true;
export default Upload;
//# sourceMappingURL=Upload.js.map