Add support for deleting a subuser from a server

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
-import Modal from '@/components/elements/Modal';
+import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 
-interface Props {
+type Props = {
     title: string;
     buttonText: string;
     children: string;
-    visible: boolean;
     onConfirmed: () => void;
-    onCanceled: () => void;
-}
+    showSpinnerOverlay?: boolean;
+} & RequiredModalProps;
 
-const ConfirmationModal = ({ title, children, visible, buttonText, onConfirmed, onCanceled }: Props) => (
+const ConfirmationModal = ({ title, appear, children, visible, buttonText, onConfirmed, showSpinnerOverlay, onDismissed }: Props) => (
     <Modal
-        appear={true}
+        appear={appear || true}
         visible={visible}
-        onDismissed={() => onCanceled()}
+        showSpinnerOverlay={showSpinnerOverlay}
+        onDismissed={() => onDismissed()}
     >
         <h3 className={'mb-6'}>{title}</h3>
         <p className={'text-sm'}>{children}</p>
         <div className={'flex items-center justify-end mt-8'}>
-            <button className={'btn btn-secondary btn-sm'} onClick={() => onCanceled()}>
+            <button className={'btn btn-secondary btn-sm'} onClick={() => onDismissed()}>
                 Cancel
             </button>
             <button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}>

resources/scripts/components/elements/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { CSSTransition } from 'react-transition-group';
@@ -18,16 +18,22 @@ type Props = RequiredModalProps & {
     children: React.ReactNode;
 }
 
-export default (props: Props) => {
-    const [render, setRender] = useState(props.visible);
+export default ({ visible, appear, dismissable, showSpinnerOverlay, closeOnBackground = true, closeOnEscape = true, onDismissed, children  }: Props) => {
+    const [render, setRender] = useState(visible);
+
+    const isDismissable = useMemo(() => {
+        return (dismissable || true) && !(showSpinnerOverlay || false);
+    }, [dismissable, showSpinnerOverlay]);
 
     const handleEscapeEvent = (e: KeyboardEvent) => {
-        if (props.dismissable !== false && props.closeOnEscape !== false && e.key === 'Escape') {
+        if (isDismissable && closeOnEscape && e.key === 'Escape') {
             setRender(false);
         }
     };
 
-    useEffect(() => setRender(props.visible), [props.visible]);
+    useEffect(() => {
+        setRender(visible);
+    }, [visible]);
 
     useEffect(() => {
         window.addEventListener('keydown', handleEscapeEvent);
@@ -39,13 +45,13 @@ export default (props: Props) => {
         <CSSTransition
             timeout={250}
             classNames={'fade'}
-            appear={props.appear}
+            appear={appear}
             in={render}
             unmountOnExit={true}
-            onExited={() => props.onDismissed()}
+            onExited={() => onDismissed()}
         >
             <div className={'modal-mask'} onClick={e => {
-                if (props.dismissable !== false && props.closeOnBackground !== false) {
+                if (isDismissable && closeOnBackground) {
                     e.stopPropagation();
                     if (e.target === e.currentTarget) {
                         setRender(false);
@@ -53,12 +59,12 @@ export default (props: Props) => {
                 }
             }}>
                 <div className={'modal-container top'}>
-                    {props.dismissable !== false &&
+                    {isDismissable &&
                     <div className={'modal-close-icon'} onClick={() => setRender(false)}>
                         <FontAwesomeIcon icon={faTimes}/>
                     </div>
                     }
-                    {props.showSpinnerOverlay &&
+                    {showSpinnerOverlay &&
                     <div
                         className={'absolute w-full h-full rounded flex items-center justify-center'}
                         style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
@@ -67,7 +73,7 @@ export default (props: Props) => {
                     </div>
                     }
                     <div className={'modal-content p-6'}>
-                        {props.children}
+                        {children}
                     </div>
                 </div>
             </div>