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

feat: add default to variantProps.position

Browse Source
This commit is contained in:
p-sw 2024-06-02 01:00:56 +09:00
parent 15c5b253d8
commit ad9dfb38f3
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -165,6 +165,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerContentVariantProps(props); resolveDrawerContentVariantProps(props);
const { position = "left" } = variantProps;
const { asChild, onClick, ...restPropsExtracted } = restPropsCompressed; const { asChild, onClick, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div"; const Comp = asChild ? Slot : "div";
@ -186,9 +187,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
internalRef.current && internalRef.current &&
internalRef.current.contains(e.target) internalRef.current.contains(e.target)
) { ) {
const size = const size = ["top", "bottom"].includes(position)
variantProps.position === "top" ||
variantProps.position === "bottom"
? e.target.getBoundingClientRect().height ? e.target.getBoundingClientRect().height
: e.target.getBoundingClientRect().width; : e.target.getBoundingClientRect().width;
setState((prev) => ({ setState((prev) => ({
@ -214,16 +213,14 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
function onMouseMove(e: MouseEvent) { function onMouseMove(e: MouseEvent) {
if (dragState.isDragging) { if (dragState.isDragging) {
setDragState((prev) => { setDragState((prev) => {
let movement = ["top", "bottom"].includes( let movement = ["top", "bottom"].includes(position)
variantProps.position ?? "left"
)
? e.movementY ? e.movementY
: e.movementX; : e.movementX;
if ( if (
(["top", "left"].includes(variantProps.position ?? "left") && (["top", "left"].includes(position) &&
dragState.delta >= 0 && dragState.delta >= 0 &&
movement > 0) || movement > 0) ||
(["bottom", "right"].includes(variantProps.position ?? "left") && (["bottom", "right"].includes(position) &&
dragState.delta <= 0 && dragState.delta <= 0 &&
movement < 0) movement < 0)
) { ) {
@ -257,7 +254,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
})} })}
style={ style={
state.opened state.opened
? ["top", "bottom"].includes(variantProps.position ?? "left") ? ["top", "bottom"].includes(position)
? { ? {
height: height:
(internalRef.current?.getBoundingClientRect?.()?.height ?? (internalRef.current?.getBoundingClientRect?.()?.height ??
@ -281,11 +278,9 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
})} })}
style={{ style={{
transform: dragState.isDragging transform: dragState.isDragging
? `translate${ ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
["top", "bottom"].includes(variantProps.position ?? "left") dragState.delta
? "Y" }px)`
: "X"
}(${dragState.delta}px)`
: undefined, : undefined,
transitionDuration: dragState.isDragging ? "0s" : undefined, transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined, userSelect: dragState.isDragging ? "none" : undefined,