@teselagen/ui 0.0.11 → 0.0.13

package/src/wrapDialog.js

@@ -0,0 +1,112 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React, { useMemo, useRef } from "react";
+import { Dialog, useHotkeys } from "@blueprintjs/core";
+import { noop, isFunction } from "lodash";
+import { ResizableDraggableDialog } from ".";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (topLevelDialogProps = {}) => Component => props => {
+  const r = useRef();
+  const memoedHotkeys = useMemo(
+    () => [
+      {
+        combo: topLevelDialogProps.useCmdEnter ? "cmd+enter" : "enter",
+        global: true,
+        allowInInput: true,
+        onKeyDown: () => {
+          function doNotTriggerClick() {
+            //leave this here for debugging purposes
+            // console.log(`Not triggering dialog submit`);
+          }
+
+          try {
+            if (!document.activeElement) return doNotTriggerClick();
+            if (
+              !document.activeElement.closest(".tg-allow-dialog-form-enter")
+            ) {
+              //don't do this if you're in any type of bp multi select by default
+              if (document.activeElement.closest(".bp3-multi-select"))
+                return doNotTriggerClick();
+              //don't do this if there is an explicit class saying not to
+              if (document.activeElement.closest(".tg-stop-dialog-form-enter"))
+                return doNotTriggerClick();
+              //don't do this in text areas
+              if (document.activeElement.type === "textarea")
+                return doNotTriggerClick();
+            }
+            const parentEl = r.current?.closest(".bp3-dialog-container");
+            // eslint-disable-next-line no-inner-declarations
+            function triggerClick() {
+              parentEl?.querySelector(`button[type='submit']`).click();
+            }
+
+            const dialogs = document.querySelectorAll(".bp3-dialog-container");
+            const numDialogs = dialogs?.length;
+
+            if (numDialogs > 1) {
+              const topMostDialog = dialogs[numDialogs - 1];
+              if (topMostDialog === parentEl) {
+                triggerClick();
+              }
+            } else {
+              //just 1 dialog
+              triggerClick();
+            }
+          } catch (error) {
+            console.error(`error:`, error);
+          }
+        }
+      }
+    ],
+    []
+  );
+
+  useHotkeys(memoedHotkeys);
+
+  let otherTopLevelProps,
+    getDialogProps = noop;
+  if (isFunction(topLevelDialogProps)) {
+    getDialogProps = topLevelDialogProps;
+  } else {
+    const {
+      footerProps,
+      getDialogProps: _pullOff,
+      ...additionalProps
+    } = topLevelDialogProps;
+    otherTopLevelProps = additionalProps;
+    getDialogProps = topLevelDialogProps.getDialogProps || noop;
+  }
+  const { dialogProps, hideModal, ...otherProps } = props;
+
+  const extraDialogProps = {
+    ...otherTopLevelProps,
+    ...dialogProps,
+    ...getDialogProps(props)
+  };
+  const DialogToUse = extraDialogProps.isDraggable
+    ? ResizableDraggableDialog
+    : Dialog;
+  return (
+    <DialogToUse
+      canOutsideClickClose={false}
+      isOpen
+      onClose={e => {
+        e.stopPropagation();
+        if (
+          e.key === "Escape" &&
+          extraDialogProps.canEscapeKeyClose === false
+        ) {
+          return;
+        }
+        hideModal(e);
+      }}
+      {...extraDialogProps}
+      canEscapeKeyClose={true}
+      style={{ ...extraDialogProps.style }}
+    >
+      <div ref={r}></div>
+      <Component hideModal={hideModal} {...otherProps} />
+    </DialogToUse>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import viteReactConfig from '../../vite.react.config'
+
+export default viteReactConfig({
+  name: 'ui',
+  dir: __dirname,
+})
+