|
| 1 | +import React, { Fragment } from 'react'; |
| 2 | +import { Dialog as HeadlessDialog, Transition } from '@headlessui/react'; |
| 3 | +import { Button } from '@/components/elements/button/index'; |
| 4 | +import styles from './style.module.css'; |
| 5 | +import { XIcon } from '@heroicons/react/solid'; |
| 6 | +import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline'; |
| 7 | +import classNames from 'classnames'; |
| 8 | + |
| 9 | +interface Props { |
| 10 | + visible: boolean; |
| 11 | + onDismissed: () => void; |
| 12 | + title?: string; |
| 13 | + children?: React.ReactNode; |
| 14 | +} |
| 15 | + |
| 16 | +interface DialogIconProps { |
| 17 | + type: 'danger' | 'info' | 'success' | 'warning'; |
| 18 | + className?: string; |
| 19 | +} |
| 20 | + |
| 21 | +const DialogIcon = ({ type, className }: DialogIconProps) => { |
| 22 | + const [ Component, styles ] = (function (): [(props: React.ComponentProps<'svg'>) => JSX.Element, string] { |
| 23 | + switch (type) { |
| 24 | + case 'danger': |
| 25 | + return [ ShieldExclamationIcon, 'bg-red-500 text-red-50' ]; |
| 26 | + case 'warning': |
| 27 | + return [ ExclamationIcon, 'bg-yellow-600 text-yellow-50' ]; |
| 28 | + case 'success': |
| 29 | + return [ CheckIcon, 'bg-green-600 text-green-50' ]; |
| 30 | + case 'info': |
| 31 | + return [ InformationCircleIcon, 'bg-primary-500 text-primary-50' ]; |
| 32 | + } |
| 33 | + })(); |
| 34 | + |
| 35 | + return ( |
| 36 | + <div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}> |
| 37 | + <Component className={'w-6 h-6'} /> |
| 38 | + </div> |
| 39 | + ); |
| 40 | +}; |
| 41 | + |
| 42 | +const DialogButtons = ({ children }: { children: React.ReactNode }) => ( |
| 43 | + <>{children}</> |
| 44 | +); |
| 45 | + |
| 46 | +const Dialog = ({ visible, title, onDismissed, children }: Props) => { |
| 47 | + const items = React.Children.toArray(children || []); |
| 48 | + const [ buttons, icon, content ] = [ |
| 49 | + // @ts-expect-error |
| 50 | + items.find(child => child.type === DialogButtons), |
| 51 | + // @ts-expect-error |
| 52 | + items.find(child => child.type === DialogIcon), |
| 53 | + // @ts-expect-error |
| 54 | + items.filter(child => ![ DialogIcon, DialogButtons ].includes(child.type)), |
| 55 | + ]; |
| 56 | + |
| 57 | + return ( |
| 58 | + <Transition show={visible} as={Fragment}> |
| 59 | + <HeadlessDialog onClose={() => onDismissed()} className={styles.wrapper}> |
| 60 | + <div className={'flex items-center justify-center min-h-screen'}> |
| 61 | + <Transition.Child |
| 62 | + as={Fragment} |
| 63 | + enter={'ease-out duration-200'} |
| 64 | + enterFrom={'opacity-0'} |
| 65 | + enterTo={'opacity-100'} |
| 66 | + leave={'ease-in duration-100'} |
| 67 | + leaveFrom={'opacity-100'} |
| 68 | + leaveTo={'opacity-0'} |
| 69 | + > |
| 70 | + <HeadlessDialog.Overlay className={styles.overlay}/> |
| 71 | + </Transition.Child> |
| 72 | + <Transition.Child |
| 73 | + as={Fragment} |
| 74 | + enter={'ease-out duration-200'} |
| 75 | + enterFrom={'opacity-0 scale-95'} |
| 76 | + enterTo={'opacity-100 scale-100'} |
| 77 | + leave={'ease-in duration-100'} |
| 78 | + leaveFrom={'opacity-100 scale-100'} |
| 79 | + leaveTo={'opacity-0 scale-95'} |
| 80 | + > |
| 81 | + <div className={styles.container}> |
| 82 | + <div className={'flex p-6'}> |
| 83 | + {icon && <div className={'mr-4'}>{icon}</div>} |
| 84 | + <div className={'flex-1'}> |
| 85 | + {title && |
| 86 | + <HeadlessDialog.Title className={styles.title}> |
| 87 | + {title} |
| 88 | + </HeadlessDialog.Title> |
| 89 | + } |
| 90 | + <HeadlessDialog.Description className={'pr-4'}> |
| 91 | + {content} |
| 92 | + </HeadlessDialog.Description> |
| 93 | + </div> |
| 94 | + </div> |
| 95 | + {buttons && <div className={styles.button_bar}>{buttons}</div>} |
| 96 | + {/* Keep this below the other buttons so that it isn't the default focus if they're present. */} |
| 97 | + <div className={'absolute right-0 top-0 m-4'}> |
| 98 | + <Button.Text square small onClick={() => onDismissed()} className={'hover:rotate-90'}> |
| 99 | + <XIcon className={'w-5 h-5'}/> |
| 100 | + </Button.Text> |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + </Transition.Child> |
| 104 | + </div> |
| 105 | + </HeadlessDialog> |
| 106 | + </Transition> |
| 107 | + ); |
| 108 | +}; |
| 109 | + |
| 110 | +const _Dialog = Object.assign(Dialog, { Buttons: DialogButtons, Icon: DialogIcon }); |
| 111 | + |
| 112 | +export default _Dialog; |
0 commit comments