@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
77 lines (76 loc) • 2.3 kB
JavaScript
"use client";
import _extends from "@babel/runtime/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 = () => 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?.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 => {
openFileDialog();
buttonProps?.onClick?.(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