@yamada-ui/react/dist/esm/components/drawer/use-drawer.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useModal } from "../modal/use-modal.js";
import { useCallback, useMemo } from "react";

//#region src/components/drawer/use-drawer.ts
const useDrawer = ({ closeOnDrag = false, closeOnEsc, closeOnOverlay, dragConstraints = 0, dragElastic = .1, dragOffset = 80, dragVelocity = 100, placement = "inline-end", onEsc,...rest } = {}) => {
	const { getContentProps: getModalContentProps, onClose,...modalProps } = useModal({
		closeOnEsc,
		closeOnOverlay,
		onEsc,
		...rest
	});
	const drag = useMemo(() => {
		if (!closeOnDrag) return false;
		switch (placement) {
			case "block-start":
			case "block-end": return "y";
			case "inline-start":
			case "inline-end": return "x";
		}
	}, [placement, closeOnDrag]);
	const getDragRestriction = useCallback((value) => {
		switch (placement) {
			case "block-start": return { bottom: value };
			case "block-end": return { top: value };
			case "inline-start": return { right: value };
			case "inline-end": return { left: value };
		}
	}, [placement]);
	const onDragEnd = useCallback((_, info) => {
		switch (placement) {
			case "block-start":
				if (info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1) onClose();
				break;
			case "block-end":
				if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset) onClose();
				break;
			case "inline-start":
				if (info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1) onClose();
				break;
			case "inline-end":
				if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset) onClose();
				break;
		}
	}, [
		placement,
		dragVelocity,
		dragOffset,
		onClose
	]);
	const getContentProps = useCallback((props = {}) => ({
		drag,
		dragConstraints: getDragRestriction(dragConstraints),
		dragElastic: getDragRestriction(dragElastic),
		dragMomentum: false,
		dragSnapToOrigin: true,
		...(0, utils_exports.cast)(getModalContentProps((0, utils_exports.cast)(props))),
		onDragEnd: (0, utils_exports.handlerAll)(props.onDragEnd, onDragEnd)
	}), [
		drag,
		getDragRestriction,
		dragConstraints,
		dragElastic,
		onDragEnd,
		getModalContentProps
	]);
	const getDragBarProps = useCallback((props) => ({ ...props }), []);
	return {
		...modalProps,
		closeOnDrag,
		getContentProps,
		getDragBarProps,
		onClose
	};
};

//#endregion
export { useDrawer };
//# sourceMappingURL=use-drawer.js.map