dce-reactkit 3.5.4 → 3.5.5

package/src/components/ToggleSwitch.tsx

@@ -0,0 +1,102 @@
+/**
+ * A toggle switch that toggles on or off
+ * @author Alessandra De Lucas
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+
+// Import shared types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // If true, the toggle switch is in the on position
+  isOn: boolean,
+  /**
+   * A handler to call when the switch is toggled
+   * @param isOn Updated value for isOn
+   */
+  onToggle: (isOn: boolean) => void,
+  // Unique ID for the toggle switch
+  id?: string,
+  // A description for what it means when the toggle switch is on
+  // E.g. "airplane mode is active"
+  // Description will be placed into a sentence with the structure:
+  // `If on, ${description}. Currently on. Click to turn off.`
+  description: string,
+  // Custom background variant for the "on" state (defaults to Variant.Info)
+  backgroundVariantWhenOn?: Variant,
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const ToggleSwitch: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    isOn,
+    onToggle,
+    id,
+    description,
+    backgroundVariantWhenOn = Variant.Info,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  const backgroundVariant = (
+    isOn
+      ? backgroundVariantWhenOn
+      : 'secondary'
+  );
+
+  return (
+    <button
+      id={id}
+      aria-label={`If on, ${description}. Currently ${isOn ? 'on' : 'off'}. Click to turn ${isOn ? 'off' : 'on'}.`}
+      className={`alert alert-${backgroundVariant} bg-${backgroundVariant} mb-0 rounded-pill d-inline-block pt-0 pb-0 px-3`}
+      onClick={() => {
+        onToggle(!isOn);
+      }}
+      type="button"
+    >
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="text-light"
+        style={{
+          transform: `translateX(${isOn ? '' : '-'}0.7rem)`,
+          transition: '0.3s transform ease-in-out',
+        }}
+      />
+    </button>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ToggleSwitch;

package/src/index.ts

@@ -1,5 +1,10 @@
 // Import components
-import AppWrapper, { alert, confirm, showFatalError } from './components/AppWrapper';
+import AppWrapper, {
+  alert,
+  confirm,
+  showFatalError,
+  addFatalErrorHandler,
+} from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
@@ -19,6 +24,7 @@ import IntelliTable from './components/IntelliTable';
 import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
 import Tooltip from './components/Tooltip';
+import ToggleSwitch from './components/ToggleSwitch';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -117,6 +123,7 @@ export {
   CSVDownloadButton,
   DBEntryManagerPanel,
   Tooltip,
+  ToggleSwitch,
   // Global functions
   alert,
   confirm,
@@ -164,6 +171,7 @@ export {
   initClient,
   visitServerEndpoint,
   logClientEvent,
+  addFatalErrorHandler,
   // Server helpers
   initServer,
   genRouteHandler,