@teselagen/ui 0.7.33-beta.5 → 0.7.33

package/viewColumn.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { Icon, Button, Tooltip } from "@blueprintjs/core";
+import { reduce } from "lodash-es";
+
+export const viewColumn = {
+  width: 35,
+  noEllipsis: true,
+  hideInMenu: true,
+  immovable: true,
+  type: "action",
+  render: () => {
+    return <Icon className="dt-eyeIcon" icon="eye-open" />;
+  }
+};
+
+export const openColumn = ({ onDoubleClick, history }) => ({
+  ...viewColumn,
+  render: (val, record, rowInfo) => {
+    return (
+      <Tooltip content="Open">
+        <Button
+          onClick={e => {
+            e.stopPropagation();
+            onDoubleClick &&
+              onDoubleClick(rowInfo.original, rowInfo.index, history);
+          }}
+          minimal
+          small
+          className="dt-eyeIcon"
+          icon="document-open"
+        />
+      </Tooltip>
+    );
+  }
+});
+
+export const multiViewColumn = {
+  ...viewColumn,
+  columnHeader: ({ recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }) => {
+    const allVisible = reduce(
+      recordIdToIsVisibleMap,
+      (acc, val) => acc && val,
+      true
+    );
+    return (
+      <Tooltip content={allVisible ? "Hide All" : "Show All"}>
+        <Button
+          className={`showHideAllButton-${allVisible ? "visible" : "hidden"}`}
+          minimal
+          onClick={() => {
+            setRecordIdToIsVisibleMap(
+              reduce(
+                recordIdToIsVisibleMap,
+                (acc, val, key) => {
+                  acc[key] = !allVisible;
+                  return acc;
+                },
+                {}
+              )
+            );
+          }}
+          icon={allVisible ? "eye-open" : "eye-off"}
+        />
+      </Tooltip>
+    );
+  },
+  render: (
+    val,
+    record,
+    row,
+    { recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }
+  ) => {
+    if (!recordIdToIsVisibleMap) {
+      return null;
+    }
+    const isVisible = recordIdToIsVisibleMap[record.id];
+    return (
+      <Tooltip content={isVisible ? "Hide" : "Show"}>
+        <Button
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+            setRecordIdToIsVisibleMap(
+              Object.assign({}, recordIdToIsVisibleMap, {
+                [record.id]: !isVisible
+              })
+            );
+          }}
+          minimal
+          small
+          className={`showHideButton-${isVisible ? "visible" : "hidden"}-${record.id}`}
+          icon={isVisible ? "eye-open" : "eye-off"}
+        />
+      </Tooltip>
+    );
+  }
+};

package/withField.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Field } from "redux-form";
+import { fieldRequired } from "../FormComponents/utils";
+
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField({ isRequired, ...rest }) {
+      return (
+        <Field
+          {...(isRequired && { validate: fieldRequired })}
+          {...fieldProps}
+          {...rest}
+          component={Component}
+        />
+      );
+    };
+  };
+}

package/withFields.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Fields } from "redux-form";
+//simple enhancer that wraps a component in a redux <Fields/> component
+//all options are passed as props to <Fields/>
+export default function WithFields(fieldsProps) {
+  return function AddFieldsHOC(Component) {
+    return function AddFields(props) {
+      return <Fields {...fieldsProps} {...props} component={Component} />;
+    };
+  };
+}

package/withLocalStorage.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Field } from "redux-form";
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField(props) {
+      return <Field {...fieldProps} {...props} component={Component} />;
+    };
+  };
+}

package/withSelectTableRecords.js

@@ -0,0 +1,43 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import { compose, withHandlers } from "recompose";
+import { connect } from "react-redux";
+import { change, initialize } from "redux-form";
+
+export default function (_tableFormName, propName = "selectTableRecords") {
+  return compose(
+    connect(null, {
+      changeFormValue: change,
+      initializeForm: initialize
+    }),
+    withHandlers({
+      [propName]:
+        props =>
+        (_records = []) => {
+          let tableFormName = _tableFormName;
+          if (typeof _tableFormName === "function") {
+            tableFormName = _tableFormName(props);
+          }
+          // initialize if needed so that the values will stay
+          props.initializeForm(tableFormName, {}, true, {
+            keepDirty: true,
+            updateUnregisteredFields: true,
+            keepValues: true
+          });
+          const selectedEntityIdMap = {};
+          let records = _records;
+          if (_records && !Array.isArray(_records)) records = [records];
+          records.forEach(record => {
+            selectedEntityIdMap[record.id] = {
+              entity: record,
+              time: Date.now()
+            };
+          });
+          props.changeFormValue(
+            tableFormName,
+            "reduxFormSelectedEntityIdMap",
+            selectedEntityIdMap
+          );
+        }
+    })
+  );
+}

package/withSelectedEntities.js

@@ -0,0 +1,65 @@
+import { formValueSelector } from "redux-form";
+import { reduce } from "lodash-es";
+import { connect } from "react-redux";
+/**
+ * @param {*string} formName
+ * @param {*string} formName
+ * @param {*string} formName
+ * @param {*string} ...etc
+ * adds a new prop `${formName}SelectedEntities` eg sequenceTableSelectedEntities
+ */
+export default function withSelectedEntities(...formNames) {
+  if (!formNames.length) {
+    throw new Error(
+      "You need to pass at least one arg to withSelectedEntities"
+    );
+  }
+  if (typeof formNames[0] === "string") {
+    //NEW WAY
+    return connect(state => {
+      return formNames.reduce((acc, formName) => {
+        acc[formName + "SelectedEntities"] = getRecordsFromReduxForm(
+          state,
+          formName
+        );
+        return acc;
+      }, {});
+    });
+  } else {
+    //OLD WAY:
+    const { formName, name } = formNames[0];
+    if (!formName) {
+      throw new Error(
+        "Please pass a {formName} option when using withSelectedEntities"
+      );
+    }
+    return connect(state => {
+      return {
+        [name || "selectedEntities"]: getRecordsFromReduxForm(state, formName)
+      };
+    });
+  }
+}
+
+export function getRecordsFromReduxForm(state, formName) {
+  const selector = formValueSelector(formName);
+  return getRecordsFromIdMap(selector(state, "reduxFormSelectedEntityIdMap"));
+}
+
+export function getRecordsFromIdMap(idMap = {}) {
+  return reduce(
+    idMap,
+    (acc, item) => {
+      if (item && item.entity) acc.push(item);
+      return acc;
+    },
+    []
+  )
+    .sort((a, b) => a.rowIndex - b.rowIndex)
+    .map(item => item.entity);
+}
+
+export function getSelectedEntities(storeOrState, formName) {
+  const state = storeOrState.getState ? storeOrState.getState() : storeOrState;
+  return getRecordsFromReduxForm(state, formName);
+}

package/withStore.js

@@ -0,0 +1,10 @@
+import { useStore } from "react-redux";
+import React from "react";
+
+const withStore = Component => {
+  return props => {
+    const store = useStore();
+    return <Component {...props} store={store} />;
+  };
+};
+export default withStore;

package/withTableParams.js

@@ -0,0 +1,301 @@
+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,
+    additionalOrFilter,
+    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(() => {
+    const additionalFilterToUse =
+      typeof additionalFilter === "function"
+        ? additionalFilter
+        : () => additionalFilter;
+
+    const additionalOrFilterToUse =
+      typeof additionalOrFilter === "function"
+        ? additionalOrFilter
+        : () => additionalOrFilter;
+
+    return getQueryParams({
+      doNotCoercePageSize,
+      currentParams,
+      entities, // for local table
+      urlConnected,
+      defaults: defaultsToUse,
+      schema: convertedSchema,
+      isInfinite: isInfinite || (isSimple && !withPaging),
+      isLocalCall,
+      additionalFilter: additionalFilterToUse,
+      additionalOrFilter: additionalOrFilterToUse,
+      noOrderError,
+      isCodeModel,
+      ownProps: passingProps
+    });
+  }, [
+    additionalFilter,
+    passingProps,
+    additionalOrFilter,
+    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>
+    );
+  };