@linzjs/step-ag-grid 29.9.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/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts +2 -1
- package/dist/step-ag-grid.cjs +30 -22
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +30 -22
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx +30 -25
- package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx +2 -1
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -3632,11 +3632,13 @@ function styleInject(css, ref) {
|
|
|
3632
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}";
|
|
3633
3633
|
styleInject(css_248z$3);
|
|
3634
3634
|
|
|
3635
|
+
const EMPTY_KEY = '__EMPTY__';
|
|
3636
|
+
const DEFAULT_EMPTY_LABEL = '-';
|
|
3635
3637
|
const FilterUI = ({ allValues, selected, labels, labelFormatter, onToggleAll, onToggleOne, }) => {
|
|
3636
3638
|
const allChecked = allValues.length > 0 && selected.size === allValues.length;
|
|
3637
3639
|
const getDisplayLabel = (raw) => {
|
|
3638
|
-
const
|
|
3639
|
-
return labelFormatter ? labelFormatter(
|
|
3640
|
+
const base = raw === EMPTY_KEY ? (labels[EMPTY_KEY] ?? DEFAULT_EMPTY_LABEL) : (labels[raw] ?? raw);
|
|
3641
|
+
return labelFormatter ? labelFormatter(base) : base;
|
|
3640
3642
|
};
|
|
3641
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)))] }));
|
|
3642
3644
|
};
|
|
@@ -3648,27 +3650,35 @@ class GridFilterColumnsMultiSelect {
|
|
|
3648
3650
|
gui;
|
|
3649
3651
|
labelFormatter;
|
|
3650
3652
|
reactRoot = null;
|
|
3653
|
+
normalizeCellValue(value) {
|
|
3654
|
+
if (typeof value === 'string')
|
|
3655
|
+
return value.trim() === '' ? EMPTY_KEY : value;
|
|
3656
|
+
return EMPTY_KEY;
|
|
3657
|
+
}
|
|
3651
3658
|
loadFieldValues() {
|
|
3652
3659
|
const field = this.params.colDef.field;
|
|
3653
3660
|
const values = new Set();
|
|
3654
3661
|
this.params.api.forEachNode((node) => {
|
|
3655
|
-
const data = node.data;
|
|
3656
|
-
const
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
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);
|
|
3665
3673
|
});
|
|
3666
|
-
return Array.from(values).sort();
|
|
3667
3674
|
}
|
|
3668
3675
|
init(params) {
|
|
3669
3676
|
this.params = params;
|
|
3670
3677
|
this.labels = { ...params.labels };
|
|
3671
3678
|
this.labelFormatter = params.labelFormatter;
|
|
3679
|
+
if (!(EMPTY_KEY in this.labels)) {
|
|
3680
|
+
this.labels[EMPTY_KEY] = DEFAULT_EMPTY_LABEL;
|
|
3681
|
+
}
|
|
3672
3682
|
this.allValues = this.loadFieldValues();
|
|
3673
3683
|
this.selectedValues = new Set(this.allValues);
|
|
3674
3684
|
this.gui = document.createElement('div');
|
|
@@ -3706,16 +3716,14 @@ class GridFilterColumnsMultiSelect {
|
|
|
3706
3716
|
isFilterActive() {
|
|
3707
3717
|
return this.selectedValues.size > 0;
|
|
3708
3718
|
}
|
|
3709
|
-
doesFilterPass(
|
|
3719
|
+
doesFilterPass(p) {
|
|
3710
3720
|
const field = this.params.colDef.field;
|
|
3711
|
-
if (!
|
|
3712
|
-
return
|
|
3713
|
-
}
|
|
3714
|
-
const cellValue = params.data[field];
|
|
3715
|
-
if (typeof cellValue !== 'string') {
|
|
3716
|
-
return false;
|
|
3721
|
+
if (!p.data || typeof p.data !== 'object') {
|
|
3722
|
+
return this.selectedValues.has(EMPTY_KEY);
|
|
3717
3723
|
}
|
|
3718
|
-
|
|
3724
|
+
const raw = p.data[field];
|
|
3725
|
+
const norm = this.normalizeCellValue(raw);
|
|
3726
|
+
return this.selectedValues.has(norm);
|
|
3719
3727
|
}
|
|
3720
3728
|
getModel() {
|
|
3721
3729
|
return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
|
|
@@ -3732,7 +3740,7 @@ class GridFilterColumnsMultiSelect {
|
|
|
3732
3740
|
}
|
|
3733
3741
|
}
|
|
3734
3742
|
const createCheckboxMultiFilterParams = (labels = {}, labelFormatter) => ({
|
|
3735
|
-
labels,
|
|
3743
|
+
labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
|
|
3736
3744
|
labelFormatter,
|
|
3737
3745
|
});
|
|
3738
3746
|
|