dify

dify/web/app/components/base/drawer-plus/index.tsx

@@ -0,0 +1,105 @@
+'use client'
+import type { FC } from 'react'
+import React, { useRef } from 'react'
+import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Drawer from '@/app/components/base/drawer'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+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)