responsive-dialog

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
6import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
7import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
8import { useIsMobile } from "@/registry/bases/base/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/base/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/base/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  onOpenChange?: (open: boolean) => void;
72  children?: React.ReactNode;
73  modal?: boolean;
74}
75 
76function ResponsiveDialog({
77  breakpoint = 768,
78  open: openProp,
79  defaultOpen = false,
80  onOpenChange: onOpenChangeProp,
81  ...props
82}: ResponsiveDialogProps) {
83  const isMobile = useIsMobile(breakpoint);
84 
85  const listenersRef = useLazyRef(() => new Set<() => void>());
86  const stateRef = useLazyRef<StoreState>(() => ({
87    open: openProp ?? defaultOpen,
88    isMobile,
89  }));
90 
91  const onOpenChangeRef = useAsRef(onOpenChangeProp);
92 
93  const store = React.useMemo<Store>(() => {
94    return {
95      subscribe: (cb) => {
96        listenersRef.current.add(cb);
97        return () => listenersRef.current.delete(cb);
98      },
99// … truncated