From 7c4028f8f13c6c1a388403f940df036a0a137ccb Mon Sep 17 00:00:00 2001
From: DaneEveritt <dane@daneeveritt.com>
Date: Sat, 2 Jul 2022 17:24:12 -0400
Subject: [PATCH] Update dialog logic to support defining buttons/icon from
 anywhere

---
 .../activity/ActivityLogMetaButton.tsx        |   4 +-
 .../elements/dialog/ConfirmationDialog.tsx    |   8 +-
 .../components/elements/dialog/Dialog.tsx     | 144 ++++++++----------
 .../elements/dialog/DialogFooter.tsx          |  17 +++
 .../components/elements/dialog/DialogIcon.tsx |  39 ++---
 .../components/elements/dialog/context.ts     |  13 ++
 .../elements/dialog/style.module.css          |  36 +++++
 .../server/files/NewDirectoryButton.tsx       |   4 +-
 yarn.lock                                     |  38 ++---
 9 files changed, 182 insertions(+), 121 deletions(-)
 create mode 100644 resources/scripts/components/elements/dialog/DialogFooter.tsx
 create mode 100644 resources/scripts/components/elements/dialog/context.ts
 create mode 100644 resources/scripts/components/elements/dialog/style.module.css

diff --git a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
index 405a7bac5..a1f99c9fe 100644
--- a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
@@ -12,9 +12,9 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
                 <pre className={'bg-gray-900 rounded p-2 overflow-x-scroll font-mono text-sm leading-relaxed'}>
                     {JSON.stringify(meta, null, 2)}
                 </pre>
-                <Dialog.Buttons>
+                <Dialog.Footer>
                     <Button.Text onClick={() => setOpen(false)}>Close</Button.Text>
-                </Dialog.Buttons>
+                </Dialog.Footer>
             </Dialog>
             <button
                 aria-describedby={'View additional event metadata'}
diff --git a/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx b/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
index a9b72a466..65203c536 100644
--- a/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
+++ b/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Dialog } from '@/components/elements/dialog/index';
-import { DialogProps } from '@/components/elements/dialog/Dialog';
+import { FullDialogProps } from '@/components/elements/dialog/Dialog';
 import { Button } from '@/components/elements/button/index';
 
-type ConfirmationProps = Omit<DialogProps, 'description' | 'children'> & {
+type ConfirmationProps = Omit<FullDialogProps, 'description' | 'children'> & {
     children: React.ReactNode;
     confirm?: string | undefined;
     onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -13,10 +13,10 @@ export default ({ confirm = 'Okay', children, onConfirmed, ...props }: Confirmat
     return (
         <Dialog {...props} description={typeof children === 'string' ? children : undefined}>
             {typeof children !== 'string' && children}
-            <Dialog.Buttons>
+            <Dialog.Footer>
                 <Button.Text onClick={props.onClose}>Cancel</Button.Text>
                 <Button.Danger onClick={onConfirmed}>{confirm}</Button.Danger>
-            </Dialog.Buttons>
+            </Dialog.Footer>
         </Dialog>
     );
 };
diff --git a/resources/scripts/components/elements/dialog/Dialog.tsx b/resources/scripts/components/elements/dialog/Dialog.tsx
index b287e79fe..e6f464d52 100644
--- a/resources/scripts/components/elements/dialog/Dialog.tsx
+++ b/resources/scripts/components/elements/dialog/Dialog.tsx
@@ -1,101 +1,91 @@
-import React from 'react';
+import React, { useRef } 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';
+import DialogContext from './context';
+import DialogFooter from '@/components/elements/dialog/DialogFooter';
+import styles from './style.module.css';
 
 export interface DialogProps {
     open: boolean;
     onClose: () => void;
+}
+
+export interface FullDialogProps extends DialogProps {
     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)),
-    ];
+const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: FullDialogProps) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const icon = useRef<HTMLDivElement>(null);
+    const buttons = useRef<HTMLDivElement>(null);
 
     return (
         <AnimatePresence>
             {open && (
-                <HDialog
-                    static
-                    as={motion.div}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.15 }}
-                    open={open}
-                    onClose={onClose}
-                >
-                    <div className={'fixed inset-0 bg-gray-900/50 z-40'} />
-                    <div className={'fixed inset-0 overflow-y-auto z-50'}>
-                        <div className={'flex min-h-full items-center justify-center p-4 text-center'}>
-                            <HDialog.Panel
-                                as={motion.div}
-                                initial={{ opacity: 0, scale: 0.85 }}
-                                animate={{ opacity: 1, scale: 1 }}
-                                exit={{ opacity: 0 }}
-                                transition={{ type: 'spring', damping: 15, stiffness: 300, duration: 0.15 }}
-                                className={classNames([
-                                    'relative bg-gray-600 rounded max-w-xl w-full mx-auto shadow-lg text-left',
-                                    'ring-4 ring-gray-800 ring-opacity-80',
-                                ])}
-                            >
-                                <div className={'flex p-6 overflow-y-auto'}>
-                                    {icon && <div className={'mr-4'}>{icon}</div>}
-                                    <div className={'flex-1 max-h-[70vh]'}>
-                                        {title && (
-                                            <HDialog.Title
-                                                className={'font-header text-xl font-medium mb-2 text-gray-50 pr-4'}
+                <DialogContext.Provider value={{ icon, buttons }}>
+                    <HDialog
+                        static
+                        as={motion.div}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.15 }}
+                        open={open}
+                        onClose={onClose}
+                    >
+                        <div className={'fixed inset-0 bg-gray-900/50 z-40'} />
+                        <div className={'fixed inset-0 overflow-y-auto z-50'}>
+                            <div className={styles.container}>
+                                <HDialog.Panel
+                                    as={motion.div}
+                                    initial={{ opacity: 0, scale: 0.85 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    transition={{ type: 'spring', damping: 15, stiffness: 300, duration: 0.15 }}
+                                    className={styles.panel}
+                                >
+                                    <div className={'flex p-6 overflow-y-auto'}>
+                                        <div ref={ref} className={'flex-1 max-h-[70vh]'}>
+                                            <div className={'flex items-center'}>
+                                                <div ref={icon} />
+                                                <div>
+                                                    {title && (
+                                                        <HDialog.Title className={styles.title}>{title}</HDialog.Title>
+                                                    )}
+                                                    {description && (
+                                                        <HDialog.Description>{description}</HDialog.Description>
+                                                    )}
+                                                </div>
+                                            </div>
+                                            {children}
+                                        </div>
+                                    </div>
+                                    <div ref={buttons} />
+                                    {/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
+                                    {!hideCloseIcon && (
+                                        <div className={'absolute right-0 top-0 m-4'}>
+                                            <Button.Text
+                                                size={Button.Sizes.Small}
+                                                shape={Button.Shapes.IconSquare}
+                                                onClick={onClose}
+                                                className={'group'}
                                             >
-                                                {title}
-                                            </HDialog.Title>
-                                        )}
-                                        {description && <HDialog.Description>{description}</HDialog.Description>}
-                                        {content}
-                                    </div>
-                                </div>
-                                {buttons && (
-                                    <div
-                                        className={
-                                            'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'
-                                        }
-                                    >
-                                        {buttons}
-                                    </div>
-                                )}
-                                {/* Keep this below the other buttons so that it isn't the default focus if they're present. */}
-                                {!hideCloseIcon && (
-                                    <div className={'absolute right-0 top-0 m-4'}>
-                                        <Button.Text
-                                            size={Button.Sizes.Small}
-                                            shape={Button.Shapes.IconSquare}
-                                            onClick={onClose}
-                                            className={'hover:rotate-90'}
-                                        >
-                                            <XIcon className={'w-5 h-5'} />
-                                        </Button.Text>
-                                    </div>
-                                )}
-                            </HDialog.Panel>
+                                                <XIcon className={styles.close_icon} />
+                                            </Button.Text>
+                                        </div>
+                                    )}
+                                </HDialog.Panel>
+                            </div>
                         </div>
-                    </div>
-                </HDialog>
+                    </HDialog>
+                </DialogContext.Provider>
             )}
         </AnimatePresence>
     );
@@ -103,7 +93,7 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
 
 const _Dialog = Object.assign(Dialog, {
     Confirm: ConfirmationDialog,
-    Buttons: DialogButtons,
+    Footer: DialogFooter,
     Icon: DialogIcon,
 });
 
diff --git a/resources/scripts/components/elements/dialog/DialogFooter.tsx b/resources/scripts/components/elements/dialog/DialogFooter.tsx
new file mode 100644
index 000000000..17357b0f4
--- /dev/null
+++ b/resources/scripts/components/elements/dialog/DialogFooter.tsx
@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import DialogContext from '@/components/elements/dialog/context';
+
+export default ({ children }: { children: React.ReactNode }) => {
+    const { buttons } = useContext(DialogContext);
+
+    if (!buttons.current) {
+        return null;
+    }
+
+    const element = (
+        <div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>{children}</div>
+    );
+
+    return createPortal(element, buttons.current);
+};
diff --git a/resources/scripts/components/elements/dialog/DialogIcon.tsx b/resources/scripts/components/elements/dialog/DialogIcon.tsx
index f5efb2909..64ac18f7c 100644
--- a/resources/scripts/components/elements/dialog/DialogIcon.tsx
+++ b/resources/scripts/components/elements/dialog/DialogIcon.tsx
@@ -1,29 +1,34 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
 import classNames from 'classnames';
+import DialogContext from '@/components/elements/dialog/context';
+import { createPortal } from 'react-dom';
+import styles from './style.module.css';
 
 interface Props {
     type: 'danger' | 'info' | 'success' | 'warning';
     className?: string;
 }
 
-export default ({ type, className }: Props) => {
-    const [Component, styles] = (function (): [(props: React.ComponentProps<'svg'>) => JSX.Element, string] {
-        switch (type) {
-            case 'danger':
-                return [ShieldExclamationIcon, 'bg-red-500 text-red-50'];
-            case 'warning':
-                return [ExclamationIcon, 'bg-yellow-600 text-yellow-50'];
-            case 'success':
-                return [CheckIcon, 'bg-green-600 text-green-50'];
-            case 'info':
-                return [InformationCircleIcon, 'bg-primary-500 text-primary-50'];
-        }
-    })();
+const icons = {
+    danger: ShieldExclamationIcon,
+    warning: ExclamationIcon,
+    success: CheckIcon,
+    info: InformationCircleIcon,
+};
 
-    return (
-        <div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}>
-            <Component className={'w-6 h-6'} />
+export default ({ type, className }: Props) => {
+    const { icon } = useContext(DialogContext);
+
+    if (!icon.current) {
+        return null;
+    }
+
+    const element = (
+        <div className={classNames(styles.dialog_icon, styles[type], className)}>
+            {React.createElement(icons[type], { className: 'w-6 h-6' })}
         </div>
     );
+
+    return createPortal(element, icon.current);
 };
diff --git a/resources/scripts/components/elements/dialog/context.ts b/resources/scripts/components/elements/dialog/context.ts
new file mode 100644
index 000000000..73f6020f4
--- /dev/null
+++ b/resources/scripts/components/elements/dialog/context.ts
@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface DialogContextType {
+    icon: React.RefObject<HTMLDivElement | undefined>;
+    buttons: React.RefObject<HTMLDivElement | undefined>;
+}
+
+const DialogContext = React.createContext<DialogContextType>({
+    icon: React.createRef(),
+    buttons: React.createRef(),
+});
+
+export default DialogContext;
diff --git a/resources/scripts/components/elements/dialog/style.module.css b/resources/scripts/components/elements/dialog/style.module.css
new file mode 100644
index 000000000..6e78fd4ce
--- /dev/null
+++ b/resources/scripts/components/elements/dialog/style.module.css
@@ -0,0 +1,36 @@
+.container {
+    @apply flex min-h-full items-center justify-center p-4 text-center;
+}
+
+.panel {
+    @apply relative bg-gray-600 rounded max-w-xl w-full mx-auto shadow-lg text-left;
+    @apply ring-4 ring-gray-800 ring-opacity-80;
+}
+
+.title {
+    @apply font-header text-xl font-medium mb-2 text-gray-50 pr-4;
+}
+
+.close_icon {
+    @apply w-5 h-5 group-hover:rotate-90 transition-transform duration-100;
+}
+
+.dialog_icon {
+    @apply flex items-center justify-center w-10 h-10 rounded-full mr-4;
+
+    &.danger {
+        @apply bg-red-500 text-red-50;
+    }
+
+    &.warning {
+        @apply bg-yellow-600 text-yellow-50;
+    }
+
+    &.success {
+        @apply bg-green-600 text-green-50;
+    }
+
+    &.info {
+        @apply bg-primary-500 text-primary-50;
+    }
+}
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 885a0476f..712ec2fe1 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -92,7 +92,7 @@ export default ({ className }: WithClassname) => {
                                     </Code>
                                 </p>
                             </Form>
-                            <Dialog.Buttons>
+                            <Dialog.Footer>
                                 <Button.Text
                                     className={'w-full sm:w-auto'}
                                     onClick={() => {
@@ -105,7 +105,7 @@ export default ({ className }: WithClassname) => {
                                 <Button className={'w-full sm:w-auto'} onClick={submitForm}>
                                     Create
                                 </Button>
-                            </Dialog.Buttons>
+                            </Dialog.Footer>
                         </Dialog>
                     )}
                 </Formik>
diff --git a/yarn.lock b/yarn.lock
index 2d361d4b5..1be2e610b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1093,33 +1093,33 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@floating-ui/core@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.2.tgz#f7af9613d080dc29360e77c970965b79b524d45a"
-  integrity sha512-FRVAkSNU/vGXLIsgbggcs70GkXKEOXgBBbNpYPNHSaKsCAMMd00NrjbtKTesxkdv9xm9N3+XiDlcFGY6WnatBg==
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
 
-"@floating-ui/dom@^0.5.1":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.2.tgz#908f3febbfc0d6696d70921616ec194fe07af183"
-  integrity sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
   dependencies:
-    "@floating-ui/core" "^0.7.2"
+    "@floating-ui/core" "^0.7.3"
 
-"@floating-ui/react-dom-interactions@^0.6.3":
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.6.3.tgz#895c52cb06bf5ea73c00f1074c75b0535e0046bc"
-  integrity sha512-xvbGEtBtA7JaEngnHQjROArv2onRp3oJIpb4+bEN5EGJf0hBYDY0vD8vFGPz/5TQwN++hb6icOB1QwdOnffMzw==
+"@floating-ui/react-dom-interactions@^0.6.6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.6.6.tgz#8542e8c4bcbee2cd0d512de676c6a493e0a2d168"
+  integrity sha512-qnao6UPjSZNHnXrF+u4/n92qVroQkx0Umlhy3Avk1oIebm/5ee6yvDm4xbHob0OjY7ya8WmUnV3rQlPwX3Atwg==
   dependencies:
-    "@floating-ui/react-dom" "^0.7.1"
+    "@floating-ui/react-dom" "^0.7.2"
     aria-hidden "^1.1.3"
     use-isomorphic-layout-effect "^1.1.1"
 
-"@floating-ui/react-dom@^0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.1.tgz#e0eb57cb05c7762d4c904bfbae73148684578d66"
-  integrity sha512-Dd7e8AupUjzcjeGf1g3EItf/QRtEWKF5GGyEs5WA5n3zlHvEgZ4XrZM6ANhUnzgE3pUQAaXkcXLnibgFp1YBRw==
+"@floating-ui/react-dom@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
   dependencies:
-    "@floating-ui/dom" "^0.5.1"
+    "@floating-ui/dom" "^0.5.3"
     use-isomorphic-layout-effect "^1.1.1"
 
 "@fortawesome/fontawesome-common-types@^0.2.32":