p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve stability of drawer using relative and padding

Browse Source
This commit is contained in:
p-sw 2024-08-09 11:44:18 +09:00
parent 81854841ce
commit a6af5622dd
1 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/react/components/Drawer.tsx
View File

@ -1,3 +1,5 @@
"use client";
import { import {
type AsChild, type AsChild,
Slot, Slot,
@ -186,10 +188,10 @@ const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`, base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`,
variants: { variants: {
position: { position: {
top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2", top: "top-0 w-full max-w-screen rounded-t-lg border-b-2",
bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2", bottom: "bottom-0 w-full max-w-screen rounded-b-lg border-t-2",
left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2", left: "left-0 h-screen rounded-l-lg border-r-2",
right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2", right: "right-0 h-screen rounded-r-lg border-l-2",
}, },
maxSize: { maxSize: {
sm: "[&.left-0]:max-w-sm [&.right-0]:max-w-sm", sm: "[&.left-0]:max-w-sm [&.right-0]:max-w-sm",
@ -202,16 +204,36 @@ const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
false: false:
"[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full", "[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
}, },
internal: {
true: "relative",
false: "fixed",
},
}, },
defaults: { defaults: {
position: "left", position: "left",
opened: false, opened: false,
maxSize: "sm", maxSize: "sm",
internal: false,
}, },
dynamics: [
({ position, internal }) => {
if (!internal) {
if (["top", "bottom"].includes(position)) {
return "inset-x-0";
}
return "inset-y-0";
}
return "w-fit";
},
],
}); });
interface DrawerContentProps interface DrawerContentProps
extends Omit<VariantProps<typeof drawerContentVariant>, "opened">, extends Omit<
VariantProps<typeof drawerContentVariant>,
"opened" | "internal"
>,
AsChild, AsChild,
ComponentPropsWithoutRef<"div"> {} ComponentPropsWithoutRef<"div"> {}
@ -352,7 +374,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
<div <div
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: true, opened: state.isRendered,
className: dragState.isDragging className: dragState.isDragging
? "transition-[width] duration-0" ? "transition-[width] duration-0"
: variantProps.className, : variantProps.className,
@ -366,6 +388,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "top" ? dragState.delta : -dragState.delta), (position === "top" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { : {
width: width:
@ -373,6 +396,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "left" ? dragState.delta : -dragState.delta), (position === "left" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { width: 0, height: 0, padding: 0 } : { width: 0, height: 0, padding: 0 }
} }
@ -382,13 +406,15 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.isRendered, opened: state.isRendered,
internal: true,
})} })}
style={{ style={{
transform: dragState.isDragging transform:
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${ dragState.isDragging &&
dragState.delta ((["top", "left"].includes(position) && dragState.delta < 0) ||
}px)` (["bottom", "right"].includes(position) && dragState.delta > 0))
: undefined, ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${dragState.delta}px)`
: undefined,
transitionDuration: dragState.isDragging ? "0s" : undefined, transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined, userSelect: dragState.isDragging ? "none" : undefined,
}} }}