dce-reactkit 3.0.41 → 3.0.44

package/src/components/CopiableBox.tsx

@@ -0,0 +1,296 @@
+/**
+ * Copiable text box
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useReducer } from 'react';
+
+// Import other reactkit functions
+import { alert, waitMs } from '..';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Unique name of the item to copy (no spaces, compatible with css classes)
+  name: string,
+  // The text to copy
+  text: string,
+  // Human-readable label of the copy field
+  label: string,
+  // FontAwesome icon to place before the label
+  labelIcon?: any,
+  // If defined, the label will have a minimum width
+  minLabelWidthRem: number,
+  // If true, the box will be a textarea to support larger, multiline text
+  multiline?: boolean,
+  // Number of lines to show in multiline view (only relevant if multiline)
+  numVisibleLines?: number,
+  // If defined, text box becomes clickable and this is the handler
+  onClick?: () => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  State                                 */
+/*------------------------------------------------------------------------*/
+
+/* -------- State Definition -------- */
+
+type State = {
+  // True if text was recently copied
+  recentlyCopied: boolean,
+};
+
+/* ------------- Actions ------------ */
+
+// Types of actions
+enum ActionType {
+  // Indicate that the text was recently copied
+  IndicateRecentlyCopied = 'indicate-recently-copied',
+  // Clear the status
+  ClearRecentlyCopiedStatus = 'clear-recently-copied-status',
+}
+
+// Action definitions
+type Action = {
+  // Action type
+  type: (
+    | ActionType.IndicateRecentlyCopied
+    | ActionType.ClearRecentlyCopiedStatus
+  ),
+};
+
+/**
+ * Reducer that executes actions
+ * @author Gabe Abrams
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.IndicateRecentlyCopied: {
+      return {
+        recentlyCopied: true,
+      };
+    }
+    case ActionType.ClearRecentlyCopiedStatus: {
+      return {
+        recentlyCopied: false,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const CopiableBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    name,
+    text,
+    label,
+    labelIcon,
+    minLabelWidthRem,
+    multiline,
+    numVisibleLines = 10,
+    onClick,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Initial state
+  const initialState: State = {
+    recentlyCopied: false,
+  };
+
+  // Initialize state
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Destructure common state
+  const {
+    recentlyCopied,
+  } = state;
+
+  /*------------------------------------------------------------------------*/
+  /*                           Component Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  // Determine the id for the copiable text field
+  const copiableFieldClassName = `CopiableBox-text-box-${name}`;
+
+  /**
+   * Perform a copy
+   * @author Gabe Abrams
+   */
+  const performCopy = async () => {
+    // Write to clipboard
+    let copyFailed = false;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      copyFailed = true;
+    }
+
+    // Try copy again if it failed
+    if (copyFailed) {
+      try {
+        const input = (
+          document.getElementsByClassName(copiableFieldClassName)[0]
+        ) as HTMLInputElement;
+        input.focus();
+        input.select();
+        document.execCommand('copy');
+        input.blur();
+      } catch (err) {
+        return alert(
+          'Unable to copy',
+          'Oops! We couldn\'t copy that to the clipboard. Please copy the text manually.',
+        );
+      }
+    }
+
+    // Show copied notice
+    dispatch({
+      type: ActionType.IndicateRecentlyCopied,
+    });
+
+    // Wait a moment
+    await waitMs(4000);
+
+    // Hide copied notice
+    dispatch({
+      type: ActionType.ClearRecentlyCopiedStatus,
+    });
+  };
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div className="input-group mb-2">
+      {/* Label */}
+      <span
+        className="input-group-text"
+        style={{
+          minWidth: (
+            minLabelWidthRem
+              ? `${minLabelWidthRem}rem`
+              : undefined
+          ),
+        }}
+      >
+        {labelIcon && (
+          <FontAwesomeIcon
+            icon={labelIcon}
+            className="me-1"
+          />
+        )}
+        {label}
+      </span>
+
+      {/* Text */}
+      {
+        multiline
+          ? (
+            <textarea
+              className={`${copiableFieldClassName} CopiableBox-text-multiline form-control bg-white text-dark`}
+              value={text}
+              aria-label={`${label} text`}
+              rows={numVisibleLines}
+              onClick={onClick}
+              style={{
+                cursor: (
+                  onClick
+                    ? 'pointer'
+                    : 'default'
+                ),
+                textDecoration: (
+                  onClick
+                    ? 'underline'
+                    : undefined
+                ),
+              }}
+              readOnly
+            />
+          )
+          : (
+            <input
+              type="text"
+              className={`${copiableFieldClassName} CopiableBox-text-single-line form-control bg-white text-dark`}
+              value={text}
+              aria-label={`${label} text`}
+              onClick={onClick}
+              style={{
+                cursor: (
+                  onClick
+                    ? 'pointer'
+                    : 'default'
+                ),
+                textDecoration: (
+                  onClick
+                    ? 'underline'
+                    : undefined
+                ),
+              }}
+              readOnly
+            />
+          )
+      }
+      
+      <button
+        className="btn btn-secondary"
+        type="button"
+        aria-label={`copy ${label} to the clipboard`}
+        disabled={recentlyCopied}
+        style={{
+          minWidth: '5.2rem',
+        }}
+        onClick={performCopy}
+      >
+        {
+          recentlyCopied
+            ? 'Copied!'
+            : (
+              <span>
+                <FontAwesomeIcon
+                  icon={faClipboard}
+                  className="me-1"
+                />
+                Copy
+              </span>
+            )
+        }
+      </button>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default CopiableBox;

package/src/components/PopFailureMark.tsx

@@ -0,0 +1,171 @@
+/**
+ * Failure x mark that pops into view
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Size of x mark in rem
+  sizeRem?: number,
+  // Bootstrap variant of circle
+  circleVariant?: string,
+  // Bootstrap variant of x mark
+  xVariant?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .PopFailureMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopFailureMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-1 {
+    position: absolute;
+    left: 25%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-1;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopFailureMark-x-stroke-1 {
+    0% {
+      transform: rotate(45deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(45deg) scaleX(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-2 {
+    position: absolute;
+    left: 75%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-2;
+    animation-duration: 0.3s;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-x-stroke-2 {
+    0% {
+      transform: rotate(135deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(135deg) scaleX(1);
+    }
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const PopFailureMark: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    sizeRem = 3,
+    circleVariant = 'danger',
+    xVariant = 'white',
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div
+      className={`PopFailureMark-outer-container bg-${circleVariant}`}
+      style={{
+        width: `${sizeRem}rem`,
+        height: `${sizeRem}rem`,
+      }}
+      aria-label="mark indicating failure"
+    >
+      {/* Style */}
+      <style>{style}</style>
+      {/* Failure mark */}
+      <div
+        className={`PopFailureMark-x-stroke-1 bg-${xVariant}`}
+        style={{
+          borderRadius: `${sizeRem / 5}rem`,
+        }}
+      />
+      <div
+        className={`PopFailureMark-x-stroke-2 bg-${xVariant}`}
+        style={{
+          borderRadius: `${sizeRem / 5}rem`,
+        }}
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default PopFailureMark;

package/src/components/PopPendingMark.tsx

@@ -0,0 +1,141 @@
+/**
+ * Failure pending that pops into view
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHourglass } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Size of pending in rem
+  sizeRem?: number,
+  // Bootstrap variant of circle
+  circleVariant?: string,
+  // Bootstrap variant of pending
+  hourglassVariant?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .PopPendingMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopPendingMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopPendingMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopPendingMark-hourglass {
+    position: absolute;
+    left: 28%;
+    top: 21%;
+
+    animation-name: PopPendingMark-pending;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopPendingMark-pending {
+    0% {
+      transform: scale(0.7) rotate(30deg);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) rotate(0);
+      opacity: 1;
+    }
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const PopPendingMark: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    sizeRem = 3,
+    circleVariant = 'warning',
+    hourglassVariant = 'white',
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div
+      className={`PopPendingMark-outer-container bg-${circleVariant}`}
+      style={{
+        width: `${sizeRem}rem`,
+        height: `${sizeRem}rem`,
+      }}
+      aria-label="mark indicating that the item is pending"
+    >
+      {/* Style */}
+      <style>{style}</style>
+      {/* Pending mark */}
+      <div>
+        <FontAwesomeIcon
+          icon={faHourglass}
+          className={`PopPendingMark-hourglass text-${hourglassVariant}`}
+          style={{
+            fontSize: `${sizeRem * 0.6}rem`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default PopPendingMark;

package/src/index.ts

@@ -10,6 +10,9 @@ import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
+import PopFailureMark from './components/PopFailureMark';
+import PopPendingMark from './components/PopPendingMark';
+import CopiableBox from './components/CopiableBox';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -63,6 +66,9 @@ export {
   SimpleDateChooser,
   Drawer,
   PopSuccessMark,
+  PopFailureMark,
+  PopPendingMark,
+  CopiableBox,
   // Global functions
   alert,
   confirm,