@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/step-ag-grid.esm.js
CHANGED
|
@@ -3452,17 +3452,22 @@ const GridCellRenderer = (props) => {
|
|
|
3452
3452
|
const { checkUpdating } = useContext(GridUpdatingContext);
|
|
3453
3453
|
const colDef = props.colDef;
|
|
3454
3454
|
const rendererParams = colDef.cellRendererParams;
|
|
3455
|
+
const errorFn = rendererParams?.error;
|
|
3456
|
+
let errorText = props.data !== undefined && errorFn ? errorFn(props) : undefined;
|
|
3455
3457
|
const warningFn = rendererParams?.warning;
|
|
3456
3458
|
let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
|
|
3457
3459
|
const infoFn = rendererParams?.info;
|
|
3458
3460
|
let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
|
|
3461
|
+
if (Array.isArray(errorText)) {
|
|
3462
|
+
errorText = errorText.join('\n');
|
|
3463
|
+
}
|
|
3459
3464
|
if (Array.isArray(warningText)) {
|
|
3460
3465
|
warningText = warningText.join('\n');
|
|
3461
3466
|
}
|
|
3462
3467
|
if (Array.isArray(infoText)) {
|
|
3463
3468
|
infoText = infoText.join('\n');
|
|
3464
3469
|
}
|
|
3465
|
-
return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsx(GridLoadableCell, {})) : (jsxs(Fragment, { 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", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted || '–' })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
|
|
3470
|
+
return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsx(GridLoadableCell, {})) : (jsxs(Fragment, { children: [!!errorText && (jsx(GridIcon, { icon: 'ic_error_outline', title: typeof errorText === 'string' ? errorText : 'Error' })), !!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", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted || '–' })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
|
|
3466
3471
|
};
|
|
3467
3472
|
const suppressCellKeyboardEvents = (e) => {
|
|
3468
3473
|
const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
|
|
@@ -3627,11 +3632,13 @@ function styleInject(css, ref) {
|
|
|
3627
3632
|
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}";
|
|
3628
3633
|
styleInject(css_248z$3);
|
|
3629
3634
|
|
|
3635
|
+
const EMPTY_KEY = '__EMPTY__';
|
|
3636
|
+
const DEFAULT_EMPTY_LABEL = '-';
|
|
3630
3637
|
const FilterUI = ({ allValues, selected, labels, labelFormatter, onToggleAll, onToggleOne, }) => {
|
|
3631
3638
|
const allChecked = allValues.length > 0 && selected.size === allValues.length;
|
|
3632
3639
|
const getDisplayLabel = (raw) => {
|
|
3633
|
-
const
|
|
3634
|
-
return labelFormatter ? labelFormatter(
|
|
3640
|
+
const base = raw === EMPTY_KEY ? (labels[EMPTY_KEY] ?? DEFAULT_EMPTY_LABEL) : (labels[raw] ?? raw);
|
|
3641
|
+
return labelFormatter ? labelFormatter(base) : base;
|
|
3635
3642
|
};
|
|
3636
3643
|
return (jsxs("div", { className: "GridFilterColsMultiSelect", children: [jsx("span", { className: "LuiSelect-label-text", children: "Filter column" }), jsx(LuiCheckboxInput, { className: "LuiCheckboxInput-selectAll", label: 'Select All', value: "true", isChecked: allChecked, onChange: (e) => onToggleAll(e.target.checked) }), allValues.map((val) => (jsx(LuiCheckboxInput, { className: "LuiCheckboxInput-item", label: getDisplayLabel(val), value: val, isChecked: selected.has(val), onChange: (e) => onToggleOne(val, e.target.checked) }, val)))] }));
|
|
3637
3644
|
};
|
|
@@ -3643,27 +3650,35 @@ class GridFilterColumnsMultiSelect {
|
|
|
3643
3650
|
gui;
|
|
3644
3651
|
labelFormatter;
|
|
3645
3652
|
reactRoot = null;
|
|
3653
|
+
normalizeCellValue(value) {
|
|
3654
|
+
if (typeof value === 'string')
|
|
3655
|
+
return value.trim() === '' ? EMPTY_KEY : value;
|
|
3656
|
+
return EMPTY_KEY;
|
|
3657
|
+
}
|
|
3646
3658
|
loadFieldValues() {
|
|
3647
3659
|
const field = this.params.colDef.field;
|
|
3648
3660
|
const values = new Set();
|
|
3649
3661
|
this.params.api.forEachNode((node) => {
|
|
3650
|
-
const data = node.data;
|
|
3651
|
-
const
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3662
|
+
const data = node.data ?? {};
|
|
3663
|
+
const raw = data[field];
|
|
3664
|
+
const norm = this.normalizeCellValue(raw);
|
|
3665
|
+
values.add(norm);
|
|
3666
|
+
});
|
|
3667
|
+
return Array.from(values).sort((a, b) => {
|
|
3668
|
+
if (a === EMPTY_KEY && b !== EMPTY_KEY)
|
|
3669
|
+
return -1;
|
|
3670
|
+
if (b === EMPTY_KEY && a !== EMPTY_KEY)
|
|
3671
|
+
return 1;
|
|
3672
|
+
return a.localeCompare(b);
|
|
3660
3673
|
});
|
|
3661
|
-
return Array.from(values).sort();
|
|
3662
3674
|
}
|
|
3663
3675
|
init(params) {
|
|
3664
3676
|
this.params = params;
|
|
3665
3677
|
this.labels = { ...params.labels };
|
|
3666
3678
|
this.labelFormatter = params.labelFormatter;
|
|
3679
|
+
if (!(EMPTY_KEY in this.labels)) {
|
|
3680
|
+
this.labels[EMPTY_KEY] = DEFAULT_EMPTY_LABEL;
|
|
3681
|
+
}
|
|
3667
3682
|
this.allValues = this.loadFieldValues();
|
|
3668
3683
|
this.selectedValues = new Set(this.allValues);
|
|
3669
3684
|
this.gui = document.createElement('div');
|
|
@@ -3701,16 +3716,14 @@ class GridFilterColumnsMultiSelect {
|
|
|
3701
3716
|
isFilterActive() {
|
|
3702
3717
|
return this.selectedValues.size > 0;
|
|
3703
3718
|
}
|
|
3704
|
-
doesFilterPass(
|
|
3719
|
+
doesFilterPass(p) {
|
|
3705
3720
|
const field = this.params.colDef.field;
|
|
3706
|
-
if (!
|
|
3707
|
-
return
|
|
3708
|
-
}
|
|
3709
|
-
const cellValue = params.data[field];
|
|
3710
|
-
if (typeof cellValue !== 'string') {
|
|
3711
|
-
return false;
|
|
3721
|
+
if (!p.data || typeof p.data !== 'object') {
|
|
3722
|
+
return this.selectedValues.has(EMPTY_KEY);
|
|
3712
3723
|
}
|
|
3713
|
-
|
|
3724
|
+
const raw = p.data[field];
|
|
3725
|
+
const norm = this.normalizeCellValue(raw);
|
|
3726
|
+
return this.selectedValues.has(norm);
|
|
3714
3727
|
}
|
|
3715
3728
|
getModel() {
|
|
3716
3729
|
return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
|
|
@@ -3727,7 +3740,7 @@ class GridFilterColumnsMultiSelect {
|
|
|
3727
3740
|
}
|
|
3728
3741
|
}
|
|
3729
3742
|
const createCheckboxMultiFilterParams = (labels = {}, labelFormatter) => ({
|
|
3730
|
-
labels,
|
|
3743
|
+
labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
|
|
3731
3744
|
labelFormatter,
|
|
3732
3745
|
});
|
|
3733
3746
|
|