fix: drawer

cubik-so · Jul 18, 2024 · 2e28c0b · 2e28c0b
1 parent 239f77a
commit 2e28c0b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@squaress/ui",
-    "version": "0.0.83",
+    "version": "0.0.84",
     "description": "",
     "main": "lib/index.js",
     "module": "lib/index.mjs",

diff --git a/packages/ui/src/components/drawer/drawer.tsx b/packages/ui/src/components/drawer/drawer.tsx
@@ -3,6 +3,12 @@ import { Drawer } from 'vaul'
 import { cn } from '@utils/cn'
 import type { ClassValue } from 'clsx'
 
+const DrawerContext = React.createContext<{
+    direction?: 'top' | 'right' | 'bottom' | 'left'
+}>({
+    direction: 'bottom',
+})
+
 interface VaulDrawerTriggerProps {
     children: React.ReactNode
 }
@@ -38,16 +44,18 @@ interface DrawerContentProps {
 }
 
 export const VaulDrawerContent = ({ children, className }: DrawerContentProps) => {
+    const { direction } = React.useContext(DrawerContext)
     return (
         <Drawer.Content
             className={cn(
                 'fixed bg-color-surface-primary shadow-2xl dark:shadow-black pt-2 focus:outline-none',
-                'top-0 bottom-0 right-0 w-[640px] max-w-[100%] rounded-l-[12px]',
+                'bottom-0 left-0 right-0 w-full max-w-[100%] rounded-t-[12px]',
+                direction === 'right' && 'w-[640px] !h-[100vh]',
                 className,
             )}
-            style={{ display: 'flex', flexDirection: 'column' }}
+            style={{ maxHeight: '93%', display: 'flex', flexDirection: 'column' }}
         >
-            <div className="bg-color-surface-primary mx-auto mb-2 h-[3px] w-12 shrink-0 rounded-full" />
+            <div className="mx-auto w-12 h-[3px] flex-shrink-0 rounded-full bg-color-surface-primary mb-2" />
             <div style={{ flexGrow: 1, overflowY: 'auto' }}>{children}</div>
         </Drawer.Content>
     )
@@ -72,10 +80,23 @@ export interface VaulDrawerProps {
     onClose?: () => void
 }
 
-export const VaulDrawer = ({ children, open, onOpenChange, ...props }: VaulDrawerProps) => {
+export const VaulDrawer = ({
+    children,
+    open,
+    onOpenChange,
+    direction = 'bottom',
+    ...props
+}: VaulDrawerProps) => {
+    const DrawerContextProvider = DrawerContext.Provider
     return (
-        <Drawer.Root open={open} onOpenChange={onOpenChange} {...props}>
-            {children}
-        </Drawer.Root>
+        <DrawerContextProvider
+            value={{
+                direction,
+            }}
+        >
+            <Drawer.Root open={open} onOpenChange={onOpenChange} direction={direction} {...props}>
+                {children}
+            </Drawer.Root>
+        </DrawerContextProvider>
     )
 }