dce-reactkit 1.0.18 → 2.0.0

package/src/components/Modal.tsx

@@ -0,0 +1,391 @@
+/**
+ * A generic popup modal
+ * @author Gabe Abrams
+ */
+
+// Import React
+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';
+
+/*------------------------------------------------------------------------*/
+/*                                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)
+
+// 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[]
+} = {
+  [ModalType.Okay]: [
+    ButtonType.Okay,
+  ],
+  [ModalType.OkayCancel]: [
+    ButtonType.Okay,
+    ButtonType.Cancel,
+  ],
+  [ModalType.YesNo]: [
+    ButtonType.Yes,
+    ButtonType.No,
+  ],
+  [ModalType.YesNoCancel]: [
+    ButtonType.Yes,
+    ButtonType.No,
+    ButtonType.Cancel,
+  ],
+  [ModalType.AbandonGoBack]: [
+    ButtonType.Abandon,
+    ButtonType.GoBack,
+  ],
+  [ModalType.ImSureCancel]: [
+    ButtonType.ImSure,
+    ButtonType.Cancel,
+  ],
+  [ModalType.DeleteCancel]: [
+    ButtonType.Delete,
+    ButtonType.Cancel,
+  ],
+  [ModalType.ConfirmCancel]: [
+    ButtonType.Confirm,
+    ButtonType.Cancel,
+  ],
+};
+
+// Button type styling and labels
+const buttonTypeToLabelAndVariant = {
+  [ButtonType.Okay]: {
+    label: 'Okay',
+    variant: Variant.Dark,
+  },
+  [ButtonType.Cancel]: {
+    label: 'Cancel',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Yes]: {
+    label: 'Yes',
+    variant: Variant.Dark,
+  },
+  [ButtonType.No]: {
+    label: 'No',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Abandon]: {
+    label: 'Abandon Changes',
+    variant: Variant.Warning,
+  },
+  [ButtonType.GoBack]: {
+    label: 'Go Back',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Continue]: {
+    label: 'Continue',
+    variant: Variant.Dark,
+  },
+  [ButtonType.ImSure]: {
+    label: 'I am sure',
+    variant: Variant.Warning,
+  },
+  [ButtonType.Delete]: {
+    label: 'Yes, Delete',
+    variant: Variant.Danger,
+  },
+  [ButtonType.Confirm]: {
+    label: 'Confirm',
+    variant: Variant.Dark,
+  },
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Type of the modal
+  type?: ModalType,
+  // Size of the modal
+  size?: ModalSize,
+  // Title of the modal (if excluded, no header)
+  title?: React.ReactNode,
+  // The body of the modal
+  children?: React.ReactNode,
+  // Handler to call when modal is closed (if excluded, not closable)
+  onClose?: (type: ButtonType) => void,
+  // Custom label for "okay" button
+  okayLabel?: string,
+  // Custom variant for "okay" button
+  okayVariant?: Variant,
+  // Custom label for "cancel" button
+  cancelLabel?: string,
+  // Custom variant for "cancel" button
+  cancelVariant?: Variant,
+  // Custom label for "yes" button
+  yesLabel?: string,
+  // Custom variant for "yes" button
+  yesVariant?: Variant,
+  // Custom label for "no" button
+  noLabel?: string,
+  // Custom variant for "no" button
+  noVariant?: Variant,
+  // Custom label for "abandon" button
+  abandonLabel?: string,
+  // Custom variant for "abandon" button
+  abandonVariant?: Variant,
+  // Custom label for "goBack" button
+  goBackLabel?: string,
+  // Custom variant for "goBack" button
+  goBackVariant?: Variant,
+  // Custom label for "continue" button
+  continueLabel?: string,
+  // Custom variant for "continue" button
+  continueVariant?: Variant,
+  // Custom label for "imSure" button
+  imSureLabel?: string,
+  // Custom variant for "imSure" button
+  imSureVariant?: Variant,
+  // Custom label for "delete" button
+  deleteLabel?: string,
+  // Custom variant for "delete" button
+  deleteVariant?: Variant,
+  // Custom label for "confirm" button
+  confirmLabel?: string,
+  // Custom variant for "confirm" button
+  confirmVariant?: Variant,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const Modal: (
+  React.FC<Props>
+  & {
+    ModalType: typeof ModalType,
+    ModalSize: typeof ModalSize,
+    ButtonType: typeof ButtonType,
+    Variant: typeof Variant,
+  }
+) = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    type = ModalType.NoButtons,
+    size = ModalSize.Large,
+    title,
+    children,
+    onClose,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // If true, the modal is shown
+  const [visible, setVisible] = useState(false);
+
+  // True if currently animating in
+  const [animatingIn, setAnimatingIn] = useState(false);
+
+  /*------------------------------------------------------------------------*/
+  /*                           Lifecycle Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Mount
+   * @author Gabe Abrams
+   */
+  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);
+      })();
+    },
+    [],
+  );
+
+  /*------------------------------------------------------------------------*/
+  /*                           Component Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Handles the closing of the modal
+   * @author Gabe Abrams
+   * @param buttonType the button that was clicked when closing the
+   *   modal
+   */
+  const handleClose = async (buttonType: ButtonType) => {
+    // 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);
+
+    // Call the handler after the modal has animated out
+    await waitMs(MS_TO_ANIMATE);
+    onClose(buttonType);
+  };
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Footer                 */
+  /*----------------------------------------*/
+
+  // Get list of buttons for this modal type
+  const buttonTypes: ButtonType[] = modalTypeToButtonTypes[type] ?? [];
+
+  // Create buttons
+  const buttons = buttonTypes.map((buttonType: ButtonType, i) => {
+    // Get default style
+    let {
+      label,
+      variant,
+    } = buttonTypeToLabelAndVariant[buttonType];
+
+    // Override with customizations
+    if (props[`${buttonType}Label`]) {
+      label = props[`${buttonType}Label`];
+    }
+    if (props[`${buttonType}Variant`]) {
+      variant = props[`${buttonType}Variant`];
+    }
+
+    // Check if this button is last
+    const last = (i === buttonTypes.length - 1);
+
+    // Create the button
+    return (
+      <button
+        type="button"
+        className={`Modal-${buttonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        onClick={() => {
+          handleClose(buttonType);
+        }}
+      >
+        {label}
+      </button>
+    );
+  });
+
+  // Put all buttons in a footer
+  const footer = (
+    (buttons && buttons.length)
+      ? (
+        <div>
+          {buttons}
+        </div>
+      )
+      : undefined
+  );
+
+  // Render the modal
+  return (
+    <BootstrapModal
+      show={visible}
+      size={size !== ModalSize.Medium ? size : undefined}
+      onHide={() => {
+        handleClose(ButtonType.Cancel);
+      }}
+      style={{ zIndex: 5000000000 }}
+      backdropClassName="Modal-backdrop"
+      centered
+    >
+      {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>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Add enums
+Modal.ModalType = ModalType;
+Modal.ModalSize = ModalSize;
+Modal.ButtonType = ButtonType;
+Modal.Variant = Variant;
+
+export default Modal;

package/src/helpers/abbreviate.tsx

@@ -0,0 +1,23 @@
+/**
+ * Shorten text so it fits into a certain number of chars
+ * @author Gabe Abrams
+ * @param text the text to abbreviate
+ * @param maxChars the maximum number of chars to include
+ * @returns abbreviated text with length no greater than maxChars
+ *   (including ellipses if applicable)
+ */
+const abbreviate = (text: string, maxChars: number): string => {
+  // Check if already short enough
+  if (text.trim().length < maxChars) {
+    return text.trim();
+  }
+
+  // Abbreviate
+  const shortenedText = (
+    text
+      .trim()
+      .substring(0, maxChars - 3)
+      .trim()
+  );
+  return `${shortenedText}...`;
+};

package/src/helpers/avg.tsx

@@ -0,0 +1,22 @@
+import sum from './sum';
+
+/**
+ * Get the average of a set of numbers
+ * @author Gabe Abrams
+ * @param nums the numbers to average
+ * @returns average value or 0 if no numbers
+ */
+const avg = (nums: number[]) => {
+  // Handle empty array case
+  if (nums.length === 0) {
+    return 0;
+  }
+
+  // Get the total value
+  const total = sum(nums);
+
+  // Get average
+  return (total / nums.length);
+};
+
+export default avg;

package/src/helpers/ceilToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number (ceiling) to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const ceilToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.ceil(num * rounder) / rounder);
+};
+
+export default ceilToNumDecimals;

package/src/helpers/floorToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number (floor) to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const floorToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.floor(num * rounder) / rounder);
+};
+
+export default floorToNumDecimals;

package/src/helpers/forceNumIntoBounds.tsx

@@ -0,0 +1,19 @@
+/**
+ * Force a number to stay within specific bounds
+ * @author Gabe Abrams
+ * @param num the number to move into the bounds
+ * @param min the minimum number in the bound
+ * @param max the maximum number in the bound
+ * @returns bounded number
+ */
+const forceNumIntoBounds = (num: number, min: number, max: number): number => {
+  return Math.max(
+    min,
+    Math.min(
+      max,
+      num,
+    ),
+  );
+};
+
+export default forceNumIntoBounds;

package/src/helpers/padDecimalZeros.tsx

@@ -0,0 +1,32 @@
+/**
+ * Pad a number's decimal with zeros on the right
+ *   (e.g. 5.2 becomes 5.20 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits after the decimal
+ * @returns padded number
+ */
+const padDecimalZeros = (num: number, numDigits: number): string => {
+  // Skip if nothing to do
+  if (numDigits < 1) {
+    return;
+  }
+
+  // Convert to string
+  let out = String(num);
+
+  // Add a decimal point if there isn't one
+  if (!out.includes('.')) {
+    out += '.';
+  }
+
+  // Add zeros
+  while (out.split('.')[1].length < numDigits) {
+    out = `${out}0`;
+  }
+
+  // Return
+  return out;
+};
+
+export default padDecimalZeros;

package/src/helpers/padZerosLeft.tsx

@@ -0,0 +1,21 @@
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+const padZerosLeft = (num: number, numDigits: number): string => {
+  // Convert to string
+  let out = String(num);
+
+  // Add zeros
+  while (out.split('.')[0].length < numDigits) {
+    out = `0${out}`;
+  }
+
+  // Return
+  return out;
+};
+
+export default padZerosLeft;

package/src/helpers/roundToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const roundToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.round(num * rounder) / rounder);
+};
+
+export default roundToNumDecimals;

package/src/helpers/sum.tsx

@@ -0,0 +1,16 @@
+/**
+ * Sum the numbers in an array
+ * @author Gabe Abrams
+ * @param nums the numbers to sum
+ * @returns the sum of the numbers
+ */
+const sum = (nums: number[]): number => {
+  return nums.reduce(
+    (a: number, b: number) => {
+      return (a + b);
+    },
+    0,
+  );
+};
+
+export default sum;

package/src/helpers/waitMs.tsx

@@ -0,0 +1,12 @@
+/**
+ * Wait for a certain number of ms
+ * @author Gabe Abrams
+ * @param ms number of ms to wait
+ */
+const waitMs = async (ms = 0) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
+
+export default waitMs;

package/src/types/Variant.tsx

@@ -0,0 +1,16 @@
+/**
+ * Bootstrap variants
+ * @author Gabe Abrams
+ */
+enum Variant {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Success = 'success',
+  Warning = 'warning',
+  Info = 'info',
+  Danger = 'danger',
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export default Variant;

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "removeComments": false,
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "jsx": "react-jsx",
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "outDir": "./lib"
+  },
+  "include": [
+    "./src"
+  ],
+  "ts-node": {
+    "files": true
+  }
+}