dce-reactkit 2.0.12 → 3.0.0-beta.11

package/src/components/Modal.tsx

@@ -7,64 +7,27 @@
 import React, { useState, useEffect } from 'react';
 
 // Import other components
-import BootstrapModal from 'react-bootstrap/Modal';
 import waitMs from '../helpers/waitMs';
 
 // Import types
 import Variant from '../types/Variant';
+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;
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vw;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 4000000000;
 }
 `;
 
@@ -77,118 +40,83 @@ 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)
 
-// Modal types
-enum ModalType {
-  Okay = 'okay', // [Okay]
-  OkayCancel = 'okay-cancel', // [Okay] [Cancel]
-  YesNo = 'yes-no', // [Yes] [No]
-  YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]
-  AbandonGoBack = 'abandon-goBack', // [Abandon Changes] [Go Back]
-  ImSureCancel = 'imSure-cancel', // [I am sure] [Cancel]
-  DeleteCancel = 'delete-cancel', // [Yes, Delete] [Cancel]
-  ConfirmCancel = 'confirm-cancel', // [Confirm] [Cancel]
-  NoButtons = '-', // No buttons
-}
-
-// Modal sizes
-enum ModalSize {
-  Small = 'sm',
-  Medium = 'md',
-  Large = 'lg',
-  ExtraLarge = 'xl',
-}
-
-// Button types
-enum ButtonType {
-  Okay = 'okay',
-  Cancel = 'cancel',
-  Yes = 'yes',
-  No = 'no',
-  Abandon = 'abandon',
-  GoBack = 'goBack',
-  Continue = 'continue',
-  ImSure = 'imSure',
-  Delete = 'delete',
-  Confirm = 'confirm',
-}
-
 // Modal type to list of buttons
-const modalTypeToButtonTypes: {
-  [k: string]: ButtonType[]
+const modalTypeToModalButtonTypes: {
+  [k: string]: ModalButtonType[]
 } = {
   [ModalType.Okay]: [
-    ButtonType.Okay,
+    ModalButtonType.Okay,
   ],
   [ModalType.OkayCancel]: [
-    ButtonType.Okay,
-    ButtonType.Cancel,
+    ModalButtonType.Okay,
+    ModalButtonType.Cancel,
   ],
   [ModalType.YesNo]: [
-    ButtonType.Yes,
-    ButtonType.No,
+    ModalButtonType.Yes,
+    ModalButtonType.No,
   ],
   [ModalType.YesNoCancel]: [
-    ButtonType.Yes,
-    ButtonType.No,
-    ButtonType.Cancel,
+    ModalButtonType.Yes,
+    ModalButtonType.No,
+    ModalButtonType.Cancel,
   ],
   [ModalType.AbandonGoBack]: [
-    ButtonType.Abandon,
-    ButtonType.GoBack,
+    ModalButtonType.Abandon,
+    ModalButtonType.GoBack,
   ],
   [ModalType.ImSureCancel]: [
-    ButtonType.ImSure,
-    ButtonType.Cancel,
+    ModalButtonType.ImSure,
+    ModalButtonType.Cancel,
   ],
   [ModalType.DeleteCancel]: [
-    ButtonType.Delete,
-    ButtonType.Cancel,
+    ModalButtonType.Delete,
+    ModalButtonType.Cancel,
   ],
   [ModalType.ConfirmCancel]: [
-    ButtonType.Confirm,
-    ButtonType.Cancel,
+    ModalButtonType.Confirm,
+    ModalButtonType.Cancel,
   ],
 };
 
 // Button type styling and labels
-const buttonTypeToLabelAndVariant = {
-  [ButtonType.Okay]: {
+const ModalButtonTypeToLabelAndVariant = {
+  [ModalButtonType.Okay]: {
     label: 'Okay',
     variant: Variant.Dark,
   },
-  [ButtonType.Cancel]: {
+  [ModalButtonType.Cancel]: {
     label: 'Cancel',
     variant: Variant.Secondary,
   },
-  [ButtonType.Yes]: {
+  [ModalButtonType.Yes]: {
     label: 'Yes',
     variant: Variant.Dark,
   },
-  [ButtonType.No]: {
+  [ModalButtonType.No]: {
     label: 'No',
     variant: Variant.Secondary,
   },
-  [ButtonType.Abandon]: {
+  [ModalButtonType.Abandon]: {
     label: 'Abandon Changes',
     variant: Variant.Warning,
   },
-  [ButtonType.GoBack]: {
+  [ModalButtonType.GoBack]: {
     label: 'Go Back',
     variant: Variant.Secondary,
   },
-  [ButtonType.Continue]: {
+  [ModalButtonType.Continue]: {
     label: 'Continue',
     variant: Variant.Dark,
   },
-  [ButtonType.ImSure]: {
+  [ModalButtonType.ImSure]: {
     label: 'I am sure',
     variant: Variant.Warning,
   },
-  [ButtonType.Delete]: {
+  [ModalButtonType.Delete]: {
     label: 'Yes, Delete',
     variant: Variant.Danger,
   },
-  [ButtonType.Confirm]: {
+  [ModalButtonType.Confirm]: {
     label: 'Confirm',
     variant: Variant.Dark,
   },
@@ -208,7 +136,7 @@ type Props = {
   // The body of the modal
   children?: React.ReactNode,
   // Handler to call when modal is closed (if excluded, not closable)
-  onClose?: (type: ButtonType) => void,
+  onClose?: (type: ModalButtonType) => void,
   // If true, don't allow the user to click the backdrop to exit
   dontAllowBackdropExit?: boolean,
   // Custom label for "okay" button
@@ -259,15 +187,7 @@ type Props = {
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
 
-const Modal: (
-  React.FC<Props>
-  & {
-    ModalType: typeof ModalType,
-    ModalSize: typeof ModalSize,
-    ButtonType: typeof ButtonType,
-    Variant: typeof Variant,
-  }
-) = (props) => {
+const Modal: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
   /*                                  Setup                                 */
   /*------------------------------------------------------------------------*/
@@ -322,10 +242,10 @@ const Modal: (
   /**
    * Handles the closing of the modal
    * @author Gabe Abrams
-   * @param buttonType the button that was clicked when closing the
+   * @param ModalButtonType the button that was clicked when closing the
    *   modal
    */
-  const handleClose = async (buttonType: ButtonType) => {
+  const handleClose = async (ModalButtonType: ModalButtonType) => {
     // Don't close if no handler
     if (!onClose) {
       return;
@@ -346,7 +266,7 @@ const Modal: (
 
     // Call the handler after the modal has animated out
     await waitMs(MS_TO_ANIMATE);
-    onClose(buttonType);
+    onClose(ModalButtonType);
   };
 
   /*------------------------------------------------------------------------*/
@@ -358,34 +278,36 @@ const Modal: (
   /*----------------------------------------*/
 
   // Get list of buttons for this modal type
-  const buttonTypes: ButtonType[] = modalTypeToButtonTypes[type] ?? [];
+  const ModalButtonTypes: ModalButtonType[] = modalTypeToModalButtonTypes[type] ?? [];
 
   // Create buttons
-  const buttons = buttonTypes.map((buttonType: ButtonType, i) => {
+  const buttons = ModalButtonTypes.map((ModalButtonType: ModalButtonType, i) => {
     // Get default style
     let {
       label,
       variant,
-    } = buttonTypeToLabelAndVariant[buttonType];
+    } = ModalButtonTypeToLabelAndVariant[ModalButtonType];
 
     // Override with customizations
-    if (props[`${buttonType}Label`]) {
-      label = props[`${buttonType}Label`];
+    const newLabel = props[`${ModalButtonType}Label`];
+    if (newLabel) {
+      label = newLabel;
     }
-    if (props[`${buttonType}Variant`]) {
-      variant = props[`${buttonType}Variant`];
+    const newVariant = props[`${ModalButtonType}Variant`];
+    if (newVariant) {
+      variant = newVariant;
     }
 
     // Check if this button is last
-    const last = (i === buttonTypes.length - 1);
+    const last = (i === ModalButtonTypes.length - 1);
 
     // Create the button
     return (
       <button
         type="button"
-        className={`Modal-${buttonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
         onClick={() => {
-          handleClose(buttonType);
+          handleClose(ModalButtonType);
         }}
       >
         {label}
@@ -406,45 +328,55 @@ const Modal: (
 
   // Render the modal
   return (
-    <BootstrapModal
-      show={visible}
-      size={size !== ModalSize.Medium ? size : undefined}
-      onHide={() => {
-        if (!dontAllowBackdropExit) {
-          handleClose(ButtonType.Cancel);
-        }
-      }}
+    <div
+      className={`modal show modal-dialog-scrollable modal-dialog-centered modal-${size}`}
+      tabIndex={-1}
       style={{
         zIndex: (
           onTopOfOtherModals
             ? 6000000000
             : 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" />
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">
+              {title}
+            </h5>
+
+            {onClose && (
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+                onClick={() => {
+                  handleClose(ModalButtonType.Cancel);
+                }}
+              />
+            )}
+          </div>
+          {children && (
+            <div className="modal-body">
+              {children}
+            </div>
+          )}
+          {footer && (
+            <div className="modal-footer">
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -452,10 +384,4 @@ const Modal: (
 /*                                 Wrap Up                                */
 /*------------------------------------------------------------------------*/
 
-// Add enums
-Modal.ModalType = ModalType;
-Modal.ModalSize = ModalSize;
-Modal.ButtonType = ButtonType;
-Modal.Variant = Variant;
-
 export default Modal;

package/src/helpers/abbreviate.tsx

@@ -21,3 +21,5 @@ const abbreviate = (text: string, maxChars: number): string => {
   );
   return `${shortenedText}...`;
 };
+
+export default abbreviate;

package/src/helpers/padDecimalZeros.tsx

@@ -9,7 +9,7 @@
 const padDecimalZeros = (num: number, numDigits: number): string => {
   // Skip if nothing to do
   if (numDigits < 1) {
-    return;
+    return String(num);
   }
 
   // Convert to string

package/src/index.ts

@@ -0,0 +1,61 @@
+// Import components
+import AppWrapper, { alert, confirm, showFatalError } from './components/AppWrapper';
+import LoadingSpinner from './components/LoadingSpinner';
+import ErrorBox from './components/ErrorBox';
+import Modal from './components/Modal';
+import TabBox from './components/TabBox';
+
+// Import errors
+import ErrorWithCode from './errors/ErrorWithCode';
+
+// Import helpers
+import abbreviate from './helpers/abbreviate';
+import avg from './helpers/avg';
+import ceilToNumDecimals from './helpers/ceilToNumDecimals';
+import floorToNumDecimals from './helpers/floorToNumDecimals';
+import forceNumIntoBounds from './helpers/forceNumIntoBounds';
+import padDecimalZeros from './helpers/padDecimalZeros';
+import padZerosLeft from './helpers/padZerosLeft';
+import roundToNumDecimals from './helpers/roundToNumDecimals';
+import sum from './helpers/sum';
+import waitMs from './helpers/waitMs';
+
+// Import types
+import ModalButtonType from './types/ModalButtonType';
+import ModalSize from './types/ModalSize';
+import ModalType from './types/ModalType';
+import ReactKitErrorCode from './types/ReactKitErrorCode';
+import Variant from './types/Variant';
+
+// Export each item
+export {
+  // Components
+  AppWrapper,
+  LoadingSpinner,
+  ErrorBox,
+  Modal,
+  TabBox,
+  // Global functions
+  alert,
+  confirm,
+  showFatalError,
+  // Errors
+  ErrorWithCode,
+  // Helpers
+  abbreviate,
+  avg,
+  ceilToNumDecimals,
+  floorToNumDecimals,
+  forceNumIntoBounds,
+  padDecimalZeros,
+  padZerosLeft,
+  roundToNumDecimals,
+  sum,
+  waitMs,
+  // Types
+  ModalButtonType,
+  ModalSize,
+  ModalType,
+  ReactKitErrorCode,
+  Variant,
+};

package/src/types/ModalButtonType.tsx

@@ -0,0 +1,18 @@
+/**
+ * Types of buttons in the modal
+ * @author Gabe Abrams
+ */
+enum ModalButtonType {
+  Okay = 'okay',
+  Cancel = 'cancel',
+  Yes = 'yes',
+  No = 'no',
+  Abandon = 'abandon',
+  GoBack = 'goBack',
+  Continue = 'continue',
+  ImSure = 'imSure',
+  Delete = 'delete',
+  Confirm = 'confirm',
+}
+
+export default ModalButtonType;

package/src/types/ModalSize.tsx

@@ -0,0 +1,12 @@
+/**
+ * Modal sizes
+ * @author Gabe Abrams
+ */
+enum ModalSize {
+  Small = 'sm',
+  Medium = 'md',
+  Large = 'lg',
+  ExtraLarge = 'xl',
+}
+
+export default ModalSize;

package/src/types/ModalType.tsx

@@ -0,0 +1,17 @@
+/**
+ * Types of modals
+ * @author Gabe Abrams
+ */
+enum ModalType {
+  Okay = 'okay', // [Okay]
+  OkayCancel = 'okay-cancel', // [Okay] [Cancel]
+  YesNo = 'yes-no', // [Yes] [No]
+  YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]
+  AbandonGoBack = 'abandon-goBack', // [Abandon Changes] [Go Back]
+  ImSureCancel = 'imSure-cancel', // [I am sure] [Cancel]
+  DeleteCancel = 'delete-cancel', // [Yes, Delete] [Cancel]
+  ConfirmCancel = 'confirm-cancel', // [Confirm] [Cancel]
+  NoButtons = '-', // No buttons
+}
+
+export default ModalType;

package/tsconfig.json

@@ -1,24 +1,23 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "target": "es2016",
     "esModuleInterop": true,
-    "noImplicitAny": true,
-    "noEmitOnError": true,
-    "removeComments": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+
+    "jsx": "react",
+    "module": "ESNext",
     "declaration": true,
+    "declarationDir": "types",
     "sourceMap": true,
-    "target": "es5",
-    "jsx": "react-jsx",
-    "lib": [
-      "es2017",
-      "dom"
-    ],
-    "outDir": "./lib"
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": true
   },
+
   "include": [
-    "./src"
-  ],
-  "ts-node": {
-    "files": true
-  }
-}
+    "./src/**/*"
+  ]
+}