dce-reactkit 3.8.1 → 3.9.0-beta.1

package/dist/esm/types/components/Modal/ModalProps.d.ts

@@ -38,5 +38,7 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
+    isLoading?: boolean;
+    isLoadingCancelable?: boolean;
 };
 export default ModalProps;

package/dist/index.d.ts

@@ -176,6 +176,8 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
+    isLoading?: boolean;
+    isLoadingCancelable?: boolean;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.8.1",
+  "version": "3.9.0-beta.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Modal/ModalProps.ts

@@ -69,6 +69,10 @@ type ModalProps = {
   confirmVariant?: Variant,
   // True if modal should be on top of other modals
   onTopOfOtherModals?: boolean,
+  // If true, the modal is loading
+  isLoading?: boolean,
+  // If true, the loading is cancelable
+  isLoadingCancelable?: boolean,
 };
 
 export default ModalProps;

package/src/components/Modal/index.tsx

@@ -15,6 +15,7 @@ import ReactDOM from 'react-dom';
 
 // Import other components
 import waitMs from '../../helpers/waitMs';
+import LoadingSpinner from '../LoadingSpinner';
 
 // Import types
 import Variant from '../../types/Variant';
@@ -253,6 +254,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
+    isLoading,
+    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -263,6 +266,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -294,6 +298,13 @@ const Modal: React.FC<ModalProps> = (props) => {
         // Update to state after animated in
         if (mounted.current) {
           setAnimatingIn(false);
+          if (isLoading) {
+            // wait 1 second before showing modal
+            await waitMs(1000);
+            setShowModal(true);
+          } else {
+            setShowModal(true);
+          }
         }
       })();
 
@@ -433,6 +444,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
+
+      { showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -495,7 +508,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {(onClose && !dontShowXButton) && (
+              {(onClose && !dontShowXButton && !(isLoading && !isLoadingCancelable)) && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -515,7 +528,29 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-          {children && (
+
+          {isLoading && (
+            <div
+              className="modal-body"
+              style={{
+                color: (
+                  isDarkModeOn()
+                    ? 'white'
+                    : undefined
+                ),
+                backgroundColor: (
+                  isDarkModeOn()
+                    ? '#444'
+                    : undefined
+                ),
+              }}
+            >
+              <LoadingSpinner />
+              <span className="sr-only">Content loading</span>
+            </div>
+          )}
+
+          {children && !isLoading && (
             <div
               className="modal-body"
               style={{
@@ -560,6 +595,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
+      )}
     </div>
   );