@linzjs/step-ag-grid 29.8.0 → 29.10.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/index.css +10 -0
- package/dist/src/components/GridCell.d.ts +1 -0
- package/dist/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts +2 -1
- package/dist/src/components/gridRender/GridRenderGenericCell.d.ts +1 -0
- package/dist/step-ag-grid.cjs +36 -23
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +36 -23
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/GridCell.tsx +9 -0
- package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx +30 -25
- package/src/components/gridRender/GridRenderGenericCell.tsx +1 -0
- package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx +2 -1
- package/src/stories/grid/GridReadOnly.stories.tsx +1 -0
- package/src/styles/GridIcon.scss +10 -0
package/dist/index.css
CHANGED
|
@@ -571,6 +571,16 @@ div.ag-ltr div.ag-header-cell-resize {
|
|
|
571
571
|
fill: #EA6A2E;
|
|
572
572
|
}
|
|
573
573
|
|
|
574
|
+
.AgGridGenericCellRenderer-ic_error_Icon {
|
|
575
|
+
margin-right: 4px;
|
|
576
|
+
fill: #cc0000;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.AgGridGenericCellRenderer-ic_error_outlineIcon {
|
|
580
|
+
margin-right: 4px;
|
|
581
|
+
fill: #cc0000;
|
|
582
|
+
}
|
|
583
|
+
|
|
574
584
|
.GridIcon-disabled {
|
|
575
585
|
fill: #beb9b4 !important;
|
|
576
586
|
}
|
|
@@ -19,6 +19,7 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
|
|
|
19
19
|
originalCellRenderer?: any;
|
|
20
20
|
editAction?: (selectedRows: TData[]) => void;
|
|
21
21
|
shortcutKeys?: Record<string, () => void>;
|
|
22
|
+
error?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
|
|
22
23
|
warning?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
|
|
23
24
|
info?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
|
|
24
25
|
};
|
|
@@ -15,6 +15,7 @@ export declare class GridFilterColumnsMultiSelect implements IFilterComp {
|
|
|
15
15
|
private gui;
|
|
16
16
|
private labelFormatter?;
|
|
17
17
|
private reactRoot;
|
|
18
|
+
private normalizeCellValue;
|
|
18
19
|
private loadFieldValues;
|
|
19
20
|
init(params: CheckboxMultiFilterParams): void;
|
|
20
21
|
private render;
|
|
@@ -22,7 +23,7 @@ export declare class GridFilterColumnsMultiSelect implements IFilterComp {
|
|
|
22
23
|
private handleToggleOne;
|
|
23
24
|
getGui(): HTMLElement;
|
|
24
25
|
isFilterActive(): boolean;
|
|
25
|
-
doesFilterPass(
|
|
26
|
+
doesFilterPass(p: IDoesFilterPassParams): boolean;
|
|
26
27
|
getModel(): CheckboxMultiFilterModel | null;
|
|
27
28
|
setModel(model: CheckboxMultiFilterModel | null): void;
|
|
28
29
|
destroy(): void;
|
|
@@ -10,6 +10,7 @@ export interface GenericCellRendererParams<TData extends GridBaseRow> {
|
|
|
10
10
|
rightHoverElement?: ReactElement | undefined;
|
|
11
11
|
editAction?: (selectedRows: TData[]) => void;
|
|
12
12
|
shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
|
|
13
|
+
error?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
|
|
13
14
|
warning?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
|
|
14
15
|
info?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
|
|
15
16
|
}
|
package/dist/step-ag-grid.cjs
CHANGED
|
@@ -3454,17 +3454,22 @@ const GridCellRenderer = (props) => {
|
|
|
3454
3454
|
const { checkUpdating } = React.useContext(GridUpdatingContext);
|
|
3455
3455
|
const colDef = props.colDef;
|
|
3456
3456
|
const rendererParams = colDef.cellRendererParams;
|
|
3457
|
+
const errorFn = rendererParams?.error;
|
|
3458
|
+
let errorText = props.data !== undefined && errorFn ? errorFn(props) : undefined;
|
|
3457
3459
|
const warningFn = rendererParams?.warning;
|
|
3458
3460
|
let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
|
|
3459
3461
|
const infoFn = rendererParams?.info;
|
|
3460
3462
|
let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
|
|
3463
|
+
if (Array.isArray(errorText)) {
|
|
3464
|
+
errorText = errorText.join('\n');
|
|
3465
|
+
}
|
|
3461
3466
|
if (Array.isArray(warningText)) {
|
|
3462
3467
|
warningText = warningText.join('\n');
|
|
3463
3468
|
}
|
|
3464
3469
|
if (Array.isArray(infoText)) {
|
|
3465
3470
|
infoText = infoText.join('\n');
|
|
3466
3471
|
}
|
|
3467
|
-
return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!warningText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: typeof warningText === 'string' ? warningText : 'Warning' })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: 'ic_info_outline', title: typeof infoText === 'string' ? infoText : 'Info' }), jsxRuntime.jsx("div", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted || '–' })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
|
|
3472
|
+
return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!errorText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_error_outline', title: typeof errorText === 'string' ? errorText : 'Error' })), !!warningText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: typeof warningText === 'string' ? warningText : 'Warning' })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: 'ic_info_outline', title: typeof infoText === 'string' ? infoText : 'Info' }), jsxRuntime.jsx("div", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted || '–' })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
|
|
3468
3473
|
};
|
|
3469
3474
|
const suppressCellKeyboardEvents = (e) => {
|
|
3470
3475
|
const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
|
|
@@ -3629,11 +3634,13 @@ function styleInject(css, ref) {
|
|
|
3629
3634
|
var css_248z$3 = ".GridFilterColsMultiSelect{background:#fff;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:600;padding:8px}.GridFilterColsMultiSelect .LuiSelect-label-text{color:#6b6966;display:inline-block}.GridFilterColsMultiSelect .LuiCheckboxInput-item,.GridFilterColsMultiSelect .LuiCheckboxInput-selectAll{color:#2a292c;font-size:16px;font-weight:600;letter-spacing:0;line-height:20px;line-height:24px;margin-bottom:0}";
|
|
3630
3635
|
styleInject(css_248z$3);
|
|
3631
3636
|
|
|
3637
|
+
const EMPTY_KEY = '__EMPTY__';
|
|
3638
|
+
const DEFAULT_EMPTY_LABEL = '-';
|
|
3632
3639
|
const FilterUI = ({ allValues, selected, labels, labelFormatter, onToggleAll, onToggleOne, }) => {
|
|
3633
3640
|
const allChecked = allValues.length > 0 && selected.size === allValues.length;
|
|
3634
3641
|
const getDisplayLabel = (raw) => {
|
|
3635
|
-
const
|
|
3636
|
-
return labelFormatter ? labelFormatter(
|
|
3642
|
+
const base = raw === EMPTY_KEY ? (labels[EMPTY_KEY] ?? DEFAULT_EMPTY_LABEL) : (labels[raw] ?? raw);
|
|
3643
|
+
return labelFormatter ? labelFormatter(base) : base;
|
|
3637
3644
|
};
|
|
3638
3645
|
return (jsxRuntime.jsxs("div", { className: "GridFilterColsMultiSelect", children: [jsxRuntime.jsx("span", { className: "LuiSelect-label-text", children: "Filter column" }), jsxRuntime.jsx(lui.LuiCheckboxInput, { className: "LuiCheckboxInput-selectAll", label: 'Select All', value: "true", isChecked: allChecked, onChange: (e) => onToggleAll(e.target.checked) }), allValues.map((val) => (jsxRuntime.jsx(lui.LuiCheckboxInput, { className: "LuiCheckboxInput-item", label: getDisplayLabel(val), value: val, isChecked: selected.has(val), onChange: (e) => onToggleOne(val, e.target.checked) }, val)))] }));
|
|
3639
3646
|
};
|
|
@@ -3645,27 +3652,35 @@ class GridFilterColumnsMultiSelect {
|
|
|
3645
3652
|
gui;
|
|
3646
3653
|
labelFormatter;
|
|
3647
3654
|
reactRoot = null;
|
|
3655
|
+
normalizeCellValue(value) {
|
|
3656
|
+
if (typeof value === 'string')
|
|
3657
|
+
return value.trim() === '' ? EMPTY_KEY : value;
|
|
3658
|
+
return EMPTY_KEY;
|
|
3659
|
+
}
|
|
3648
3660
|
loadFieldValues() {
|
|
3649
3661
|
const field = this.params.colDef.field;
|
|
3650
3662
|
const values = new Set();
|
|
3651
3663
|
this.params.api.forEachNode((node) => {
|
|
3652
|
-
const data = node.data;
|
|
3653
|
-
const
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3664
|
+
const data = node.data ?? {};
|
|
3665
|
+
const raw = data[field];
|
|
3666
|
+
const norm = this.normalizeCellValue(raw);
|
|
3667
|
+
values.add(norm);
|
|
3668
|
+
});
|
|
3669
|
+
return Array.from(values).sort((a, b) => {
|
|
3670
|
+
if (a === EMPTY_KEY && b !== EMPTY_KEY)
|
|
3671
|
+
return -1;
|
|
3672
|
+
if (b === EMPTY_KEY && a !== EMPTY_KEY)
|
|
3673
|
+
return 1;
|
|
3674
|
+
return a.localeCompare(b);
|
|
3662
3675
|
});
|
|
3663
|
-
return Array.from(values).sort();
|
|
3664
3676
|
}
|
|
3665
3677
|
init(params) {
|
|
3666
3678
|
this.params = params;
|
|
3667
3679
|
this.labels = { ...params.labels };
|
|
3668
3680
|
this.labelFormatter = params.labelFormatter;
|
|
3681
|
+
if (!(EMPTY_KEY in this.labels)) {
|
|
3682
|
+
this.labels[EMPTY_KEY] = DEFAULT_EMPTY_LABEL;
|
|
3683
|
+
}
|
|
3669
3684
|
this.allValues = this.loadFieldValues();
|
|
3670
3685
|
this.selectedValues = new Set(this.allValues);
|
|
3671
3686
|
this.gui = document.createElement('div');
|
|
@@ -3703,16 +3718,14 @@ class GridFilterColumnsMultiSelect {
|
|
|
3703
3718
|
isFilterActive() {
|
|
3704
3719
|
return this.selectedValues.size > 0;
|
|
3705
3720
|
}
|
|
3706
|
-
doesFilterPass(
|
|
3721
|
+
doesFilterPass(p) {
|
|
3707
3722
|
const field = this.params.colDef.field;
|
|
3708
|
-
if (!
|
|
3709
|
-
return
|
|
3710
|
-
}
|
|
3711
|
-
const cellValue = params.data[field];
|
|
3712
|
-
if (typeof cellValue !== 'string') {
|
|
3713
|
-
return false;
|
|
3723
|
+
if (!p.data || typeof p.data !== 'object') {
|
|
3724
|
+
return this.selectedValues.has(EMPTY_KEY);
|
|
3714
3725
|
}
|
|
3715
|
-
|
|
3726
|
+
const raw = p.data[field];
|
|
3727
|
+
const norm = this.normalizeCellValue(raw);
|
|
3728
|
+
return this.selectedValues.has(norm);
|
|
3716
3729
|
}
|
|
3717
3730
|
getModel() {
|
|
3718
3731
|
return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
|
|
@@ -3729,7 +3742,7 @@ class GridFilterColumnsMultiSelect {
|
|
|
3729
3742
|
}
|
|
3730
3743
|
}
|
|
3731
3744
|
const createCheckboxMultiFilterParams = (labels = {}, labelFormatter) => ({
|
|
3732
|
-
labels,
|
|
3745
|
+
labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
|
|
3733
3746
|
labelFormatter,
|
|
3734
3747
|
});
|
|
3735
3748
|
|