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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
var _UploadStatus;
import React, { useCallback, useRef } from 'react';
import Button from "../button/Button.js";
import { folder as FolderIcon } from "../../icons/index.js";
import { makeUniqueId } from "../../shared/component-helper.js";
import { UploadContext } from "./UploadContext.js";
import UploadStatus from "./UploadStatus.js";
import { getAcceptedFileTypes } from "./UploadVerify.js";
const UploadFileInput = ({
  children,
  disabled,
  files,
  ...rest
}) => {
  const fileInput = useRef(null);
  const context = React.useContext(UploadContext);
  const {
    id,
    acceptedFileTypes,
    buttonText,
    onInputUpload,
    filesAmountLimit,
    variant,
    buttonProps
  } = context;
  const openFileDialog = () => {
    var _fileInput$current;
    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
  };
  const sharedId = id || makeUniqueId();
  const accept = getAcceptedFileTypes(acceptedFileTypes);
  const onChangeHandler = useCallback(event => {
    const target = event.target;
    const {
      files
    } = target;
    onInputUpload(Array.from(files).map(file => {
      return {
        file
      };
    }));
  }, [onInputUpload]);
  const onClickHandler = useCallback(event => {
    const target = event.target;
    target.value = null;
  }, []);
  return React.createElement("div", {
    className: "dnb-upload__file-input-area"
  }, filesAmountLimit !== (files === null || files === void 0 ? void 0 : files.length) && React.createElement(Button, _extends({
    top: variant === 'normal' ? 'medium' : undefined,
    id: `${sharedId}-input`,
    className: "dnb-upload__file-input-button",
    icon: FolderIcon,
    icon_position: "left",
    variant: "secondary",
    wrap: true,
    disabled: disabled,
    text: buttonText
  }, buttonProps, {
    onClick: e => {
      var _buttonProps$onClick;
      openFileDialog();
      buttonProps === null || buttonProps === void 0 || (_buttonProps$onClick = buttonProps.onClick) === null || _buttonProps$onClick === void 0 || _buttonProps$onClick.call(buttonProps, e);
    }
  })), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", _extends({
    "aria-labelledby": `${sharedId}-input`,
    ref: fileInput,
    accept: accept,
    className: "dnb-upload__file-input",
    type: "file",
    onChange: onChangeHandler,
    onClick: onClickHandler,
    multiple: filesAmountLimit > 1,
    disabled: disabled
  }, rest)));
};
export default UploadFileInput;
//# sourceMappingURL=UploadFileInput.js.map