@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
201 lines (197 loc) • 7.7 kB
JavaScript
"use client";
import { useSplitChildren, wrapOrPassProps } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { motion as motion$1 } from "../motion/factory.js";
import { Portal } from "../portal/portal.js";
import { useValue } from "../../hooks/use-value/index.js";
import { Button } from "../button/button.js";
import { CloseButton } from "../close-button/close-button.js";
import { fadeVariants } from "../fade/fade.js";
import { FocusLock } from "../focus-lock/focus-lock.js";
import { drawerStyle } from "./drawer.style.js";
import { Slide } from "../slide/slide.js";
import { useDrawer } from "./use-drawer.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { AnimatePresence } from "motion/react";
import { RemoveScroll } from "react-remove-scroll";
//#region src/components/drawer/drawer.tsx
const { ComponentContext, PropsContext: DrawerPropsContext, useComponentContext, usePropsContext: useDrawerPropsContext, withContext, withProvider } = createSlotComponent("drawer", drawerStyle);
/**
* `Drawer` is a component for a panel that appears from the edge of the screen.
*
* @see https://yamada-ui.com/docs/components/drawer
*/
const DrawerRoot = withProvider(({ allowPinchZoom = false, autoFocus, blockScrollOnMount = true, body, cancel, children, closeOnDrag, dragConstraints, dragElastic, dragOffset, dragVelocity, duration = {
enter: .4,
exit: .3
}, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, placement: placementProp, restoreFocus, success, title, trigger, withCloseButton = !closeOnDrag, withDragBar = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess,...props }) => {
const placement = useValue(placementProp);
const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(children, DrawerOpenTrigger, DrawerOverlay);
const hasChildren = (0, utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
const { open, getRootProps,...rest } = useDrawer({
closeOnDrag,
dragConstraints,
dragElastic,
dragOffset,
dragVelocity,
placement,
...props
});
const customOpenTrigger = trigger ? /* @__PURE__ */ jsx(DrawerOpenTrigger, { children: trigger }) : null;
return /* @__PURE__ */ jsxs(ComponentContext, {
value: useMemo(() => ({
duration,
open,
placement,
withCloseButton,
withDragBar,
...rest
}), [
duration,
open,
withDragBar,
placement,
withCloseButton,
rest
]),
children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ jsx(AnimatePresence, {
onExitComplete: onCloseComplete,
children: open ? /* @__PURE__ */ jsx(Portal, {
...portalProps,
children: /* @__PURE__ */ jsx(FocusLock, {
autoFocus,
finalFocusRef,
initialFocusRef,
lockFocusAcrossFrames,
restoreFocus,
children: /* @__PURE__ */ jsx(RemoveScroll, {
allowPinchZoom,
enabled: blockScrollOnMount,
forwardProps: true,
children: /* @__PURE__ */ jsxs(styled.div, {
...getRootProps(),
children: [customOverlay ?? (withOverlay ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null), hasChildren ? omittedChildren : /* @__PURE__ */ jsx(ShorthandDrawerContent, {
body,
cancel,
footer,
header,
middle,
success,
title,
onCancel,
onMiddle,
onSuccess
})]
})
})
})
}) : null
})]
});
}, "root", { transferProps: ["placement"] })();
const DrawerOpenTrigger = withContext("button", {
name: "OpenTrigger",
slot: ["trigger", "open"]
})(void 0, (props) => {
const { getOpenTriggerProps } = useComponentContext();
return {
asChild: true,
...getOpenTriggerProps(props)
};
});
const DrawerCloseTrigger = withContext("button", {
name: "CloseTrigger",
slot: ["trigger", "close"]
})(void 0, (props) => {
const { getCloseTriggerProps } = useComponentContext();
return {
asChild: true,
...getCloseTriggerProps(props)
};
});
const DrawerCloseButton = withContext(CloseButton, "closeButton")(void 0, (props) => {
const { getCloseButtonProps } = useComponentContext();
return { ...getCloseButtonProps(props) };
});
const DrawerOverlay = withContext((props) => {
const { duration, getOverlayProps } = useComponentContext();
return /* @__PURE__ */ jsx(motion$1.div, {
animate: "enter",
custom: { duration },
exit: "exit",
initial: "exit",
variants: fadeVariants,
...(0, utils_exports.cast)(getOverlayProps((0, utils_exports.cast)(props)))
});
}, "overlay")();
const DrawerContent = withContext(({ children,...rest }) => {
const { closeOnDrag, duration, open, placement, withCloseButton, withDragBar, getContentProps } = useComponentContext();
const [omittedChildren, customCloseButton, customDragBar] = useSplitChildren(children, DrawerCloseButton, DrawerDragBar);
return /* @__PURE__ */ jsxs(Slide, {
as: "section",
duration,
open,
placement,
...getContentProps(rest),
children: [
customCloseButton ?? (withCloseButton ? /* @__PURE__ */ jsx(DrawerCloseButton, {}) : null),
customDragBar ?? (withDragBar && closeOnDrag ? /* @__PURE__ */ jsx(DrawerDragBar, {}) : null),
omittedChildren
]
});
}, "content")();
const ShorthandDrawerContent = ({ body, cancel, footer, header, middle, success, title, onCancel, onMiddle, onSuccess }) => {
const { onClose } = useComponentContext();
const customHeader = wrapOrPassProps(DrawerHeader, header);
const customTitle = wrapOrPassProps(DrawerTitle, title);
const customBody = wrapOrPassProps(DrawerBody, body);
const customFooter = wrapOrPassProps(DrawerFooter, footer);
const customCancel = wrapOrPassProps(Button, cancel, {
colorScheme: "mono",
variant: "ghost",
onClick: () => onCancel ? onCancel(onClose) : onClose()
});
const customMiddle = wrapOrPassProps(Button, middle, {
colorScheme: "secondary",
onClick: () => onMiddle ? onMiddle(onClose) : onClose()
});
const customSuccess = wrapOrPassProps(Button, success, {
colorScheme: "primary",
onClick: () => onSuccess ? onSuccess(onClose) : onClose()
});
return /* @__PURE__ */ jsxs(DrawerContent, { children: [
customHeader ?? (customTitle ? /* @__PURE__ */ jsx(DrawerHeader, { children: customTitle }) : null),
customBody,
customFooter ?? (customCancel || customMiddle || customSuccess ? /* @__PURE__ */ jsxs(DrawerFooter, { children: [
customCancel,
customMiddle,
customSuccess
] }) : null)
] });
};
const DrawerDragBar = withContext("div", "dragBar")(void 0, (props) => {
const { getDragBarProps } = useComponentContext();
return { ...getDragBarProps(props) };
});
const DrawerHeader = withContext("header", "header")(void 0, (props) => {
const { getHeaderProps } = useComponentContext();
return { ...getHeaderProps(props) };
});
const DrawerTitle = withContext("h2", "title")(void 0, (props) => {
const { getTitleProps } = useComponentContext();
return { ...getTitleProps(props) };
});
const DrawerBody = withContext("div", "body")(void 0, (props) => {
const { getBodyProps } = useComponentContext();
return { ...getBodyProps(props) };
});
const DrawerFooter = withContext("footer", "footer")(void 0, (props) => {
const { getFooterProps } = useComponentContext();
return { ...getFooterProps(props) };
});
//#endregion
export { DrawerBody, DrawerCloseButton, DrawerCloseTrigger, DrawerContent, DrawerDragBar, DrawerFooter, DrawerHeader, DrawerOpenTrigger, DrawerOverlay, DrawerPropsContext, DrawerRoot, DrawerTitle, useDrawerPropsContext };
//# sourceMappingURL=drawer.js.map