@progress/kendo-react-data-tools 12.3.0-develop.8 → 12.3.0-develop.9
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/cdn/js/kendo-react-datatools.js +1 -1
- package/filter/Filter.js +1 -1
- package/filter/Filter.mjs +157 -87
- package/filter/Group.js +1 -1
- package/filter/Group.mjs +75 -59
- package/filter/filters/DateFilter.js +1 -1
- package/filter/filters/DateFilter.mjs +4 -12
- package/filter/filters/EnumFilter.js +1 -1
- package/filter/filters/EnumFilter.mjs +1 -2
- package/filter/filters/NumericFilter.js +1 -1
- package/filter/filters/NumericFilter.mjs +1 -2
- package/filter/filters/TextFilter.js +1 -1
- package/filter/filters/TextFilter.mjs +1 -9
- package/index.d.mts +15 -0
- package/index.d.ts +15 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
package/filter/Filter.mjs
CHANGED
|
@@ -6,94 +6,154 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import { Group as
|
|
13
|
-
import { packageMetadata as
|
|
14
|
-
const
|
|
15
|
-
//
|
|
16
|
-
andButton: "button.k-group-start",
|
|
17
|
-
orButton: "button.k-group-end",
|
|
18
|
-
addFilterButton: 'button[title="Add Expression"]',
|
|
19
|
-
addGroupButton: 'button[title="Add Group"]',
|
|
20
|
-
removeButton: 'button[title="Remove"]',
|
|
21
|
-
// Expression selectors
|
|
9
|
+
import * as f from "react";
|
|
10
|
+
import g from "prop-types";
|
|
11
|
+
import { disableNavigatableContainer as v, focusFirstFocusableChild as y, validatePackage as x, getLicenseMessage as F, Navigation as C, getActiveElement as b, enableNavigatableContainer as A, classNames as T, WatermarkOverlay as G } from "@progress/kendo-react-common";
|
|
12
|
+
import { Group as L } from "./Group.mjs";
|
|
13
|
+
import { packageMetadata as W } from "../package-metadata.mjs";
|
|
14
|
+
const s = {
|
|
15
|
+
// Wrapper elements for filter field/operator/value (used in Expression rows)
|
|
22
16
|
filterFieldWrapper: ".k-filter-field",
|
|
23
17
|
filterOperatorWrapper: ".k-filter-operator",
|
|
24
18
|
filterValueWrapper: ".k-filter-value",
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
// Toolbar container elements
|
|
20
|
+
filterToolbar: ".k-filter-toolbar",
|
|
21
|
+
toolbarElement: ".k-toolbar",
|
|
22
|
+
groupToolbar: ".k-filter-group-main > .k-filter-toolbar > .k-toolbar",
|
|
23
|
+
subGroupToolbar: ".k-filter-lines .k-filter-toolbar > .k-toolbar"
|
|
24
|
+
}, k = class k extends f.Component {
|
|
25
|
+
constructor(r) {
|
|
26
|
+
super(r), this.wrapperRef = f.createRef(), this.showLicenseWatermark = !1, this.onFilterChange = (i) => {
|
|
27
|
+
const o = {
|
|
28
|
+
filter: i.nextFilter,
|
|
29
|
+
syntheticEvent: i.syntheticEvent,
|
|
30
|
+
nativeEvent: i.nativeEvent,
|
|
33
31
|
target: this
|
|
34
32
|
};
|
|
35
|
-
this.props.onChange.call(void 0,
|
|
36
|
-
}, this.onGroupRemove = (
|
|
37
|
-
const
|
|
33
|
+
this.props.onChange.call(void 0, o);
|
|
34
|
+
}, this.onGroupRemove = (i) => {
|
|
35
|
+
const o = {
|
|
38
36
|
filter: { ...this.props.value, filters: [] },
|
|
39
|
-
syntheticEvent:
|
|
40
|
-
nativeEvent:
|
|
37
|
+
syntheticEvent: i.syntheticEvent,
|
|
38
|
+
nativeEvent: i.nativeEvent,
|
|
41
39
|
target: this
|
|
42
40
|
};
|
|
43
|
-
this.props.onChange.call(void 0,
|
|
44
|
-
}, this.
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
this.props.onChange.call(void 0, o);
|
|
42
|
+
}, this.navigateVertical = (i, o, e) => {
|
|
43
|
+
if (!e)
|
|
44
|
+
return;
|
|
45
|
+
const t = e.classList.contains("k-filter-field") || e.classList.contains("k-filter-operator") || e.classList.contains("k-filter-value"), a = e.closest(s.toolbarElement), n = Array.from(o.getElementsByClassName("k-toolbar")), l = n.findIndex((h) => h === a), u = i === "up" ? l - 1 : l + 1, p = n[u];
|
|
46
|
+
if (!o.getElementsByClassName("k-filter-lines")[0] || !p)
|
|
47
|
+
return;
|
|
48
|
+
a && t && v(a, [
|
|
49
|
+
s.filterFieldWrapper,
|
|
50
|
+
s.filterOperatorWrapper,
|
|
51
|
+
s.filterValueWrapper
|
|
52
|
+
]), p.querySelectorAll(
|
|
53
|
+
`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`
|
|
54
|
+
).forEach((h, m) => {
|
|
55
|
+
h.tabIndex = m === 0 ? 0 : -1;
|
|
56
|
+
});
|
|
57
|
+
const d = p.querySelector(
|
|
58
|
+
`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`
|
|
59
|
+
);
|
|
60
|
+
d ? d.focus() : y(p);
|
|
61
|
+
}, this.onKeyDown = (i) => {
|
|
62
|
+
var o;
|
|
63
|
+
(o = this.navigation) == null || o.triggerKeyboardEvent(i);
|
|
64
|
+
}, this.showLicenseWatermark = !x(W, { component: "Filter" }), this.licenseMessage = F(W);
|
|
48
65
|
}
|
|
49
66
|
/**
|
|
50
67
|
* @hidden
|
|
51
68
|
*/
|
|
52
69
|
componentDidMount() {
|
|
53
|
-
this.wrapperRef && (this.navigation = new
|
|
70
|
+
this.wrapperRef && (this.navigation = new C({
|
|
54
71
|
tabIndex: 0,
|
|
55
72
|
root: this.wrapperRef,
|
|
56
73
|
selectors: [".k-filter"],
|
|
57
74
|
keyboardEvents: {
|
|
58
75
|
keydown: {
|
|
59
|
-
Tab: (
|
|
60
|
-
const e =
|
|
61
|
-
|
|
76
|
+
Tab: (r, i, o) => {
|
|
77
|
+
const e = r.getElementsByClassName(
|
|
78
|
+
"k-filter-lines"
|
|
79
|
+
)[0];
|
|
80
|
+
e && v(e);
|
|
62
81
|
},
|
|
63
|
-
|
|
64
|
-
t.
|
|
65
|
-
|
|
66
|
-
|
|
82
|
+
Escape: (r, i, o) => {
|
|
83
|
+
const e = b(document) || null, t = e == null ? void 0 : e.closest(s.toolbarElement), a = r.querySelector(s.groupToolbar), n = t == null ? void 0 : t.querySelector(".k-toolbar-button-group"), l = t === a || !!n, { isTextInput: u, isCombobox: p } = this.classifyActive(e);
|
|
84
|
+
if (!l && t && e !== t)
|
|
85
|
+
if (o.preventDefault(), v(t, [
|
|
86
|
+
s.filterFieldWrapper,
|
|
87
|
+
s.filterOperatorWrapper,
|
|
88
|
+
s.filterValueWrapper
|
|
89
|
+
]), u || p) {
|
|
90
|
+
const c = e == null ? void 0 : e.closest(
|
|
91
|
+
`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`
|
|
92
|
+
);
|
|
93
|
+
c && c.focus();
|
|
94
|
+
} else
|
|
95
|
+
y(t);
|
|
67
96
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
a.filterValueWrapper
|
|
75
|
-
]), h(c));
|
|
97
|
+
ArrowUp: (r, i, o) => {
|
|
98
|
+
const e = b(document) || null;
|
|
99
|
+
if (!e)
|
|
100
|
+
return;
|
|
101
|
+
const { isPopup: t, isTextInput: a, isCombobox: n, isWrapper: l } = this.classifyActive(e);
|
|
102
|
+
(t || a || n) && !l || (o.preventDefault(), this.navigateVertical("up", r, e));
|
|
76
103
|
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
104
|
+
ArrowDown: (r, i, o) => {
|
|
105
|
+
const e = b(document) || null;
|
|
106
|
+
if (!e)
|
|
107
|
+
return;
|
|
108
|
+
const { isPopup: t, isTextInput: a, isCombobox: n, isWrapper: l } = this.classifyActive(e);
|
|
109
|
+
(t || a || n) && !l || (o.preventDefault(), this.navigateVertical("down", r, e));
|
|
81
110
|
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
111
|
+
ArrowRight: (r, i, o) => {
|
|
112
|
+
const e = b(document) || null;
|
|
113
|
+
if (!e)
|
|
114
|
+
return;
|
|
115
|
+
const { isTextInput: t } = this.classifyActive(e);
|
|
116
|
+
if (t)
|
|
117
|
+
return;
|
|
118
|
+
o.preventDefault();
|
|
119
|
+
const a = e == null ? void 0 : e.nextElementSibling, n = e == null ? void 0 : e.closest(s.toolbarElement), l = r.querySelector(s.groupToolbar), u = n == null ? void 0 : n.querySelector(".k-toolbar-button-group");
|
|
120
|
+
e && a && !(n === l || !!u) && a.focus();
|
|
86
121
|
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
122
|
+
ArrowLeft: (r, i, o) => {
|
|
123
|
+
const e = b(document) || null;
|
|
124
|
+
if (!e)
|
|
125
|
+
return;
|
|
126
|
+
const { isTextInput: t } = this.classifyActive(e);
|
|
127
|
+
if (t)
|
|
128
|
+
return;
|
|
129
|
+
o.preventDefault();
|
|
130
|
+
const a = e == null ? void 0 : e.previousElementSibling, n = e == null ? void 0 : e.closest(s.toolbarElement), l = r.querySelector(s.groupToolbar), u = n == null ? void 0 : n.querySelector(".k-toolbar-button-group");
|
|
131
|
+
e && a && !(n === l || !!u) && a.focus();
|
|
132
|
+
},
|
|
133
|
+
Enter: (r, i, o) => {
|
|
134
|
+
var p;
|
|
135
|
+
o.preventDefault();
|
|
136
|
+
const e = b(document) || null;
|
|
137
|
+
if (!e)
|
|
138
|
+
return;
|
|
139
|
+
const t = e == null ? void 0 : e.closest(s.toolbarElement), a = r.getElementsByClassName("k-toolbar"), n = r.querySelector(s.groupToolbar), l = t == null ? void 0 : t.querySelector(
|
|
140
|
+
".k-toolbar-button-group"
|
|
141
|
+
);
|
|
142
|
+
if (t === n || !!l) {
|
|
143
|
+
const c = t == null ? void 0 : t.lastElementChild;
|
|
144
|
+
c && e === c && c.click();
|
|
145
|
+
return;
|
|
93
146
|
}
|
|
94
|
-
if (
|
|
95
|
-
const
|
|
96
|
-
|
|
147
|
+
if (t && e) {
|
|
148
|
+
const c = e.classList.contains("k-filter-field") || e.classList.contains("k-filter-operator") || e.classList.contains("k-filter-value"), w = t.querySelector('button[title="Remove"]');
|
|
149
|
+
if (e === w) {
|
|
150
|
+
const h = Array.from(a).findIndex((R) => R === t) - 1, m = (p = a[h]) == null ? void 0 : p.lastElementChild;
|
|
151
|
+
e.click(), m && m.focus();
|
|
152
|
+
} else c && (A(t, [
|
|
153
|
+
s.filterFieldWrapper,
|
|
154
|
+
s.filterOperatorWrapper,
|
|
155
|
+
s.filterValueWrapper
|
|
156
|
+
]), y(e));
|
|
97
157
|
}
|
|
98
158
|
}
|
|
99
159
|
}
|
|
@@ -104,16 +164,16 @@ const a = {
|
|
|
104
164
|
* @hidden
|
|
105
165
|
*/
|
|
106
166
|
render() {
|
|
107
|
-
return /* @__PURE__ */
|
|
167
|
+
return /* @__PURE__ */ f.createElement(
|
|
108
168
|
"div",
|
|
109
169
|
{
|
|
110
|
-
className:
|
|
170
|
+
className: T("k-filter", this.props.className),
|
|
111
171
|
style: this.props.style,
|
|
112
172
|
ref: this.wrapperRef,
|
|
113
173
|
onKeyDown: this.onKeyDown
|
|
114
174
|
},
|
|
115
|
-
/* @__PURE__ */
|
|
116
|
-
|
|
175
|
+
/* @__PURE__ */ f.createElement("ul", { role: "tree", className: "k-filter-container", "aria-label": this.props.ariaLabel }, /* @__PURE__ */ f.createElement("li", { role: "treeitem", "aria-selected": !1, className: "k-filter-group-main" }, /* @__PURE__ */ f.createElement(
|
|
176
|
+
L,
|
|
117
177
|
{
|
|
118
178
|
filter: this.props.value,
|
|
119
179
|
fields: this.props.fields,
|
|
@@ -124,30 +184,40 @@ const a = {
|
|
|
124
184
|
defaultGroupFilter: this.props.defaultGroupFilter || { logic: "and", filters: [] }
|
|
125
185
|
}
|
|
126
186
|
))),
|
|
127
|
-
this.showLicenseWatermark && /* @__PURE__ */
|
|
187
|
+
this.showLicenseWatermark && /* @__PURE__ */ f.createElement(G, { message: this.licenseMessage })
|
|
128
188
|
);
|
|
129
189
|
}
|
|
190
|
+
/**
|
|
191
|
+
* Classifies the currently active element for navigation decisions.
|
|
192
|
+
*/
|
|
193
|
+
classifyActive(r) {
|
|
194
|
+
var n, l;
|
|
195
|
+
if (!r)
|
|
196
|
+
return { isTextInput: !1, isCombobox: !1, isWrapper: !1, isPopup: !1 };
|
|
197
|
+
const i = r.tagName === "INPUT" || r.tagName === "TEXTAREA", o = ((n = r.getAttribute) == null ? void 0 : n.call(r, "role")) === "combobox", e = r.classList, t = !!e && (e.contains("k-filter-field") || e.contains("k-filter-operator") || e.contains("k-filter-value")), a = !!((l = r.closest) != null && l.call(r, ".k-animation-container, .k-popup"));
|
|
198
|
+
return { isTextInput: i, isCombobox: o, isWrapper: t, isPopup: a };
|
|
199
|
+
}
|
|
130
200
|
};
|
|
131
|
-
|
|
132
|
-
className:
|
|
133
|
-
style:
|
|
134
|
-
fields: function(
|
|
135
|
-
const
|
|
136
|
-
if (
|
|
137
|
-
return new Error(`Property '${
|
|
138
|
-
if (Array.isArray(
|
|
139
|
-
if (Object.keys(
|
|
140
|
-
return new Error(`Property '${
|
|
141
|
-
} else return new Error(`Property '${
|
|
201
|
+
k.propTypes = {
|
|
202
|
+
className: g.string,
|
|
203
|
+
style: g.object,
|
|
204
|
+
fields: function(r, i) {
|
|
205
|
+
const o = r[i];
|
|
206
|
+
if (o === void 0)
|
|
207
|
+
return new Error(`Property '${i}' is missing.`);
|
|
208
|
+
if (Array.isArray(o)) {
|
|
209
|
+
if (Object.keys(o.reduce((e, t) => ({ ...e, [t.name]: 1 }), {})).length !== o.length)
|
|
210
|
+
return new Error(`Property '${i}' needs to contain objects with unique 'name' field.`);
|
|
211
|
+
} else return new Error(`Property '${i}' needs to be Array<FieldSettings>.`);
|
|
142
212
|
return null;
|
|
143
213
|
},
|
|
144
|
-
ariaLabelGroup:
|
|
145
|
-
ariaLabelExpression:
|
|
146
|
-
value:
|
|
147
|
-
onChange:
|
|
214
|
+
ariaLabelGroup: g.string,
|
|
215
|
+
ariaLabelExpression: g.string,
|
|
216
|
+
value: g.object.isRequired,
|
|
217
|
+
onChange: g.func.isRequired
|
|
148
218
|
};
|
|
149
|
-
let
|
|
219
|
+
let E = k;
|
|
150
220
|
export {
|
|
151
|
-
|
|
152
|
-
|
|
221
|
+
E as Filter,
|
|
222
|
+
s as selectors
|
|
153
223
|
};
|
package/filter/Group.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),l=require("prop-types"),h=require("@progress/kendo-data-query"),c=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-react-intl"),d=require("@progress/kendo-svg-icons"),m=require("./Expression.js"),E=require("./operators.js"),i=require("../messages/index.js");function b(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>p[t]})}}return e.default=p,Object.freeze(e)}const o=b(v),s=class s extends o.Component{constructor(){super(...arguments),this.getFilterKey=(e,t)=>{let r=s.filterIdMap.get(e);return r||(h.isCompositeFilterDescriptor(e)?r=`group-${e.logic}-${t}-${s.filterIdCounter++}`:r=`expr-${e.field}-${e.operator}-${t}-${s.filterIdCounter++}`,s.filterIdMap.set(e,r)),r},this.onGroupRemove=e=>{const t={filter:this.props.filter,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onRemove.call(void 0,t)},this.onAddExpression=e=>{const t=this.props.filter,r=this.props.fields[0],n={field:r.name,operator:r.operators[0].operator};n.value=E.stringOperator(n.operator)?"":null;const a={nextFilter:{...t,filters:[...t.filters,n]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,a)},this.onAddGroup=e=>{const t=this.props.filter,r={...this.props.defaultGroupFilter},n={nextFilter:{...t,filters:[...t.filters,r]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,n)},this.onLogicAnd=e=>this.changeLogic("and",e),this.onLogicOr=e=>this.changeLogic("or",e),this.changeLogic=(e,t)=>{const r=this.props.filter;if(r.logic!==e){const n={nextFilter:{...r,logic:e},prevFilter:r,target:this,syntheticEvent:t,nativeEvent:t.nativeEvent};this.props.onChange.call(void 0,n)}},this.replaceFilter=(e,t)=>{const r=this.props.filter,n=r.filters.map(a=>{if(a===e){const g=s.filterIdMap.get(e);return g&&s.filterIdMap.set(t,g),t}return a});return{...r,filters:n}},this.onChange=e=>{const r={nextFilter:this.replaceFilter(e.prevFilter,e.nextFilter),prevFilter:this.props.filter,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,r)},this.onRemove=e=>{const t=this.props.filter,r=t.filters.filter(a=>a!==e.filter),n={nextFilter:{...t,filters:r},prevFilter:t,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,n)}}render(){const e=f.provideLocalizationService(this),{fields:t,filter:r,ariaLabel:n=e.toLanguageString(i.filterGroupAriaLabel,i.messages[i.filterGroupAriaLabel])}=this.props;return o.createElement(o.Fragment,null,o.createElement("div",{className:"k-filter-toolbar"},o.createElement(c.Toolbar,{role:"toolbar",ariaLabel:n},o.createElement(c.ButtonGroup,{className:"k-toolbar-button-group k-button-group-solid"},o.createElement(c.Button,{togglable:!0,onClick:this.onLogicAnd,selected:r.logic==="and",type:"button"},e.toLanguageString(i.filterAndLogic,i.messages[i.filterAndLogic])),o.createElement(c.Button,{togglable:!0,onClick:this.onLogicOr,selected:r.logic==="or",type:"button"},e.toLanguageString(i.filterOrLogic,i.messages[i.filterOrLogic]))),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterAddExpression,i.messages[i.filterAddExpression]),icon:"filter-add-expression",svgIcon:d.filterAddExpressionIcon,type:"button",onClick:this.onAddExpression},e.toLanguageString(i.filterAddExpression,i.messages[i.filterAddExpression])),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterAddGroup,i.messages[i.filterAddGroup]),icon:"filter-add-group",svgIcon:d.filterAddGroupIcon,type:"button",onClick:this.onAddGroup},e.toLanguageString(i.filterAddGroup,i.messages[i.filterAddGroup])),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterClose,i.messages[i.filterClose]),icon:"x",svgIcon:d.xIcon,fillMode:"flat",type:"button",onClick:this.onGroupRemove}))),r.filters.length>0&&o.createElement("ul",{role:"group",className:"k-filter-lines"},r.filters.map((a,g)=>o.createElement("li",{role:"treeitem","aria-selected":!1,key:this.getFilterKey(a,g),className:"k-filter-item"},h.isCompositeFilterDescriptor(a)?o.createElement(s,{filter:a,fields:t,onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.props.defaultGroupFilter,ariaLabel:this.props.ariaLabel,ariaLabelExpression:this.props.ariaLabelExpression}):o.createElement(m.Expression,{filter:a,fields:t,ariaLabel:this.props.ariaLabelExpression,onChange:this.onChange,onRemove:this.onRemove})))))}};s.propTypes={filter:l.object.isRequired,fields:l.array.isRequired,ariaLabel:l.string,ariaLabelExpression:l.string,onChange:l.func.isRequired,onRemove:l.func.isRequired,defaultGroupFilter:l.object.isRequired},s.filterIdCounter=0,s.filterIdMap=new WeakMap;let u=s;f.registerForLocalization(u);exports.Group=u;
|
package/filter/Group.mjs
CHANGED
|
@@ -8,16 +8,19 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as r from "react";
|
|
10
10
|
import l from "prop-types";
|
|
11
|
-
import { isCompositeFilterDescriptor as
|
|
12
|
-
import { Toolbar as b, ButtonGroup as L, Button as
|
|
13
|
-
import { provideLocalizationService as F, registerForLocalization as
|
|
14
|
-
import { filterAddExpressionIcon as
|
|
15
|
-
import { Expression as
|
|
16
|
-
import { stringOperator as
|
|
17
|
-
import { filterGroupAriaLabel as
|
|
18
|
-
const
|
|
11
|
+
import { isCompositeFilterDescriptor as d } from "@progress/kendo-data-query";
|
|
12
|
+
import { Toolbar as b, ButtonGroup as L, Button as p } from "@progress/kendo-react-buttons";
|
|
13
|
+
import { provideLocalizationService as F, registerForLocalization as C } from "@progress/kendo-react-intl";
|
|
14
|
+
import { filterAddExpressionIcon as x, filterAddGroupIcon as y, xIcon as k } from "@progress/kendo-svg-icons";
|
|
15
|
+
import { Expression as I } from "./Expression.mjs";
|
|
16
|
+
import { stringOperator as R } from "./operators.mjs";
|
|
17
|
+
import { filterGroupAriaLabel as u, messages as a, filterAndLogic as m, filterOrLogic as v, filterAddExpression as g, filterAddGroup as h, filterClose as E } from "../messages/index.mjs";
|
|
18
|
+
const n = class n extends r.Component {
|
|
19
19
|
constructor() {
|
|
20
|
-
super(...arguments), this.
|
|
20
|
+
super(...arguments), this.getFilterKey = (t, e) => {
|
|
21
|
+
let i = n.filterIdMap.get(t);
|
|
22
|
+
return i || (d(t) ? i = `group-${t.logic}-${e}-${n.filterIdCounter++}` : i = `expr-${t.field}-${t.operator}-${e}-${n.filterIdCounter++}`, n.filterIdMap.set(t, i)), i;
|
|
23
|
+
}, this.onGroupRemove = (t) => {
|
|
21
24
|
const e = {
|
|
22
25
|
filter: this.props.filter,
|
|
23
26
|
target: this,
|
|
@@ -27,8 +30,8 @@ const g = class g extends r.Component {
|
|
|
27
30
|
this.props.onRemove.call(void 0, e);
|
|
28
31
|
}, this.onAddExpression = (t) => {
|
|
29
32
|
const e = this.props.filter, i = this.props.fields[0], o = { field: i.name, operator: i.operators[0].operator };
|
|
30
|
-
o.value =
|
|
31
|
-
const
|
|
33
|
+
o.value = R(o.operator) ? "" : null;
|
|
34
|
+
const s = {
|
|
32
35
|
nextFilter: {
|
|
33
36
|
...e,
|
|
34
37
|
filters: [...e.filters, o]
|
|
@@ -38,16 +41,16 @@ const g = class g extends r.Component {
|
|
|
38
41
|
syntheticEvent: t,
|
|
39
42
|
nativeEvent: t.nativeEvent
|
|
40
43
|
};
|
|
41
|
-
this.props.onChange.call(void 0,
|
|
44
|
+
this.props.onChange.call(void 0, s);
|
|
42
45
|
}, this.onAddGroup = (t) => {
|
|
43
|
-
const e = this.props.filter, i = {
|
|
44
|
-
nextFilter: { ...e, filters: [...e.filters,
|
|
46
|
+
const e = this.props.filter, i = { ...this.props.defaultGroupFilter }, o = {
|
|
47
|
+
nextFilter: { ...e, filters: [...e.filters, i] },
|
|
45
48
|
prevFilter: e,
|
|
46
49
|
target: this,
|
|
47
50
|
syntheticEvent: t,
|
|
48
51
|
nativeEvent: t.nativeEvent
|
|
49
52
|
};
|
|
50
|
-
this.props.onChange.call(void 0,
|
|
53
|
+
this.props.onChange.call(void 0, o);
|
|
51
54
|
}, this.onLogicAnd = (t) => this.changeLogic("and", t), this.onLogicOr = (t) => this.changeLogic("or", t), this.changeLogic = (t, e) => {
|
|
52
55
|
const i = this.props.filter;
|
|
53
56
|
if (i.logic !== t) {
|
|
@@ -61,9 +64,13 @@ const g = class g extends r.Component {
|
|
|
61
64
|
this.props.onChange.call(void 0, o);
|
|
62
65
|
}
|
|
63
66
|
}, this.replaceFilter = (t, e) => {
|
|
64
|
-
const i = this.props.filter, o = i.filters.map(
|
|
65
|
-
(
|
|
66
|
-
|
|
67
|
+
const i = this.props.filter, o = i.filters.map((s) => {
|
|
68
|
+
if (s === t) {
|
|
69
|
+
const c = n.filterIdMap.get(t);
|
|
70
|
+
return c && n.filterIdMap.set(e, c), e;
|
|
71
|
+
}
|
|
72
|
+
return s;
|
|
73
|
+
});
|
|
67
74
|
return { ...i, filters: o };
|
|
68
75
|
}, this.onChange = (t) => {
|
|
69
76
|
const i = {
|
|
@@ -75,7 +82,7 @@ const g = class g extends r.Component {
|
|
|
75
82
|
};
|
|
76
83
|
this.props.onChange.call(void 0, i);
|
|
77
84
|
}, this.onRemove = (t) => {
|
|
78
|
-
const e = this.props.filter, i = e.filters.filter((
|
|
85
|
+
const e = this.props.filter, i = e.filters.filter((s) => s !== t.filter), o = {
|
|
79
86
|
nextFilter: { ...e, filters: i },
|
|
80
87
|
prevFilter: e,
|
|
81
88
|
syntheticEvent: t.syntheticEvent,
|
|
@@ -89,83 +96,92 @@ const g = class g extends r.Component {
|
|
|
89
96
|
const t = F(this), {
|
|
90
97
|
fields: e,
|
|
91
98
|
filter: i,
|
|
92
|
-
ariaLabel: o = t.toLanguageString(
|
|
99
|
+
ariaLabel: o = t.toLanguageString(u, a[u])
|
|
93
100
|
} = this.props;
|
|
94
101
|
return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-filter-toolbar" }, /* @__PURE__ */ r.createElement(b, { role: "toolbar", ariaLabel: o }, /* @__PURE__ */ r.createElement(L, { className: "k-toolbar-button-group k-button-group-solid" }, /* @__PURE__ */ r.createElement(
|
|
95
|
-
|
|
102
|
+
p,
|
|
96
103
|
{
|
|
97
104
|
togglable: !0,
|
|
98
105
|
onClick: this.onLogicAnd,
|
|
99
106
|
selected: i.logic === "and",
|
|
100
107
|
type: "button"
|
|
101
108
|
},
|
|
102
|
-
t.toLanguageString(
|
|
109
|
+
t.toLanguageString(m, a[m])
|
|
103
110
|
), /* @__PURE__ */ r.createElement(
|
|
104
|
-
|
|
111
|
+
p,
|
|
105
112
|
{
|
|
106
113
|
togglable: !0,
|
|
107
114
|
onClick: this.onLogicOr,
|
|
108
115
|
selected: i.logic === "or",
|
|
109
116
|
type: "button"
|
|
110
117
|
},
|
|
111
|
-
t.toLanguageString(
|
|
118
|
+
t.toLanguageString(v, a[v])
|
|
112
119
|
)), /* @__PURE__ */ r.createElement(
|
|
113
|
-
|
|
120
|
+
p,
|
|
114
121
|
{
|
|
115
122
|
className: "k-toolbar-button",
|
|
116
|
-
title: t.toLanguageString(
|
|
123
|
+
title: t.toLanguageString(g, a[g]),
|
|
117
124
|
icon: "filter-add-expression",
|
|
118
|
-
svgIcon:
|
|
125
|
+
svgIcon: x,
|
|
119
126
|
type: "button",
|
|
120
127
|
onClick: this.onAddExpression
|
|
121
128
|
},
|
|
122
|
-
t.toLanguageString(
|
|
129
|
+
t.toLanguageString(g, a[g])
|
|
123
130
|
), /* @__PURE__ */ r.createElement(
|
|
124
|
-
|
|
131
|
+
p,
|
|
125
132
|
{
|
|
126
133
|
className: "k-toolbar-button",
|
|
127
|
-
title: t.toLanguageString(
|
|
134
|
+
title: t.toLanguageString(h, a[h]),
|
|
128
135
|
icon: "filter-add-group",
|
|
129
136
|
svgIcon: y,
|
|
130
137
|
type: "button",
|
|
131
138
|
onClick: this.onAddGroup
|
|
132
139
|
},
|
|
133
|
-
t.toLanguageString(
|
|
140
|
+
t.toLanguageString(h, a[h])
|
|
134
141
|
), /* @__PURE__ */ r.createElement(
|
|
135
|
-
|
|
142
|
+
p,
|
|
136
143
|
{
|
|
137
144
|
className: "k-toolbar-button",
|
|
138
|
-
title: t.toLanguageString(
|
|
145
|
+
title: t.toLanguageString(E, a[E]),
|
|
139
146
|
icon: "x",
|
|
140
|
-
svgIcon:
|
|
147
|
+
svgIcon: k,
|
|
141
148
|
fillMode: "flat",
|
|
142
149
|
type: "button",
|
|
143
150
|
onClick: this.onGroupRemove
|
|
144
151
|
}
|
|
145
|
-
))), i.filters.length > 0 && /* @__PURE__ */ r.createElement("ul", { role: "group", className: "k-filter-lines" }, i.filters.map((
|
|
146
|
-
|
|
147
|
-
{
|
|
148
|
-
filter: n,
|
|
149
|
-
fields: e,
|
|
150
|
-
onChange: this.onChange,
|
|
151
|
-
onRemove: this.onRemove,
|
|
152
|
-
defaultGroupFilter: this.props.defaultGroupFilter,
|
|
153
|
-
ariaLabel: this.props.ariaLabel,
|
|
154
|
-
ariaLabelExpression: this.props.ariaLabelExpression
|
|
155
|
-
}
|
|
156
|
-
) : /* @__PURE__ */ r.createElement(
|
|
157
|
-
k,
|
|
152
|
+
))), i.filters.length > 0 && /* @__PURE__ */ r.createElement("ul", { role: "group", className: "k-filter-lines" }, i.filters.map((s, c) => /* @__PURE__ */ r.createElement(
|
|
153
|
+
"li",
|
|
158
154
|
{
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
155
|
+
role: "treeitem",
|
|
156
|
+
"aria-selected": !1,
|
|
157
|
+
key: this.getFilterKey(s, c),
|
|
158
|
+
className: "k-filter-item"
|
|
159
|
+
},
|
|
160
|
+
d(s) ? /* @__PURE__ */ r.createElement(
|
|
161
|
+
n,
|
|
162
|
+
{
|
|
163
|
+
filter: s,
|
|
164
|
+
fields: e,
|
|
165
|
+
onChange: this.onChange,
|
|
166
|
+
onRemove: this.onRemove,
|
|
167
|
+
defaultGroupFilter: this.props.defaultGroupFilter,
|
|
168
|
+
ariaLabel: this.props.ariaLabel,
|
|
169
|
+
ariaLabelExpression: this.props.ariaLabelExpression
|
|
170
|
+
}
|
|
171
|
+
) : /* @__PURE__ */ r.createElement(
|
|
172
|
+
I,
|
|
173
|
+
{
|
|
174
|
+
filter: s,
|
|
175
|
+
fields: e,
|
|
176
|
+
ariaLabel: this.props.ariaLabelExpression,
|
|
177
|
+
onChange: this.onChange,
|
|
178
|
+
onRemove: this.onRemove
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
))));
|
|
166
182
|
}
|
|
167
183
|
};
|
|
168
|
-
|
|
184
|
+
n.propTypes = {
|
|
169
185
|
filter: l.object.isRequired,
|
|
170
186
|
fields: l.array.isRequired,
|
|
171
187
|
ariaLabel: l.string,
|
|
@@ -173,9 +189,9 @@ g.propTypes = {
|
|
|
173
189
|
onChange: l.func.isRequired,
|
|
174
190
|
onRemove: l.func.isRequired,
|
|
175
191
|
defaultGroupFilter: l.object.isRequired
|
|
176
|
-
};
|
|
177
|
-
let
|
|
178
|
-
|
|
192
|
+
}, n.filterIdCounter = 0, n.filterIdMap = /* @__PURE__ */ new WeakMap();
|
|
193
|
+
let f = n;
|
|
194
|
+
C(f);
|
|
179
195
|
export {
|
|
180
|
-
|
|
196
|
+
f as Group
|
|
181
197
|
};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-dateinputs");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(c),i=class i extends s.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=this.props.filter;return s.createElement(l.DatePicker,{value:e.value||null,onChange:this.onChange,ariaLabel:this.props.ariaLabel
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("prop-types"),l=require("@progress/kendo-react-dateinputs");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(c),i=class i extends s.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value}})}}render(){const e=this.props.filter;return s.createElement(l.DatePicker,{value:e.value||null,onChange:this.onChange,ariaLabel:this.props.ariaLabel})}};i.propTypes={filter:n.object.isRequired,onFilterChange:n.func.isRequired,ariaLabel:n.string};let a=i;exports.DateFilter=a;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as i from "react";
|
|
10
10
|
import r from "prop-types";
|
|
11
|
-
import { DatePicker as
|
|
11
|
+
import { DatePicker as s } from "@progress/kendo-react-dateinputs";
|
|
12
12
|
const t = class t extends i.Component {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments), this.onChange = (e) => {
|
|
@@ -22,15 +22,7 @@ const t = class t extends i.Component {
|
|
|
22
22
|
*/
|
|
23
23
|
render() {
|
|
24
24
|
const e = this.props.filter;
|
|
25
|
-
return /* @__PURE__ */ i.createElement(
|
|
26
|
-
o,
|
|
27
|
-
{
|
|
28
|
-
value: e.value || null,
|
|
29
|
-
onChange: this.onChange,
|
|
30
|
-
ariaLabel: this.props.ariaLabel,
|
|
31
|
-
tabIndex: -1
|
|
32
|
-
}
|
|
33
|
-
);
|
|
25
|
+
return /* @__PURE__ */ i.createElement(s, { value: e.value || null, onChange: this.onChange, ariaLabel: this.props.ariaLabel });
|
|
34
26
|
}
|
|
35
27
|
};
|
|
36
28
|
t.propTypes = {
|
|
@@ -38,7 +30,7 @@ t.propTypes = {
|
|
|
38
30
|
onFilterChange: r.func.isRequired,
|
|
39
31
|
ariaLabel: r.string
|
|
40
32
|
};
|
|
41
|
-
let
|
|
33
|
+
let o = t;
|
|
42
34
|
export {
|
|
43
|
-
|
|
35
|
+
o as DateFilter
|
|
44
36
|
};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),b=require("@progress/kendo-react-dropdowns"),
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),b=require("@progress/kendo-react-dropdowns"),p=require("@progress/kendo-react-intl"),i=require("../../messages/index.js");function h(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>n[r]})}}return e.default=n,Object.freeze(e)}const u=h(f),l=class l extends u.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onFilterChange.call(void 0,{nextFilter:{...this.props.filter,value:e.value.value}})}}render(){const e=p.provideLocalizationService(this),{filter:r,data:o=[],defaultItem:d,ariaLabel:g=e.toLanguageString(i.filterEnumFilterDropdownAriaLabel,i.messages[i.filterEnumFilterDropdownAriaLabel])}=this.props,c=o.map(a=>({...a,text:e.toLanguageString(a.text,i.messages[a.text]||a.text)}));return u.createElement(b.DropDownList,{value:c.find(a=>a.value===r.value)||null,onChange:this.onChange,defaultItem:d,data:c,textField:"text",ariaLabel:g})}};l.propTypes={filter:t.object.isRequired,onFilterChange:t.func.isRequired,data:t.arrayOf(t.shape({text:t.string,value:t.any})),defaultItem:t.any,ariaLabel:t.string};let s=l;p.registerForLocalization(s);exports.EnumFilter=s;
|