Hubert / Migrate dialog component to typescript (#272)

Author: hubert-deriv

src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx

@@ -7,7 +7,7 @@ import DelayedFallback from '../../../../global/DelayedFallback/DelayedFallback'
 const Modal = lazy(() => import('../../../../global/Modal/Modal'));
 
 export default function RegisterAppDialogError({ error }) {
-    const isModalOpen = useSelector(stateService, isRegisterErrorSelector);
+    const isModalOpen: boolean = useSelector(stateService, isRegisterErrorSelector);
     if (!isModalOpen) {
         return null;
     }

src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx

@@ -6,7 +6,7 @@ import { stateService } from '../../../../state/stateSignal';
 const Modal = lazy(() => import('../../../global/Modal/Modal'));
 
 export default function RegisterAppDialogSuccess() {
-    const isModalOpen = useSelector(stateService, isRegisterSuccessSelector);
+    const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector);
     const isUpdateMode = useSelector(stateService, isUpdateModeSelector);
     const description = isUpdateMode
         ? 'Your app has been updated successfully.'

src/components/global/Dialog/Dialog.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styles from './Dialog.module.scss';
+
+type TDialog = {
+    closeOnOutsideClick: boolean;
+    onRequestClose: () => void;
+    open: boolean;
+    children: React.ReactNode[] | HTMLElement[];
+};
+
+type TDialogRef = React.RefObject<HTMLDialogElement>;
+
+export const Dialog = ({ closeOnOutsideClick, onRequestClose, open, ...children }: TDialog) => {
+    const dialog_ref = React.useRef<HTMLDialogElement>(null);
+
+    useDialogOpening(dialog_ref, open);
+    useDialogClosing(dialog_ref, onRequestClose);
+
+    const handleOutsideClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+        const dialog_node = dialog_ref?.current;
+        if (closeOnOutsideClick && event?.target === dialog_node) {
+            onRequestClose();
+        }
+    };
+
+    return (
+        <dialog ref={dialog_ref} className={styles.dialogWrapper} onClick={handleOutsideClick}>
+            <div className={styles.dialogContent} {...children} />
+        </dialog>
+    );
+};
+
+const useDialogOpening = (dialog_ref: TDialogRef, open: boolean) => {
+    const lastActiveElement = React.useRef<HTMLDialogElement>(null);
+    React.useEffect(() => {
+        const dialog_node = dialog_ref?.current;
+        if (open) {
+            dialog_node?.showModal();
+        } else {
+            dialog_node?.close();
+            lastActiveElement?.current?.focus();
+        }
+    }, [open]);
+};
+
+const useDialogClosing = (dialog_ref: TDialogRef, onRequestClose: () => void) => {
+    React.useEffect(() => {
+        const dialog_node = dialog_ref?.current;
+        const handleCancel: EventListener = event => {
+            event.preventDefault();
+            onRequestClose();
+        };
+        dialog_node?.addEventListener('cancel', handleCancel);
+        return () => {
+            dialog_node?.removeEventListener('cancel', handleCancel);
+        };
+    }, [onRequestClose]);
+};

src/components/global/Dialog/Dialog.tsx

@@ -1,7 +1,19 @@
 import Button from '../Button/Button';
-import Dialog from '../Dialog/Dialog';
+import { Dialog } from '../Dialog/Dialog';
 import styles from './Modal.module.scss';
 
+type TModal = {
+    onRequestClose: () => void;
+    open: boolean;
+    type: 'success' | 'warning';
+    title: string;
+    description: string;
+    primaryButtonText?: string | null;
+    secondaryButtonText: string;
+    onPrimaryButtonClick?: () => void;
+    onSecondaryButtonClick: () => void;
+};
+
 export default function Modal({
     onRequestClose,
     open,
@@ -12,17 +24,7 @@ export default function Modal({
     secondaryButtonText,
     onPrimaryButtonClick,
     onSecondaryButtonClick,
-}: {
-    onRequestClose: () => void;
-    open: any;
-    type: 'success' | 'warning';
-    title: string;
-    description: string;
-    primaryButtonText?: any;
-    secondaryButtonText: string;
-    onPrimaryButtonClick?: () => void;
-    onSecondaryButtonClick: () => void;
-}) {
+}: TModal) {
     return (
         <Dialog onRequestClose={onRequestClose} open={open} closeOnOutsideClick>
             <div className={styles.modalHeader}>
@@ -32,9 +34,7 @@ export default function Modal({
                 {type === 'success' && <div className={styles.modalImageSuccess} />}
                 {type === 'warning' && <div className={styles.modalImageWarning} />}
                 <div className={styles.modalTitle}>{title}</div>
-                <div className={styles.modalDescription}>
-                    <span>{description}</span>
-                </div>
+                <div className={styles.modalDescription}>{description}</div>
             </div>
             <div className={styles.modalFooter}>
                 <Button type='secondary' onClick={onSecondaryButtonClick}>

src/components/global/Modal/Modal.tsx

@@ -1 +1,3 @@
-declare module '*.png';
+declare module '*.png';
+declare module '*.css';
+declare module '*.scss';