mirror of
https://github.com/langgenius/dify.git
synced 2026-07-27 15:08:35 +08:00
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import {
|
|
Drawer,
|
|
DrawerBackdrop,
|
|
DrawerContent,
|
|
DrawerPopup,
|
|
DrawerPortal,
|
|
DrawerViewport,
|
|
} from '@langgenius/dify-ui/drawer'
|
|
|
|
type DrawerSide = 'right' | 'left' | 'bottom' | 'top'
|
|
type DrawerSwipeDirection = 'right' | 'left' | 'down' | 'up'
|
|
|
|
type CompletedDrawerProps = {
|
|
open: boolean
|
|
onClose: () => void
|
|
side?: DrawerSide
|
|
panelClassName?: string
|
|
panelContentClassName?: string
|
|
modal?: boolean
|
|
children: ReactNode
|
|
}
|
|
|
|
const SIDE_TO_SWIPE_DIRECTION: Record<DrawerSide, DrawerSwipeDirection> = {
|
|
right: 'right',
|
|
left: 'left',
|
|
bottom: 'down',
|
|
top: 'up',
|
|
}
|
|
|
|
const DRAWER_POPUP_CLASS_NAME = [
|
|
'pointer-events-auto overflow-visible border-0 bg-transparent shadow-none',
|
|
'data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:max-w-none data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-0',
|
|
'data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:max-w-none data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-0',
|
|
'data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-0',
|
|
'data-[swipe-direction=up]:max-h-none data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-0',
|
|
].join(' ')
|
|
|
|
export function CompletedDrawer({
|
|
open,
|
|
onClose,
|
|
side = 'right',
|
|
children,
|
|
panelClassName,
|
|
panelContentClassName,
|
|
modal = false,
|
|
}: CompletedDrawerProps) {
|
|
if (!open) return null
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
modal={modal}
|
|
swipeDirection={SIDE_TO_SWIPE_DIRECTION[side]}
|
|
disablePointerDismissal
|
|
onOpenChange={(nextOpen) => !nextOpen && onClose()}
|
|
>
|
|
<DrawerPortal>
|
|
{modal && <DrawerBackdrop onClick={onClose} />}
|
|
<DrawerViewport className="pointer-events-none">
|
|
<DrawerPopup
|
|
aria-modal={modal ? 'true' : 'false'}
|
|
className={cn(DRAWER_POPUP_CLASS_NAME, panelClassName)}
|
|
>
|
|
<DrawerContent
|
|
className={cn('flex grow flex-col overflow-visible p-0 pb-0', panelContentClassName)}
|
|
>
|
|
{children}
|
|
</DrawerContent>
|
|
</DrawerPopup>
|
|
</DrawerViewport>
|
|
</DrawerPortal>
|
|
</Drawer>
|
|
)
|
|
}
|