@linzjs/step-ag-grid 8.3.1 → 8.4.0
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/src/components/GridPopoverHook.d.ts +1 -0
- package/dist/src/components/gridRender/GridRenderGenericCell.d.ts +2 -2
- package/dist/step-ag-grid.esm.js +30 -24
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/GridCell.tsx +14 -5
- package/src/components/GridPopoverHook.tsx +7 -2
- package/src/components/gridForm/GridFormDropDown.tsx +15 -24
- package/src/components/gridRender/GridRenderGenericCell.tsx +2 -2
- package/src/stories/grid/GridReadOnly.stories.tsx +1 -1
|
@@ -4,6 +4,7 @@ export interface GridPopoverHookProps<RowType> {
|
|
|
4
4
|
className: string | undefined;
|
|
5
5
|
invalid?: () => Promise<JSX.Element | boolean | string | null | undefined> | JSX.Element | boolean | string | null | undefined;
|
|
6
6
|
save?: (selectedRows: RowType[]) => Promise<boolean>;
|
|
7
|
+
dontSaveOnExternalClick?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const useGridPopoverHook: <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
|
|
9
10
|
popoverWrapper: (children: JSX.Element) => JSX.Element;
|
|
@@ -27,6 +27,6 @@ export interface GenericCellRendererParams<RowType extends GridBaseRow> {
|
|
|
27
27
|
rightHoverElement?: JSX.Element | undefined;
|
|
28
28
|
editAction?: (selectedRows: RowType[]) => void;
|
|
29
29
|
shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
|
|
30
|
-
warning?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
|
|
31
|
-
info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
|
|
30
|
+
warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
|
|
31
|
+
info?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
|
|
32
32
|
}
|
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -3003,7 +3003,11 @@ var GridCellRenderer = function (props) {
|
|
|
3003
3003
|
var warningText = warningFn ? warningFn(props) : undefined;
|
|
3004
3004
|
var infoFn = rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.info;
|
|
3005
3005
|
var infoText = infoFn ? infoFn(props) : undefined;
|
|
3006
|
-
|
|
3006
|
+
if (Array.isArray(warningText))
|
|
3007
|
+
warningText = warningText.join("\n");
|
|
3008
|
+
if (Array.isArray(infoText))
|
|
3009
|
+
infoText = infoText.join("\n");
|
|
3010
|
+
return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_b = (_a = colDef.field) !== null && _a !== void 0 ? _a : colDef.colId) !== null && _b !== void 0 ? _b : "", props.data.id) }, { children: jsxs(Fragment$1, { children: [!!warningText && (jsx(GridIcon, { icon: "ic_warning_outline", title: typeof warningText === "string" ? warningText : "Warning" })), !!infoText && jsx(GridIcon, { icon: "ic_info_outline", title: typeof infoText === "string" ? infoText : "Info" }), jsx("div", __assign({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: ((_c = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _c === void 0 ? void 0 : _c.originalCellRenderer) ? (jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))) : (jsx("span", __assign({ title: props.valueFormatted }, { children: props.valueFormatted }))) })), fnOrVar((_d = props.colDef) === null || _d === void 0 ? void 0 : _d.editable, props) && (rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement) && (jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement })))] }) })));
|
|
3007
3011
|
};
|
|
3008
3012
|
var suppressCellKeyboardEvents = function (e) {
|
|
3009
3013
|
var _a, _b, _c, _d;
|
|
@@ -3022,12 +3026,15 @@ var suppressCellKeyboardEvents = function (e) {
|
|
|
3022
3026
|
*/
|
|
3023
3027
|
var GridCell = function (props, custom) {
|
|
3024
3028
|
var _a, _b;
|
|
3025
|
-
return __assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, editable: (_a = props.editable) !== null && _a !== void 0 ? _a : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
|
|
3029
|
+
return __assign(__assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, editable: (_a = props.editable) !== null && _a !== void 0 ? _a : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
|
|
3026
3030
|
cellClassRules: GridCellMultiSelectClassRules,
|
|
3027
3031
|
editable: (_b = props.editable) !== null && _b !== void 0 ? _b : true,
|
|
3028
3032
|
cellEditor: GenericCellEditorComponentWrapper(custom === null || custom === void 0 ? void 0 : custom.editor)
|
|
3029
3033
|
})), { suppressKeyboardEvent: suppressCellKeyboardEvents }), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
|
|
3030
3034
|
cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
|
|
3035
|
+
})), (props.valueFormatter &&
|
|
3036
|
+
!props.filterValueGetter && {
|
|
3037
|
+
filterValueGetter: props.valueFormatter
|
|
3031
3038
|
})), {
|
|
3032
3039
|
// Default value formatter, otherwise react freaks out on objects
|
|
3033
3040
|
valueFormatter: function (params) {
|
|
@@ -3143,9 +3150,13 @@ var useGridPopoverHook = function (props) {
|
|
|
3143
3150
|
zIndex: 1000
|
|
3144
3151
|
} })), children, jsx("button", { ref: saveButtonRef, "data-reason": "", onClick: function (e) {
|
|
3145
3152
|
var _a;
|
|
3146
|
-
|
|
3153
|
+
var reason = (_a = e.currentTarget.getAttribute("data-reason")) !== null && _a !== void 0 ? _a : undefined;
|
|
3154
|
+
if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
|
|
3155
|
+
reason = CloseReason.CANCEL;
|
|
3156
|
+
}
|
|
3157
|
+
triggerSave(reason).then();
|
|
3147
3158
|
}, style: { display: "none" } })] }))) }));
|
|
3148
|
-
}, [anchorRef, isOpen, props.className, saving, triggerSave]);
|
|
3159
|
+
}, [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave]);
|
|
3149
3160
|
return {
|
|
3150
3161
|
popoverWrapper: popoverWrapper,
|
|
3151
3162
|
triggerSave: triggerSave
|
|
@@ -3436,26 +3447,11 @@ var GridFormDropDown = function (props) {
|
|
|
3436
3447
|
}
|
|
3437
3448
|
});
|
|
3438
3449
|
}); }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
|
|
3439
|
-
var onMouseEnterFocus = useCallback(function (item) {
|
|
3440
|
-
setSelectedItem(item);
|
|
3441
|
-
if (item.subComponent) {
|
|
3442
|
-
subComponentIsValid.current = true;
|
|
3443
|
-
subComponentInitialValue.current = null;
|
|
3444
|
-
}
|
|
3445
|
-
else {
|
|
3446
|
-
setSubSelectedValue(null);
|
|
3447
|
-
subComponentIsValid.current = true;
|
|
3448
|
-
}
|
|
3449
|
-
}, []);
|
|
3450
|
-
var onMouseLeaveFocus = useCallback(function () {
|
|
3451
|
-
setSelectedItem(null);
|
|
3452
|
-
setSubSelectedValue(null);
|
|
3453
|
-
subComponentIsValid.current = true;
|
|
3454
|
-
}, []);
|
|
3455
3450
|
var popoverWrapper = useGridPopoverHook({
|
|
3456
3451
|
className: props.className,
|
|
3457
3452
|
invalid: function () { return !!(selectedItem && !subComponentIsValid.current); },
|
|
3458
|
-
save: save
|
|
3453
|
+
save: save,
|
|
3454
|
+
dontSaveOnExternalClick: true
|
|
3459
3455
|
}).popoverWrapper;
|
|
3460
3456
|
var lastHeader = null;
|
|
3461
3457
|
var showHeader = null;
|
|
@@ -3484,7 +3480,17 @@ var GridFormDropDown = function (props) {
|
|
|
3484
3480
|
lastHeader = null;
|
|
3485
3481
|
}
|
|
3486
3482
|
}
|
|
3487
|
-
return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment
|
|
3483
|
+
return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
|
|
3484
|
+
setSelectedItem(item);
|
|
3485
|
+
if (item.subComponent) {
|
|
3486
|
+
subComponentIsValid.current = true;
|
|
3487
|
+
subComponentInitialValue.current = null;
|
|
3488
|
+
}
|
|
3489
|
+
else {
|
|
3490
|
+
setSubSelectedValue(null);
|
|
3491
|
+
subComponentIsValid.current = true;
|
|
3492
|
+
}
|
|
3493
|
+
}, onClick: function (e) {
|
|
3488
3494
|
if (item.subComponent) {
|
|
3489
3495
|
e.keepOpen = true;
|
|
3490
3496
|
}
|
|
@@ -3495,7 +3501,7 @@ var GridFormDropDown = function (props) {
|
|
|
3495
3501
|
setValue: function (value) {
|
|
3496
3502
|
setSubSelectedValue(value);
|
|
3497
3503
|
if (subComponentInitialValue.current === null) {
|
|
3498
|
-
// copy the default value of the subcomponent so we can change detect on save
|
|
3504
|
+
// copy the default value of the subcomponent, so we can change detect on save
|
|
3499
3505
|
subComponentInitialValue.current = JSON.stringify(value);
|
|
3500
3506
|
}
|
|
3501
3507
|
},
|
|
@@ -3508,7 +3514,7 @@ var GridFormDropDown = function (props) {
|
|
|
3508
3514
|
return [2 /*return*/];
|
|
3509
3515
|
});
|
|
3510
3516
|
}); }
|
|
3511
|
-
} }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))] })));
|
|
3517
|
+
} }, { children: item.subComponent && (jsx("div", __assign({ className: "subComponent" }, { children: jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")) }))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index))] }, "".concat(index))));
|
|
3512
3518
|
})] }) }))] }));
|
|
3513
3519
|
};
|
|
3514
3520
|
|