File size: 2,527 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
'use client'
import { Dialog } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
export type IDrawerProps = {
title?: string
description?: string
panelClassname?: string
children: React.ReactNode
footer?: React.ReactNode
mask?: boolean
isOpen: boolean
// closable: boolean
showClose?: boolean
clickOutsideNotOpen?: boolean
onClose: () => void
onCancel?: () => void
onOk?: () => void
}
export default function Drawer({
title = '',
description = '',
panelClassname = '',
children,
footer,
mask = true,
showClose = false,
isOpen,
clickOutsideNotOpen,
onClose,
onCancel,
onOk,
}: IDrawerProps) {
const { t } = useTranslation()
return (
<Dialog
unmount={false}
open={isOpen}
onClose={() => !clickOutsideNotOpen && onClose()}
className="fixed z-30 inset-0 overflow-y-auto"
>
<div className="flex w-screen h-screen justify-end">
{/* mask */}
<Dialog.Overlay
className={`z-40 fixed inset-0 ${!mask ? '' : 'bg-black bg-opacity-30'}`}
/>
<div className={`relative z-50 flex flex-col justify-between bg-white w-full
max-w-sm p-6 overflow-hidden text-left align-middle
shadow-xl ${panelClassname}`}>
<>
{title && <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
{title}
</Dialog.Title>}
{showClose && <Dialog.Title className="flex items-center mb-4" as="div">
<XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
</Dialog.Title>}
{description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>}
{children}
</>
{footer || (footer === null
? null
: <div className="mt-10 flex flex-row justify-end">
<Button
className='mr-2'
onClick={() => {
onCancel && onCancel()
}}>{t('common.operation.cancel')}</Button>
<Button
onClick={() => {
onOk && onOk()
}}>{t('common.operation.save')}</Button>
</div>)}
</div>
</div>
</Dialog>
)
}
|