@teselagen/ui 0.7.35 → 0.8.1

package/withTableParams.js

@@ -1,301 +0,0 @@
-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

@@ -1,116 +0,0 @@
-/* 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>
-    );
-  };