@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/withTableParams.js

@@ -0,0 +1,288 @@
+import React, { useCallback, useMemo } from "react";
+import { change as _change, formValueSelector } from "redux-form";
+import { useDispatch, useSelector } from "react-redux";
+import convertSchema from "./convertSchema";
+import {
+  makeDataTableHandlers,
+  getQueryParams,
+  setCurrentParamsOnUrl,
+  getCurrentParamsFromUrl,
+  getCCDisplayName
+} from "./queryParams";
+import { withRouter } from "react-router-dom";
+import getTableConfigFromStorage from "./getTableConfigFromStorage";
+import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
+import { branch, compose } from "recompose";
+
+/**
+ *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
+ *
+ * @export
+ *
+ * @param {compOrOpts} compOrOpts
+ * @typedef {object} compOrOpts
+ * @property {*string} formName - required unique identifier for the table
+ * @property {Object | Function} schema - The data table schema or a function returning it. The function wll be called with props as the argument.
+ * @property {boolean} urlConnected - whether the table should connect to/update the URL
+ * @property {boolean} withSelectedEntities - whether or not to pass the selected entities
+ * @property {boolean} isCodeModel - whether the model is keyed by code instead of id in the db
+ * @property {object} defaults - tableParam defaults such as pageSize, filter, etc
+ * @property {boolean} noOrderError - won't console an error if an order is not found on schema
+ */
+export const useTableParams = props => {
+  const {
+    additionalFilter,
+    controlled_pageSize,
+    defaults: _defaults,
+    doNotCoercePageSize,
+    entities,
+    formName = "tgDataTable",
+    history,
+    initialValues,
+    isCodeModel,
+    isInfinite,
+    isLocalCall = false,
+    isSimple,
+    noForm,
+    noOrderError,
+    onlyOneFilter,
+    orderByFirstColumn,
+    pageSize,
+    schema,
+    syncDisplayOptionsToDb,
+    tableParams: _tableParams,
+    urlConnected,
+    withDisplayOptions,
+    withPaging,
+    withSelectedEntities
+  } = props;
+
+  const defaults = useMemo(
+    () => ({
+      pageSize: controlled_pageSize || 25,
+      order: [], //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
+      searchTerm: "",
+      page: 1,
+      filters: [
+        //filters look like this:
+        // {
+        //   selectedFilter: 'textContains', //camel case
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
+        //   filterValue: 'thomas',
+        // }
+      ],
+      ..._defaults
+    }),
+    [_defaults, controlled_pageSize]
+  );
+
+  const convertedSchema = useMemo(() => convertSchema(schema), [schema]);
+
+  if (isLocalCall) {
+    if (!noForm && (!formName || formName === "tgDataTable")) {
+      console.error(
+        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
+        schema
+      );
+    }
+    if (orderByFirstColumn && !defaults?.order?.length) {
+      defaults.order = [getCCDisplayName(convertedSchema.fields[0])];
+    }
+  } else {
+    //in user instantiated withTableParams() call
+    if (!formName || formName === "tgDataTable") {
+      console.error(
+        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
+        schema
+      );
+    }
+  }
+
+  const {
+    reduxFormQueryParams: _reduxFormQueryParams = {},
+    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
+  } = useSelector(state =>
+    formValueSelector(formName)(
+      state,
+      "reduxFormQueryParams",
+      "reduxFormSelectedEntityIdMap"
+    )
+  );
+
+  // We want to make sure we don't rerender everything unnecessary
+  // with redux-forms we tend to do unnecessary renders
+  const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
+  const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
+    _reduxFormSelectedEntityIdMap
+  );
+
+  const _currentParams = useMemo(() => {
+    const tmp =
+      (urlConnected
+        ? getCurrentParamsFromUrl(history?.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
+        : reduxFormQueryParams) || {};
+
+    return tmp;
+  }, [history?.location, reduxFormQueryParams, urlConnected]);
+
+  const selectedEntities = useMemo(
+    () =>
+      withSelectedEntities
+        ? Object.values(reduxFormSelectedEntityIdMap)
+            .sort((a, b) => a.rowIndex - b.rowIndex)
+            .map(item => item.entity)
+        : undefined,
+    [reduxFormSelectedEntityIdMap, withSelectedEntities]
+  );
+
+  const currentParams = useDeepEqualMemo(_currentParams);
+
+  const defaultsToUse = useMemo(() => {
+    const _tableConfig = getTableConfigFromStorage(formName);
+    const userSetPageSize =
+      _tableConfig?.userSetPageSize &&
+      parseInt(_tableConfig.userSetPageSize, 10);
+    let _defaultsToUse = defaults;
+    if (!syncDisplayOptionsToDb && userSetPageSize) {
+      _defaultsToUse = _defaultsToUse || {};
+      _defaultsToUse.pageSize = userSetPageSize;
+    }
+
+    return _defaultsToUse;
+  }, [defaults, formName, syncDisplayOptionsToDb]);
+
+  const passingProps = useMemo(
+    () => ({
+      formName: "tgDataTable",
+      ...props,
+      pageSize: controlled_pageSize || pageSize,
+      defaults: defaultsToUse,
+      location: history?.location
+    }),
+    // We don't want to rerender this every time a prop changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlled_pageSize, defaultsToUse, pageSize, history?.location]
+  );
+
+  const queryParams = useMemo(() => {
+    return getQueryParams({
+      doNotCoercePageSize,
+      currentParams,
+      entities, // for local table
+      urlConnected,
+      defaults: defaultsToUse,
+      schema: convertedSchema,
+      isInfinite: isInfinite || (isSimple && !withPaging),
+      isLocalCall,
+      additionalFilter,
+      noOrderError,
+      isCodeModel,
+      ownProps: passingProps
+    });
+  }, [
+    additionalFilter,
+    passingProps,
+    doNotCoercePageSize,
+    currentParams,
+    entities,
+    urlConnected,
+    defaultsToUse,
+    convertedSchema,
+    isInfinite,
+    isSimple,
+    withPaging,
+    isLocalCall,
+    noOrderError,
+    isCodeModel
+  ]);
+
+  const dispatch = useDispatch();
+  const change = useCallback(
+    (...args) => dispatch(_change(formName, ...args)),
+    [dispatch, formName]
+  );
+
+  const setNewParams = useCallback(
+    newParams => {
+      // we always will update the redux params as a workaround for withRouter not always working
+      // if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+      change("reduxFormQueryParams", prev => {
+        let tmp = newParams;
+        if (typeof tmp === "function") tmp = newParams(prev);
+        urlConnected && setCurrentParamsOnUrl(tmp, history?.replace);
+        return tmp;
+      });
+    },
+    [change, history?.replace, urlConnected]
+  );
+
+  const dispatchProps = useMemo(
+    () =>
+      makeDataTableHandlers({
+        setNewParams,
+        defaults,
+        onlyOneFilter
+      }),
+    [defaults, onlyOneFilter, setNewParams]
+  );
+
+  const tableParams = useMemo(
+    () => ({
+      changeFormValue: (...args) => change(...args),
+      selectedEntities,
+      ..._tableParams,
+      formName,
+      initialValues,
+      isLocalCall,
+      schema,
+      currentParams,
+      withDisplayOptions,
+      ...queryParams,
+      ...dispatchProps,
+      form: formName, //this will override the default redux form name
+      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
+    }),
+    [
+      _tableParams,
+      change,
+      currentParams,
+      dispatchProps,
+      formName,
+      initialValues,
+      isLocalCall,
+      queryParams,
+      schema,
+      selectedEntities,
+      withDisplayOptions
+    ]
+  );
+
+  return {
+    isLocalCall,
+    schema,
+    ...queryParams,
+    ...(withSelectedEntities &&
+      typeof withSelectedEntities === "string" && {
+        [withSelectedEntities]: selectedEntities
+      }),
+    currentParams,
+    selectedEntities,
+    tableParams,
+    urlConnected
+  };
+};
+
+const withTableParams = topLevelOptions =>
+  compose(
+    //don't use withRouter if noRouter is passed!
+    branch(({ noRouter }) => !noRouter, withRouter),
+    Comp => props => {
+      const tableParams = useTableParams({
+        ...topLevelOptions,
+        ...props
+      });
+      return <Comp {...props} {...tableParams} />;
+    }
+  );
+
+export default withTableParams;

package/wrapDialog.js

@@ -0,0 +1,116 @@
+/* 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 ".";
+
+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/src/AdvancedOptions.spec.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import AdvancedOptions from "./AdvancedOptions";
-
-describe("AdvancedOptions", () => {
-  test("renders correctly with given props and default state", () => {
-    const { queryByText, container } = render(
-      <AdvancedOptions label="Test Label" content="Test Content" />
-    );
-    expect(queryByText("Test Label")).toBeInTheDocument();
-    expect(queryByText("Test Content")).not.toBeInTheDocument();
-
-    expect(
-      container.querySelector(".bp3-icon-caret-right")
-    ).toBeInTheDocument();
-  });
-
-  test("toggles content when clicked", () => {
-    const { getByText, queryByText, container } = render(
-      <AdvancedOptions label="Test Label" content="Test Content" />
-    );
-    fireEvent.click(getByText("Test Label"));
-    expect(queryByText("Test Content")).toBeInTheDocument();
-    expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
-  });
-});

package/src/AsyncValidateFieldSpinner/index.js

@@ -1,12 +0,0 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-
-import React from "react";
-import { Spinner } from "@blueprintjs/core";
-
-export default function AsyncValidateFieldSpinner({ validating }) {
-  if (validating) {
-    return <Spinner size="18" />;
-  } else {
-    return null;
-  }
-}

package/src/BlueprintError/index.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { Classes } from "@blueprintjs/core";
-import classNames from "classnames";
-
-export default function BlueprintError({ error }) {
-  if (!error) return null;
-  return (
-    <div className={classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER)}>
-      <div className={classNames(Classes.FORM_HELPER_TEXT, "preserve-newline")}>
-        {error}
-      </div>
-    </div>
-  );
-}

package/src/BounceLoader/index.js

@@ -1,16 +0,0 @@
-/* taken from http://tobiasahlin.com/spinkit/ */
-import React from "react";
-import classNames from "classnames";
-import "./style.css";
-
-export function BounceLoader({ style, className }) {
-  return (
-    <div className={classNames("tg-bounce-loader", className)} style={style}>
-      <div className="rect1" />
-      <div className="rect2" />
-      <div className="rect3" />
-      <div className="rect4" />
-      <div className="rect5" />
-    </div>
-  );
-}

package/src/BounceLoader/style.css

@@ -1,45 +0,0 @@
-.tg-bounce-loader {
-  width: 50px;
-  height: 40px;
-  text-align: center;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-}
-
-.tg-bounce-loader > div {
-  background-color: #006cab;
-  height: 100%;
-  max-height: 30px;
-  width: 6px;
-  display: inline-block;
-  margin-right: 3px;
-  animation: sk-stretchdelay 1.2s infinite ease-in-out;
-}
-
-.tg-bounce-loader .rect2 {
-  animation-delay: -1.1s;
-}
-
-.tg-bounce-loader .rect3 {
-  animation-delay: -1s;
-}
-
-.tg-bounce-loader .rect4 {
-  animation-delay: -0.9s;
-}
-
-.tg-bounce-loader .rect5 {
-  animation-delay: -0.8s;
-}
-
-@keyframes sk-stretchdelay {
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}

package/src/CollapsibleCard/index.js

@@ -1,68 +0,0 @@
-import React, { useState } from "react";
-import { Button, Classes, Icon } from "@blueprintjs/core";
-import classNames from "classnames";
-import "./style.css";
-
-export default function CollapsibleCard({
-  title,
-  icon,
-  openTitleElements,
-  noCard = false,
-  className,
-  style,
-  children,
-  initialClosed = false,
-  toggle,
-  isOpen
-}) {
-  let [open, setOpen] = useState(!initialClosed);
-  if (isOpen !== undefined) open = isOpen;
-
-  const toggleCardInfo = () => {
-    if (toggle) toggle();
-    else {
-      setOpen(!open);
-    }
-  };
-
-  return (
-    <div
-      className={classNames({ "tg-card": !noCard, open }, className)}
-      style={{
-        paddingTop: 10,
-        paddingBottom: 10,
-        paddingLeft: 15,
-        paddingRight: 15,
-        ...style
-      }}
-    >
-      <div className="tg-card-header" style={{ marginBottom: 8 }}>
-        <div className="tg-card-header-title">
-          {icon && <Icon icon={icon} />}
-          <h6
-            style={{
-              marginBottom: 0,
-              marginRight: 10,
-              marginLeft: 10
-            }}
-          >
-            {title}
-          </h6>
-          <div>{open && openTitleElements}</div>
-        </div>
-        <div>
-          <Button
-            icon={open ? "minimize" : "maximize"}
-            className={classNames(
-              Classes.MINIMAL,
-              "info-btn",
-              "tg-collapse-toggle"
-            )}
-            onClick={toggleCardInfo}
-          />
-        </div>
-      </div>
-      {open && children}
-    </div>
-  );
-}

package/src/CollapsibleCard/style.css

@@ -1,23 +0,0 @@
-/* Use in the place of .bp3-card */
-.tg-card {
-  padding: 20px;
-  margin-bottom: 20px;
-  border-radius: 5px;
-  background: white;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.18);
-}
-
-.tg-card-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.tg-card-header-title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}

package/src/DNALoader/index.js

@@ -1,20 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import "./style.css";
-
-export default function DNALoader({ style, className }) {
-  return (
-    <div className={classNames("dna-loader", className)} style={style}>
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-      <div className="nucleobase" />
-    </div>
-  );
-}