import React from 'react'; import { Dialog as HDialog } from '@headlessui/react'; import { Button } from '@/components/elements/button/index'; import { XIcon } from '@heroicons/react/solid'; import DialogIcon from '@/components/elements/dialog/DialogIcon'; import { AnimatePresence, motion } from 'framer-motion'; import classNames from 'classnames'; import ConfirmationDialog from '@/components/elements/dialog/ConfirmationDialog'; export interface DialogProps { open: boolean; onClose: () => void; hideCloseIcon?: boolean; title?: string; description?: string | undefined; children?: React.ReactNode; } const DialogButtons = ({ children }: { children: React.ReactNode }) => <>{children}; const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: DialogProps) => { const items = React.Children.toArray(children || []); const [buttons, icon, content] = [ // @ts-expect-error not sure how to get this correct items.find((child) => child.type === DialogButtons), // @ts-expect-error not sure how to get this correct items.find((child) => child.type === DialogIcon), // @ts-expect-error not sure how to get this correct items.filter((child) => ![DialogIcon, DialogButtons].includes(child.type)), ]; return ( {open && (
{icon &&
{icon}
}
{title && ( {title} )} {description && {description}} {content}
{buttons && (
{buttons}
)} {/* Keep this below the other buttons so that it isn't the default focus if they're present. */} {!hideCloseIcon && (
)}
)} ); }; const _Dialog = Object.assign(Dialog, { Confirm: ConfirmationDialog, Buttons: DialogButtons, Icon: DialogIcon, }); export default _Dialog;