@kadoui/react
Version:
Kadoui primitive components for React
27 lines (26 loc) • 1.04 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { use } from "react";
import { motion, useDragControls } from "framer-motion";
import { SheetContext } from "./SheetContext";
export function SheetBody({ onPointerDown, ...p }) {
const controls = useDragControls();
const { y, closeHandler: handleClose } = use(SheetContext);
return (_jsx(motion.div, { id: "sheet", onClick: (ev) => ev.stopPropagation(), initial: { y: "100%" }, animate: { y: "0%" }, exit: { y: "100%" }, style: { y }, drag: "y", dragListener: false, dragControls: controls, onPointerDown: (ev) => {
ev.stopPropagation();
controls?.start(ev);
onPointerDown?.(ev);
}, transition: {
ease: "easeInOut",
}, onDragEnd: () => {
if ((y?.get() || 0) >= 100) {
handleClose();
}
}, dragConstraints: {
top: 0,
bottom: 0,
}, dragElastic: {
top: 0,
bottom: 0.5,
}, ...p }));
}