@linzjs/step-ag-grid 7.1.0 → 7.1.1
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.js +76 -20
- package/dist/index.js.map +1 -1
- package/dist/src/utils/textMatcher.d.ts +2 -2
- package/dist/step-ag-grid.esm.js +77 -21
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/gridForm/GridFormMultiSelect.tsx +83 -21
- package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts +2 -2
- package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx +2 -2
- package/src/utils/textMatcher.ts +11 -8
package/dist/index.js
CHANGED
|
@@ -3537,8 +3537,8 @@ function isMatch(inputs, patterns, options) {
|
|
|
3537
3537
|
* "*L" => *L
|
|
3538
3538
|
* "A B" => A* and B*
|
|
3539
3539
|
* "A B, C" => (A* and B*) or C*
|
|
3540
|
-
*
|
|
3541
|
-
* Returns
|
|
3540
|
+
* "!A" => all values must not match A
|
|
3541
|
+
* Returns true if there's a text match.
|
|
3542
3542
|
*/
|
|
3543
3543
|
var textMatch = function (text, filter) {
|
|
3544
3544
|
if (text == null)
|
|
@@ -3547,12 +3547,15 @@ var textMatch = function (text, filter) {
|
|
|
3547
3547
|
.split(",")
|
|
3548
3548
|
.map(function (sf) { return sf.trim(); })
|
|
3549
3549
|
.filter(function (sf) { return sf; });
|
|
3550
|
+
var _a = lodashEs.partition(superFilters, function (superFilters) { return superFilters.startsWith("!"); }), negativeFilters = _a[0], positiveFilters = _a[1];
|
|
3550
3551
|
var values = text.replaceAll(",", " ").trim().split(/\s+/);
|
|
3551
|
-
return (lodashEs.isEmpty(
|
|
3552
|
-
|
|
3552
|
+
return ((lodashEs.isEmpty(positiveFilters) || // Not filtered
|
|
3553
|
+
positiveFilters.some(function (superFilter) {
|
|
3553
3554
|
var subFilters = superFilter.split(/\s+/).map(function (s) { return s.replaceAll(/([!?])/g, "\\$1"); });
|
|
3554
3555
|
return subFilters.every(function (subFilter) { return values.some(function (value) { return isMatch(value, subFilter); }); });
|
|
3555
|
-
}))
|
|
3556
|
+
})) &&
|
|
3557
|
+
(lodashEs.isEmpty(negativeFilters) ||
|
|
3558
|
+
negativeFilters.every(function (superFilter) { return values.every(function (value) { return isMatch(value, superFilter); }); })));
|
|
3556
3559
|
};
|
|
3557
3560
|
|
|
3558
3561
|
var GridFormMultiSelect = function (props) {
|
|
@@ -3614,8 +3617,32 @@ var GridFormMultiSelect = function (props) {
|
|
|
3614
3617
|
* Groups options into their header groups
|
|
3615
3618
|
*/
|
|
3616
3619
|
var headerGroups = React.useMemo(function () {
|
|
3617
|
-
|
|
3618
|
-
|
|
3620
|
+
if (!options)
|
|
3621
|
+
return undefined;
|
|
3622
|
+
var result = lodashEs.groupBy(options.filter(function (o) { return textMatch(o.label, filter) && o.value; }), "filter");
|
|
3623
|
+
// remove leading/trailing/duplicate dividers
|
|
3624
|
+
return lodashEs.fromPairs(lodashEs.toPairs(result).map(function (_a) {
|
|
3625
|
+
var key = _a[0], arr = _a[1];
|
|
3626
|
+
var lastWasDivider = true;
|
|
3627
|
+
return [
|
|
3628
|
+
key,
|
|
3629
|
+
arr
|
|
3630
|
+
.map(function (row, index) {
|
|
3631
|
+
if (row.value === MenuSeparatorString) {
|
|
3632
|
+
if (lastWasDivider)
|
|
3633
|
+
return null;
|
|
3634
|
+
if (index === arr.length - 1)
|
|
3635
|
+
return null;
|
|
3636
|
+
lastWasDivider = true;
|
|
3637
|
+
}
|
|
3638
|
+
else {
|
|
3639
|
+
lastWasDivider = false;
|
|
3640
|
+
}
|
|
3641
|
+
return row;
|
|
3642
|
+
})
|
|
3643
|
+
.filter(function (r) { return r; }),
|
|
3644
|
+
];
|
|
3645
|
+
}));
|
|
3619
3646
|
}, [filter, options]);
|
|
3620
3647
|
var headers = React.useMemo(function () { var _a; return (_a = props.headers) !== null && _a !== void 0 ? _a : [{ header: "" }]; }, [props.headers]);
|
|
3621
3648
|
var _e = useGridPopoverHook({
|
|
@@ -3623,7 +3650,7 @@ var GridFormMultiSelect = function (props) {
|
|
|
3623
3650
|
invalid: invalid,
|
|
3624
3651
|
save: save
|
|
3625
3652
|
}), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
|
|
3626
|
-
return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
|
|
3653
|
+
return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: options && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsx(FilterInput, __assign({}, { headerGroups: headerGroups, options: options, setOptions: setOptions, filter: filter, setFilter: setFilter, triggerSave: triggerSave }, { filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder }))), headerGroups && (jsxRuntime.jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: headers.map(function (header) {
|
|
3627
3654
|
var subOptions = headerGroups["".concat(header.filter)];
|
|
3628
3655
|
return (!lodashEs.isEmpty(subOptions) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.header && jsxRuntime.jsx(MenuHeader, { children: header.header }), subOptions.map(function (item, index) {
|
|
3629
3656
|
return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "div_".concat(index))) : (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsxRuntime.jsx(MenuSubComponent, __assign({}, { item: item, options: options, setOptions: setOptions, data: data, triggerSave: triggerSave }, { subComponentIsValid: subComponentIsValidRef.current })))] }, "val_".concat(item.value)));
|
|
@@ -3631,14 +3658,19 @@ var GridFormMultiSelect = function (props) {
|
|
|
3631
3658
|
}) })))] })) })));
|
|
3632
3659
|
};
|
|
3633
3660
|
var FilterInput = function (props) {
|
|
3634
|
-
var options = props.options, setOptions = props.setOptions, onSelectFilter = props.onSelectFilter, filter = props.filter, setFilter = props.setFilter, headerGroups = props.headerGroups, filterPlaceholder = props.filterPlaceholder, filterHelpText = props.filterHelpText;
|
|
3661
|
+
var options = props.options, setOptions = props.setOptions, onSelectFilter = props.onSelectFilter, filter = props.filter, setFilter = props.setFilter, headerGroups = props.headerGroups, filterPlaceholder = props.filterPlaceholder, filterHelpText = props.filterHelpText, triggerSave = props.triggerSave;
|
|
3662
|
+
var enterHasBeenPressed = React.useRef(false);
|
|
3663
|
+
var lastKeyWasEnter = React.useRef(false);
|
|
3635
3664
|
var toggleSelectAllVisible = React.useCallback(function () {
|
|
3636
3665
|
if (!options || !headerGroups)
|
|
3637
3666
|
return;
|
|
3638
3667
|
if (lodashEs.isEmpty(filter.trim())) {
|
|
3639
3668
|
// Toggle off if any items are checked otherwise on
|
|
3640
3669
|
var anyChecked_1 = options.some(function (o) { return o.checked; });
|
|
3641
|
-
options.forEach(function (o) {
|
|
3670
|
+
options.forEach(function (o) {
|
|
3671
|
+
if (o.label !== undefined)
|
|
3672
|
+
o.checked = !anyChecked_1;
|
|
3673
|
+
});
|
|
3642
3674
|
}
|
|
3643
3675
|
else {
|
|
3644
3676
|
// Toggle on if any filtered items are checked otherwise off
|
|
@@ -3647,7 +3679,7 @@ var FilterInput = function (props) {
|
|
|
3647
3679
|
});
|
|
3648
3680
|
Object.values(headerGroups).forEach(function (headerOptions) {
|
|
3649
3681
|
headerOptions.forEach(function (o) {
|
|
3650
|
-
if (o.
|
|
3682
|
+
if (o.label !== undefined)
|
|
3651
3683
|
o.checked = anyChecked_2;
|
|
3652
3684
|
});
|
|
3653
3685
|
});
|
|
@@ -3657,28 +3689,52 @@ var FilterInput = function (props) {
|
|
|
3657
3689
|
var addCustomFilterValue = React.useCallback(function () {
|
|
3658
3690
|
if (!options || !onSelectFilter)
|
|
3659
3691
|
return;
|
|
3692
|
+
var filterTrimmed = filter.trim();
|
|
3693
|
+
if (lodashEs.isEmpty(filterTrimmed)) {
|
|
3694
|
+
triggerSave().then();
|
|
3695
|
+
return;
|
|
3696
|
+
}
|
|
3660
3697
|
var preFilterOptions = JSON.stringify(options);
|
|
3661
|
-
onSelectFilter(
|
|
3698
|
+
onSelectFilter(filterTrimmed, options);
|
|
3662
3699
|
// Detect if options list changed and update
|
|
3663
3700
|
if (preFilterOptions === JSON.stringify(options))
|
|
3664
3701
|
return;
|
|
3665
3702
|
setOptions(__spreadArray([], options, true));
|
|
3666
3703
|
setFilter("");
|
|
3667
|
-
}, [filter, onSelectFilter, options, setFilter, setOptions]);
|
|
3704
|
+
}, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
|
|
3705
|
+
var handleKeyDown = React.useCallback(function (e) {
|
|
3706
|
+
if (e.key === "Enter") {
|
|
3707
|
+
enterHasBeenPressed.current = true;
|
|
3708
|
+
}
|
|
3709
|
+
}, []);
|
|
3668
3710
|
var handleKeyUp = React.useCallback(function (e) {
|
|
3669
3711
|
if (e.key === "Enter") {
|
|
3670
3712
|
e.stopPropagation();
|
|
3671
3713
|
e.preventDefault();
|
|
3672
3714
|
if (e.ctrlKey)
|
|
3673
3715
|
toggleSelectAllVisible();
|
|
3674
|
-
else if (
|
|
3675
|
-
|
|
3716
|
+
else if (enterHasBeenPressed.current) {
|
|
3717
|
+
var filterTrimmed = filter.trim();
|
|
3718
|
+
if (lodashEs.isEmpty(filterTrimmed)) {
|
|
3719
|
+
triggerSave().then();
|
|
3720
|
+
return;
|
|
3721
|
+
}
|
|
3722
|
+
onSelectFilter && addCustomFilterValue();
|
|
3723
|
+
}
|
|
3724
|
+
lastKeyWasEnter.current = true;
|
|
3725
|
+
}
|
|
3726
|
+
else if (e.key === "Control") {
|
|
3727
|
+
lastKeyWasEnter.current && setFilter("");
|
|
3728
|
+
lastKeyWasEnter.current = false;
|
|
3729
|
+
}
|
|
3730
|
+
else {
|
|
3731
|
+
lastKeyWasEnter.current = false;
|
|
3676
3732
|
}
|
|
3677
|
-
}, [addCustomFilterValue, onSelectFilter, toggleSelectAllVisible]);
|
|
3678
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxRuntime.jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Placeholder", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !lodashEs.toPairs(headerGroups).some(function (_a) {
|
|
3733
|
+
}, [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave]);
|
|
3734
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_) { return (jsxRuntime.jsxs("div", __assign({ style: { width: "100%" }, className: "GridFormMultiSelect-filter" }, { children: [jsxRuntime.jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : "Placeholder", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: function (e) { return setFilter(e.target.value); }, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsxRuntime.jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] }))); } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter"), headerGroups && !lodashEs.toPairs(headerGroups).some(function (_a) {
|
|
3679
3735
|
_a[0]; var options = _a[1];
|
|
3680
3736
|
return !lodashEs.isEmpty(options);
|
|
3681
|
-
}) && (jsxRuntime.jsx("div", __assign({ className: "szh-menu__item" }, { children: "
|
|
3737
|
+
}) && (jsxRuntime.jsx("div", __assign({ className: "szh-menu__item GridPopoverEditDropDown-noOptions" }, { children: "No Options" })))] }));
|
|
3682
3738
|
};
|
|
3683
3739
|
var MenuRadioItem = function (props) {
|
|
3684
3740
|
var _a, _b;
|
|
@@ -4047,8 +4103,8 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
|
|
|
4047
4103
|
|
|
4048
4104
|
var GridPopoverEditDropDown = function (colDef, props) {
|
|
4049
4105
|
return GridCell(colDef, __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({
|
|
4050
|
-
// Defaults to
|
|
4051
|
-
className: "GridPopoverEditDropDown-
|
|
4106
|
+
// Defaults to large size container
|
|
4107
|
+
className: "GridPopoverEditDropDown-containerLarge" }, props.editorParams) }));
|
|
4052
4108
|
};
|
|
4053
4109
|
|
|
4054
4110
|
var GridFormMessage = function (props) {
|