@linzjs/step-ag-grid 4.0.2 → 4.0.3

package/dist/src/components/GridPopoverHook.d.ts

@@ -2,6 +2,7 @@ import { KeyboardEventHandler } from "react";
 import { GridBaseRow } from "./Grid";
 export interface GridPopoverHookProps<RowType> {
     className: string | undefined;
+    invalid?: () => Promise<boolean | string | null> | boolean | string | null;
     save?: (selectedRows: RowType[]) => Promise<boolean>;
 }
 export declare const useGridPopoverHook: <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {

package/dist/step-ag-grid.esm.js

@@ -2794,30 +2794,35 @@ var useGridPopoverHook = function (props) {
         setOpen(true);
     }, []);
     var triggerSave = useCallback(function (reason) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    _a = reason == "cancel" || !props.save;
-                    if (_a) return [3 /*break*/, 3];
-                    _b = updateValue;
-                    if (!_b) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateValue(props.save)];
+                    if (reason == "cancel") {
+                        stopEditing();
+                        return [2 /*return*/];
+                    }
+                    if (props.invalid && props.invalid()) {
+                        return [2 /*return*/];
+                    }
+                    if (!!props.save) return [3 /*break*/, 1];
+                    stopEditing();
+                    return [3 /*break*/, 3];
                 case 1:
-                    _b = (_c.sent());
-                    _c.label = 2;
-                case 2:
-                    _a = (_b);
-                    _c.label = 3;
-                case 3:
-                    if (_a) {
-                        setOpen(false);
+                    if (!props.save) return [3 /*break*/, 3];
+                    // forms that don't provide an invalid fn must wait until they have saved to close
+                    if (props.invalid)
                         stopEditing();
+                    return [4 /*yield*/, updateValue(props.save)];
+                case 2:
+                    if (_a.sent()) {
+                        if (!props.invalid)
+                            stopEditing();
                     }
-                    return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [props.save, stopEditing, updateValue]);
+    }); }, [props, stopEditing, updateValue]);
     var onlyInputKeyboardEventHandlers = {
         onKeyUp: function (e) {
             var isTextArea = e.currentTarget.type === "textarea";
@@ -2899,7 +2904,9 @@ var useGridPopoverHook = function (props) {
                             right: 0,
                             backgroundColor: "rgba(64,64,64,0.1)",
                             zIndex: 1000
-                        } })), children, jsx("button", { ref: saveButtonRef, onClick: function () { return triggerSave().then(); }, style: { display: "none" } })] }))) }));
+                        } })), children, jsx("button", { ref: saveButtonRef, onClick: function () {
+                            triggerSave().then();
+                        }, style: { display: "none" } })] }))) }));
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
@@ -3018,17 +3025,20 @@ var fieldToString = function (field) {
 var GridFormDropDown = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
     var stopEditing = useContext(GridContext).stopEditing;
+    // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
+    var hasSubmitted = useRef(false);
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
     var subComponentIsValid = useRef(false);
     var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
-    var _f = useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
+    var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            if (subComponentValue !== undefined && !subComponentIsValid.current)
+            if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
                 return [2 /*return*/, false];
+            hasSubmitted.current = true;
             return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
                     var hasChanged;
                     return __generator(this, function (_a) {
@@ -3178,7 +3188,7 @@ var GridFormDropDown = function (props) {
                     // Handler for sub-selected value
                     if (!selectedSubComponent)
                         return [2 /*return*/, true];
-                    if (!subComponentIsValid.current)
+                    if (selectedSubComponent.subComponent && !subComponentIsValid.current)
                         return [2 /*return*/, false];
                     return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
                 case 1:
@@ -3187,20 +3197,26 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
+    var popoverWrapper = useGridPopoverHook({
+        className: props.className,
+        invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
+        save: save
+    }).popoverWrapper;
     return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
                         } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
-                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
+                            return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
                                             if (item.subComponent) {
                                                 if (selectedSubComponent === item) {
+                                                    // toggle selection off
                                                     setSelectedSubComponent(null);
                                                     subComponentIsValid.current = true;
                                                 }
                                                 else {
+                                                    // toggle selection on
                                                     setSelectedSubComponent(item);
                                                 }
                                                 e.keepOpen = true;
@@ -3208,7 +3224,7 @@ var GridFormDropDown = function (props) {
                                             else {
                                                 selectItemHandler(item.value).then();
                                             }
-                                        } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 data: data,
                                                 value: subSelectedValue,
                                                 setValue: function (value) {
@@ -3526,7 +3542,7 @@ var GridPopoverMenu = function (colDef, custom) {
 };
 
 var bearingValueFormatter = function (params) {
-    var value = params.value;
+    var value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
     if (value == null) {
         return "-";
     }
@@ -3620,17 +3636,18 @@ var TextInputFormatted = function (props) {
 
 var GridFormEditBearing = function (props) {
     var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
-    var _b = useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
+    // This clears out any scientific precision
+    var defaultValue = useMemo(function () { return (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()); }, [initialValue]);
+    var _b = useState(defaultValue), value = _b[0], setValue = _b[1];
+    var invalid = useCallback(function () { return bearingStringValidator(value, props.range); }, [props.range, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var parsedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (bearingStringValidator(value))
-                        return [2 /*return*/, false];
                     parsedValue = bearingNumberParser(value);
                     // Value didn't change so don't save just cancel
-                    if (parsedValue === initialValue) {
+                    if (parsedValue === bearingNumberParser(defaultValue)) {
                         return [2 /*return*/, true];
                     }
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3649,14 +3666,15 @@ var GridFormEditBearing = function (props) {
                 case 3: return [2 /*return*/, true];
             }
         });
-    }); }, [field, initialValue, props, value]);
+    }); }, [defaultValue, field, props, value]);
     var _c = useGridPopoverHook({
         className: props.className,
+        invalid: invalid,
         save: save
     }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
+    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: defaultValue, onChange: function (e) {
                 setValue(e.target.value.trim());
-            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) })) })));
+            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" })) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3835,8 +3853,6 @@ var GridFormTextArea = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (invalid())
-                        return [2 /*return*/, false];
                     if (initialVale === (value !== null && value !== void 0 ? value : ""))
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
@@ -3853,8 +3869,12 @@ var GridFormTextArea = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, initialVale, value, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    }); }, [initialVale, value, props, field]);
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
     return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
 };
 
@@ -3862,9 +3882,10 @@ var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __
 
 var GridFormTextInput = function (props) {
     var _a, _b;
+    var stopEditing = useContext(GridContext).stopEditing;
     var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
-    var initValue = initialVale == null ? "" : "".concat(initialVale);
+    var initValue = useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
     var _d = useState(initValue), value = _d[0], setValue = _d[1];
     var invalid = useCallback(function () { return TextInputValidator(props, value, data); }, [data, props, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3874,6 +3895,7 @@ var GridFormTextInput = function (props) {
                 case 0:
                     if (invalid())
                         return [2 /*return*/, false];
+                    stopEditing();
                     trimmedValue = value.trim();
                     if (initValue === trimmedValue)
                         return [2 /*return*/, true];
@@ -3891,8 +3913,12 @@ var GridFormTextInput = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, value, initValue, props, field]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    }); }, [invalid, stopEditing, value, initValue, props, field]);
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: invalid,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
     return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder }, onlyInputKeyboardEventHandlers, { helpText: helpText })) })));
 };