@mantine/dropzone/cjs/DropzoneFullScreen.cjs

Dropzone component built with Mantine theme and components

"use client";
const require_Dropzone_module = require("./Dropzone.module.cjs");
const require_Dropzone = require("./Dropzone.cjs");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/dropzone/src/DropzoneFullScreen.tsx
const defaultProps = {
	maxSize: Infinity,
	activateOnDrag: true,
	dragEventsBubbling: true,
	activateOnKeyboard: true,
	active: true,
	zIndex: (0, _mantine_core.getDefaultZIndex)("max"),
	withinPortal: true
};
const DropzoneFullScreen = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("DropzoneFullScreen", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, active, onDrop, onReject, zIndex, withinPortal, portalProps, attributes, mod, ...others } = props;
	const getStyles = (0, _mantine_core.useStyles)({
		name: "DropzoneFullScreen",
		classes: require_Dropzone_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: "fullScreen"
	});
	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
		classNames,
		styles,
		props
	});
	const [counter, setCounter] = (0, react.useState)(0);
	const [visible, { open, close }] = (0, _mantine_hooks.useDisclosure)(false);
	const handleDragEnter = (event) => {
		if (event.dataTransfer?.types.includes("Files")) {
			setCounter((prev) => prev + 1);
			open();
		}
	};
	const handleDragLeave = () => {
		setCounter((prev) => prev - 1);
	};
	(0, react.useEffect)(() => {
		counter === 0 && close();
	}, [counter]);
	(0, react.useEffect)(() => {
		if (!active) return;
		document.addEventListener("dragenter", handleDragEnter, false);
		document.addEventListener("dragleave", handleDragLeave, false);
		return () => {
			document.removeEventListener("dragenter", handleDragEnter, false);
			document.removeEventListener("dragleave", handleDragLeave, false);
		};
	}, [active]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.OptionalPortal, {
		...portalProps,
		withinPortal,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
			...getStyles("fullScreen", { style: {
				opacity: visible ? 1 : 0,
				pointerEvents: visible ? "all" : "none",
				zIndex
			} }),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dropzone.Dropzone, {
				activateOnClick: false,
				...others,
				classNames: resolvedClassNames,
				styles: resolvedStyles,
				unstyled,
				className: require_Dropzone_module.default.dropzone,
				onDrop: (files) => {
					onDrop?.(files);
					close();
					setCounter(0);
				},
				onReject: (files) => {
					onReject?.(files);
					close();
					setCounter(0);
				}
			})
		})
	});
});
DropzoneFullScreen.classes = require_Dropzone_module.default;
DropzoneFullScreen.displayName = "@mantine/dropzone/DropzoneFullScreen";
//#endregion
exports.DropzoneFullScreen = DropzoneFullScreen;

//# sourceMappingURL=DropzoneFullScreen.cjs.map