@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
74 lines (73 loc) • 2.17 kB
JavaScript
"use client";
import { useIsomorphicEffect } from "../use-isomorphic-effect/use-isomorphic-effect.mjs";
import { useCallback, useRef, useState } from "react";
//#region packages/@mantine/hooks/src/use-file-dialog/use-file-dialog.ts
const defaultOptions = {
multiple: true,
accept: "*"
};
function getInitialFilesList(files) {
if (!files) return null;
if (files instanceof FileList) return files;
const result = new DataTransfer();
for (const file of files) result.items.add(file);
return result.files;
}
function createInput(options) {
if (typeof document === "undefined") return null;
const input = document.createElement("input");
input.type = "file";
if (options.accept) input.accept = options.accept;
if (options.multiple) input.multiple = options.multiple;
if (options.capture) input.capture = options.capture;
if (options.directory) input.webkitdirectory = options.directory;
input.style.display = "none";
return input;
}
function useFileDialog(input = {}) {
const options = {
...defaultOptions,
...input
};
const [files, setFiles] = useState(getInitialFilesList(options.initialFiles));
const inputRef = useRef(null);
const handleChange = useCallback((event) => {
const target = event.target;
if (target?.files) {
setFiles(target.files);
options.onChange?.(target.files);
}
}, [options.onChange]);
const createAndSetupInput = useCallback(() => {
inputRef.current?.remove();
inputRef.current = createInput(options);
if (inputRef.current) {
inputRef.current.addEventListener("change", handleChange, { once: true });
document.body.appendChild(inputRef.current);
}
}, [options, handleChange]);
useIsomorphicEffect(() => {
createAndSetupInput();
return () => inputRef.current?.remove();
}, []);
const reset = useCallback(() => {
setFiles(null);
options.onChange?.(null);
}, [options.onChange]);
return {
files,
open: useCallback(() => {
if (options.resetOnOpen) reset();
createAndSetupInput();
inputRef.current?.click();
}, [
options.resetOnOpen,
reset,
createAndSetupInput
]),
reset
};
}
//#endregion
export { useFileDialog };
//# sourceMappingURL=use-file-dialog.mjs.map