Minor improvements to Animated Dialog control

Author: anoopt

src/controls/animatedDialog/AnimatedDialog.module.scss

@@ -17,7 +17,8 @@ $themePrimary: "[theme:themePrimary, default:#0078d7]";
 }
 
 .animatedDialogFooter {
-  text-align: center;
+  display: flex;
+  justify-content: center;
   margin-top: 1.25em;
 
   button {

src/controls/animatedDialog/AnimatedDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useState } from 'react';
 import styles from './AnimatedDialog.module.scss';
-import { Dialog, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
+import { Dialog, IDialogProps, IDialogContentProps } from 'office-ui-fabric-react/lib/Dialog';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
@@ -22,32 +22,56 @@ export interface IAnimatedDialogProps extends IDialogProps {
     onError?: () => void;
 }
 
+const animationPrefix: string = `animate__`;
+const mainAnimationClass: string = `${animationPrefix}animated`;
+const defaultDialogAnimationClass: string = `${animationPrefix}bounceIn`;
+const defaultIconAnimationClass: string = `${animationPrefix}zoomIn`;
+
 export function AnimatedDialog(props: React.PropsWithChildren<IAnimatedDialogProps>) {
 
     const [dialogProps, setDialogProps] = useState<IDialogProps>(props);
+    const [animatedDialogContentProps, setAnimatedDialogContentProps] = useState<IDialogContentProps>(props.dialogContentProps);
+    const [animatedDialogFooter, setAnimatedDialogFooter] = useState<JSX.Element>(null);
     const [loading, setLoading] = useState<boolean>(false);
 
     const { dialogAnimationInType, dialogAnimationOutType,
         iconName, iconAnimationType,
         modalProps, dialogContentProps,
         showAnimatedDialogFooter, okButtonText, cancelButtonText } = props;
 
-
-    const animationPrefix: string = `animate__`;
-    const mainAnimationClass: string = `${animationPrefix}animated`;
     const currentContainerClass: string = modalProps && modalProps.containerClassName;
     const containerAnimationClass: string = `${currentContainerClass} ${mainAnimationClass} ${animationPrefix}fast`;
-    const defaultDialogAnimationClass: string = `${animationPrefix}bounceIn`;
-    const defaultIconAnimationClass: string = `${animationPrefix}zoomIn`;
 
-    useEffect(() => {
+    const getAnimatedDialogFooter = (): JSX.Element => {
+        return showAnimatedDialogFooter ?
+            <div className={styles.animatedDialogFooter}>
+                <PrimaryButton
+                    onClick={async () => {
+                        setLoading(true);
+                        try {
+                            await props.onOkClick();
+                            props.onSuccess();
+                        } catch (error) {
+                            props.onError();
+                        }
+                        setLoading(false);
+                    }}
+                    disabled={loading}
+                    text={!loading && (okButtonText ? okButtonText : "Ok")}
+                    iconProps={!loading && { iconName: 'CheckMark' }}>
+                    {loading && <Spinner size={SpinnerSize.medium} />}
+                </PrimaryButton>
 
-        let containerClassName: string = `${containerAnimationClass} ${defaultDialogAnimationClass}`;
-        let title: string | JSX.Element = dialogContentProps && dialogContentProps.title;
+                <DefaultButton
+                    onClick={props.onDismiss}
+                    text={cancelButtonText ? cancelButtonText : "Cancel"}
+                    disabled={loading}
+                    iconProps={{ iconName: 'Cancel' }} />
+            </div> : null;
+    };
 
-        if (props.dialogAnimationInType) {
-            containerClassName = `${containerAnimationClass} ${animationPrefix}${dialogAnimationInType}`;
-        }
+    useEffect(() => {
+        let title: string | JSX.Element = dialogContentProps && dialogContentProps.title;
 
         if (iconName) {
             title =
@@ -62,6 +86,21 @@ export function AnimatedDialog(props: React.PropsWithChildren<IAnimatedDialogPro
                 </div>;
         }
 
+        setAnimatedDialogContentProps({ ...dialogContentProps, title });
+    }, []);
+
+    useEffect(() => {
+        setAnimatedDialogFooter(getAnimatedDialogFooter());
+    }, [loading]);
+
+    useEffect(() => {
+
+        let containerClassName: string = `${containerAnimationClass} ${defaultDialogAnimationClass}`;
+        
+        if (props.dialogAnimationInType) {
+            containerClassName = `${containerAnimationClass} ${animationPrefix}${dialogAnimationInType}`;
+        }
+
         if (props.hidden) {
             containerClassName = `${containerAnimationClass} `;
             containerClassName += dialogAnimationOutType ?
@@ -71,47 +110,17 @@ export function AnimatedDialog(props: React.PropsWithChildren<IAnimatedDialogPro
 
         setDialogProps({
             ...props,
-            modalProps: { ...modalProps, containerClassName },
-            dialogContentProps: { ...dialogContentProps, title }
+            dialogContentProps: animatedDialogContentProps,
+            modalProps: { ...modalProps, containerClassName }
         });
 
 
     }, [props.hidden]);
 
-    const animatedDialogFooter: JSX.Element =
-        showAnimatedDialogFooter ?
-            <div className={styles.animatedDialogFooter}>
-                <PrimaryButton
-                    onClick={async () => {
-                        setLoading(true);
-                        try {
-                            await props.onOkClick();
-                            props.onSuccess();
-                        } catch (error) {
-                            props.onError();
-                        }
-                        setLoading(false);
-                    }}
-                    disabled={loading}
-                    text={!loading && (okButtonText ? okButtonText : "Ok")}
-                    iconProps={!loading && { iconName: 'CheckMark' }}>
-                    {loading && <Spinner size={SpinnerSize.medium} />}
-                </PrimaryButton>
-
-                <DefaultButton
-                    onClick={props.onDismiss}
-                    text={cancelButtonText ? cancelButtonText : "Cancel"}
-                    disabled={loading}
-                    iconProps={{ iconName: 'Cancel' }} />
-            </div> :
-            null;
-
     return (
         <Dialog {...dialogProps}>
             {props.children}
-            {
-                showAnimatedDialogFooter && animatedDialogFooter
-            }
+            {animatedDialogFooter}
         </Dialog>
     );
 }

src/webparts/controlsTest/components/ControlsTest.module.scss

@@ -97,7 +97,8 @@ $themePrimary: '[theme:themePrimary, default:#0078d7]';
   }
 
   .dialogFooter {
-    text-align: center;
+    display: flex;
+    justify-content: center;
     margin-top: 1.25em;
 
     button {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -806,7 +806,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     };
 
     const timeout = (ms: number): Promise<void> => {
-      return new Promise((resolve, reject) => setTimeout(reject, ms));
+      return new Promise((resolve, reject) => setTimeout(resolve, ms));
     };