@kadoui/react
Version:
Kadoui primitive components for React
38 lines (37 loc) • 1.84 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { motion } from "framer-motion";
import { use, useEffect, useRef } from "react";
import { DrawerContext } from "./DrawerContext";
export function DrawerBody({ position, dir, children, ...p }) {
const { isOpen } = use(DrawerContext);
const bodyRef = useRef(null);
useEffect(() => {
if (isOpen) {
const indexElement = bodyRef.current?.querySelector("[data-drawer='index']");
indexElement?.focus();
}
;
}, [isOpen]);
const currentDir = (dir || document.documentElement.getAttribute("dir") || "ltr");
const currentPosition = position || (currentDir === "ltr" ? "left" : "right");
const direction = ["right", "left"].includes(currentPosition) ? "y" : "x";
const width = direction === "y" ? "clamp(300px,30%,30%)" : undefined;
const height = direction === "y" ? undefined : "50%";
return (_jsx(motion.div, { ref: bodyRef, onClick: ev => ev.stopPropagation(), initial: direction === "y"
? { x: currentPosition === "left" ? "-100%" : "100%" }
: { y: currentPosition === "top" ? "-100%" : "100%" }, animate: { y: 0, x: 0 }, exit: direction === "y"
? { x: currentPosition === "left" ? "-100%" : "100%" }
: { y: currentPosition === "top" ? "-100%" : "100%" }, style: {
width,
height,
...(currentPosition === "top"
? { top: 0, left: 0, right: 0 }
: currentPosition === "right"
? { top: 0, bottom: 0, right: 0 }
: currentPosition === "bottom"
? { bottom: 0, left: 0, right: 0 }
: { top: 0, bottom: 0, left: 0 })
}, transition: { ease: "easeInOut" }, ...p, children: children }));
}
;