dce-reactkit 3.0.0-beta.3 → 3.0.0-beta.32

package/src/components/Modal.tsx

@@ -7,7 +7,6 @@
 import React, { useState, useEffect } from 'react';
 
 // Import other components
-import BootstrapModal from 'react-bootstrap/Modal';
 import waitMs from '../helpers/waitMs';
 
 // Import types
@@ -16,69 +15,12 @@ import ModalButtonType from '../types/ModalButtonType';
 import ModalSize from '../types/ModalSize';
 import ModalType from '../types/ModalType';
 
-/*------------------------------------------------------------------------*/
-/*                                  Style                                 */
-/*------------------------------------------------------------------------*/
-
-const style = `
-/* More opaque backdrop */
-.Modal-backdrop {
-  background-color: black !important;
-  opacity: 0.8 !important;
-  z-index: 10000000 !important;
-}
-
-/* Customize the modal header and body */
-.modal-header {
-  /* Dark theme */
-  background-color: #222 !important;
-  color: white !important;
-
-  /* Border */
-  border: 1px solid #545454 !important;
-}
-.modal-body {
-  /* Dark theme */
-  background-color: #222 !important;
-  color: white !important;
-
-  /* Border */
-  border-top: 0 !important;
-  border-left: 1px solid #545454 !important;
-  border-bottom: 1px solid #545454 !important;
-  border-right: 1px solid #545454 !important;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-/* Create our own animation */
-.modal-content {
-  animation-name: Modal-drop-in;
-  animation-duration: 0.4s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-out;
-}
-@keyframes Modal-drop-in {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-`;
-
 /*------------------------------------------------------------------------*/
 /*                                Constants                               */
 /*------------------------------------------------------------------------*/
 
 // Constants
-const MS_TO_ANIMATE = 400; // Time to animate in/out (defined by bootstrap)
-const MS_ANIMATE_IN_DELAY = 10;
-// Time to wait before animating in (must be >0 or animation won't trigger)
+const MS_TO_ANIMATE = 200; // Animation duration
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -162,6 +104,116 @@ const ModalButtonTypeToLabelAndVariant = {
   },
 };
 
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .Modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vw;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .Modal-fading-in {
+    animation-name: Modal-fading-in;
+    animation-duration: ${Math.floor(MS_TO_ANIMATE * 2)}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-fading-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .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;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-animating-in {
+    0% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) translate(0, 0);
+      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;
+    }
+  }
+`;
+
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
 /*------------------------------------------------------------------------*/
@@ -246,11 +298,17 @@ const Modal: React.FC<Props> = (props) => {
 
   /* -------------- State ------------- */
 
+  // If true, the modal is completely gone
+  // (not just invisible, also removed from the dom)
+  const [gone, setGone] = useState(false);
+
   // If true, the modal is shown
   const [visible, setVisible] = useState(false);
 
-  // True if currently animating in
-  const [animatingIn, setAnimatingIn] = 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                          */
@@ -263,13 +321,10 @@ const Modal: React.FC<Props> = (props) => {
   useEffect(
     () => {
       (async () => {
-        // Start the component animating in
-        await waitMs(MS_ANIMATE_IN_DELAY);
-        setAnimatingIn(true);
-
         // Wait and then set visible to true
         await waitMs(MS_TO_ANIMATE);
         setVisible(true);
+        setAnimatingIn(false);
       })();
     },
     [],
@@ -303,16 +358,23 @@ const Modal: React.FC<Props> = (props) => {
 
     // Update the state
     setVisible(false);
+    setAnimatingOut(true);
 
     // Call the handler after the modal has animated out
     await waitMs(MS_TO_ANIMATE);
     onClose(ModalButtonType);
+    setGone(true);
   };
 
   /*------------------------------------------------------------------------*/
   /*                                 Render                                 */
   /*------------------------------------------------------------------------*/
 
+  // Return nothing if gone
+  if (gone) {
+    return null;
+  }
+
   /*----------------------------------------*/
   /*                 Footer                 */
   /*----------------------------------------*/
@@ -344,8 +406,9 @@ const Modal: React.FC<Props> = (props) => {
     // Create the button
     return (
       <button
+        key={ModalButtonType}
         type="button"
-        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`}
         onClick={() => {
           handleClose(ModalButtonType);
         }}
@@ -366,47 +429,101 @@ 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 (
-    <BootstrapModal
-      show={visible}
-      size={size !== ModalSize.Medium ? size : undefined}
-      onHide={() => {
-        if (!dontAllowBackdropExit) {
-          handleClose(ModalButtonType.Cancel);
-        }
-      }}
+    <div
+      className={`modal show modal-dialog-scrollable modal-dialog-centered modal-${size}`}
+      tabIndex={-1}
       style={{
         zIndex: (
           onTopOfOtherModals
-            ? 6000000000
+            ? 5000000001
             : 5000000000
         ),
+        display: 'block',
+        margin: 'auto',
+        left: 0,
+        right: 0,
       }}
-      backdropClassName="Modal-backdrop"
-      centered
     >
       <style>{style}</style>
-      {title && (
-        <BootstrapModal.Header
-          closeButton={!!onClose}
-        >
-          <BootstrapModal.Title>
-            {title}
-          </BootstrapModal.Title>
-        </BootstrapModal.Header>
-      )}
-      {children && (
-        <BootstrapModal.Body>
-          {children}
-        </BootstrapModal.Body>
-      )}
-      {footer && (
-        <BootstrapModal.Footer>
-          {footer}
-        </BootstrapModal.Footer>
-      )}
-    </BootstrapModal>
+      <div
+        className={`Modal-backdrop ${backdropAnimationClass}`}
+        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);
+        }}
+      />
+      <div
+        className={`modal-dialog ${animationClass}`}
+        style={{
+          zIndex: 5000000002,
+        }}
+      >
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5
+              className="modal-title"
+              style={{
+                fontWeight: 'bold',
+              }}
+            >
+              {title}
+            </h5>
+
+            {onClose && (
+              <button
+                type="button"
+                className="btn-close"
+                aria-label="Close"
+                onClick={() => {
+                  // Handle close
+                  handleClose(ModalButtonType.Cancel);
+                }}
+              />
+            )}
+          </div>
+          {children && (
+            <div className="modal-body">
+              {children}
+            </div>
+          )}
+          {footer && (
+            <div className="modal-footer pt-1 pb-1">
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
   );
 };
 

package/src/components/TabBox.tsx

@@ -15,6 +15,8 @@ type Props = {
   title: React.ReactNode,
   // Children/contents inside the box
   children: React.ReactNode,
+  // If true, don't add padding below the tab box
+  noBottomPadding?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -22,63 +24,67 @@ type Props = {
 /*------------------------------------------------------------------------*/
 
 const style = `
-/* Tab Box */
-.TabBox-box {
-  /* Light Border */
-  border: 2px solid #dedede;
-  
-  /* Rounded Corners (except top-left) */
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Very Light Gray Border */
-  background: #fdfdfd;
-
-  /* Align Contents on Left */
-  text-align: left;
-}
-
-/* Container for Title */
-.TabBox-title-container {
-  /* Place on Left */
-  position: relative;
-  left: 0;
-  text-align: left;
-}
-
-/* Tab-style Title */
-.TabBox-title {
-  /* Place so it Barely Overlaps the Box Border */
-  display: inline-block;
-  position: relative;
-  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
-
-  /* Title-sized Font */
-  font-size: 25px;
-
-  /* Add Border on Top and Sides */
-  border-top: 2px solid #dedede;
-  border-left: 2px solid #dedede;
-  border-right: 2px solid #dedede;
-
-  /* Round the Top Corners */
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Add Text Padding */
-  padding-left: 12px;
-  padding-right: 12px;
-
-  /* Match Background Color of Box */
-  background: #fdfdfd;
-}
-
-/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
-.TabBox-children {
-  position: relative;
-  z-index: 1;
-}
+  /* Tab Box */
+  .TabBox-box {
+    /* Light Border */
+    border: 0.15rem solid #dedede;
+    
+    /* Rounded Corners (except top-left) */
+    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    /* Very Light Gray Border */
+    background: #fdfdfd;
+
+    /* Align Contents on Left */
+    text-align: left;
+
+    /* Add Text Padding */
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
+  /* Container for Title */
+  .TabBox-title-container {
+    /* Place on Left */
+    position: relative;
+    left: 0;
+    text-align: left;
+  }
+
+  /* Tab-style Title */
+  .TabBox-title {
+    /* Place so it Barely Overlaps the Box Border */
+    display: inline-block;
+    position: relative;
+    top: 0.15rem; /* Gives Illusion that Border Doesn't Exist Below Tab */
+
+    /* Title-sized Font */
+    font-size: 1.5rem;
+
+    /* Add Border on Top and Sides */
+    border-top: 0.15rem solid #dedede;
+    border-left: 0.15rem solid #dedede;
+    border-right: 0.15rem solid #dedede;
+
+    /* Round the Top Corners */
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    /* Add Text Padding */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    /* Match Background Color of Box */
+    background: #fdfdfd;
+  }
+
+  /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+  .TabBox-children {
+    position: relative;
+    z-index: 1;
+  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -95,6 +101,7 @@ const TabBox: React.FC<Props> = (props) => {
   const {
     title,
     children,
+    noBottomPadding,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -107,7 +114,7 @@ const TabBox: React.FC<Props> = (props) => {
 
   // Full UI
   return (
-    <div>
+    <div className={`TabBox-container ${noBottomPadding ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>