@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
84 lines (80 loc) • 2.7 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_use_modal = require('../modal/use-modal.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(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 } = require_use_modal.useModal({
closeOnEsc,
closeOnOverlay,
onEsc,
...rest
});
const drag = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.useCallback)((props = {}) => ({
drag,
dragConstraints: getDragRestriction(dragConstraints),
dragElastic: getDragRestriction(dragElastic),
dragMomentum: false,
dragSnapToOrigin: true,
...(0, require_utils_index.utils_exports.cast)(getModalContentProps((0, require_utils_index.utils_exports.cast)(props))),
onDragEnd: (0, require_utils_index.utils_exports.handlerAll)(props.onDragEnd, onDragEnd)
}), [
drag,
getDragRestriction,
dragConstraints,
dragElastic,
onDragEnd,
getModalContentProps
]);
const getDragBarProps = (0, react.useCallback)((props) => ({ ...props }), []);
return {
...modalProps,
closeOnDrag,
getContentProps,
getDragBarProps,
onClose
};
};
//#endregion
exports.useDrawer = useDrawer;
//# sourceMappingURL=use-drawer.cjs.map