@purpurds/drawer 5.15.1

package/src/drawer.test.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Drawer } from "./drawer";
+
+const ResizeObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+expect.extend(matchers);
+
+const handleOpenChange = vi.fn();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+describe("Drawer", () => {
+  it("should call the provided onOpenChange when open state changes", async () => {
+    render(
+      <Drawer open={true} onOpenChange={handleOpenChange}>
+        <Drawer.Trigger>
+          <button data-testid={Selectors.DRAWER_TRIGGER} type="button">
+            Open drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Content
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          <div>
+            <p>This is some content</p>
+            <RadixDialog.Close asChild>
+              <button data-testid={Selectors.CLOSE_BUTTON} type="button">
+                Close the drawer
+              </button>
+            </RadixDialog.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    await userEvent.click(screen.getByTestId(Selectors.CLOSE_BUTTON));
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
+    expect(handleOpenChange).toHaveBeenCalledOnce();
+  });
+
+  it("should call the provided onOpenChange when clicking the Drawer.Trigger", async () => {
+    render(
+      <Drawer open={false} onOpenChange={handleOpenChange}>
+        <Drawer.Trigger>
+          <button data-testid={Selectors.DRAWER_TRIGGER} type="button">
+            Open drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Content
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          <div>
+            <p>This is some content</p>
+            <RadixDialog.Close asChild>
+              <button data-testid={Selectors.CLOSE_BUTTON} type="button">
+                Close the drawer
+              </button>
+            </RadixDialog.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    await userEvent.click(screen.getByTestId(Selectors.DRAWER_TRIGGER));
+    expect(handleOpenChange).toHaveBeenCalledWith(true);
+    expect(handleOpenChange).toHaveBeenCalledOnce();
+  });
+
+  it("should call the provided onOpenChange when pressing Esc key", async () => {
+    render(
+      <Drawer open={true} onOpenChange={handleOpenChange}>
+        <Drawer.Trigger>
+          <button data-testid={Selectors.DRAWER_TRIGGER} type="button">
+            Open drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Content
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          <div>
+            <p>This is some content</p>
+            <RadixDialog.Close asChild>
+              <button data-testid={Selectors.CLOSE_BUTTON} type="button">
+                Close the drawer
+              </button>
+            </RadixDialog.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    await userEvent.keyboard("{Escape}");
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
+    expect(handleOpenChange).toHaveBeenCalledOnce();
+  });
+
+  it("should call the provided onOpenChange when pressing the overlay", async () => {
+    render(
+      <Drawer open={true} onOpenChange={handleOpenChange}>
+        <Drawer.Trigger>
+          <button data-testid={Selectors.DRAWER_TRIGGER} type="button">
+            Open drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Content
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          <div>
+            <p>This is some content</p>
+            <RadixDialog.Close asChild>
+              <button data-testid={Selectors.CLOSE_BUTTON} type="button">
+                Close the drawer
+              </button>
+            </RadixDialog.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    await userEvent.click(screen.getByTestId(Selectors.DRAWER_CONTENT_OVERLAY));
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
+    expect(handleOpenChange).toHaveBeenCalledOnce();
+  });
+
+  it("should not call the provided onOpenChange when pressing the overlay if closeOnOverlayClick is set to false", async () => {
+    render(
+      <Drawer open={true} onOpenChange={handleOpenChange}>
+        <Drawer.Trigger>
+          <button data-testid={Selectors.DRAWER_TRIGGER} type="button">
+            Open drawer
+          </button>
+        </Drawer.Trigger>
+        <Drawer.Content
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          disableCloseOnClickOutside={true}
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          <div>
+            <p>This is some content</p>
+            <RadixDialog.Close asChild>
+              <button data-testid={Selectors.CLOSE_BUTTON} type="button">
+                Close the drawer
+              </button>
+            </RadixDialog.Close>
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    );
+
+    await userEvent.click(screen.getByTestId(Selectors.DRAWER_CONTENT_OVERLAY));
+    expect(handleOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+const Selectors = {
+  DRAWER: "purpur-drawer",
+  DRAWER_TRIGGER: "purpur-drawer-trigger",
+  DRAWER_CONTENT: "purpur-drawer-content",
+  DRAWER_CONTENT_OVERLAY: "purpur-drawer-content-overlay",
+  CLOSE_BUTTON: "purpur-drawer-close-button",
+};

package/src/drawer.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, useEffect } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import c from "classnames/bind";
+
+import { DrawerContext } from "./drawer.context";
+import styles from "./drawer.module.scss";
+import { DrawerContent } from "./drawer-content";
+import { DrawerTrigger } from "./drawer-trigger";
+const cx = c.bind(styles);
+
+export type DrawerProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  onOpenChange?: (open: boolean) => void;
+  open: boolean;
+};
+
+const rootClassName = "purpur-drawer";
+
+export type DrawerComponent<P> = React.FunctionComponent<P> & {
+  Trigger: typeof DrawerTrigger;
+  Content: typeof DrawerContent;
+};
+
+export const Drawer: DrawerComponent<DrawerProps> = ({
+  ["data-testid"]: dataTestId = "purpur-drawer",
+  children,
+  className,
+  onOpenChange,
+  open = false,
+  ...props
+}: DrawerProps) => {
+  const [_open, _setOpen] = React.useState(open);
+  const classes = cx([className, rootClassName]);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    _setOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  useEffect(() => {
+    _setOpen(open);
+  }, [open]);
+
+  return (
+    <DrawerContext.Provider value={handleOpenChange}>
+      <div className={classes} data-testid={dataTestId} {...props}>
+        <RadixDialog.Root open={_open} onOpenChange={handleOpenChange}>
+          {children}
+        </RadixDialog.Root>
+      </div>
+    </DrawerContext.Provider>
+  );
+};
+
+Drawer.Trigger = DrawerTrigger;
+Drawer.Content = DrawerContent;
+Drawer.displayName = "Drawer";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/types.ts

@@ -0,0 +1,3 @@
+export type SwipeEvent = { originalEvent: React.PointerEvent; delta: { y: number } };
+
+export type OpenHandlerFunction = (open: boolean) => void;

package/src/use-swipe-to-dismiss.hook.ts

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { SwipeEvent } from "./types";
+
+type UseSwipeToDismiss = {
+  onAnimationEnd(event: React.AnimationEvent<HTMLDivElement>): void;
+  onSwipeStart(): void;
+  onSwipeMove(event: SwipeEvent): void;
+  onSwipeCancel(): void;
+  onSwipeEnd(event: SwipeEvent): void;
+};
+
+export const useSwipeToDismiss = <T extends HTMLElement>(
+  containerRef: React.MutableRefObject<T | null>,
+  handleOpenChange: (open: boolean) => void
+): UseSwipeToDismiss => {
+  const onSwipeStart = () => {
+    if (!containerRef.current) {
+      return;
+    }
+    containerRef.current.setAttribute("data-swipe", "start");
+  };
+  const onSwipeMove = (event: SwipeEvent) => {
+    if (!containerRef.current) {
+      return;
+    }
+    const { y } = event.delta;
+    containerRef.current.setAttribute("data-swipe", "move");
+    containerRef.current.style.setProperty("--purpur-drawer-swipe-move-y", `${y}px`);
+  };
+  const onSwipeCancel = () => {
+    if (!containerRef.current) {
+      return;
+    }
+    containerRef.current.setAttribute("data-swipe", "cancel");
+    containerRef.current.style.removeProperty("--purpur-drawer-swipe-move-y");
+    containerRef.current.style.removeProperty("--purpur-drawer-swipe-end-y");
+  };
+  const onSwipeEnd = (event: SwipeEvent) => {
+    if (!containerRef.current) {
+      return;
+    }
+    const { y } = event.delta;
+    containerRef.current.setAttribute("data-swipe", "end");
+    containerRef.current.style.removeProperty("--purpur-drawer-swipe-move-y");
+    containerRef.current.style.setProperty("--purpur-drawer-swipe-end-y", `${y}px`);
+  };
+  const onAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
+    if (event.currentTarget.getAttribute("data-swipe") === "end") {
+      handleOpenChange(false);
+    }
+  };
+  return {
+    onAnimationEnd,
+    onSwipeStart,
+    onSwipeMove,
+    onSwipeCancel,
+    onSwipeEnd,
+  };
+};

package/src/use-swipe-tracking.hook.ts

@@ -0,0 +1,78 @@
+import React from "react";
+
+import { SwipeEvent } from "./types";
+
+type UseSwipeTracking = {
+  onPointerDown(event: React.PointerEvent): void;
+  onPointerMove(event: React.PointerEvent): void;
+  onPointerUp(event: React.PointerEvent): void;
+};
+
+export const useSwipeTracking = (
+  pointerStartRef: React.MutableRefObject<{ y: number } | null>,
+  swipeDeltaRef: React.MutableRefObject<{ y: number } | null>,
+  onSwipeStart: () => void,
+  onSwipeMove: (event: SwipeEvent) => void,
+  onSwipeCancel: () => void,
+  onSwipeEnd: (event: SwipeEvent) => void
+): UseSwipeTracking => {
+  const onPointerDown = (event: React.PointerEvent) => {
+    pointerStartRef.current = { y: event.clientY };
+  };
+  const onPointerMove = (event: React.PointerEvent) => {
+    if (!pointerStartRef.current) {
+      return;
+    }
+    const y = event.clientY - pointerStartRef.current.y;
+    const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
+    const clampedY = Math.max(0, y);
+    const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
+    const delta = { y: clampedY };
+    const eventDetail = { originalEvent: event, delta };
+    if (hasSwipeMoveStarted) {
+      swipeDeltaRef.current = delta;
+      onSwipeMove(eventDetail);
+    } else if (isDeltaInDirection(delta, 0)) {
+      swipeDeltaRef.current = delta;
+      onSwipeStart();
+      (event.target as HTMLElement).setPointerCapture(event.pointerId);
+    } else if (Math.abs(y) > moveStartBuffer) {
+      // User is swiping in wrong direction so we disable swipe gesture
+      // for the current pointer down interaction
+      pointerStartRef.current = null;
+    }
+  };
+  const onPointerUp = (event: React.PointerEvent) => {
+    const delta = swipeDeltaRef.current;
+    const target = event.target as HTMLElement;
+    if (target.hasPointerCapture(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId);
+    }
+    swipeDeltaRef.current = null;
+    pointerStartRef.current = null;
+    if (delta) {
+      const swipeHandle = event.currentTarget;
+      const eventDetail = { originalEvent: event, delta };
+      if (isDeltaInDirection(delta, 0) && delta.y > 200) {
+        onSwipeEnd(eventDetail);
+      } else {
+        onSwipeCancel();
+      }
+      // Prevent click event from triggering on items within the drawer when
+      // pointer up is part of a swipe gesture
+      swipeHandle.addEventListener("click", (event) => event.preventDefault(), {
+        once: true,
+      });
+    }
+  };
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+  };
+};
+
+const isDeltaInDirection = (delta: { y: number }, threshold = 0) => {
+  const deltaY = Math.abs(delta.y);
+  return deltaY > threshold;
+};