@teselagen/ui 0.5.23-beta.17 → 0.5.23-beta.19

package/index.es.js

@@ -47256,6 +47256,177 @@ const CellDragHandle = /* @__PURE__ */ __name(({
     }
   );
 }, "CellDragHandle");
+const RenderCell = /* @__PURE__ */ __name(({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  var _a;
+  const editingCell = useSelector(
+    (state) => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormEditingCell;
+    }
+  );
+  const initialValue = useSelector(
+    (state) => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.reduxFormInitialValue;
+    }
+  );
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text2 = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = (_a = row.original) == null ? void 0 : _a[row.column.path];
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+      return /* @__PURE__ */ React__default.createElement(
+        GenericSelectComp,
+        __spreadProps(__spreadValues({
+          rowId,
+          fullValue,
+          initialValue: text2
+        }, dataTest), {
+          finishEdit: (newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          },
+          dataTest,
+          cancelEdit: cancelCellEdit
+        })
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return /* @__PURE__ */ React__default.createElement(
+        DropdownCell,
+        {
+          isMulti: dataTest.isMulti || column.type === "dropdownMulti",
+          initialValue: dataTest.initialValue || text2,
+          options: getVals(column.values),
+          finishEdit: (newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          },
+          dataTest,
+          cancelEdit: cancelCellEdit
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React__default.createElement(
+        EditableCell,
+        {
+          dataTest,
+          cancelEdit: cancelCellEdit,
+          isNumeric: column.type === "number",
+          initialValue: initialValue || text2,
+          finishEdit: (newVal) => {
+            finishCellEdit(cellId, newVal);
+          }
+        }
+      );
+    }
+  }
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = /* @__PURE__ */ React__default.createElement(
+      Checkbox,
+      {
+        disabled: isEntityDisabled(row.original),
+        className: "tg-cell-edit-boolean-checkbox",
+        checked: oldVal === "True",
+        onChange: (e2) => {
+          const checked = e2.target.checked;
+          finishCellEdit(cellId, checked);
+        }
+      }
+    );
+    noEllipsis = true;
+  }
+  let title = text2;
+  if (getCellHoverText)
+    title = getCellHoverText(...args);
+  else if (column.getTitleAttr)
+    title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells == null ? void 0 : selectedCells[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      style: __spreadValues({}, !noEllipsis && {
+        textOverflow: "ellipsis",
+        overflow: "hidden"
+      })
+    }, dataTest), {
+      className: "tg-cell-wrapper",
+      "data-copy-text": text2,
+      "data-copy-json": JSON.stringify(
+        //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+        column.type === "genericSelect" ? {
+          __strVal: fullValue,
+          __genSelCol: column.path
+        } : { __strVal: text2 }
+      ),
+      title: title || void 0
+    }),
+    val
+  ), isCellEditable && (column.type === "dropdown" || column.type === "dropdownMulti" || column.type === "genericSelect") && /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      icon: "caret-down",
+      style: {
+        position: "absolute",
+        right: 5,
+        opacity: 0.3
+      },
+      className: "cell-edit-dropdown",
+      onClick: () => {
+        startCellEdit(cellId);
+      }
+    }
+  ), isSelectedCell && (isRect ? isBottomRightCornerOfRectangle({
+    cellId,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  }) : isSelectedCell === PRIMARY_SELECTED_VAL) && /* @__PURE__ */ React__default.createElement(
+    CellDragHandle,
+    {
+      key: cellId,
+      thisTable: tableRef.current.tableRef,
+      cellId,
+      isSelectionARectangle,
+      onDragEnd
+    }
+  ));
+}, "RenderCell");
 dayjs.extend(localizedFormat);
 const RenderColumnHeader = /* @__PURE__ */ __name(({
   addFilters,
@@ -47507,171 +47678,6 @@ const renderCheckboxHeader = /* @__PURE__ */ __name(({
     }, checkboxProps)
   ) : null;
 }, "renderCheckboxHeader");
-const RenderCell = /* @__PURE__ */ __name(({
-  oldFunc,
-  getCopyTextForCell,
-  column,
-  isCellEditable,
-  isEntityDisabled,
-  finishCellEdit,
-  formName,
-  noEllipsis,
-  cancelCellEdit,
-  getCellHoverText,
-  selectedCells,
-  isSelectionARectangle,
-  startCellEdit,
-  tableRef,
-  onDragEnd,
-  args
-}) => {
-  var _a;
-  const editingCell = useSelector(
-    (state) => {
-      var _a2, _b, _c;
-      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.editingCell;
-    }
-  );
-  const [row] = args;
-  const rowId = getIdOrCodeOrIndex(row.original, row.index);
-  const cellId = `${rowId}:${row.column.path}`;
-  const isEditingCell = editingCell === cellId;
-  let val = oldFunc(...args);
-  const oldVal = val;
-  const text2 = getCopyTextForCell(val, row, column);
-  const dataTest = {
-    "data-test": "tgCell_" + column.path
-  };
-  const fullValue = (_a = row.original) == null ? void 0 : _a[row.column.path];
-  if (isEditingCell) {
-    if (column.type === "genericSelect") {
-      const GenericSelectComp = column.GenericSelectComp;
-      return /* @__PURE__ */ React__default.createElement(
-        GenericSelectComp,
-        __spreadProps(__spreadValues({
-          rowId,
-          fullValue,
-          initialValue: text2
-        }, dataTest), {
-          finishEdit: (newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          },
-          dataTest,
-          cancelEdit: cancelCellEdit
-        })
-      );
-    }
-    if (column.type === "dropdown" || column.type === "dropdownMulti") {
-      return /* @__PURE__ */ React__default.createElement(
-        DropdownCell,
-        {
-          isMulti: dataTest.isMulti || column.type === "dropdownMulti",
-          initialValue: dataTest.initialValue || text2,
-          options: getVals(column.values),
-          finishEdit: (newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          },
-          dataTest,
-          cancelEdit: cancelCellEdit
-        }
-      );
-    } else {
-      return /* @__PURE__ */ React__default.createElement(
-        EditableCell,
-        {
-          dataTest,
-          cancelEdit: cancelCellEdit,
-          isNumeric: column.type === "number",
-          initialValue: text2,
-          finishEdit: (newVal) => {
-            finishCellEdit(cellId, newVal);
-          }
-        }
-      );
-    }
-  }
-  const isBool = column.type === "boolean";
-  if (isCellEditable && isBool) {
-    val = /* @__PURE__ */ React__default.createElement(
-      Checkbox,
-      {
-        disabled: isEntityDisabled(row.original),
-        className: "tg-cell-edit-boolean-checkbox",
-        checked: oldVal === "True",
-        onChange: (e2) => {
-          const checked = e2.target.checked;
-          finishCellEdit(cellId, checked);
-        }
-      }
-    );
-    noEllipsis = true;
-  }
-  let title = text2;
-  if (getCellHoverText)
-    title = getCellHoverText(...args);
-  else if (column.getTitleAttr)
-    title = column.getTitleAttr(...args);
-  const isSelectedCell = selectedCells == null ? void 0 : selectedCells[cellId];
-  const {
-    isRect,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  } = isSelectionARectangle();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      style: __spreadValues({}, !noEllipsis && {
-        textOverflow: "ellipsis",
-        overflow: "hidden"
-      })
-    }, dataTest), {
-      className: "tg-cell-wrapper",
-      "data-copy-text": text2,
-      "data-copy-json": JSON.stringify(
-        //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
-        column.type === "genericSelect" ? {
-          __strVal: fullValue,
-          __genSelCol: column.path
-        } : { __strVal: text2 }
-      ),
-      title: title || void 0
-    }),
-    val
-  ), isCellEditable && (column.type === "dropdown" || column.type === "dropdownMulti" || column.type === "genericSelect") && /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      icon: "caret-down",
-      style: {
-        position: "absolute",
-        right: 5,
-        opacity: 0.3
-      },
-      className: "cell-edit-dropdown",
-      onClick: () => {
-        startCellEdit(cellId);
-      }
-    }
-  ), isSelectedCell && (isRect ? isBottomRightCornerOfRectangle({
-    cellId,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  }) : isSelectedCell === PRIMARY_SELECTED_VAL) && /* @__PURE__ */ React__default.createElement(
-    CellDragHandle,
-    {
-      key: cellId,
-      thisTable: tableRef.current.tableRef,
-      cellId,
-      isSelectionARectangle,
-      onDragEnd
-    }
-  ));
-}, "RenderCell");
 const useColumns = /* @__PURE__ */ __name(({
   addFilters,
   cellRenderer,
@@ -47708,7 +47714,6 @@ const useColumns = /* @__PURE__ */ __name(({
   removeSingleFilter = noop$3,
   schema,
   selectedCells,
-  setEditingCell,
   setExpandedEntityIdMap,
   setNewParams,
   setOrder = noop$3,
@@ -48018,7 +48023,7 @@ const useColumns = /* @__PURE__ */ __name(({
   const finishCellEdit = useCallback(
     (cellId, newVal, doNotStopEditing) => {
       const [rowId, path2] = cellId.split(":");
-      !doNotStopEditing && setEditingCell(null);
+      !doNotStopEditing && change$1("reduxFormEditingCell", null);
       updateEntitiesHelper(entities, (entities2) => {
         const entity = entities2.find((e2, i) => {
           return getIdOrCodeOrIndex(e2, i) === rowId;
@@ -48037,19 +48042,19 @@ const useColumns = /* @__PURE__ */ __name(({
       !doNotStopEditing && refocusTable();
     },
     [
+      change$1,
       entities,
       reduxFormCellValidation,
       refocusTable,
       schema,
-      setEditingCell,
       updateEntitiesHelper,
       updateValidation
     ]
   );
   const cancelCellEdit = useCallback(() => {
-    setEditingCell(null);
+    change$1("reduxFormEditingCell", null);
     refocusTable();
-  }, [refocusTable, setEditingCell]);
+  }, [change$1, refocusTable]);
   if (!columns.length) {
     return columns;
   }
@@ -48232,6 +48237,7 @@ const useColumns = /* @__PURE__ */ __name(({
       RenderCell,
       {
         oldFunc,
+        formName,
         getCopyTextForCell,
         column,
         isCellEditable,
@@ -48264,21 +48270,6 @@ const throwFormError = /* @__PURE__ */ __name((error) => {
   }
   throw new SubmissionError(errorToUse);
 }, "throwFormError");
-const useTraceUpdate = /* @__PURE__ */ __name((props) => {
-  const prev = useRef(props);
-  useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
-      if (prev.current[k2] !== v2) {
-        ps[k2] = [prev.current[k2], v2];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-}, "useTraceUpdate");
 T();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
 const itemSizeEstimators = {
@@ -48351,7 +48342,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   const {
     reduxFormCellValidation: _reduxFormCellValidation,
     reduxFormEditingCell,
-    reduxFormEntities: _reduxFormEntities,
+    reduxFormEntities,
     reduxFormQueryParams: _reduxFormQueryParams = {},
     reduxFormSearchInput: _reduxFormSearchInput = "",
     reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
@@ -48366,7 +48357,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     )
   );
   const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
-  const reduxFormEntities = useDeepEqualMemo(_reduxFormEntities);
   const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
   const reduxFormSearchInput = useDeepEqualMemo(_reduxFormSearchInput);
   const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
@@ -48439,7 +48429,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
   const currentParams = useDeepEqualMemo(_currentParams);
-  useTraceUpdate({ currentParams });
   const tableParams = useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = /* @__PURE__ */ __name((val) => {
@@ -48645,20 +48634,28 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap, change$1]);
   const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
   useEffect(() => {
-    let newTableConfig = {};
     if (withDisplayOptions) {
+      let newTableConfig = {};
       if (syncDisplayOptionsToDb) {
         newTableConfig = tableConfigurations && tableConfigurations[0];
       } else {
         newTableConfig = getTableConfigFromStorage(formName);
       }
-      if (!newTableConfig) {
-        newTableConfig = {
-          fieldOptions: []
-        };
-      }
+      setTableConfig((prev) => {
+        if (!newTableConfig) {
+          newTableConfig = {
+            fieldOptions: []
+          };
+          if (isEqual(prev, newTableConfig)) {
+            return prev;
+          } else {
+            return newTableConfig;
+          }
+        } else {
+          return newTableConfig;
+        }
+      });
     }
-    setTableConfig(newTableConfig);
   }, [
     formName,
     syncDisplayOptionsToDb,
@@ -48906,8 +48903,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         }
       }));
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [change$1]
   );
   const formatAndValidateEntities = useCallback(
     (entities2, { useDefaultValues, indexToStartAt } = {}) => {
@@ -49107,7 +49103,8 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
   }, [selectedCells]);
   const startCellEdit = useCallback(
-    (cellId) => {
+    (cellId, initialValue) => {
+      change$1("reduxFormInitialValue", initialValue);
       change$1("reduxFormEditingCell", (prev) => {
         if (prev === cellId)
           return cellId;
@@ -49469,22 +49466,27 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   const [selectingAll, setSelectingAll] = useState(false);
   useEffect(() => {
     const formatAndValidateTableInitial = /* @__PURE__ */ __name(() => {
-      const { newEnts, validationErrors } = formatAndValidateEntities(_origEntities);
+      const { newEnts, validationErrors } = formatAndValidateEntities(entities);
       const toKeep = {};
       forEach(reduxFormCellValidation, (v2, k2) => {
         if (v2 && v2._isTableAsyncWideError) {
           toKeep[k2] = v2;
         }
       });
-      change$1("reduxFormEntities", newEnts);
+      change$1("reduxFormEntities", (prev) => {
+        if (!isEqual(prev, newEnts)) {
+          return newEnts;
+        }
+        return prev;
+      });
       updateValidation(newEnts, __spreadValues(__spreadValues({}, toKeep), validationErrors));
     }, "formatAndValidateTableInitial");
     isCellEditable && formatAndValidateTableInitial();
   }, [
-    _origEntities,
-    isCellEditable,
     change$1,
+    entities,
     formatAndValidateEntities,
+    isCellEditable,
     reduxFormCellValidation,
     updateValidation
   ]);
@@ -50813,7 +50815,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
           if (rowDisabled)
             return;
           e2.stopPropagation();
-          startCellEdit(primarySelectedCellId);
+          startCellEdit(primarySelectedCellId, e2.key);
         }
       }),
       isCellEditable && entities.length > 50 && // test for this!!
@@ -64407,6 +64409,7 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     syncDisplayOptionsToDb,
     tableParams: _tableParams,
     urlConnected,
+    withDisplayOptions,
     withPaging,
     withSelectedEntities: withSelectedEntities2
   } = props;
@@ -64567,7 +64570,8 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
       formName,
       isLocalCall,
       schema,
-      currentParams
+      currentParams,
+      withDisplayOptions
     }), queryParams), boundDispatchProps), {
       form: formName,
       //this will override the default redux form name
@@ -64586,7 +64590,8 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     queryParams,
     schema,
     selectedEntities,
-    urlConnected
+    urlConnected,
+    withDisplayOptions
   ]);
   return __spreadProps(__spreadValues(__spreadValues({
     isLocalCall,
@@ -69557,6 +69562,21 @@ const CmdButton = withCommand({
   icon: "icon",
   disabled: "isDisabled"
 })(Button);
+const useTraceUpdate = /* @__PURE__ */ __name((props) => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k2, v2]) => {
+      if (prev.current[k2] !== v2) {
+        ps[k2] = [prev.current[k2], v2];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}, "useTraceUpdate");
 const showProgressToast = /* @__PURE__ */ __name((message, value, key, opts) => {
   return window.toastr.default(
     /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { marginBottom: 10 } }, message), /* @__PURE__ */ React__default.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.17",
+  "version": "0.5.23-beta.19",
   "main": "./src/index.js",
   "exports": {
     ".": {