responsive-dialog

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
6import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
7import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
8import { useIsMobile } from "@/registry/bases/radix/hooks/use-mobile";
9import {
10  Dialog,
11  DialogClose,
12  DialogContent,
13  DialogDescription,
14  DialogFooter,
15  DialogHeader,
16  DialogOverlay,
17  DialogPortal,
18  DialogTitle,
19  DialogTrigger,
20} from "@/registry/bases/radix/ui/dialog";
21import {
22  Drawer,
23  DrawerClose,
24  DrawerContent,
25  DrawerDescription,
26  DrawerFooter,
27  DrawerHeader,
28  DrawerOverlay,
29  DrawerPortal,
30  DrawerTitle,
31  DrawerTrigger,
32} from "@/registry/bases/radix/ui/drawer";
33 
34const ROOT_NAME = "ResponsiveDialog";
35 
36interface StoreState {
37  open: boolean;
38  isMobile: boolean;
39}
40 
41interface Store {
42  subscribe: (callback: () => void) => () => void;
43  getState: () => StoreState;
44  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
45  notify: () => void;
46}
47 
48const StoreContext = React.createContext<Store | null>(null);
49 
50function useStore<T>(
51  selector: (state: StoreState) => T,
52  ogStore?: Store | null,
53): T {
54  const contextStore = React.useContext(StoreContext);
55  const store = ogStore ?? contextStore;
56 
57  if (!store) {
58    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
59  }
60 
61  const getSnapshot = React.useCallback(
62    () => selector(store.getState()),
63    [store, selector],
64  );
65 
66  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
67}
68 
69interface ResponsiveDialogProps extends React.ComponentProps<typeof Dialog> {
70  breakpoint?: number;
71}
72 
73function ResponsiveDialog({
74  breakpoint = 768,
75  open: openProp,
76  defaultOpen = false,
77  onOpenChange: onOpenChangeProp,
78  ...props
79}: ResponsiveDialogProps) {
80  const isMobile = useIsMobile(breakpoint);
81 
82  const listenersRef = useLazyRef(() => new Set<() => void>());
83  const stateRef = useLazyRef<StoreState>(() => ({
84    open: openProp ?? defaultOpen,
85    isMobile,
86  }));
87 
88  const onOpenChangeRef = useAsRef(onOpenChangeProp);
89 
90  const store = React.useMemo<Store>(() => {
91    return {
92      subscribe: (cb) => {
93        listenersRef.current.add(cb);
94        return () => listenersRef.current.delete(cb);
95      },
96      getState: () => stateRef.current,
97      setState: (key, value) => {
98// … truncated