zxhlyh 45deaee762
feat: workflow new nodes (#4683)
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>
2024-05-27 21:57:08 +08:00

100 lines
2.7 KiB
TypeScript

'use client'
import type { FC } from 'react'
import React, { useRef } from 'react'
import cn from 'classnames'
import Drawer from '@/app/components/base/drawer'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
type Props = {
isShow: boolean
onHide: () => void
panelClassName?: string
maxWidthClassName?: string
contentClassName?: string
headerClassName?: string
height?: number | string
title: string | JSX.Element
titleDescription?: string | JSX.Element
body: JSX.Element
foot?: JSX.Element
isShowMask?: boolean
clickOutsideNotOpen?: boolean
positionCenter?: boolean
}
const DrawerPlus: FC<Props> = ({
isShow,
onHide,
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}
panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', panelClassName, maxWidthClassName)}
>
<div
className={cn(contentClassName, 'w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
style={{
height,
}}
ref={ref}
>
<div className={cn(headerClassName, 'shrink-0 border-b border-b-gray-100 py-4')}>
<div className='flex justify-between items-center pl-6 pr-5 h-6'>
<div className='text-base font-semibold text-gray-900'>
{title}
</div>
<div className='flex items-center'>
<div
onClick={onHide}
className='flex justify-center items-center w-6 h-6 cursor-pointer'
>
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div>
</div>
{titleDescription && (
<div className='pl-6 pr-10 leading-[18px] text-xs font-normal text-gray-500'>
{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)