@teselagen/ui 0.6.6 → 0.7.1

package/src/enhancers/withDialog/tg_modalState.js

@@ -1,4 +1,5 @@
 import { omit } from "lodash-es";
+
 export default function tg_modalState(
   state = {},
   { type, name, uniqueName, props = {} }

package/src/index.js

@@ -18,11 +18,12 @@ export {
 } from "./DataTable/utils/withSelectedEntities";
 export {
   default as DataTable,
-  ConnectedPagingTool as PagingTool,
-  removeCleanRows
+  ConnectedPagingTool as PagingTool
 } from "./DataTable";
+export { removeCleanRows, useTableEntities } from "./DataTable/utils";
 
-export { default as getIdOrCodeOrIndex } from "./DataTable/utils/getIdOrCodeOrIndex";
+export { useDeepEqualMemo } from "./utils/hooks";
+export { getIdOrCodeOrIndex } from "./DataTable/utils";
 export { default as convertSchema } from "./DataTable/utils/convertSchema";
 export { default as Loading } from "./Loading";
 export { throwFormError } from "./throwFormError";
@@ -39,7 +40,10 @@ export { default as popoverOverflowModifiers } from "./utils/popoverOverflowModi
 export * from "./utils/tgFormValues";
 export { default as tgFormValues } from "./utils/tgFormValues";
 export { default as withStore } from "./utils/withStore";
-export { default as withTableParams } from "./DataTable/utils/withTableParams";
+export {
+  default as withTableParams,
+  useTableParams
+} from "./DataTable/utils/withTableParams";
 export { default as InfoHelper } from "./InfoHelper";
 export { default as showConfirmationDialog } from "./showConfirmationDialog";
 export { default as showAppSpinner } from "./showAppSpinner";
@@ -70,6 +74,8 @@ export * from "./utils/menuUtils";
 export * from "./utils/browserUtils";
 export * from "./utils/commandUtils";
 export * from "./utils/commandControls";
+export * from "./utils/useTraceUpdate";
+export * from "./utils/hooks/useStableReference";
 export { default as AsyncValidateFieldSpinner } from "./AsyncValidateFieldSpinner";
 export { default as showProgressToast } from "./utils/showProgressToast";
 export { default as getTextFromEl } from "./utils/getTextFromEl";

package/src/showDialogOnDocBody.js

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import React from "react";
 // import withDialog from "./enhancers/withDialog";
 import { Dialog } from "@blueprintjs/core";
@@ -19,19 +19,15 @@ export default function showDialogOnDocBody(DialogComp, options = {}) {
     DialogCompToUse = props => {
       return (
         <Dialog usePortal={false} title="pass a {title} prop" isOpen {...props}>
-          <DialogComp
-            {...props}
-            hideModal={onClose}
-            onClose={onClose}
-          ></DialogComp>
+          <DialogComp {...props} hideModal={onClose} onClose={onClose} />
         </Dialog>
       );
     };
   } else {
     DialogCompToUse = DialogComp;
   }
-  ReactDOM.render(
-    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />,
-    dialogHolder
+  const root = createRoot(dialogHolder);
+  root.render(
+    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />
   );
 }

package/src/useDialog.js

@@ -1,10 +1,9 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 
-/* 
+/*
 
   const {toggleDialog, comp} = useDialog({
     ModalComponent: SimpleInsertData,
-    validateAgainstSchema,
   });
 
   return <div>
@@ -13,30 +12,29 @@ import React, { useState } from "react";
   </div>
 
 */
-export const useDialog = ({ ModalComponent, ...rest }) => {
+export const useDialog = ({ ModalComponent }) => {
   const [isOpen, setOpen] = useState(false);
   const [additionalProps, setAdditionalProps] = useState(false);
-  const comp = (
-    <ModalComponent
-      hideModal={() => {
-        setOpen(false);
-      }}
-      hideDialog={() => {
-        setOpen(false);
-      }}
-      {...rest}
-      {...additionalProps}
-      dialogProps={{
-        isOpen,
-        ...rest?.dialogProps,
-        ...additionalProps?.dialogProps
-      }}
-    ></ModalComponent>
+  const Comp = useCallback(
+    () => (
+      <ModalComponent
+        hideModal={() => {
+          setOpen(false);
+        }}
+        hideDialog={() => {
+          setOpen(false);
+        }}
+        {...additionalProps}
+        dialogProps={{
+          isOpen,
+          ...additionalProps?.dialogProps
+        }}
+      />
+    ),
+    [ModalComponent, additionalProps, isOpen]
   );
-  const toggleDialog = () => {
-    setOpen(!isOpen);
-  };
-  async function showDialogPromise(handlerName, moreProps = {}) {
+
+  const showDialogPromise = useCallback(async (handlerName, moreProps = {}) => {
     return new Promise(resolve => {
       //return a promise that can be awaited
       setAdditionalProps({
@@ -59,6 +57,7 @@ export const useDialog = ({ ModalComponent, ...rest }) => {
       });
       setOpen(true); //open the dialog
     });
-  }
-  return { comp, showDialogPromise, toggleDialog, setAdditionalProps };
+  }, []);
+
+  return { Comp, showDialogPromise };
 };

package/src/utils/commandControls.js

@@ -11,8 +11,8 @@ export const withCommand =
         mappings[k] === "execute"
           ? event => cmd.execute({ event })
           : typeof mappings[k] === "function"
-          ? mappings[k](cmd, props)
-          : cmd[mappings[k]];
+            ? mappings[k](cmd, props)
+            : cmd[mappings[k]];
     });
 
     let out = <WrappedComponent {...mappedProps} {...props} />;

package/src/utils/handlerHelpers.js

@@ -1,30 +1,24 @@
-export function onEnterHelper(callback) {
-  return {
-    onKeyDown: function (event) {
-      if (event.key === "Enter") {
-        callback(event);
-      }
-    }
-  };
-}
-
-export function onBlurHelper(callback) {
-  return {
-    onBlur: function (event) {
+export const onEnterHelper = callback => ({
+  onKeyDown: event => {
+    if (event.key === "Enter") {
       callback(event);
     }
-  };
-}
+  }
+});
+
+export const onBlurHelper = callback => ({
+  onBlur: event => {
+    callback(event);
+  }
+});
 
-export function onEnterOrBlurHelper(callback) {
-  return {
-    onKeyDown: function (event) {
-      if (event.key === "Enter") {
-        callback(event);
-      }
-    },
-    onBlur: function (event) {
+export const onEnterOrBlurHelper = callback => ({
+  onKeyDown: function (event) {
+    if (event.key === "Enter") {
       callback(event);
     }
-  };
-}
+  },
+  onBlur: function (event) {
+    callback(event);
+  }
+});

package/src/utils/hooks/index.js

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from "./useDeepEqualMemo";

package/src/utils/hooks/useDeepEqualMemo.js

@@ -0,0 +1,10 @@
+import { isEqual } from "lodash-es";
+import { useRef } from "react";
+
+export const useDeepEqualMemo = value => {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/utils/hooks/useStableReference.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const useStableReference = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};

package/src/utils/renderOnDoc.js

@@ -1,29 +1,32 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 export function renderOnDoc(fn) {
   const elemDiv = document.createElement("div");
   elemDiv.style.cssText =
     "position:absolute;width:100%;height:100%;top:0px;opacity:0.3;z-index:0;";
   document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
   const handleClose = () => {
     setTimeout(() => {
-      ReactDOM.unmountComponentAtNode(elemDiv);
+      root.unmount(elemDiv);
       document.body.removeChild(elemDiv);
     });
   };
-  return ReactDOM.render(fn(handleClose), elemDiv);
+  root.render(fn(handleClose));
 }
+
 export function renderOnDocSimple(el) {
   const elemDiv = document.createElement("div");
   elemDiv.style.cssText =
     "position:absolute;width:100%;height:100%;top:0px;opacity:1;z-index:10000;";
   document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
+  root.render(el);
   const handleClose = () => {
     setTimeout(() => {
-      ReactDOM.unmountComponentAtNode(elemDiv);
+      root.unmount();
       document.body.removeChild(elemDiv);
     });
   };
-  ReactDOM.render(el, elemDiv);
   return handleClose;
 }

package/src/utils/tagUtils.js

@@ -37,9 +37,9 @@ export function getTagColorStyle(color) {
       }
     : {};
 }
-export function getTagProps(vals) {
+export function getTagProps({ color, label, name }) {
   return {
-    ...getTagColorStyle(vals.color),
-    children: vals.label || vals.name
+    ...getTagColorStyle(color),
+    children: label || name
   };
 }

package/src/utils/useTraceUpdate.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+// useful for debugging rerender errors
+export const useTraceUpdate = props => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+        ps[k] = [prev.current[k], v];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      // eslint-disable-next-line no-console
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+};

package/src/wrapDialog.js

@@ -1,11 +1,9 @@
 /* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-
 import React, { useMemo, useRef } from "react";
 import { Dialog, useHotkeys } from "@blueprintjs/core";
 import { noop, isFunction } from "lodash-es";
 import { ResizableDraggableDialog } from ".";
 
-// eslint-disable-next-line import/no-anonymous-default-export
 export default (topLevelDialogProps = {}) =>
   Component =>
   props => {