dce-reactkit 3.0.19 → 3.0.22

package/src/components/Modal.tsx

@@ -4,10 +4,7 @@
  */
 
 // Import React
-import React, { useState, useEffect } from 'react';
-
-// Import other components
-import waitMs from '../helpers/waitMs';
+import React from 'react';
 
 // Import types
 import Variant from '../types/Variant';
@@ -135,23 +132,6 @@ const style = `
     }
   }
 
-  .Modal-fading-out {
-    animation-name: Modal-fading-out;
-    animation-duration: ${MS_TO_ANIMATE}ms;
-    animation-iteration-count: 1;
-    animation-fill-mode: both;
-    animation-timing-function: ease-in;
-  }
-
-  @keyframes Modal-fading-out {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
   .Modal-animating-in {
     animation-name: Modal-animating-in;
     animation-duration: ${MS_TO_ANIMATE}ms;
@@ -170,48 +150,6 @@ const style = `
       opacity: 1;
     }
   }
-
-  .Modal-animating-pop {
-    animation-name: Modal-animating-pop;
-    animation-duration: ${MS_TO_ANIMATE}ms;
-    animation-iteration-count: 1;
-    animation-fill-mode: both;
-    animation-timing-function: ease-in-out;
-  }
-
-  @keyframes Modal-animating-pop {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(1.05);
-      opacity: 0.9;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .Modal-animating-out {
-    animation-name: Modal-animating-out;
-    animation-duration: ${MS_TO_ANIMATE}ms;
-    animation-iteration-count: 1;
-    animation-fill-mode: both;
-    animation-timing-function: ease-in;
-  }
-
-  @keyframes Modal-animating-out {
-    0% {
-      transform: scale(1) translate(0, 0);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1.05) translate(0, -1.5rem);
-      opacity: 0;
-    }
-  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -296,77 +234,6 @@ const Modal: React.FC<Props> = (props) => {
     onTopOfOtherModals,
   } = props;
 
-  /* -------------- State ------------- */
-
-  // If true, the modal is shown
-  const [visible, setVisible] = useState(false);
-
-  // True if animation is in use
-  const [animatingIn, setAnimatingIn] = useState(true);
-  const [animatingPop, setAnimatingPop] = useState(false);
-  const [animatingOut, setAnimatingOut] = useState(false);
-
-  /*------------------------------------------------------------------------*/
-  /*                           Lifecycle Functions                          */
-  /*------------------------------------------------------------------------*/
-
-  /**
-   * Mount
-   * @author Gabe Abrams
-   */
-  useEffect(
-    () => {
-      (async () => {
-        // Set defaults
-        setVisible(false);
-        setAnimatingIn(true);
-        setAnimatingPop(false);
-        setAnimatingOut(false);
-        // Wait for animation
-        await waitMs(MS_TO_ANIMATE);
-        // Update to state after animated in
-        setVisible(true);
-        setAnimatingIn(false);
-      })();
-    },
-    [],
-  );
-
-  /*------------------------------------------------------------------------*/
-  /*                           Component Functions                          */
-  /*------------------------------------------------------------------------*/
-
-  /**
-   * Handles the closing of the modal
-   * @author Gabe Abrams
-   * @param ModalButtonType the button that was clicked when closing the
-   *   modal
-   */
-  const handleClose = async (ModalButtonType: ModalButtonType) => {
-    // Don't close if no handler
-    if (!onClose) {
-      return;
-    }
-
-    // Don't close if animating in
-    if (animatingIn) {
-      return;
-    }
-
-    // Don't close if already closed
-    if (!visible) {
-      return;
-    }
-
-    // Update the state
-    setVisible(false);
-    setAnimatingOut(true);
-
-    // Call the handler after the modal has animated out
-    await waitMs(MS_TO_ANIMATE);
-    onClose(ModalButtonType);
-  };
-
   /*------------------------------------------------------------------------*/
   /*                                 Render                                 */
   /*------------------------------------------------------------------------*/
@@ -379,19 +246,19 @@ const Modal: React.FC<Props> = (props) => {
   const ModalButtonTypes: ModalButtonType[] = modalTypeToModalButtonTypes[type] ?? [];
 
   // Create buttons
-  const buttons = ModalButtonTypes.map((ModalButtonType: ModalButtonType, i) => {
+  const buttons = ModalButtonTypes.map((buttonType: ModalButtonType, i) => {
     // Get default style
     let {
       label,
       variant,
-    } = ModalButtonTypeToLabelAndVariant[ModalButtonType];
+    } = ModalButtonTypeToLabelAndVariant[buttonType];
 
     // Override with customizations
-    const newLabel = props[`${ModalButtonType}Label`];
+    const newLabel = props[`${buttonType}Label`];
     if (newLabel) {
       label = newLabel;
     }
-    const newVariant = props[`${ModalButtonType}Variant`];
+    const newVariant = props[`${buttonType}Variant`];
     if (newVariant) {
       variant = newVariant;
     }
@@ -402,11 +269,13 @@ const Modal: React.FC<Props> = (props) => {
     // Create the button
     return (
       <button
-        key={ModalButtonType}
+        key={buttonType}
         type="button"
-        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
+        className={`Modal-${buttonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {
-          handleClose(ModalButtonType);
+          if (onClose) {
+            onClose(buttonType);
+          }
         }}
       >
         {label}
@@ -425,23 +294,10 @@ const Modal: React.FC<Props> = (props) => {
       : undefined
   );
 
-  // Choose an animation
-  let animationClass = '';
-  let backdropAnimationClass = '';
-  if (animatingIn) {
-    animationClass = 'Modal-animating-in';
-    backdropAnimationClass = 'Modal-fading-in';
-  } else if (animatingOut) {
-    animationClass = 'Modal-animating-out';
-    backdropAnimationClass = 'Modal-fading-out';
-  } else if (animatingPop) {
-    animationClass = 'Modal-animating-pop';
-  }
-
   // Render the modal
   return (
     <div
-      className={`modal show modal-dialog-scrollable modal-dialog-centered`}
+      className="modal show modal-dialog-scrollable modal-dialog-centered"
       tabIndex={-1}
       style={{
         zIndex: (
@@ -457,29 +313,22 @@ const Modal: React.FC<Props> = (props) => {
     >
       <style>{style}</style>
       <div
-        className={`Modal-backdrop ${backdropAnimationClass}`}
+        className="Modal-backdrop Modal-fading-in"
         style={{
           zIndex: 5000000003,
         }}
         onClick={async () => {
           // Skip if exit via backdrop not allowed
           if (dontAllowBackdropExit || !onClose) {
-            // Show pop animation
-            if (!animatingPop) {
-              setAnimatingPop(true);
-
-              // Wait then stop pop animation
-              await waitMs(MS_TO_ANIMATE);
-              setAnimatingPop(false);
-            }
             return;
           }
+
           // Handle close
-          handleClose(ModalButtonType.Cancel);
+          onClose(ModalButtonType.Cancel);
         }}
       />
       <div
-        className={`modal-dialog modal-${size} ${animationClass}`}
+        className={`modal-dialog modal-${size} Modal-animating-in`}
         style={{
           zIndex: 5000000002,
         }}
@@ -502,7 +351,7 @@ const Modal: React.FC<Props> = (props) => {
                 aria-label="Close"
                 onClick={() => {
                   // Handle close
-                  handleClose(ModalButtonType.Cancel);
+                  onClose(ModalButtonType.Cancel);
                 }}
               />
             )}