@teselagen/ui 0.5.21 → 0.5.23-beta.1

package/src/DataTable/utils/withTableParams.js

@@ -1,12 +1,10 @@
-import React, { useContext, useEffect } from "react";
 import { change, formValueSelector } from "redux-form";
 import { connect } from "react-redux";
-import { camelCase, isFunction, set } from "lodash-es";
+import { isFunction, set } from "lodash-es";
 import { withRouter } from "react-router-dom";
 import { branch, compose } from "recompose";
 
 import pureNoFunc from "../../utils/pureNoFunc";
-import TableFormTrackerContext from "../TableFormTrackerContext";
 import convertSchema from "./convertSchema";
 import { getRecordsFromReduxForm } from "./withSelectedEntities";
 import {
@@ -14,7 +12,8 @@ import {
   getQueryParams,
   setCurrentParamsOnUrl,
   getMergedOpts,
-  getCurrentParamsFromUrl
+  getCurrentParamsFromUrl,
+  getCCDisplayName
 } from "./queryParams";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 
@@ -42,54 +41,35 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
     topLevelOptions = pTopLevelOpts;
     Component = compOrOpts;
   }
-  const { isLocalCall } = topLevelOptions;
+  const { isLocalCall = false } = topLevelOptions;
   const mapStateToProps = (state, ownProps) => {
     const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
     const {
-      history,
-      urlConnected,
-      withSelectedEntities,
-      formName,
-      formNameFromWithTPCall,
-      syncDisplayOptionsToDb,
+      additionalFilter = {},
+      additionalOrFilter = {},
+      cellRenderer,
       defaults,
-      isInfinite,
-      isSimple,
-      withPaging,
       doNotCoercePageSize,
+      formName,
+      history,
       initialValues,
-      additionalFilter = {},
-      additionalOrFilter = {},
+      isCodeModel,
+      isInfinite,
+      isSimple,
+      model,
+      noForm,
       noOrderError,
+      showEmptyColumnsByDefault,
+      syncDisplayOptionsToDb,
+      urlConnected,
       withDisplayOptions,
-      cellRenderer,
-      model,
-      isCodeModel,
-      noForm
+      withPaging,
+      withSelectedEntities
     } = mergedOpts;
 
     const schema = getSchema(mergedOpts);
     const convertedSchema = convertSchema(schema);
-    if (ownProps.isTableParamsConnected) {
-      if (
-        formName &&
-        formNameFromWithTPCall &&
-        formName !== formNameFromWithTPCall
-      ) {
-        console.error(
-          `You passed a formName prop, ${formName} to a <DataTable/> component that is already withTableParams() connected, formNameFromWithTableParamsCall: ${formNameFromWithTPCall}`
-        );
-      }
-      if (ownProps.tableParams && !ownProps.tableParams.entities) {
-        console.error(
-          `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)). formNameFromWithTableParamsCall: ${formNameFromWithTPCall}`
-        );
-      }
-      //short circuit because we've already run this logic
-      return {};
-    }
 
-    let formNameFromWithTableParamsCall;
     if (isLocalCall) {
       if (!noForm && (!formName || formName === "tgDataTable")) {
         console.error(
@@ -101,12 +81,7 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
         mergedOpts.orderByFirstColumn &&
         !mergedOpts.defaults?.order?.length
       ) {
-        const r = [
-          camelCase(
-            convertedSchema.fields[0].displayName ||
-              convertedSchema.fields[0].path
-          )
-        ];
+        const r = [getCCDisplayName(convertedSchema.fields[0])];
         set(mergedOpts, "defaults.order", r);
       }
     } else {
@@ -116,8 +91,6 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
           "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
           schema
         );
-      } else {
-        formNameFromWithTableParamsCall = formName;
       }
     }
 
@@ -184,11 +157,6 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
         isCodeModel,
         ownProps: mergedOpts
       }),
-      formNameFromWithTPCall: formNameFromWithTableParamsCall,
-      randomVarToForceLocalStorageUpdate: formSelector(
-        state,
-        "localStorageForceUpdate"
-      ),
       currentParams,
       selectedEntities,
       ...(withSelectedEntities &&
@@ -198,7 +166,8 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
       initialValues: {
         ...initialValues,
         reduxFormSearchInput: currentParams.searchTerm
-      }
+      },
+      showEmptyColumnsByDefault
     };
     return mapStateProps;
     // return { ...mergedOpts, ...mapStateProps };
@@ -213,22 +182,13 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
       mergedOpts;
 
     function updateSearch(val) {
-      setTimeout(function () {
-        dispatch(change(formName, "reduxFormSearchInput", val || ""));
-      });
+      dispatch(change(formName, "reduxFormSearchInput", val || ""));
     }
 
-    let setNewParams;
-    if (urlConnected) {
-      setNewParams = function (newParams) {
-        setCurrentParamsOnUrl(newParams, history.replace);
-        dispatch(change(formName, "reduxFormQueryParams", 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
-      };
-    } else {
-      setNewParams = function (newParams) {
-        dispatch(change(formName, "reduxFormQueryParams", newParams));
-      };
-    }
+    const setNewParams = newParams => {
+      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
+      dispatch(change(formName, "reduxFormQueryParams", 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
+    };
     return {
       bindThese: makeDataTableHandlers({
         setNewParams,
@@ -280,20 +240,6 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
     return allMergedProps;
   }
 
-  function addFormTracking(Component) {
-    return props => {
-      const formTracker = useContext(TableFormTrackerContext);
-      const { formName } = props;
-      useEffect(() => {
-        if (formTracker.isActive && !formTracker.formNames.includes(formName)) {
-          formTracker.pushFormName(formName);
-        }
-      }, [formTracker, formName]);
-
-      return <Component {...props} />;
-    };
-  }
-
   const toReturn = compose(
     connect((state, ownProps) => {
       if (ownProps.isTableParamsConnected) {
@@ -305,13 +251,10 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
           formValueSelector(formName)(state, "reduxFormQueryParams") || {} //tnr: we need this to trigger withRouter and force it to update if it is nested in a redux-connected container.. very ugly but necessary
       };
     }),
-    branch(props => {
-      //don't use withRouter if noRouter is passed!
-      return !props.noRouter;
-    }, withRouter),
+    //don't use withRouter if noRouter is passed!
+    branch(props => !props.noRouter, withRouter),
     connect(mapStateToProps, mapDispatchToProps, mergeProps),
-    pureNoFunc,
-    addFormTracking
+    pureNoFunc
   );
   if (Component) {
     return toReturn(Component);

package/src/DataTable/validateTableWideErrors.js

@@ -1,4 +1,4 @@
-import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./utils";
 import { getCellVal } from "./getCellVal";
 import { forEach, isArray } from "lodash-es";
 import { startCase } from "lodash-es";

package/src/DialogFooter/index.js

@@ -27,11 +27,11 @@ function DialogFooter({
   containerClassname,
   noCancel
 }) {
-  const r = useRef();
+  const divRef = useRef();
   return (
     <div
       style={style}
-      ref={r}
+      ref={divRef}
       className={classNames(Classes.DIALOG_FOOTER, containerClassname)}
     >
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
@@ -57,7 +57,7 @@ function DialogFooter({
               hideModal ||
               function () {
                 try {
-                  r.current
+                  divRef.current
                     .closest(".bp3-dialog")
                     .querySelector(".bp3-dialog-close-button")
                     .click();

package/src/FillWindow.js

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { createPortal } from "react";
 import { isFunction } from "lodash-es";
-import reactDom from "react-dom";
 import rerenderOnWindowResize from "./rerenderOnWindowResize";
 import "./FillWindow.css";
 
@@ -63,7 +62,7 @@ export default class FillWindow extends React.Component {
           : this.props.children}
       </div>
     );
-    if (asPortal) return reactDom.createPortal(inner, window.document.body);
+    if (asPortal) return createPortal(inner, window.document.body);
     return inner;
   }
 }