@linzjs/step-ag-grid 1.5.2 → 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 +24 -16
- package/dist/index.js.map +1 -1
- 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 +22 -17
- 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/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/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
|
|
|
@@ -2862,7 +2864,7 @@ var css_248z = ".LuiTextInput {\n margin-bottom: 0;\n}\n\n.LuiTextInput-formatt
|
|
|
2862
2864
|
styleInject(css_248z);
|
|
2863
2865
|
|
|
2864
2866
|
var TextInputFormatted = function (props) {
|
|
2865
|
-
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] })))] })));
|
|
2866
2868
|
};
|
|
2867
2869
|
|
|
2868
2870
|
var GridFormEditBearing = function (props) {
|
|
@@ -3209,32 +3211,35 @@ var GridPopoverTextArea = function (colDef) {
|
|
|
3209
3211
|
};
|
|
3210
3212
|
|
|
3211
3213
|
var GridFormTextInput = function (props) {
|
|
3212
|
-
var _a
|
|
3214
|
+
var _a;
|
|
3213
3215
|
var formProps = props.formProps;
|
|
3214
|
-
var
|
|
3216
|
+
var initValue = props.value == null ? "" : "".concat(props.value);
|
|
3217
|
+
var _b = react.useState(initValue), value = _b[0], setValue = _b[1];
|
|
3215
3218
|
var invalid = react.useCallback(function () {
|
|
3216
|
-
|
|
3219
|
+
var trimmedValue = value.trim();
|
|
3220
|
+
if (formProps.required && trimmedValue.length == 0) {
|
|
3217
3221
|
return "Some text is required";
|
|
3218
3222
|
}
|
|
3219
|
-
if (formProps.maxlength &&
|
|
3223
|
+
if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
|
|
3220
3224
|
return "Text must be no longer than ".concat(formProps.maxlength, " characters");
|
|
3221
3225
|
}
|
|
3222
3226
|
if (formProps.validate) {
|
|
3223
|
-
return formProps.validate(
|
|
3227
|
+
return formProps.validate(trimmedValue);
|
|
3224
3228
|
}
|
|
3225
3229
|
return null;
|
|
3226
3230
|
}, [formProps, value]);
|
|
3227
3231
|
var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3228
|
-
var field;
|
|
3232
|
+
var trimmedValue, field;
|
|
3229
3233
|
return __generator(this, function (_a) {
|
|
3230
3234
|
switch (_a.label) {
|
|
3231
3235
|
case 0:
|
|
3232
3236
|
if (invalid())
|
|
3233
3237
|
return [2 /*return*/, false];
|
|
3234
|
-
|
|
3238
|
+
trimmedValue = value.trim();
|
|
3239
|
+
if (initValue === trimmedValue)
|
|
3235
3240
|
return [2 /*return*/, true];
|
|
3236
3241
|
if (!formProps.onSave) return [3 /*break*/, 2];
|
|
3237
|
-
return [4 /*yield*/, formProps.onSave(selectedRows,
|
|
3242
|
+
return [4 /*yield*/, formProps.onSave(selectedRows, trimmedValue)];
|
|
3238
3243
|
case 1: return [2 /*return*/, _a.sent()];
|
|
3239
3244
|
case 2:
|
|
3240
3245
|
field = props.field;
|
|
@@ -3242,13 +3247,13 @@ var GridFormTextInput = function (props) {
|
|
|
3242
3247
|
console.error("ColDef has no field set");
|
|
3243
3248
|
return [2 /*return*/, false];
|
|
3244
3249
|
}
|
|
3245
|
-
selectedRows.forEach(function (row) { return (row[field] =
|
|
3250
|
+
selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
|
|
3246
3251
|
return [2 /*return*/, true];
|
|
3247
3252
|
}
|
|
3248
3253
|
});
|
|
3249
|
-
}); }, [invalid,
|
|
3250
|
-
var
|
|
3251
|
-
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: {
|
|
3252
3257
|
style: { width: "100%" },
|
|
3253
3258
|
placeholder: formProps.placeholder,
|
|
3254
3259
|
onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
|
|
@@ -3274,9 +3279,12 @@ var GridSubComponentTextArea = function (props) {
|
|
|
3274
3279
|
exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
|
|
3275
3280
|
exports.ControlledMenu = ControlledMenu;
|
|
3276
3281
|
exports.FocusableItem = FocusableItem;
|
|
3282
|
+
exports.GenericCellEditorComponent = GenericCellEditorComponent;
|
|
3283
|
+
exports.GenericCellEditorComponentFr = GenericCellEditorComponentFr;
|
|
3277
3284
|
exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
|
|
3278
3285
|
exports.Grid = Grid;
|
|
3279
3286
|
exports.GridCell = GridCell;
|
|
3287
|
+
exports.GridCellRenderer = GridCellRenderer;
|
|
3280
3288
|
exports.GridContext = GridContext;
|
|
3281
3289
|
exports.GridContextProvider = GridContextProvider;
|
|
3282
3290
|
exports.GridFormDropDown = GridFormDropDown;
|