mirror of https://github.com/langgenius/dify.git
107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import { RiCloseLine } from '@remixicon/react'
|
|
import * as React from 'react'
|
|
import { useRef } from 'react'
|
|
import Drawer from '@/app/components/base/drawer'
|
|
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
|
import { cn } from '@/utils/classnames'
|
|
|
|
type Props = {
|
|
isShow: boolean
|
|
onHide: () => void
|
|
dialogClassName?: string
|
|
dialogBackdropClassName?: string
|
|
panelClassName?: string
|
|
maxWidthClassName?: string
|
|
contentClassName?: string
|
|
headerClassName?: string
|
|
height?: number | string
|
|
title: string | React.JSX.Element
|
|
titleDescription?: string | React.JSX.Element
|
|
body: React.JSX.Element
|
|
foot?: React.JSX.Element
|
|
isShowMask?: boolean
|
|
clickOutsideNotOpen?: boolean
|
|
positionCenter?: boolean
|
|
}
|
|
|
|
const DrawerPlus: FC<Props> = ({
|
|
isShow,
|
|
onHide,
|
|
dialogClassName = '',
|
|
dialogBackdropClassName = '',
|
|
panelClassName = '',
|
|
maxWidthClassName = '!max-w-[640px]',
|
|
height = 'calc(100vh - 72px)',
|
|
contentClassName,
|
|
headerClassName,
|
|
title,
|
|
titleDescription,
|
|
body,
|
|
foot,
|
|
isShowMask,
|
|
clickOutsideNotOpen = true,
|
|
positionCenter,
|
|
}) => {
|
|
const ref = useRef(null)
|
|
const media = useBreakpoints()
|
|
const isMobile = media === MediaType.mobile
|
|
|
|
if (!isShow)
|
|
return null
|
|
|
|
return (
|
|
// clickOutsideNotOpen to fix confirm modal click cause drawer close
|
|
<Drawer
|
|
isOpen={isShow}
|
|
clickOutsideNotOpen={clickOutsideNotOpen}
|
|
onClose={onHide}
|
|
footer={null}
|
|
mask={isMobile || isShowMask}
|
|
positionCenter={positionCenter}
|
|
dialogClassName={dialogClassName}
|
|
dialogBackdropClassName={dialogBackdropClassName}
|
|
panelClassName={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
|
|
>
|
|
<div
|
|
className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
|
|
style={{
|
|
height,
|
|
}}
|
|
ref={ref}
|
|
>
|
|
<div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
|
|
<div className="flex h-6 items-center justify-between pl-6 pr-5">
|
|
<div className="system-xl-semibold text-text-primary">
|
|
{title}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div
|
|
onClick={onHide}
|
|
className="flex h-6 w-6 cursor-pointer items-center justify-center"
|
|
>
|
|
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{titleDescription && (
|
|
<div className="system-xs-regular pl-6 pr-10 text-text-tertiary">
|
|
{titleDescription}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="grow overflow-y-auto">
|
|
{body}
|
|
</div>
|
|
{foot && (
|
|
<div className="shrink-0">
|
|
{foot}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Drawer>
|
|
)
|
|
}
|
|
export default React.memo(DrawerPlus)
|