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

DNB Eufemia Design System UI Library

"use client";

var _UploadInfo, _UploadFileList, _br;
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import React, { useCallback } from 'react';
import clsx from 'clsx';
import { applySpacing } from "../space/SpacingUtils.js";
import Provider from "../../shared/Provider.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext, makeUniqueId } from "../../shared/component-helper.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.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";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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
  }, pickFormElementProps(context === null || context === void 0 ? void 0 : context.formElement), 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,
    listAriaLabel,
    buttonProps,
    disableDragAndDrop,
    ...props
  } = extendedProps;
  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 _jsx(UploadContext, {
    value: {
      ...extendedProps,
      id,
      onInputUpload
    },
    children: _jsx(Provider, {
      skeleton: skeleton,
      children: _jsxs(UploadWrapper, {
        ...applySpacing(props, {
          className: clsx("dnb-upload dnb-form-component", className, variant && `dnb-upload--${variant}`)
        }),
        ...(!wrapperIsHeightAnimation ? {
          hideOutline: variant === 'compact'
        } : {}),
        children: [variant !== 'compact' && (_UploadInfo || (_UploadInfo = _jsx(UploadInfo, {}))), variant === 'compact' && (title || text) && _jsxs(_Fragment, {
          children: [_jsx(CompactLabel, {
            id: id,
            title: title,
            text: text
          }), props === null || props === void 0 ? void 0 : props.children]
        }), _jsx(UploadFileInput, {
          disabled: props.disabled,
          files: files,
          ...props
        }), _UploadFileList || (_UploadFileList = _jsx(UploadFileList, {}))]
      })
    })
  });
};
function CompactLabel(props) {
  const {
    id,
    title,
    text
  } = props;
  return _jsx(FormLabel, {
    forId: `${id}-input`,
    vertical: true,
    className: "dnb-upload__label",
    children: _jsxs("span", {
      children: [title && _jsx("span", {
        children: title
      }), title && text && (_br || (_br = _jsx("br", {}))), text && _jsx("span", {
        className: "dnb-upload__text",
        children: text
      })]
    })
  });
}
Upload.useUpload = useUpload;
withComponentMarkers(Upload, {
  _formElement: true,
  _supportsSpacingProps: true
});
export default Upload;
//# sourceMappingURL=Upload.js.map