@linzjs/step-ag-grid 1.5.1 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +29 -23
- package/dist/index.js.map +1 -1
- package/dist/src/components/gridForm/GridFormMultiSelect.d.ts +1 -0
- package/dist/src/components/gridForm/GridFormTextInput.d.ts +1 -0
- package/dist/src/lui/TextInputFormatted.d.ts +1 -2
- package/dist/src/stories/components/FormTest.d.ts +1 -0
- package/dist/step-ag-grid.esm.js +28 -25
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/GridCell.tsx +4 -2
- package/src/components/gridForm/GridFormMultiSelect.tsx +9 -7
- package/src/components/gridForm/GridFormTextInput.tsx +13 -10
- package/src/lui/TextInputFormatted.tsx +1 -3
- package/src/stories/components/FormTest.tsx +1 -0
- package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx +27 -3
- package/src/stories/components/GridPopoutEditMultiSelect.stories.tsx +63 -40
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export * from "./src/contexts/GridContext";
|
|
|
6
6
|
export * from "./src/contexts/GridContextProvider";
|
|
7
7
|
export type { GridBaseRow } from "./src/components/Grid";
|
|
8
8
|
export { Grid } from "./src/components/Grid";
|
|
9
|
-
export
|
|
9
|
+
export * from "./src/components/GridCell";
|
|
10
10
|
export { GridIcon } from "./src/components/GridIcon";
|
|
11
11
|
export { ComponentLoadingWrapper } from "./src/components/ComponentLoadingWrapper";
|
|
12
12
|
export { GenericMultiEditCellClass } from "./src/components/GenericCellClass";
|
package/dist/index.js
CHANGED
|
@@ -2430,9 +2430,11 @@ var GridCell = function (props) {
|
|
|
2430
2430
|
})), {
|
|
2431
2431
|
// Default value formatter, otherwise react freaks out on objects
|
|
2432
2432
|
valueFormatter: function (params) {
|
|
2433
|
-
|
|
2433
|
+
if (params.value == null)
|
|
2434
|
+
return "-";
|
|
2435
|
+
var types = ["number", "boolean", "string"];
|
|
2434
2436
|
if (types.includes(typeof params.value))
|
|
2435
|
-
return params.value;
|
|
2437
|
+
return "".concat(params.value);
|
|
2436
2438
|
else
|
|
2437
2439
|
return JSON.stringify(params.value);
|
|
2438
2440
|
} }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
|
|
@@ -2465,7 +2467,7 @@ var GenericCellEditorComponentFr = function (props, _) {
|
|
|
2465
2467
|
}); }, [field, saving, selectedRows, updatingCells]);
|
|
2466
2468
|
if (cellEditorParams == null)
|
|
2467
2469
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2468
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: colDef.cellRenderer ? jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsxRuntime.jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, value: value, field: field, selectedRows: selectedRows }))] }));
|
|
2470
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: colDef.cellRenderer ? jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsxRuntime.jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, data: data, value: value, field: field, selectedRows: selectedRows }))] }));
|
|
2469
2471
|
};
|
|
2470
2472
|
var GenericCellEditorComponent = react.forwardRef(GenericCellEditorComponentFr);
|
|
2471
2473
|
|
|
@@ -2564,19 +2566,17 @@ var GridFormMultiSelect = function (props) {
|
|
|
2564
2566
|
var optionsInitialising = react.useRef(false);
|
|
2565
2567
|
var _c = react.useState(), options = _c[0], setOptions = _c[1];
|
|
2566
2568
|
var subSelectedValues = react.useRef({});
|
|
2567
|
-
var _d = react.useState(
|
|
2569
|
+
var _d = react.useState(function () {
|
|
2570
|
+
return formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [];
|
|
2571
|
+
}), selectedValues = _d[0], setSelectedValues = _d[1];
|
|
2568
2572
|
var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
|
|
2569
2573
|
var values;
|
|
2570
2574
|
return __generator(this, function (_a) {
|
|
2571
2575
|
switch (_a.label) {
|
|
2572
2576
|
case 0:
|
|
2573
|
-
values = {};
|
|
2574
|
-
selectedValues.forEach(function (value) {
|
|
2575
|
-
var _a;
|
|
2576
|
-
values[value] = (_a = subSelectedValues.current[value]) !== null && _a !== void 0 ? _a : true;
|
|
2577
|
-
});
|
|
2577
|
+
values = lodashEs.fromPairs(selectedValues.map(function (value) { var _a; return [value, (_a = subSelectedValues.current[value]) !== null && _a !== void 0 ? _a : true]; }));
|
|
2578
2578
|
if (!formProps.onSave) return [3 /*break*/, 2];
|
|
2579
|
-
return [4 /*yield*/, formProps.onSave({ selectedRows: selectedRows, values:
|
|
2579
|
+
return [4 /*yield*/, formProps.onSave({ selectedRows: selectedRows, values: values })];
|
|
2580
2580
|
case 1: return [2 /*return*/, _a.sent()];
|
|
2581
2581
|
case 2: return [2 /*return*/, true];
|
|
2582
2582
|
}
|
|
@@ -2864,7 +2864,7 @@ var css_248z = ".LuiTextInput {\n margin-bottom: 0;\n}\n\n.LuiTextInput-formatt
|
|
|
2864
2864
|
styleInject(css_248z);
|
|
2865
2865
|
|
|
2866
2866
|
var TextInputFormatted = function (props) {
|
|
2867
|
-
return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))
|
|
2867
|
+
return (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
|
|
2868
2868
|
};
|
|
2869
2869
|
|
|
2870
2870
|
var GridFormEditBearing = function (props) {
|
|
@@ -3211,32 +3211,35 @@ var GridPopoverTextArea = function (colDef) {
|
|
|
3211
3211
|
};
|
|
3212
3212
|
|
|
3213
3213
|
var GridFormTextInput = function (props) {
|
|
3214
|
-
var _a
|
|
3214
|
+
var _a;
|
|
3215
3215
|
var formProps = props.formProps;
|
|
3216
|
-
var
|
|
3216
|
+
var initValue = props.value == null ? "" : "".concat(props.value);
|
|
3217
|
+
var _b = react.useState(initValue), value = _b[0], setValue = _b[1];
|
|
3217
3218
|
var invalid = react.useCallback(function () {
|
|
3218
|
-
|
|
3219
|
+
var trimmedValue = value.trim();
|
|
3220
|
+
if (formProps.required && trimmedValue.length == 0) {
|
|
3219
3221
|
return "Some text is required";
|
|
3220
3222
|
}
|
|
3221
|
-
if (formProps.maxlength &&
|
|
3223
|
+
if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
|
|
3222
3224
|
return "Text must be no longer than ".concat(formProps.maxlength, " characters");
|
|
3223
3225
|
}
|
|
3224
3226
|
if (formProps.validate) {
|
|
3225
|
-
return formProps.validate(
|
|
3227
|
+
return formProps.validate(trimmedValue);
|
|
3226
3228
|
}
|
|
3227
3229
|
return null;
|
|
3228
3230
|
}, [formProps, value]);
|
|
3229
3231
|
var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3230
|
-
var field;
|
|
3232
|
+
var trimmedValue, field;
|
|
3231
3233
|
return __generator(this, function (_a) {
|
|
3232
3234
|
switch (_a.label) {
|
|
3233
3235
|
case 0:
|
|
3234
3236
|
if (invalid())
|
|
3235
3237
|
return [2 /*return*/, false];
|
|
3236
|
-
|
|
3238
|
+
trimmedValue = value.trim();
|
|
3239
|
+
if (initValue === trimmedValue)
|
|
3237
3240
|
return [2 /*return*/, true];
|
|
3238
3241
|
if (!formProps.onSave) return [3 /*break*/, 2];
|
|
3239
|
-
return [4 /*yield*/, formProps.onSave(selectedRows,
|
|
3242
|
+
return [4 /*yield*/, formProps.onSave(selectedRows, trimmedValue)];
|
|
3240
3243
|
case 1: return [2 /*return*/, _a.sent()];
|
|
3241
3244
|
case 2:
|
|
3242
3245
|
field = props.field;
|
|
@@ -3244,13 +3247,13 @@ var GridFormTextInput = function (props) {
|
|
|
3244
3247
|
console.error("ColDef has no field set");
|
|
3245
3248
|
return [2 /*return*/, false];
|
|
3246
3249
|
}
|
|
3247
|
-
selectedRows.forEach(function (row) { return (row[field] =
|
|
3250
|
+
selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
|
|
3248
3251
|
return [2 /*return*/, true];
|
|
3249
3252
|
}
|
|
3250
3253
|
});
|
|
3251
|
-
}); }, [invalid,
|
|
3252
|
-
var
|
|
3253
|
-
return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (
|
|
3254
|
+
}); }, [invalid, value, initValue, formProps, props.field]);
|
|
3255
|
+
var _c = useGridPopoverHook(props, save), popoverWrapper = _c.popoverWrapper, triggerSave = _c.triggerSave;
|
|
3256
|
+
return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = formProps.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: formProps.units, inputProps: {
|
|
3254
3257
|
style: { width: "100%" },
|
|
3255
3258
|
placeholder: formProps.placeholder,
|
|
3256
3259
|
onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
|
|
@@ -3276,9 +3279,12 @@ var GridSubComponentTextArea = function (props) {
|
|
|
3276
3279
|
exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
|
|
3277
3280
|
exports.ControlledMenu = ControlledMenu;
|
|
3278
3281
|
exports.FocusableItem = FocusableItem;
|
|
3282
|
+
exports.GenericCellEditorComponent = GenericCellEditorComponent;
|
|
3283
|
+
exports.GenericCellEditorComponentFr = GenericCellEditorComponentFr;
|
|
3279
3284
|
exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
|
|
3280
3285
|
exports.Grid = Grid;
|
|
3281
3286
|
exports.GridCell = GridCell;
|
|
3287
|
+
exports.GridCellRenderer = GridCellRenderer;
|
|
3282
3288
|
exports.GridContext = GridContext;
|
|
3283
3289
|
exports.GridContextProvider = GridContextProvider;
|
|
3284
3290
|
exports.GridFormDropDown = GridFormDropDown;
|