@linzjs/step-ag-grid 2.4.2 → 2.4.4

package/dist/index.js

@@ -1868,7 +1868,10 @@ var GridContext = react.createContext({
             console.error("no context provider for modifyUpdating");
             return [2 /*return*/, false];
         });
-    }); }
+    }); },
+    redrawRows: function () {
+        console.error("no context provider for redrawRows");
+    }
 });
 
 /**
@@ -2122,6 +2125,11 @@ var GridContextProvider = function (props) {
             }
         });
     }); };
+    var redrawRows = function (rowNodes) {
+        gridApiOp(function (gridApi) {
+            gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
+        });
+    };
     return (jsxRuntime.jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2139,7 +2147,8 @@ var GridContextProvider = function (props) {
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
-            updatingCells: updatingCells
+            updatingCells: updatingCells,
+            redrawRows: redrawRows
         } }, { children: props.children })));
 };
 
@@ -2188,6 +2197,7 @@ function clsx () {
  */
 var usePostSortRowsHook = function (_a) {
     var setStaleGrid = _a.setStaleGrid;
+    var redrawRows = react.useContext(GridContext).redrawRows;
     // On first run we need to init the first backed up sort order
     var initialised = react.useRef(false);
     // Used to detect sort order has changed since last run
@@ -2203,14 +2213,20 @@ var usePostSortRowsHook = function (_a) {
     var previousQuickFilter = react.useRef("");
     return react.useCallback(function (_a) {
         var api = _a.api, columnApi = _a.columnApi, nodes = _a.nodes;
+        // Grid is destroyed
+        if (!api || !columnApi)
+            return;
         var previousRowSortIndex = previousRowSortIndexRef.current;
+        var hashNode = function (node) {
+            return node ? JSON.stringify(node.data) : "";
+        };
         var copyCurrentSortSettings = function () {
             return columnApi.getColumnState().map(function (row) { return ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }); });
         };
         var backupSortOrder = function () {
             for (var x in previousRowSortIndex)
                 delete previousRowSortIndex[x];
-            nodes.forEach(function (row, index) { return (previousRowSortIndex[row.data.id] = index); });
+            nodes.forEach(function (node, index) { return (previousRowSortIndex["".concat(node.data.id)] = { index: index, hash: hashNode(node) }); });
         };
         // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
         var isFirstSortColumn = function (row) { var _a; return row.sort && [0, null].includes((_a = row.sortIndex) !== null && _a !== void 0 ? _a : null); };
@@ -2218,19 +2234,11 @@ var usePostSortRowsHook = function (_a) {
             return col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
         };
         var restorePreviousSortColumnState = function () { return columnApi.applyColumnState({ state: previousColSort.current }); };
-        var hasNewRows = function () { return nodes.some(function (row) { return previousRowSortIndex[row.data.id] == null; }); };
-        var sortIsStale = function () {
-            // If there are new rows we want to them to be at the bottom of the grid, so we treat it as sort not stale
-            if (hasNewRows())
-                return false;
-            // Otherwise check if the stored sort index matches the new sort index
-            return nodes.some(function (node, index) { return previousRowSortIndex[node.data.id] != index; });
-        };
         var sortNodesByPreviousSort = function () {
-            return nodes.sort(function (a, b) {
-                var _a, _b;
-                return ((_a = previousRowSortIndex[a.data.id]) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER) -
-                    ((_b = previousRowSortIndex[b.data.id]) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER);
+            nodes.sort(function (a, b) {
+                var _a, _b, _c, _d;
+                return ((_b = (_a = previousRowSortIndex["".concat(a.data.id)]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER) -
+                    ((_d = (_c = previousRowSortIndex["".concat(b.data.id)]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : Number.MAX_SAFE_INTEGER);
             });
         };
         // On first load copy the current sort
@@ -2245,6 +2253,9 @@ var usePostSortRowsHook = function (_a) {
             previousQuickFilter.current = quickFilter;
             sortOrderChanged = true;
         }
+        if (lodashEs.isEmpty(previousRowSortIndex)) {
+            backupSortOrder();
+        }
         if (sortOrderChanged) {
             var thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
             var previousFirstCol = previousColSort.current.find(isFirstSortColumn);
@@ -2275,22 +2286,72 @@ var usePostSortRowsHook = function (_a) {
             }
         }
         else {
-            if (sortIsStale()) {
+            var firstChangedNodeIndex = -1;
+            var lastNewNode = undefined;
+            var changedRowCount = 0;
+            var newRowCount = 0;
+            var index = 0;
+            for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+                var node = nodes_1[_i];
+                var psr = previousRowSortIndex["".concat(node.data.id)];
+                if (psr) {
+                    if (psr.hash != hashNode(node)) {
+                        if (firstChangedNodeIndex === -1)
+                            firstChangedNodeIndex = index;
+                        changedRowCount++;
+                    }
+                }
+                else {
+                    lastNewNode = node;
+                    newRowCount++;
+                }
+                index++;
+            }
+            var wasStale = false;
+            if (changedRowCount === 0 && newRowCount === 1) {
+                // insert new row at end
+                var newIndex = index - 1;
+                previousRowSortIndex["".concat(lastNewNode === null || lastNewNode === void 0 ? void 0 : lastNewNode.data.id)] = { index: newIndex, hash: hashNode(lastNewNode) };
+                wasStale = true;
+            }
+            else if (changedRowCount === 2 && newRowCount === 0) {
+                // This must be a swap rows
+                backupSortOrder();
+                wasStale = false;
+            }
+            else if (changedRowCount > 1 && newRowCount === 1) {
+                // This must be a insert so, insert new row near the row that changed
+                previousRowSortIndex["".concat(lastNewNode === null || lastNewNode === void 0 ? void 0 : lastNewNode.data.id)] = {
+                    index: firstChangedNodeIndex + 0.5,
+                    hash: hashNode(lastNewNode)
+                };
+                wasStale = true;
+                // For some reason AgGrid mis-positions the inserted row.
+                lastNewNode && redrawRows();
+            }
+            else if (changedRowCount == 1 && newRowCount === 0) {
+                // User edited one row so, do nothing, retain sort
+                wasStale = true;
+            }
+            else if (changedRowCount !== 0 || newRowCount != 0) {
+                // too many rows changed, resort
+                backupSortOrder();
+            }
+            if (wasStale) {
+                // Check if the sort order the aggrid passed matches our stale sort order
+                var stillStale = Object.keys(previousRowSortIndex).length != nodes.length ||
+                    nodes.some(function (node, index) { var _a; return ((_a = previousRowSortIndex["".concat(node.data.id)]) === null || _a === void 0 ? void 0 : _a.index) !== index; });
                 // If we haven't already processed a stale sort then...
-                if (!sortWasStale.current) {
+                if (stillStale && !sortWasStale.current) {
                     // backup sort state, so we can restore it when sort is clicked on a stale column
                     previousColSort.current = copyCurrentSortSettings();
-                    backupSortOrder();
                     sortWasStale.current = true;
                     setStaleGrid(true);
                 }
-                sortNodesByPreviousSort();
             }
-            // secondary sort backup as there may be new nodes that didn't have their sort registered
-            // which would cause two new rows to sort out of sequence
-            backupSortOrder();
+            sortNodesByPreviousSort();
         }
-    }, [setStaleGrid]);
+    }, [redrawRows, setStaleGrid]);
 };
 
 /**
@@ -3661,10 +3722,11 @@ var GridPopoverTextInput = function (colDef, params) {
 };
 
 var GridFormSubComponentTextInput = function (_a) {
-    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue;
+    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue, className = _a.className;
     var placeholderText = placeholder || "Other...";
+    var inputClass = className || "";
     var _b = react.useState(""), inputValue = _b[0], setInputValue = _b[1];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TextInputFormatted, { value: inputValue, onChange: function (e) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TextInputFormatted, { className: inputClass, value: inputValue, onChange: function (e) {
                 var value = e.target.value;
                 setValue(value);
                 setInputValue(value);
@@ -3675,6 +3737,9 @@ var GridFormSubComponentTextInput = function (_a) {
                     if (document.activeElement != e.currentTarget) {
                         e.currentTarget.focus();
                     }
+                },
+                style: {
+                    width: "100%"
                 }
             } }) }));
 };
@@ -3793,38 +3858,44 @@ var useStateDeferred = function (initialValue) {
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
 var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
-    var _b;
-    var _c;
-    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _d = _a.size, size = _d === void 0 ? "sm" : _d;
-    var _e = react.useState(false), inProgress = _e[0], setInProgress = _e[1];
+    var _b, _c, _d;
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.level, level = _f === void 0 ? "tertiary" : _f, ariaLabel = _a["aria-label"];
+    var _g = react.useState(false), inProgress = _g[0], setInProgress = _g[1];
     var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
-    var _f = useStateDeferred(inProgress), localInProgress = _f[0], setLocalInProgress = _f[1], setLocalInProgressDeferred = _f[2];
+    var _h = useStateDeferred(inProgress), localInProgress = _h[0], setLocalInProgress = _h[1], setLocalInProgressDeferred = _h[2];
     react.useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxRuntime.jsxs(lui.LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+    return (jsxRuntime.jsxs(lui.LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_b = title !== null && title !== void 0 ? title : ariaLabel) !== null && _b !== void 0 ? _b : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", style: name == null ? { padding: "8px 5px" } : {}, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var promise, isPromise;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        promise = onAction();
+                        isPromise = typeof promise !== "undefined";
+                        if (!isPromise) return [3 /*break*/, 3];
                         setInProgress(true);
                         externalSetInProgress && setInProgress(true);
-                        return [4 /*yield*/, onAction()];
+                        if (!isPromise) return [3 /*break*/, 2];
+                        return [4 /*yield*/, promise];
                     case 1:
                         _a.sent();
+                        _a.label = 2;
+                    case 2:
                         externalSetInProgress && setInProgress(false);
                         setInProgress(false);
-                        return [2 /*return*/];
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
                 }
             });
-        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: (_b = {
-                        "data-testid": "loading-spinner",
-                        style: { padding: 0, margin: 0, paddingRight: 8 },
-                        role: "status"
-                    },
-                    _b["aria-label"] = "Loading",
-                    _b) })) : (jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: name, size: size })), jsxRuntime.jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 16, divProps: {
+                    "data-testid": "loading-spinner",
+                    style: { margin: 0, paddingRight: 5, paddingLeft: 3, paddingBottom: 0, paddingTop: 0 },
+                    role: "status",
+                    "aria-label": "Loading"
+                } })) : (jsxRuntime.jsx(lui.LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxRuntime.jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsxRuntime.jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
 exports.ActionButton = ActionButton;