94 lines
3.0 KiB
TypeScript
Raw Normal View History

2023-05-15 08:51:32 +08:00
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
2024-12-23 11:17:49 +08:00
import { RiCloseLine } from '@remixicon/react'
import classNames from '@/utils/classnames'
2023-05-15 08:51:32 +08:00
// https://headlessui.com/react/dialog
type IModal = {
className?: string
2023-05-17 19:05:51 +08:00
wrapperClassName?: string
2023-05-15 08:51:32 +08:00
isShow: boolean
2024-06-05 00:13:29 +08:00
onClose?: () => void
2023-05-15 08:51:32 +08:00
title?: React.ReactNode
description?: React.ReactNode
2024-06-05 00:13:29 +08:00
children?: React.ReactNode
2023-05-15 08:51:32 +08:00
closable?: boolean
overflowVisible?: boolean
2023-05-15 08:51:32 +08:00
}
export default function Modal({
className,
2023-05-17 19:05:51 +08:00
wrapperClassName,
2023-05-15 08:51:32 +08:00
isShow,
2024-06-05 00:13:29 +08:00
onClose = () => { },
2023-05-15 08:51:32 +08:00
title,
description,
children,
closable = false,
overflowVisible = false,
2023-05-15 08:51:32 +08:00
}: IModal) {
return (
2023-05-19 17:36:44 +08:00
<Transition appear show={isShow} as={Fragment}>
<Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
2023-05-19 17:36:44 +08:00
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
2024-12-23 11:17:49 +08:00
<div className="fixed inset-0 bg-background-overlay-fullscreen" />
2023-05-19 17:36:44 +08:00
</Transition.Child>
2023-05-15 08:51:32 +08:00
<div
className="fixed inset-0 overflow-y-auto"
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
}}
>
2023-05-19 17:36:44 +08:00
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
2024-06-05 00:13:29 +08:00
<Dialog.Panel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
2024-06-05 00:13:29 +08:00
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
2023-05-19 17:36:44 +08:00
{title && <Dialog.Title
as="h3"
2024-12-23 11:17:49 +08:00
className="title-2xl-semi-bold text-text-primary"
2023-05-19 17:36:44 +08:00
>
{title}
</Dialog.Title>}
2024-12-23 11:17:49 +08:00
{description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'>
2023-05-19 17:36:44 +08:00
{description}
</Dialog.Description>}
{closable
2024-12-23 11:17:49 +08:00
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
(e) => {
e.stopPropagation()
onClose()
}
} />
2023-05-19 17:36:44 +08:00
</div>}
{children}
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
2023-05-15 08:51:32 +08:00
)
}