@progress/kendo-react-grid 7.2.4-develop.3 → 7.2.4-develop.4

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.
Files changed (174) hide show
  1. package/Grid.js +8 -0
  2. package/Grid.mjs +1108 -0
  3. package/GridColumn.js +8 -0
  4. package/GridColumn.mjs +53 -0
  5. package/GridNoRecords.js +8 -0
  6. package/GridNoRecords.mjs +25 -0
  7. package/GridToolbar.js +8 -0
  8. package/GridToolbar.mjs +39 -0
  9. package/StatusBar.js +8 -0
  10. package/StatusBar.mjs +53 -0
  11. package/VirtualScroll.js +8 -0
  12. package/VirtualScroll.mjs +128 -0
  13. package/VirtualScrollFixed.js +8 -0
  14. package/VirtualScrollFixed.mjs +86 -0
  15. package/cells/GridCell.js +8 -0
  16. package/cells/GridCell.mjs +57 -0
  17. package/cells/GridDetailCell.js +8 -0
  18. package/cells/GridDetailCell.mjs +30 -0
  19. package/cells/GridDetailHierarchyCell.js +8 -0
  20. package/cells/GridDetailHierarchyCell.mjs +17 -0
  21. package/cells/GridEditCell.js +8 -0
  22. package/cells/GridEditCell.mjs +172 -0
  23. package/cells/GridFilterCell.js +8 -0
  24. package/cells/GridFilterCell.mjs +145 -0
  25. package/cells/GridGroupCell.js +8 -0
  26. package/cells/GridGroupCell.mjs +115 -0
  27. package/cells/GridHierarchyCell.js +8 -0
  28. package/cells/GridHierarchyCell.mjs +84 -0
  29. package/cells/GridSelectionCell.js +8 -0
  30. package/cells/GridSelectionCell.mjs +54 -0
  31. package/columnMenu/GridColumnMenuCheckboxFilter.js +8 -0
  32. package/columnMenu/GridColumnMenuCheckboxFilter.mjs +199 -0
  33. package/columnMenu/GridColumnMenuColumnsList.js +8 -0
  34. package/columnMenu/GridColumnMenuColumnsList.mjs +60 -0
  35. package/columnMenu/GridColumnMenuFilter.js +8 -0
  36. package/columnMenu/GridColumnMenuFilter.mjs +188 -0
  37. package/columnMenu/GridColumnMenuFilterCell.js +8 -0
  38. package/columnMenu/GridColumnMenuFilterCell.mjs +96 -0
  39. package/columnMenu/GridColumnMenuFilterUI.js +8 -0
  40. package/columnMenu/GridColumnMenuFilterUI.mjs +36 -0
  41. package/columnMenu/GridColumnMenuGroup.js +8 -0
  42. package/columnMenu/GridColumnMenuGroup.mjs +50 -0
  43. package/columnMenu/GridColumnMenuItem.js +8 -0
  44. package/columnMenu/GridColumnMenuItem.mjs +22 -0
  45. package/columnMenu/GridColumnMenuItemContent.js +8 -0
  46. package/columnMenu/GridColumnMenuItemContent.mjs +30 -0
  47. package/columnMenu/GridColumnMenuItemGroup.js +8 -0
  48. package/columnMenu/GridColumnMenuItemGroup.mjs +30 -0
  49. package/columnMenu/GridColumnMenuSort.js +8 -0
  50. package/columnMenu/GridColumnMenuSort.mjs +75 -0
  51. package/columnMenu/GridColumnMenuWrapper.js +8 -0
  52. package/columnMenu/GridColumnMenuWrapper.mjs +91 -0
  53. package/constants/index.js +8 -0
  54. package/constants/index.mjs +15 -0
  55. package/dist/cdn/js/kendo-react-grid.js +8 -5
  56. package/drag/ColumnDraggable.js +8 -0
  57. package/drag/ColumnDraggable.mjs +43 -0
  58. package/drag/ColumnResize.js +8 -0
  59. package/drag/ColumnResize.mjs +128 -0
  60. package/drag/CommonDragLogic.js +8 -0
  61. package/drag/CommonDragLogic.mjs +104 -0
  62. package/drag/GroupingIndicator.js +8 -0
  63. package/drag/GroupingIndicator.mjs +91 -0
  64. package/filterCommon.js +8 -0
  65. package/filterCommon.mjs +103 -0
  66. package/footer/Footer.js +8 -0
  67. package/footer/Footer.mjs +76 -0
  68. package/footer/FooterRow.js +8 -0
  69. package/footer/FooterRow.mjs +46 -0
  70. package/header/FilterRow.js +8 -0
  71. package/header/FilterRow.mjs +96 -0
  72. package/header/GridHeaderCell.js +8 -0
  73. package/header/GridHeaderCell.mjs +38 -0
  74. package/header/GridHeaderSelectionCell.js +8 -0
  75. package/header/GridHeaderSelectionCell.mjs +44 -0
  76. package/header/GroupPanel.js +8 -0
  77. package/header/GroupPanel.mjs +60 -0
  78. package/header/Header.js +8 -0
  79. package/header/Header.mjs +107 -0
  80. package/header/HeaderRow.js +8 -0
  81. package/header/HeaderRow.mjs +155 -0
  82. package/index.d.mts +2771 -5
  83. package/index.d.ts +2771 -57
  84. package/index.js +8 -5
  85. package/index.mjs +89 -3845
  86. package/interfaces/GridSortSettings.js +8 -0
  87. package/interfaces/GridSortSettings.mjs +12 -0
  88. package/messages/index.js +8 -0
  89. package/messages/index.mjs +105 -0
  90. package/package-metadata.js +8 -0
  91. package/package-metadata.mjs +19 -0
  92. package/package.json +10 -10
  93. package/paging/GridPagerSettings.js +8 -0
  94. package/paging/GridPagerSettings.mjs +28 -0
  95. package/rows/GridDetailRow.js +8 -0
  96. package/rows/GridDetailRow.mjs +20 -0
  97. package/rows/GridRow.js +8 -0
  98. package/rows/GridRow.mjs +51 -0
  99. package/utils/index.js +8 -0
  100. package/utils/index.mjs +180 -0
  101. package/Grid.d.ts +0 -267
  102. package/GridColumn.d.ts +0 -28
  103. package/GridNoRecords.d.ts +0 -40
  104. package/GridToolbar.d.ts +0 -54
  105. package/ScrollMode.d.ts +0 -5
  106. package/StatusBar.d.ts +0 -51
  107. package/VirtualScroll.d.ts +0 -51
  108. package/VirtualScrollFixed.d.ts +0 -53
  109. package/cells/GridCell.d.ts +0 -6
  110. package/cells/GridDetailCell.d.ts +0 -18
  111. package/cells/GridDetailHierarchyCell.d.ts +0 -10
  112. package/cells/GridEditCell.d.ts +0 -9
  113. package/cells/GridFilterCell.d.ts +0 -20
  114. package/cells/GridGroupCell.d.ts +0 -9
  115. package/cells/GridHierarchyCell.d.ts +0 -9
  116. package/cells/GridSelectionCell.d.ts +0 -9
  117. package/columnMenu/GridColumnMenuCheckboxFilter.d.ts +0 -122
  118. package/columnMenu/GridColumnMenuColumnsList.d.ts +0 -31
  119. package/columnMenu/GridColumnMenuFilter.d.ts +0 -165
  120. package/columnMenu/GridColumnMenuFilterCell.d.ts +0 -37
  121. package/columnMenu/GridColumnMenuFilterUI.d.ts +0 -12
  122. package/columnMenu/GridColumnMenuGroup.d.ts +0 -77
  123. package/columnMenu/GridColumnMenuItem.d.ts +0 -40
  124. package/columnMenu/GridColumnMenuItemContent.d.ts +0 -24
  125. package/columnMenu/GridColumnMenuItemGroup.d.ts +0 -20
  126. package/columnMenu/GridColumnMenuSort.d.ts +0 -89
  127. package/columnMenu/GridColumnMenuWrapper.d.ts +0 -49
  128. package/constants/index.d.ts +0 -10
  129. package/drag/ColumnDraggable.d.ts +0 -38
  130. package/drag/ColumnResize.d.ts +0 -37
  131. package/drag/CommonDragLogic.d.ts +0 -44
  132. package/drag/GroupingIndicator.d.ts +0 -41
  133. package/filterCommon.d.ts +0 -73
  134. package/footer/Footer.d.ts +0 -38
  135. package/footer/FooterRow.d.ts +0 -25
  136. package/header/FilterRow.d.ts +0 -38
  137. package/header/GridHeaderCell.d.ts +0 -56
  138. package/header/GridHeaderSelectionCell.d.ts +0 -10
  139. package/header/GroupPanel.d.ts +0 -26
  140. package/header/Header.d.ts +0 -46
  141. package/header/HeaderRow.d.ts +0 -51
  142. package/interfaces/GridCellProps.d.ts +0 -73
  143. package/interfaces/GridCellsSettings.d.ts +0 -115
  144. package/interfaces/GridColumnMenuBaseProps.d.ts +0 -18
  145. package/interfaces/GridColumnMenuColumnProps.d.ts +0 -29
  146. package/interfaces/GridColumnMenuFilterBaseProps.d.ts +0 -28
  147. package/interfaces/GridColumnMenuFilterUIProps.d.ts +0 -35
  148. package/interfaces/GridColumnMenuGroupBaseProps.d.ts +0 -23
  149. package/interfaces/GridColumnMenuProps.d.ts +0 -12
  150. package/interfaces/GridColumnMenuSortBaseProps.d.ts +0 -24
  151. package/interfaces/GridColumnProps.d.ts +0 -92
  152. package/interfaces/GridDetailRowProps.d.ts +0 -17
  153. package/interfaces/GridFilterCellProps.d.ts +0 -68
  154. package/interfaces/GridFilterOperator.d.ts +0 -10
  155. package/interfaces/GridFilterOperators.d.ts +0 -53
  156. package/interfaces/GridFooterCellProps.d.ts +0 -26
  157. package/interfaces/GridGroupableSettings.d.ts +0 -17
  158. package/interfaces/GridHeaderCellProps.d.ts +0 -24
  159. package/interfaces/GridNoRecordsProps.d.ts +0 -13
  160. package/interfaces/GridProps.d.ts +0 -333
  161. package/interfaces/GridRowProps.d.ts +0 -67
  162. package/interfaces/GridRowType.d.ts +0 -13
  163. package/interfaces/GridSelectableSettings.d.ts +0 -22
  164. package/interfaces/GridSortSettings.d.ts +0 -17
  165. package/interfaces/GridToolbarProps.d.ts +0 -37
  166. package/interfaces/VirtualScrollInterface.d.ts +0 -31
  167. package/interfaces/events.d.ts +0 -232
  168. package/messages/index.d.ts +0 -199
  169. package/package-metadata.d.ts +0 -9
  170. package/paging/GridPagerSettings.d.ts +0 -71
  171. package/paging/Page.d.ts +0 -17
  172. package/rows/GridDetailRow.d.ts +0 -55
  173. package/rows/GridRow.d.ts +0 -15
  174. package/utils/index.d.ts +0 -73
package/index.mjs CHANGED
@@ -1,3848 +1,92 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
5
8
  "use client";
6
- import * as n from "react";
7
- import p from "prop-types";
8
- import { useId as Rt, Keys as Ce, IconWrap as O, classNames as y, getScrollbarWidth as Ft, kendoThemeMaps as K, Draggable as Nt, withIdHOC as Dt, dispatchEvent as Cs, canUseDOM as we, getActiveElement as bs, memoizeOne as B, validatePackage as xs, shouldShowValidationUI as vs, setScrollbarWidth as ct, getter as Fe, WatermarkOverlay as ks, toIconName as Es, clone as Ss } from "@progress/kendo-react-common";
9
- import { tableKeyboardNavigationTools as z, useTableKeyboardNavigation as q, TABLE_ROW_INDEX_ATTRIBUTE as Is, TABLE_COL_INDEX_ATTRIBUTE as ys, TABLE_PREVENT_SELECTION_ELEMENT as ws, isRtl as Tt, tableKeyboardNavigationHeaderAttributes as ht, ColumnResizer as Rs, HeaderThElement as Mt, getIndex as dt, tableKeyboardNavigation as X, getSelectionOptions as pt, mapColumns as Fs, ClipboardService as Ns, tableColumnsVirtualization as Ds, Pager as Ts, TableKeyboardNavigationContext as Ne, tableKeyboardNavigationScopeAttributes as ut, TableSelection as gt, tableKeyboardNavigationBodyAttributes as ft, DropClue as mt, DragClue as Ct, updateLeft as Ms, updateRight as Gs } from "@progress/kendo-react-data-tools";
10
- import { getSelectedState as li, getSelectedStateFromKeyDown as ai, setSelectedState as ci } from "@progress/kendo-react-data-tools";
11
- import { useLocalization as Ue, provideLocalizationService as D, registerForLocalization as G, useInternationalization as Hs, registerForIntl as Gt } from "@progress/kendo-react-intl";
12
- import { minusIcon as zs, plusIcon as Ls, filterIcon as be, sortAscSmallIcon as qe, sortDescSmallIcon as $e, filterClearIcon as Os, xCircleIcon as _s, caretAltDownIcon as Ps, caretAltLeftIcon as As, caretAltRightIcon as Bs, groupIcon as Ws, ungroupIcon as Vs, searchIcon as Ht, xIcon as Ks } from "@progress/kendo-svg-icons";
13
- import { NumericTextBox as je, TextBox as zt, Input as Lt, Checkbox as me, InputPrefix as Us } from "@progress/kendo-react-inputs";
14
- import { DatePicker as Xe } from "@progress/kendo-react-dateinputs";
15
- import { Popup as qs } from "@progress/kendo-react-popup";
16
- import { Button as W } from "@progress/kendo-react-buttons";
17
- import { DropDownList as ie } from "@progress/kendo-react-dropdowns";
18
- import { isCompositeFilterDescriptor as bt, filterBy as xt } from "@progress/kendo-data-query";
19
- import { Reveal as $s } from "@progress/kendo-react-animation";
20
- const ce = (i) => null;
21
- ce.displayName = "KendoReactGridColumn";
22
- ce.defaultProps = {
23
- filterable: !0,
24
- editable: !0,
25
- sortable: !0,
26
- resizable: !0,
27
- reorderable: !0,
28
- groupable: !0
29
- };
30
- ce.propTypes = {
31
- field: p.string,
32
- title: p.string,
33
- editable: p.bool,
34
- sortable: p.oneOfType([
35
- p.bool,
36
- p.shape({
37
- allowUnsort: p.bool.isRequired
38
- })
39
- ]),
40
- cell: p.any,
41
- filterCell: p.any,
42
- filterTitle: p.string,
43
- filterable: p.bool,
44
- filter: p.oneOf(["text", "numeric", "boolean", "date"]),
45
- editor: p.oneOf(["text", "numeric", "boolean", "date"]),
46
- width: p.oneOfType([p.string, p.number]),
47
- minResizableWidth: p.number,
48
- headerCell: p.any,
49
- footerCell: p.any,
50
- headerSelectionValue: p.bool,
51
- format: p.string,
52
- headerClassName: p.string,
53
- className: p.string,
54
- reorderable: p.bool,
55
- resizable: p.bool,
56
- orderIndex: p.number,
57
- groupable: p.bool,
58
- columnMenu: p.any,
59
- locked: p.bool
60
- };
61
- function M(i, t) {
62
- const s = (i || "").split(".");
63
- let o = t;
64
- return s.forEach((e) => {
65
- o = o ? o[e] : void 0;
66
- }), o;
67
- }
68
- function Ot(i, t, s, o, e, r, l = 0) {
69
- let a = l;
70
- for (let c = 0; c < t.length; c++) {
71
- if (!e || t[c].value === void 0 || t[c].items === void 0) {
72
- i[i.length] = {
73
- dataIndex: o.index,
74
- dataItem: t[c],
75
- rowType: "data",
76
- level: l,
77
- expanded: r === void 0 || M(r, t[c])
78
- }, o.index++;
79
- continue;
80
- }
81
- a = Math.max(a, l + 1);
82
- const h = r === void 0 || M(r, t[c]) === void 0 || M(r, t[c]);
83
- i[i.length] = {
84
- dataIndex: -1,
85
- dataItem: t[c],
86
- level: l,
87
- rowType: "groupHeader",
88
- expanded: h
89
- }, h && (a = Math.max(
90
- Ot(i, t[c].items, s, o, e, r, l + 1),
91
- a
92
- )), (s === "always" || h && s === "visible") && (i[i.length] = {
93
- dataIndex: -1,
94
- dataItem: t[c],
95
- rowType: "groupFooter",
96
- level: l,
97
- expanded: h
98
- });
99
- }
100
- return a;
101
- }
102
- function _t(i, t, s, o = 0) {
103
- let e = [];
104
- if (!i)
105
- return [];
106
- i && i.length === void 0 && (i = [i]), i.forEach((l, a) => {
107
- l = l.props ? l.props : l;
108
- const c = t[a] || null, h = _t(l.children, c && c.children || [], s, o + 1);
109
- e.push(
110
- Object.assign(
111
- { depth: o },
112
- ce.defaultProps,
113
- h.length ? { cell: () => null, filterCell: () => null } : {},
114
- c ? { width: c.width, orderIndex: c.orderIndex } : {},
115
- l,
116
- {
117
- id: l.id ? l.id : z.generateNavigatableId(`${s.prevId++}`, s.idPrefix, "column"),
118
- declarationIndex: e.length,
119
- children: h,
120
- rowSpan: 0,
121
- colSpan: 0,
122
- isAccessible: !0,
123
- left: c && Math.floor(c.left),
124
- right: c && Math.floor(c.right)
125
- }
126
- )
127
- );
128
- });
129
- const r = (l, a) => l.orderIndex === a.orderIndex ? l.declarationIndex - a.declarationIndex : (l.orderIndex || 0) - (a.orderIndex || 0);
130
- if (e.sort(r), o === 0) {
131
- let l = [];
132
- const a = (c, h) => c.forEach((d) => {
133
- d.parentIndex = h, a(d.children, l.push(d) - 1);
134
- });
135
- return a(e, -1), l;
136
- }
137
- return e;
138
- }
139
- function js(i, t, s, o) {
140
- let e = [];
141
- Array.isArray(i) ? e = i : i && (e = i.data);
142
- const r = [];
143
- if (e.length > 0) {
144
- let l = e[0];
145
- if (t)
146
- for (let c = 0; c < t.length; c++)
147
- l = l.items && l.items[0];
148
- Object.getOwnPropertyNames(l).forEach((c) => {
149
- c !== s && r.push(Object.assign(
150
- {
151
- id: z.generateNavigatableId(`${o.prevId++}`, o.idPrefix, "column"),
152
- declarationIndex: -1,
153
- parentIndex: -1,
154
- depth: 0,
155
- colSpan: 0,
156
- rowSpan: 0,
157
- index: 0,
158
- left: 0,
159
- right: 0,
160
- rightBorder: !1,
161
- children: [],
162
- ariaColumnIndex: 0,
163
- isAccessible: !0
164
- },
165
- ce.defaultProps,
166
- { field: c }
167
- ));
168
- });
169
- }
170
- return r;
171
- }
172
- const Xs = (i, t) => {
173
- let s = i[t.parentIndex];
174
- for (; s; ) {
175
- if (s.footerCell)
176
- return !0;
177
- s = i[s.parentIndex];
178
- }
179
- return !1;
180
- }, Ys = (i) => i.filter((t) => Xs(i, t) ? !1 : !!t.footerCell || !(t.children && t.children.length > 0)), Re = (i) => i.width !== void 0 ? Math.floor(parseFloat(i.width.toString())) + "px" : void 0, Pt = (i) => (i.sort((t, s) => t.declarationIndex - s.declarationIndex), i.map((t) => {
181
- const {
182
- declarationIndex: s,
183
- parentIndex: o,
184
- depth: e,
185
- colSpan: r,
186
- rowSpan: l,
187
- index: a,
188
- kFirst: c,
189
- children: h,
190
- ...d
191
- } = t;
192
- return h.length ? {
193
- children: Pt(h),
194
- ...d
195
- } : d;
196
- })), De = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), vt = 17895697, xe = (i, t) => {
197
- if (!(!i && !t))
198
- return t ? i ? {
199
- ...i,
200
- ...t,
201
- select: {
202
- ...i.select || {},
203
- ...t.select || {}
204
- },
205
- hierarchy: {
206
- ...i.hierarchy || {},
207
- ...t.hierarchy || {}
208
- },
209
- group: {
210
- ...i.group || {},
211
- ...t.group || {}
212
- },
213
- edit: {
214
- ...i.edit || {},
215
- ...t.edit || {}
216
- }
217
- } : t : i;
218
- }, Te = "grid.noRecords", Js = "grid.pagerInfo", Qs = "grid.pagerFirstPage", Zs = "grid.pagerPreviousPage", er = "grid.pagerNextPage", tr = "grid.pagerLastPage", sr = "grid.pagerItemsPerPage", rr = "grid.pagerPage", ir = "grid.pagerPageSizeAriaLabel", or = "grid.pagerOf", nr = "grid.pagerTotalPages", Me = "grid.groupPanelEmpty", At = "grid.groupColumn", Bt = "grid.ungroupColumn", Ge = "grid.columnMenu", U = "grid.filterClearButton", oe = "grid.filterSubmitButton", ne = "grid.filterTitle", He = "grid.sortAscending", ze = "grid.sortDescending", Le = "grid.searchPlaceholder", Oe = "grid.filterCheckAll", _e = "grid.filterChooseOperator", Pe = "grid.filterSelectedItems", Ae = "grid.sortAriaLabel", Be = "grid.filterAriaLabel", We = "grid.groupPanelAriaLabel", Wt = "grid.groupExpand", Vt = "grid.groupCollapse", Kt = "grid.detailExpand", Ut = "grid.detailCollapse", le = "grid.selectRow", k = {
219
- [Kt]: "Expand detail row",
220
- [Ut]: "Collapse detail row",
221
- [Wt]: "Expand group",
222
- [Vt]: "Collapse Group",
223
- [Te]: "No records available",
224
- [Me]: "Drag a column header and drop it here to group by that column",
225
- [U]: "Clear",
226
- [oe]: "Filter",
227
- [ne]: "Filter",
228
- [He]: "Sort Ascending",
229
- [ze]: "Sort Descending",
230
- [Ae]: "Sortable",
231
- [At]: "Group Column",
232
- [Bt]: "Ungroup Column",
233
- [Ge]: "Column menu",
234
- [sr]: "items per page",
235
- [Js]: "{0} - {1} of {2} items",
236
- [Qs]: "Go to the first page",
237
- [Zs]: "Go to the previous page",
238
- [er]: "Go to the next page",
239
- [tr]: "Go to the last page",
240
- [rr]: "Page",
241
- [ir]: "Page size",
242
- [or]: "of",
243
- [nr]: "{0}",
244
- [Le]: "Search",
245
- [Oe]: "Check All",
246
- [_e]: "Choose Operator",
247
- [Pe]: "selected items",
248
- [Be]: "Filter",
249
- [We]: "Group panel",
250
- [le]: "Select Row",
251
- "grid.filterEqOperator": "Is equal to",
252
- "grid.filterNotEqOperator": "Is not equal to",
253
- "grid.filterIsNullOperator": "Is null",
254
- "grid.filterIsNotNullOperator": "Is not null",
255
- "grid.filterIsEmptyOperator": "Is empty",
256
- "grid.filterIsNotEmptyOperator": "Is not empty",
257
- "grid.filterStartsWithOperator": "Starts with",
258
- "grid.filterContainsOperator": "Contains",
259
- "grid.filterNotContainsOperator": "Does not contain",
260
- "grid.filterEndsWithOperator": "Ends with",
261
- "grid.filterGteOperator": "Is greater than or equal to",
262
- "grid.filterGtOperator": "Is greater than",
263
- "grid.filterLteOperator": "Is less than or equal to",
264
- "grid.filterLtOperator": "Is less than",
265
- "grid.filterIsTrue": "Is true",
266
- "grid.filterIsFalse": "Is false",
267
- "grid.filterBooleanAll": "(All)",
268
- "grid.filterAfterOrEqualOperator": "Is after or equal to",
269
- "grid.filterAfterOperator": "Is after",
270
- "grid.filterBeforeOperator": "Is before",
271
- "grid.filterBeforeOrEqualOperator": "Is before or equal to",
272
- "grid.filterAndLogic": "And",
273
- "grid.filterOrLogic": "Or"
274
- };
275
- function lr(i) {
276
- const t = i.replace(/^pager\.([a-z])/, (s, o) => "grid.pager" + o.toUpperCase());
277
- return { messageKey: t, defaultMessage: k[t] };
278
- }
279
- const ar = (i) => {
280
- const t = Ue(), s = n.useCallback(
281
- (f) => {
282
- i.selectionChange && i.selectionChange({ syntheticEvent: f });
283
- },
284
- [i.selectionChange]
285
- ), o = Rt(), e = M(i.field, i.dataItem), r = q(i.id), l = {
286
- colSpan: i.colSpan,
287
- style: i.style,
288
- className: i.className,
289
- "aria-colindex": i.ariaColumnIndex,
290
- role: "gridcell",
291
- ...r
292
- }, a = typeof e == "boolean" && e, c = /* @__PURE__ */ n.createElement("span", { key: 1, className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
293
- "input",
294
- {
295
- id: o,
296
- type: "checkbox",
297
- className: "k-checkbox k-checkbox-md k-rounded-md",
298
- "aria-label": t.toLanguageString(le, k[le]),
299
- "aria-checked": a,
300
- checked: a,
301
- onChange: s
302
- }
303
- )), h = i.rowType !== "groupHeader" ? /* @__PURE__ */ n.createElement(
304
- "td",
305
- {
306
- ...l
307
- },
308
- c
309
- ) : null, d = i.rowType || "data", u = i.cells;
310
- if (u && u.select && u.select[d]) {
311
- const f = u.select[d];
312
- return /* @__PURE__ */ n.createElement(f, { ...i, tdProps: l }, c);
313
- }
314
- return i.render ? i.render.call(void 0, h, i) : h;
315
- }, cr = (i) => {
316
- let t = null, s = null, o = null;
317
- const e = M(i.field, i.dataItem), r = q(i.id), l = Ue(), a = n.useCallback(
318
- (d) => {
319
- d.isDefaultPrevented() || d.keyCode === Ce.enter && i.onChange && (d.preventDefault(), i.onChange({
320
- dataItem: i.dataItem,
321
- dataIndex: i.dataIndex,
322
- syntheticEvent: d,
323
- field: i.field,
324
- value: !e
325
- }));
326
- },
327
- [i.dataItem, i.dataIndex, i.field, i.onChange, e]
328
- );
329
- if (i.rowType === "groupFooter")
330
- s = {
331
- className: "k-table-td k-hierarchy-cell",
332
- role: "gridcell",
333
- ...r
334
- }, t = /* @__PURE__ */ n.createElement(
335
- "td",
336
- {
337
- ...s
338
- }
339
- );
340
- else if (i.rowType !== "groupHeader") {
341
- const d = e ? Ut : Kt, u = l.toLanguageString(d, k[d]);
342
- s = {
343
- className: "k-table-td k-hierarchy-cell",
344
- onKeyDown: a,
345
- "aria-expanded": !!e,
346
- role: "gridcell",
347
- "aria-colindex": i.ariaColumnIndex,
348
- ...r
349
- }, o = /* @__PURE__ */ n.createElement(
350
- "a",
351
- {
352
- onClick: (f) => {
353
- f.preventDefault(), i.onChange && i.onChange({
354
- dataItem: i.dataItem,
355
- dataIndex: i.dataIndex,
356
- syntheticEvent: f,
357
- field: i.field,
358
- value: !e
359
- });
360
- },
361
- "aria-label": u,
362
- href: "#",
363
- tabIndex: -1
364
- },
365
- /* @__PURE__ */ n.createElement(O, { name: e ? "minus" : "plus", icon: e ? zs : Ls })
366
- ), t = /* @__PURE__ */ n.createElement(
367
- "td",
368
- {
369
- ...s
370
- },
371
- o
372
- );
373
- }
374
- const c = i.rowType || "data", h = i.cells;
375
- if (h && h.hierarchy && h.hierarchy[c]) {
376
- const d = h.hierarchy[c];
377
- return /* @__PURE__ */ n.createElement(d, { ...i, tdProps: s }, o);
378
- }
379
- return i.render ? i.render.call(void 0, t, i) : t;
380
- }, hr = Is, se = ys, ti = ws, dr = (i) => {
381
- const t = M(i.field, i.dataItem);
382
- let s = null;
383
- const o = y("k-table-td", "k-grid-edit-cell", {
384
- ["k-selected"]: i.isSelected
385
- }, i.className), e = Rt(), r = q(i.id);
386
- let l = null, a = null;
387
- const c = n.useCallback(
388
- (g) => {
389
- if (i.onChange) {
390
- const b = g.target.type === "checkbox" ? g.target.checked : g.target.value;
391
- i.onChange({
392
- dataItem: i.dataItem,
393
- dataIndex: i.dataIndex,
394
- field: i.field,
395
- syntheticEvent: g,
396
- value: b
397
- });
398
- }
399
- },
400
- [i.onChange, i.dataItem, i.dataIndex, i.field]
401
- ), h = n.useCallback((g) => {
402
- i.onContextMenu && i.onContextMenu.call(void 0, g, i.dataItem, i.field);
403
- }, [i.onContextMenu, i.dataItem, i.field]), d = n.useCallback(
404
- (g) => {
405
- i.onChange && i.onChange({
406
- dataItem: i.dataItem,
407
- dataIndex: i.dataIndex,
408
- field: i.field,
409
- syntheticEvent: g.syntheticEvent,
410
- value: g.value
411
- });
412
- },
413
- [i.onChange, i.dataItem, i.dataIndex, i.field]
414
- );
415
- switch (i.editor) {
416
- case "numeric": {
417
- l = {
418
- onContextMenu: h,
419
- colSpan: i.colSpan,
420
- style: i.style,
421
- className: o,
422
- ["aria-colindex"]: i.ariaColumnIndex,
423
- ["aria-selected"]: i.isSelected,
424
- [se]: i.columnIndex,
425
- role: "gridcell",
426
- ...r
427
- }, a = /* @__PURE__ */ n.createElement(
428
- je,
429
- {
430
- width: "100%",
431
- value: t === void 0 ? null : t,
432
- onChange: d
433
- }
434
- ), s = /* @__PURE__ */ n.createElement(
435
- "td",
436
- {
437
- ...l
438
- },
439
- a
440
- );
441
- break;
442
- }
443
- case "date":
444
- l = {
445
- onContextMenu: h,
446
- colSpan: i.colSpan,
447
- style: i.style,
448
- className: o,
449
- ["aria-colindex"]: i.ariaColumnIndex,
450
- ["aria-selected"]: i.isSelected,
451
- [se]: i.columnIndex,
452
- role: "gridcell",
453
- ...r
454
- }, a = /* @__PURE__ */ n.createElement(
455
- Xe,
456
- {
457
- width: "100%",
458
- value: t,
459
- onChange: d
460
- }
461
- ), s = /* @__PURE__ */ n.createElement(
462
- "td",
463
- {
464
- ...l
465
- },
466
- a
467
- );
468
- break;
469
- case "boolean":
470
- l = {
471
- onContextMenu: h,
472
- colSpan: i.colSpan,
473
- style: i.style,
474
- className: o,
475
- ["aria-colindex"]: i.ariaColumnIndex,
476
- ["aria-selected"]: i.isSelected,
477
- [se]: i.columnIndex,
478
- role: "gridcell",
479
- ...r
480
- }, a = [
481
- /* @__PURE__ */ n.createElement("span", { key: 1, className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
482
- "input",
483
- {
484
- checked: t || !1,
485
- id: e,
486
- type: "checkbox",
487
- className: "k-checkbox k-checkbox-md k-rounded-md",
488
- onChange: c
489
- }
490
- )),
491
- /* @__PURE__ */ n.createElement("label", { className: "k-checkbox-label", htmlFor: e, key: 2 })
492
- ], s = /* @__PURE__ */ n.createElement(
493
- "td",
494
- {
495
- ...l
496
- },
497
- a
498
- );
499
- break;
500
- default:
501
- l = {
502
- onContextMenu: h,
503
- colSpan: i.colSpan,
504
- style: i.style,
505
- className: o,
506
- ["aria-colindex"]: i.ariaColumnIndex,
507
- ["aria-selected"]: i.isSelected,
508
- [se]: i.columnIndex,
509
- role: "gridcell",
510
- ...r
511
- }, a = /* @__PURE__ */ n.createElement(
512
- "input",
513
- {
514
- style: { width: "100%" },
515
- className: "k-input",
516
- value: t || "",
517
- onChange: c
518
- }
519
- ), s = /* @__PURE__ */ n.createElement(
520
- "td",
521
- {
522
- ...l
523
- },
524
- a
525
- );
526
- }
527
- const u = i.editor || "text", f = i.cells;
528
- if (f && f.edit && f.edit[u]) {
529
- const g = f.edit[u];
530
- return /* @__PURE__ */ n.createElement(g, { ...i, tdProps: l }, a);
531
- }
532
- return i.render ? i.render.call(void 0, s, i) : s;
533
- };
534
- class pr extends n.Component {
535
- constructor() {
536
- super(...arguments), this.headerWrap = null, this.table = null, this.syncScroll = !1, this.scrollbarWidth = Ft(), this.onScroll = (t) => {
537
- if (this.syncScroll) {
538
- this.syncScroll = !1;
539
- return;
540
- }
541
- if (!this.headerWrap)
542
- return;
543
- const s = this.headerWrap.scrollLeft, o = this.props.scrollableDataElement();
544
- o && o.scrollLeft !== s && (o.scrollLeft = s);
545
- };
546
- }
547
- get element() {
548
- return this.props.elemRef.current;
549
- }
550
- componentDidMount() {
551
- const t = Tt(this.element);
552
- this.props.columnResize && this.props.columnResize.setIsRtl(t), this.forceUpdate();
553
- }
554
- /**
555
- *
556
- * @param scrollLeft - Scrolls to the left (in pixels).
557
- */
558
- setScrollLeft(t) {
559
- this.headerWrap && this.headerWrap.scrollLeft !== t && (this.syncScroll = !0, this.headerWrap.scrollLeft = t);
560
- }
561
- /**
562
- *
563
- * @param width - Scrolls the width (in pixels).
564
- */
565
- setWidth(t) {
566
- this.table && (this.table.style.width = t + "px");
567
- }
568
- render() {
569
- return this.props.staticHeaders ? /* @__PURE__ */ n.createElement(
570
- "div",
571
- {
572
- ref: this.props.elemRef,
573
- className: y(
574
- "k-grid-header",
575
- { "k-grid-draggable-header": this.props.draggable }
576
- ),
577
- role: "presentation"
578
- },
579
- /* @__PURE__ */ n.createElement(
580
- "div",
581
- {
582
- ref: (t) => {
583
- this.headerWrap = t;
584
- },
585
- className: "k-grid-header-wrap",
586
- style: this.scrollbarWidth ? {} : { borderWidth: 0 },
587
- onScroll: this.onScroll,
588
- role: "presentation"
589
- },
590
- /* @__PURE__ */ n.createElement(
591
- "table",
592
- {
593
- ref: (t) => {
594
- this.table = t;
595
- },
596
- className: y(
597
- "k-table k-grid-header-table",
598
- {
599
- "k-table-md": !this.props.size,
600
- [`k-table-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size
601
- },
602
- this.props.className
603
- ),
604
- role: "presentation"
605
- },
606
- /* @__PURE__ */ n.createElement("colgroup", { ref: (t) => {
607
- this.props.columnResize.colGroupHeader = t;
608
- } }, this.props.cols),
609
- /* @__PURE__ */ n.createElement("thead", { className: "k-table-thead", role: "rowgroup", ...ht }, this.props.headerRow, this.props.filterRow)
610
- )
611
- )
612
- ) : /* @__PURE__ */ n.createElement(
613
- "thead",
614
- {
615
- role: "presentation",
616
- className: y(
617
- "k-table-thead",
618
- { "k-grid-draggable-header": this.props.draggable }
619
- ),
620
- ...ht
621
- },
622
- this.props.headerRow,
623
- this.props.filterRow
624
- );
625
- }
626
- }
627
- const qt = (...i) => Object.assign({ allowUnsort: !0, mode: "single" }, ...i);
628
- class ur extends n.PureComponent {
629
- constructor() {
630
- super(...arguments), this.draggable = null, this.onPress = (t) => {
631
- const s = this.draggable && this.draggable.element;
632
- s && this.props.pressHandler && this.props.pressHandler(t.event, s);
633
- }, this.onDrag = (t) => {
634
- const s = this.draggable && this.draggable.element;
635
- s && this.props.dragHandler && this.props.dragHandler(t.event, s);
636
- }, this.onRelease = (t) => {
637
- this.draggable && this.draggable.element && this.props.releaseHandler && this.props.releaseHandler(t.event);
638
- };
639
- }
640
- render() {
641
- return /* @__PURE__ */ n.createElement(
642
- Nt,
643
- {
644
- onPress: this.onPress,
645
- onDrag: this.onDrag,
646
- onRelease: this.onRelease,
647
- hint: this.props.dragClue,
648
- autoScroll: { boundaryElementRef: this.props.headerRef, direction: { horizontal: !0, vertical: !1 } },
649
- scrollContainer: this.props.containerRef || void 0,
650
- ref: (t) => {
651
- this.draggable = t;
652
- }
653
- },
654
- /* @__PURE__ */ n.createElement("tr", { className: "k-table-row", style: { touchAction: "none" }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)
655
- );
656
- }
657
- }
658
- class $t extends n.Component {
659
- constructor() {
660
- super(...arguments), this.state = {
661
- show: !1
662
- }, this._anchor = null, this._content = null, this.blurTimeout = void 0, this.willBlur = !1, this.blur = () => {
663
- if (this.willBlur) {
664
- this.willBlur = !1;
665
- return;
666
- }
667
- clearTimeout(this.blurTimeout), this.blurTimeout = window.setTimeout(() => {
668
- this.closeMenu();
669
- });
670
- }, this.focus = () => {
671
- clearTimeout(this.blurTimeout);
672
- }, this.anchorClick = (t) => {
673
- t.preventDefault(), this.state.show && this.props.onCloseMenu && this.props.onCloseMenu(), this.setState(
674
- {
675
- show: !this.state.show
676
- },
677
- () => this.state.show && this._content && this._content.focus()
678
- );
679
- }, this.closeMenu = () => {
680
- this.props.onCloseMenu && this.props.onCloseMenu(), this.setState({ show: !1 });
681
- }, this.onAnchorMouseDown = (t) => {
682
- this.willBlur = this.state.show && t.currentTarget === this._anchor;
683
- }, this.onAnchorKeyDown = (t) => {
684
- var s;
685
- if (t.keyCode === Ce.tab) {
686
- const o = t.target, e = o && ((s = o.closest(".k-grid")) == null ? void 0 : s.getElementsByClassName("k-grid-content")[0]);
687
- e && e.scrollWidth > e.clientWidth && o.scrollIntoView({ inline: "center" });
688
- }
689
- };
690
- }
691
- render() {
692
- const { columnMenu: t, ...s } = this.props, { column: o } = this.props, e = D(this), r = o.title || o.field, l = r ? `${r} ` : "";
693
- return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
694
- "a",
695
- {
696
- className: "k-grid-header-menu k-grid-column-menu",
697
- ref: (a) => this._anchor = a,
698
- onClick: this.anchorClick,
699
- onMouseDown: this.onAnchorMouseDown,
700
- onKeyDown: this.onAnchorKeyDown,
701
- href: "#",
702
- "aria-label": `${l}${e.toLanguageString(Ge, k[Ge])}`
703
- },
704
- /* @__PURE__ */ n.createElement(O, { name: "filter", icon: be })
705
- ), /* @__PURE__ */ n.createElement(
706
- qs,
707
- {
708
- anchor: this._anchor,
709
- show: this.state.show,
710
- popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup"
711
- },
712
- /* @__PURE__ */ n.createElement(
713
- "div",
714
- {
715
- ref: (a) => this._content = a,
716
- tabIndex: 0,
717
- onBlur: this.blur,
718
- onFocus: this.focus,
719
- style: { outline: "none" }
720
- },
721
- t && /* @__PURE__ */ n.createElement(
722
- t,
723
- {
724
- ...s,
725
- onCloseMenu: this.closeMenu
726
- }
727
- )
728
- )
729
- ));
730
- }
731
- }
732
- class gr extends n.Component {
733
- /**
734
- * @hidden
735
- */
736
- render() {
737
- const { columnMenuWrapperProps: t } = this.props, s = this.props.onClick ? {
738
- onClick: this.props.onClick
739
- } : {}, o = /* @__PURE__ */ n.createElement("span", { className: "k-cell-inner" }, /* @__PURE__ */ n.createElement(
740
- "span",
741
- {
742
- className: y(
743
- "k-link",
744
- {
745
- "!k-cursor-default": !this.props.columnMenuWrapperProps.sortable
746
- }
747
- ),
748
- ...s
749
- },
750
- /* @__PURE__ */ n.createElement("span", { className: "k-column-title" }, this.props.title || this.props.field || " "),
751
- this.props.children
752
- ), t.columnMenu && /* @__PURE__ */ n.createElement($t, { ...t }));
753
- return this.props.render ? this.props.render.call(void 0, o, this.props) : o;
754
- }
755
- }
756
- const fr = {
757
- true: { asc: "desc", desc: "", "": "asc" },
758
- false: { asc: "desc", desc: "asc", "": "asc" }
759
- }, mr = {
760
- none: "none",
761
- asc: "ascending",
762
- desc: "descending"
763
- };
764
- class jt extends n.Component {
765
- constructor(t) {
766
- super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, o) => {
767
- s.isDefaultPrevented() || s.keyCode === Ce.enter && this.cellClick(s, o);
768
- }, this.cells = (s) => s.map((o) => {
769
- const e = this.props.columns[o], r = this.props.sortable && e.sortable, l = this.props.sort ? this.props.sort.findIndex((v) => v.field === e.field) : -1, a = l >= 0 && this.props.sort[l].dir || "none", c = e.columnMenu === null ? null : e.columnMenu || this.props.columnMenu, h = y({
770
- "k-first": e.kFirst,
771
- "k-filterable": !!c,
772
- "k-table-th": !0,
773
- "k-header": !0,
774
- "k-grid-header-sticky": e.locked,
775
- "k-sorted": this.props.sort && this.props.sort.some((v) => v.field === e.field)
776
- }, e.headerClassName);
777
- e.locked === !1 && (e.left = 0);
778
- const d = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, u = D(this).toLanguageString(Ae, k[Ae]), f = e.isAccessible ? {
779
- ariaSort: mr[a],
780
- role: "columnheader",
781
- ariaColumnIndex: e.ariaColumnIndex,
782
- ariaSelected: !1,
783
- ariaDescription: r ? u : ""
784
- } : {
785
- role: "presentation"
786
- }, g = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, b = e.headerCell ? e.headerCell : gr, E = /* @__PURE__ */ n.createElement(
787
- b,
788
- {
789
- key: 1,
790
- field: e.field,
791
- onClick: r && ((v) => this.cellClick(v, e)) || void 0,
792
- selectionChange: this.props.selectionChange,
793
- title: e.title,
794
- selectionValue: e.headerSelectionValue,
795
- render: this.props.cellRender,
796
- children: this.sortIcon(l),
797
- columnMenuWrapperProps: {
798
- column: {
799
- field: e.field,
800
- title: e.title,
801
- locked: e.locked,
802
- filter: e.filter,
803
- id: e.id
804
- },
805
- sortable: r && this.props.sortable,
806
- sort: this.props.sort,
807
- onSortChange: this.props.sortChange,
808
- filter: this.props.filter,
809
- filterable: this.props.filterable && e.filterable,
810
- filterOperators: this.props.filterOperators,
811
- onFilterChange: this.props.filterChange,
812
- group: this.props.group,
813
- groupable: this.props.groupable,
814
- onGroupChange: this.props.groupChange,
815
- columnMenu: c
816
- }
817
- }
818
- ), C = {
819
- ...f,
820
- key: g,
821
- colSpan: e.colSpan,
822
- rowSpan: e.rowSpan,
823
- className: h,
824
- style: d,
825
- columnId: e.id,
826
- navigatable: e.navigatable,
827
- onKeyDown: r && ((v) => this.cellKeyDown(v, e)) || void 0,
828
- role: "columnheader"
829
- }, x = [
830
- E,
831
- this.props.columnResize && this.props.columnResize.resizable && e.resizable && /* @__PURE__ */ n.createElement(
832
- Rs,
833
- {
834
- key: 2,
835
- resize: (v, _, T) => this.props.columnResize && this.props.columnResize.dragHandler(v, e, _, T),
836
- autofit: (v) => this.props.columnResize && this.props.columnResize.dblClickHandler(v, [e.id])
837
- }
838
- )
839
- ], S = xe(this.props.cells, e.cells);
840
- if (S && S.headerCell) {
841
- const v = S.headerCell;
842
- return /* @__PURE__ */ n.createElement(v, { key: g, thProps: C, index: o }, x);
843
- }
844
- return /* @__PURE__ */ n.createElement(
845
- Mt,
846
- {
847
- ...C,
848
- key: g
849
- },
850
- x
851
- );
852
- }), this.cellClick = this.cellClick.bind(this);
853
- }
854
- cellClick(t, s) {
855
- if (t.preventDefault(), !this.props.sortChange)
856
- return;
857
- const { allowUnsort: o, mode: e } = qt(this.props.sortable || !1, s.sortable || !1), r = (this.props.sort || []).filter((c) => c.field === s.field)[0], l = fr[o][r && r.dir || ""], a = e === "single" ? [] : (this.props.sort || []).filter((c) => c.field !== s.field);
858
- l !== "" && s.field && a.push({ field: s.field, dir: l }), this.props.sortChange(a, t);
859
- }
860
- sortIcon(t) {
861
- return this.props.sort ? t >= 0 && [
862
- /* @__PURE__ */ n.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ n.createElement(
863
- O,
864
- {
865
- name: "sort-" + this.props.sort[t].dir + "-small",
866
- icon: this.props.sort[t].dir === "asc" ? qe : $e
867
- }
868
- )),
869
- this.props.sort.length > 1 && /* @__PURE__ */ n.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ n.createElement("span", { className: "k-sort-order" }, t + 1))
870
- ] : null;
871
- }
872
- render() {
873
- return this.serviceIndex = 0, this.index = -1, this.props.columnsMap.map((t, s) => this.props.pressHandler && /* @__PURE__ */ n.createElement(
874
- ur,
875
- {
876
- key: s,
877
- pressHandler: this.props.pressHandler,
878
- dragHandler: this.props.dragHandler,
879
- releaseHandler: this.props.releaseHandler,
880
- ariaRowIndex: s + 1,
881
- dragClue: this.props.dragClue,
882
- headerRef: this.props.headerRef,
883
- containerRef: this.props.containerRef
884
- },
885
- this.cells(t)
886
- ) || /* @__PURE__ */ n.createElement("tr", { key: s, className: "k-table-row", role: "row", "aria-rowindex": s + 1 }, this.cells(t)));
887
- }
888
- }
889
- G(jt);
890
- const Cr = [
891
- { text: "grid.filterAndLogic", operator: "and" },
892
- { text: "grid.filterOrLogic", operator: "or" }
893
- ], kt = {
894
- text: [
895
- { text: "grid.filterContainsOperator", operator: "contains" },
896
- { text: "grid.filterNotContainsOperator", operator: "doesnotcontain" },
897
- { text: "grid.filterEqOperator", operator: "eq" },
898
- { text: "grid.filterNotEqOperator", operator: "neq" },
899
- { text: "grid.filterStartsWithOperator", operator: "startswith" },
900
- { text: "grid.filterEndsWithOperator", operator: "endswith" },
901
- { text: "grid.filterIsNullOperator", operator: "isnull" },
902
- { text: "grid.filterIsNotNullOperator", operator: "isnotnull" },
903
- { text: "grid.filterIsEmptyOperator", operator: "isempty" },
904
- { text: "grid.filterIsNotEmptyOperator", operator: "isnotempty" }
905
- ],
906
- numeric: [
907
- { text: "grid.filterEqOperator", operator: "eq" },
908
- { text: "grid.filterNotEqOperator", operator: "neq" },
909
- { text: "grid.filterGteOperator", operator: "gte" },
910
- { text: "grid.filterGtOperator", operator: "gt" },
911
- { text: "grid.filterLteOperator", operator: "lte" },
912
- { text: "grid.filterLtOperator", operator: "lt" },
913
- { text: "grid.filterIsNullOperator", operator: "isnull" },
914
- { text: "grid.filterIsNotNullOperator", operator: "isnotnull" }
915
- ],
916
- date: [
917
- { text: "grid.filterEqOperator", operator: "eq" },
918
- { text: "grid.filterNotEqOperator", operator: "neq" },
919
- { text: "grid.filterAfterOrEqualOperator", operator: "gte" },
920
- { text: "grid.filterAfterOperator", operator: "gt" },
921
- { text: "grid.filterBeforeOperator", operator: "lt" },
922
- { text: "grid.filterBeforeOrEqualOperator", operator: "lte" },
923
- { text: "grid.filterIsNullOperator", operator: "isnull" },
924
- { text: "grid.filterIsNotNullOperator", operator: "isnotnull" }
925
- ],
926
- boolean: [
927
- { text: "grid.filterEqOperator", operator: "eq" }
928
- ]
929
- }, L = (i) => i === "isnull" || i === "isnotnull" || i === "isempty" || i === "isnotempty", re = (i, t) => i.map((s) => ({
930
- text: t.toLanguageString(s.text, k[s.text]),
931
- operator: s.operator
932
- })), br = "eq", Xt = [
933
- { text: "grid.filterBooleanAll", operator: "" },
934
- { text: "grid.filterIsTrue", operator: !0 },
935
- { text: "grid.filterIsFalse", operator: !1 }
936
- ], xr = {
937
- text: !1,
938
- numeric: !1,
939
- date: !1,
940
- boolean: !0
941
- }, Yt = (i, t, s) => {
942
- const o = Jt(s.operators);
943
- let e = s.operator;
944
- switch (s.filterType) {
945
- case "numeric":
946
- (!e || L(e)) && (e = o), i === null && e === o && (e = "");
947
- break;
948
- case "date":
949
- (!e || L(e)) && (e = o), i === null && e === o && (e = "");
950
- break;
951
- case "text":
952
- (!e || L(e)) && (e = o), !i && e === o && (e = "");
953
- break;
954
- default:
955
- return;
956
- }
957
- s.onChange({ value: i, operator: e, syntheticEvent: t });
958
- }, Jt = (i, t) => t ? i[t][0].operator : i[0].operator, Ve = (i) => i || "text", Qt = (i, t) => {
959
- const s = i.target.value;
960
- t({
961
- value: s.operator,
962
- operator: s.operator === "" ? "" : br,
963
- syntheticEvent: i.syntheticEvent
964
- });
965
- }, Zt = (i, t, s) => {
966
- let o = t;
967
- const e = i.target.value;
968
- i.target.state.opened && (L(e.operator) && (o = null), t === null && !L(e.operator) && (o = void 0), s({ value: o, operator: e.operator, syntheticEvent: i.syntheticEvent }));
969
- };
970
- class es extends n.Component {
971
- constructor(t) {
972
- super(t), this._inputRef = n.createRef(), this.renderOperatorEditor = (s) => {
973
- if (this.props.filterType === "boolean")
974
- return;
975
- const o = this.props.operators.find((e) => e.operator === this.props.operator) || null;
976
- return /* @__PURE__ */ n.createElement(
977
- ie,
978
- {
979
- size: this.props.size,
980
- value: o,
981
- onChange: this.operatorChange,
982
- className: "k-dropdown-operator",
983
- iconClassName: "k-i-filter k-icon",
984
- svgIcon: be,
985
- data: this.props.operators,
986
- textField: "text",
987
- title: s.toLanguageString(_e, k[_e]),
988
- popupSettings: {
989
- width: ""
990
- }
991
- }
992
- );
993
- }, this.inputChange = this.inputChange.bind(this), this.clear = this.clear.bind(this), this.operatorChange = this.operatorChange.bind(this), this.boolDropdownChange = this.boolDropdownChange.bind(this);
994
- }
995
- /**
996
- * @hidden
997
- */
998
- render() {
999
- const t = D(this), s = /* @__PURE__ */ n.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ n.createElement("div", { className: "k-filtercell-wrapper" }, this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues), /* @__PURE__ */ n.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(t), " ", /* @__PURE__ */ n.createElement(
1000
- W,
1001
- {
1002
- size: this.props.size,
1003
- icon: "filter-clear",
1004
- svgIcon: Os,
1005
- className: y({
1006
- "k-clear-button-visible": !!(!(this.props.value === null || this.props.value === "") || this.props.operator)
1007
- }),
1008
- title: t.toLanguageString(U, k[U]),
1009
- type: "button",
1010
- onClick: this.clear,
1011
- disabled: !(!(this.props.value === null || this.props.value === "") || this.props.operator)
1012
- }
1013
- ))));
1014
- return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
1015
- }
1016
- inputChange(t, s) {
1017
- Yt(t, s, this.props);
1018
- }
1019
- operatorChange(t) {
1020
- Zt(t, this.props.value, this.props.onChange);
1021
- }
1022
- boolDropdownChange(t) {
1023
- Qt(t, this.props.onChange);
1024
- }
1025
- clear(t) {
1026
- t.preventDefault(), this.props.onChange({ value: "", operator: "", syntheticEvent: t }), this._inputRef.current && (this._inputRef.current.element.value = "", setTimeout(() => {
1027
- this._inputRef.current.element.focus();
1028
- }, 0));
1029
- }
1030
- filterComponent(t, s, o) {
1031
- switch (t) {
1032
- case "numeric":
1033
- return /* @__PURE__ */ n.createElement(
1034
- je,
1035
- {
1036
- ref: this._inputRef,
1037
- size: this.props.size,
1038
- value: s,
1039
- onChange: (e) => {
1040
- this.inputChange(e.value, e.syntheticEvent);
1041
- },
1042
- title: this.props.title,
1043
- ariaLabel: this.props.ariaLabel
1044
- }
1045
- );
1046
- case "date":
1047
- return /* @__PURE__ */ n.createElement(
1048
- Xe,
1049
- {
1050
- ref: this._inputRef,
1051
- size: this.props.size,
1052
- value: s,
1053
- onChange: (e) => {
1054
- this.inputChange(e.value, e.syntheticEvent);
1055
- },
1056
- title: this.props.title,
1057
- ariaLabel: this.props.ariaLabel
1058
- }
1059
- );
1060
- case "boolean": {
1061
- const e = (r) => r == null;
1062
- return /* @__PURE__ */ n.createElement(
1063
- ie,
1064
- {
1065
- ref: this._inputRef,
1066
- size: this.props.size,
1067
- onChange: this.boolDropdownChange,
1068
- value: o.find((r) => r.operator === (e(s) ? "" : s)),
1069
- data: o,
1070
- textField: "text",
1071
- title: this.props.title,
1072
- ariaLabel: this.props.ariaLabel
1073
- }
1074
- );
1075
- }
1076
- default:
1077
- return /* @__PURE__ */ n.createElement(
1078
- zt,
1079
- {
1080
- ref: this._inputRef,
1081
- size: this.props.size,
1082
- value: s || "",
1083
- onChange: (e) => {
1084
- this.inputChange(e.target.value, e.syntheticEvent);
1085
- },
1086
- title: this.props.title,
1087
- "aria-label": this.props.ariaLabel
1088
- }
1089
- );
1090
- }
1091
- }
1092
- }
1093
- G(es);
1094
- const vr = "k-table-row k-filter-row";
1095
- class ts extends n.Component {
1096
- headerCellClassName(t, s) {
1097
- let o = `${s ? "k-grid-header-sticky" : ""}`;
1098
- return this.props.sort && this.props.sort.filter((e) => e.field === t).length > 0 && (o += " k-sorted"), o;
1099
- }
1100
- setFilter(t, s, o, e) {
1101
- if (!this.props.filterChange)
1102
- return;
1103
- const r = [];
1104
- (t !== "" && t !== null || s !== "") && r.push({
1105
- field: o,
1106
- operator: s,
1107
- value: t
1108
- }), this.props.filter && this.props.filter.filters && (this.props.filter.filters || []).forEach((c) => {
1109
- const h = c;
1110
- h && h.field !== o && r.push(h);
1111
- });
1112
- const l = this.props.filter && this.props.filter.logic ? this.props.filter.logic : "and";
1113
- this.props.filterChange(r.length > 0 ? { logic: l, filters: r } : null, e);
1114
- }
1115
- render() {
1116
- const t = D(this), s = this.props.filter && this.props.filter.filters || [], o = (a) => {
1117
- if (a === void 0)
1118
- return;
1119
- const c = s.filter((h) => h.field === a);
1120
- return c.length ? c[0] : void 0;
1121
- };
1122
- let e = 0, r = -1;
1123
- const l = this.props.columns.filter((a) => a.children.length === 0).map(
1124
- (a) => {
1125
- const c = Ve(a.filter), h = o(a.field), d = a.filterable ? t.toLanguageString(Be, k[Be]) : void 0;
1126
- let u = h && h.value;
1127
- u === void 0 && (u = c === "text" ? "" : null);
1128
- const f = a.filterable && {
1129
- render: this.props.cellRender,
1130
- field: a.field,
1131
- title: a.filterTitle,
1132
- value: u,
1133
- operator: h && h.operator,
1134
- operators: re(this.props.filterOperators[c] || [], t),
1135
- booleanValues: re(Xt, t),
1136
- filterType: c,
1137
- ariaLabel: d,
1138
- onChange: (v) => {
1139
- this.setFilter(v.value, v.operator, a.field, v.syntheticEvent);
1140
- }
1141
- }, g = a.declarationIndex >= 0 ? ++r : --e, b = {
1142
- ariaLabel: d,
1143
- ariaColumnIndex: a.ariaColumnIndex
1144
- }, E = a.left !== void 0 ? this.props.isRtl ? { left: a.right, right: a.left } : { left: a.left, right: a.right } : {}, C = {
1145
- columnId: z.getFilterColumnId(a.id),
1146
- navigatable: a.navigatable,
1147
- style: E,
1148
- className: y("k-table-th", this.headerCellClassName(a.field, a.locked) || void 0),
1149
- role: "columnheader",
1150
- ...b
1151
- }, x = f && (a.filterCell ? /* @__PURE__ */ n.createElement(a.filterCell, { ...f }) : /* @__PURE__ */ n.createElement(es, { size: this.props.size, ...f })), S = xe(this.props.cells, a.cells);
1152
- if (S && S.filterCell) {
1153
- const v = S.filterCell;
1154
- return /* @__PURE__ */ n.createElement(v, { key: g, ...f, thProps: C, index: r }, x);
1155
- }
1156
- return /* @__PURE__ */ n.createElement(
1157
- Mt,
1158
- {
1159
- key: g,
1160
- ...C
1161
- },
1162
- x
1163
- );
1164
- }
1165
- );
1166
- return /* @__PURE__ */ n.createElement("tr", { className: vr, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, l);
1167
- }
1168
- }
1169
- G(ts);
1170
- class ss extends n.Component {
1171
- constructor() {
1172
- super(...arguments), this.draggable = null, this.onPress = (t) => {
1173
- const s = this.draggable && this.draggable.element;
1174
- s && this.props.onPress && this.props.onPress(t.event, s);
1175
- }, this.onDrag = (t) => {
1176
- const s = this.draggable && this.draggable.element;
1177
- s && this.props.onDrag && this.props.onDrag(t.event, s);
1178
- }, this.onRelease = (t) => {
1179
- this.draggable && this.draggable.element && this.props.onRelease && this.props.onRelease(t.event);
1180
- }, this.sortChange = (t) => {
1181
- if (t.preventDefault(), this.props.onSortChange) {
1182
- const s = this.props.dir === "asc" ? "desc" : "asc";
1183
- this.props.onSortChange(t, s);
1184
- }
1185
- }, this.groupRemove = (t) => {
1186
- t.preventDefault(), t.stopPropagation(), this.props.onRemove && this.props.onRemove(t);
1187
- }, this.onContextMenu = (t) => {
1188
- const s = {
1189
- title: this.props.title,
1190
- dir: this.props.dir,
1191
- index: this.props.index
1192
- };
1193
- this.props.onContextMenu && this.props.onContextMenu.call(void 0, t, { dataItem: { ...s } });
1194
- };
1195
- }
1196
- render() {
1197
- const { dir: t } = this.props;
1198
- return /* @__PURE__ */ n.createElement(
1199
- Nt,
1200
- {
1201
- onPress: this.onPress,
1202
- onDrag: this.onDrag,
1203
- onRelease: this.onRelease,
1204
- ref: (s) => {
1205
- this.draggable = s;
1206
- }
1207
- },
1208
- /* @__PURE__ */ n.createElement(
1209
- "div",
1210
- {
1211
- className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md",
1212
- onClick: this.sortChange,
1213
- onContextMenu: this.onContextMenu,
1214
- role: "button",
1215
- style: { touchAction: "none" }
1216
- },
1217
- /* @__PURE__ */ n.createElement("span", null, /* @__PURE__ */ n.createElement(
1218
- O,
1219
- {
1220
- name: "sort-" + t + "-small",
1221
- icon: t === "asc" ? qe : $e,
1222
- size: "small"
1223
- }
1224
- )),
1225
- /* @__PURE__ */ n.createElement("span", { className: "k-chip-content" }, this.props.title),
1226
- /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement(
1227
- "span",
1228
- {
1229
- className: "k-chip-action k-chip-remove-action",
1230
- onClick: this.groupRemove
1231
- },
1232
- /* @__PURE__ */ n.createElement(
1233
- O,
1234
- {
1235
- name: "x-circle",
1236
- icon: _s,
1237
- size: "small"
1238
- }
1239
- )
1240
- ))
1241
- )
1242
- );
1243
- }
1244
- }
1245
- G(ss);
1246
- class rs extends n.Component {
1247
- constructor() {
1248
- super(...arguments), this.onGroupRemove = (t, s) => {
1249
- const o = this.props.group.slice();
1250
- o.splice(s, 1), this.props.groupChange(o, t);
1251
- }, this.onGroupSortChange = (t, s, o, e) => {
1252
- const r = Object.assign({}, o, { dir: e }), l = this.props.group.slice();
1253
- l.splice(s, 1, r), this.props.groupChange(l, t);
1254
- };
1255
- }
1256
- render() {
1257
- const s = (this.props.group || []).map((o, e) => /* @__PURE__ */ n.createElement(
1258
- ss,
1259
- {
1260
- key: e,
1261
- index: e,
1262
- dir: o.dir || "asc",
1263
- title: this.props.resolveTitle(o.field),
1264
- onRemove: (r) => {
1265
- this.onGroupRemove(r, e);
1266
- },
1267
- onSortChange: (r, l) => {
1268
- this.onGroupSortChange(r, e, o, l);
1269
- },
1270
- onPress: this.props.pressHandler,
1271
- onDrag: this.props.dragHandler,
1272
- onRelease: this.props.releaseHandler,
1273
- onContextMenu: this.props.onContextMenu
1274
- }
1275
- ));
1276
- return /* @__PURE__ */ n.createElement(
1277
- "div",
1278
- {
1279
- ref: this.props.refCallback,
1280
- className: "k-grouping-header",
1281
- role: "toolbar",
1282
- "aria-label": D(this).toLanguageString(We, k[We]),
1283
- "aria-controls": this.props.ariaControls || ""
1284
- },
1285
- /* @__PURE__ */ n.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, s),
1286
- /* @__PURE__ */ n.createElement("div", { className: "k-grouping-drop-container" }, !s.length && D(this).toLanguageString(Me, k[Me]), " ")
1287
- );
1288
- }
1289
- }
1290
- G(rs);
1291
- class kr extends n.Component {
1292
- constructor() {
1293
- super(...arguments), this.footerWrap = null, this.table = null, this.scrollbarWidth = Ft();
1294
- }
1295
- componentDidMount() {
1296
- this.setState({});
1297
- }
1298
- /**
1299
- *
1300
- * @param scrollLeft - Scrolls to the left (in pixels).
1301
- */
1302
- setScrollLeft(t) {
1303
- this.footerWrap && (this.footerWrap.scrollLeft = t);
1304
- }
1305
- /**
1306
- *
1307
- * @param width - Scrolls the width (in pixels).
1308
- */
1309
- setWidth(t) {
1310
- this.table && (this.table.style.width = t + "px");
1311
- }
1312
- render() {
1313
- return this.props.staticHeaders ? /* @__PURE__ */ n.createElement(
1314
- "div",
1315
- {
1316
- className: "k-grid-footer",
1317
- role: "presentation"
1318
- },
1319
- /* @__PURE__ */ n.createElement(
1320
- "div",
1321
- {
1322
- ref: (t) => {
1323
- this.footerWrap = t;
1324
- },
1325
- className: "k-grid-footer-wrap",
1326
- style: this.scrollbarWidth ? {} : { borderWidth: 0 },
1327
- role: "presentation"
1328
- },
1329
- /* @__PURE__ */ n.createElement(
1330
- "table",
1331
- {
1332
- ref: (t) => {
1333
- this.table = t;
1334
- },
1335
- className: y(
1336
- "k-table k-grid-footer-table",
1337
- {
1338
- "k-table-md": !this.props.size,
1339
- [`k-table-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size
1340
- },
1341
- this.props.className
1342
- ),
1343
- role: "presentation"
1344
- },
1345
- /* @__PURE__ */ n.createElement("colgroup", { ref: (t) => {
1346
- this.props.columnResize.colGroupFooter = t;
1347
- }, role: "presentation" }, this.props.cols),
1348
- /* @__PURE__ */ n.createElement("tfoot", { className: "k-table-tfoot", role: "presentation" }, this.props.row)
1349
- )
1350
- )
1351
- ) : /* @__PURE__ */ n.createElement("tfoot", { className: "k-table-tfoot" }, this.props.row);
1352
- }
1353
- }
1354
- class Er {
1355
- constructor(t) {
1356
- this.table = null, this.containerHeight = 0, this.topCacheCount = 0, this.attendedSkip = 0, this.propsSkip = 0, this.total = 0, this.scrollableVirtual = !1, this.realSkip = 0, this.pageSize = 0, this.PageChange = null, this.tableBodyRef = n.createRef(), this.fixedScroll = !1, this.askedSkip = void 0, this.containerRef = n.createRef(), this.tableTransform = "", this.prevScrollPos = 0, this.tableTranslate = 0, this.scrollSyncing = !1, this.reactVersion = Number.parseFloat(n.version), this.topItems = (s, o) => {
1357
- if (!this.container || o)
1358
- return { topItemsCount: 0, topItemsHeight: 0 };
1359
- const e = this.container.clientHeight, r = Math.ceil(e / s[0].line), l = Math.ceil((s.length - r) / 2);
1360
- let a = 0;
1361
- for (let c = 0; c < l; c++)
1362
- a += s[c].line + s[c].acc;
1363
- return {
1364
- topItemsCount: l,
1365
- topItemsHeight: a,
1366
- itemsNeededOnScreen: r + r / 2
1367
- };
1368
- }, this.horizontalScrollbarHeight = () => this.container ? this.container.offsetHeight - this.container.clientHeight : 0, t && (this.topCacheCount = 4, this.attendedSkip = -this.topCacheCount), this.scrollHandler = this.scrollHandler.bind(this);
1369
- }
1370
- get container() {
1371
- return this.containerRef.current;
1372
- }
1373
- /**
1374
- * @return - The row heights in an array.
1375
- */
1376
- get rowHeights() {
1377
- const t = [], s = this.tableBodyRef.current && this.tableBodyRef.current.children || [];
1378
- let o = 0;
1379
- for (let e = 0; e < s.length; e++) {
1380
- if (s[e].className.indexOf("k-grouping-row") > -1) {
1381
- o += s[e].scrollHeight;
1382
- continue;
1383
- }
1384
- s[e].className.indexOf("k-detail-row") > -1 ? t[t.length - 1].line += s[e].scrollHeight : (t.push({
1385
- line: s[e].scrollHeight,
1386
- acc: o
1387
- }), o = 0);
1388
- }
1389
- return t;
1390
- }
1391
- changePage(t, s) {
1392
- this.attendedSkip = t - this.topCacheCount, this.PageChange && this.PageChange(
1393
- {
1394
- skip: Math.max(0, t - this.topCacheCount),
1395
- take: this.pageSize
1396
- },
1397
- s
1398
- );
1399
- }
1400
- translate(t, s) {
1401
- this.tableTranslate = t, this.scrollableVirtual && this.table && (this.reactVersion <= 17 || s ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
1402
- }
1403
- reset() {
1404
- this.scrollSyncing = !0, !this.fixedScroll && (this.container && (this.container.scrollTop = 0), this.translate(0, !0));
1405
- }
1406
- localScrollUp(t) {
1407
- if (!this.container)
1408
- return;
1409
- const s = this.rowHeights, o = this.container.scrollTop;
1410
- let e = this.tableTranslate, r = 0;
1411
- const {
1412
- topItemsCount: l,
1413
- topItemsHeight: a,
1414
- itemsNeededOnScreen: c
1415
- } = this.topItems(s, !!this.topCacheCount), h = o - e;
1416
- if (!(h > a || s.length <= c)) {
1417
- for (; r < this.topCacheCount + this.attendedSkip - this.realSkip + l && this.propsSkip - r > 0 && !(e + (s[s.length - 1 - r].line + s[s.length - 1 - r].acc) + h <= o); )
1418
- e -= s[s.length - 1 - r].line + s[s.length - 1 - r].acc, r++;
1419
- if (r === 0 && this.topCacheCount === 0 && this.attendedSkip > 0 && (e = Math.max(e - s[0].line, 0), r = 1), this.propsSkip - r <= 0 && e > o) {
1420
- this.translate(0), this.changePage(0, t), this.container.scrollTop = 0;
1421
- return;
1422
- }
1423
- if (e > o && (e = o), e !== this.tableTranslate) {
1424
- this.translate(Math.max(0, e - a));
1425
- const d = Math.max(0, this.propsSkip - r - l);
1426
- this.changePage(d, t);
1427
- }
1428
- }
1429
- }
1430
- localScrollDown(t) {
1431
- if (!this.container)
1432
- return;
1433
- const s = this.rowHeights, o = this.container.scrollTop;
1434
- let e = this.tableTranslate, r = 0;
1435
- const {
1436
- topItemsCount: l,
1437
- topItemsHeight: a,
1438
- itemsNeededOnScreen: c
1439
- } = this.topItems(s, !!this.topCacheCount);
1440
- for (; r < s.length - this.topCacheCount && !(e + s[r].line + s[r].acc > o); )
1441
- e += s[r].line + s[r].acc, r++;
1442
- l > this.propsSkip + r || s.length <= c || (r >= s.length - this.topCacheCount && this.propsSkip + r >= this.total ? (this.translate(e - a), this.changePage(this.total - 1 - l, t)) : e !== this.tableTranslate && this.propsSkip + r - l !== this.propsSkip && (this.translate(e - a), this.changePage(this.propsSkip + r - l, t)));
1443
- }
1444
- scrollNonStrict(t) {
1445
- const s = this.total * this.prevScrollPos / this.containerHeight;
1446
- let o = Math.floor(s);
1447
- o >= this.total && (o = this.total - 1);
1448
- const e = Math.min(s - o, 1);
1449
- let r = 0;
1450
- const l = o - this.propsSkip, a = this.rowHeights;
1451
- l >= 0 && l <= 1 ? r = -((a[0].line + a[0].acc) * e) : l === -1 && (r = -((a[a.length - 1].line + a[a.length - 1].acc) * e));
1452
- const { topItemsCount: c, topItemsHeight: h } = this.topItems(a, !!this.topCacheCount);
1453
- this.translate(Math.max(0, r - h - this.horizontalScrollbarHeight() + this.containerHeight * s / this.total)), this.changePage(o - c, t);
1454
- }
1455
- scrollHandler(t) {
1456
- if (!this.scrollableVirtual)
1457
- return;
1458
- if (this.scrollSyncing || !this.container || !this.table) {
1459
- this.scrollSyncing = !1;
1460
- return;
1461
- }
1462
- const s = this.container.scrollTop, o = this.prevScrollPos;
1463
- if (this.prevScrollPos = s, this.askedSkip !== void 0) {
1464
- this.translate(this.containerHeight * this.askedSkip / this.total), this.changePage(this.askedSkip, t), this.prevScrollPos = s, this.askedSkip = void 0;
1465
- return;
1466
- }
1467
- s - o < 0 && s > this.tableTranslate - this.table.scrollHeight / 10 ? this.localScrollUp(t) : s - o > 0 && s < this.tableTranslate + this.table.scrollHeight * 2 / 3 ? this.localScrollDown(t) : this.scrollNonStrict(t), this.prevScrollPos = s;
1468
- }
1469
- }
1470
- class Et {
1471
- constructor(t = 0, s, o, e) {
1472
- this.total = t, this.offsets = [], this.heights = [];
1473
- let r = 0;
1474
- for (let l = 0; l < t; l++) {
1475
- this.offsets.push(r);
1476
- const a = e && e[l].expanded && e[l].rowType === "data" ? o : s;
1477
- r += a, this.heights.push(a);
1478
- }
1479
- }
1480
- height(t) {
1481
- return this.heights[t];
1482
- }
1483
- index(t) {
1484
- if (t < 0)
1485
- return;
1486
- const s = this.offsets.reduce((o, e, r) => {
1487
- if (o !== void 0)
1488
- return o;
1489
- if (e === t)
1490
- return r;
1491
- if (e > t)
1492
- return r - 1;
1493
- }, void 0);
1494
- return s === void 0 ? this.total - 1 : s;
1495
- }
1496
- offset(t) {
1497
- return this.offsets[t];
1498
- }
1499
- totalHeight() {
1500
- const t = this.offsets[this.offsets.length - 1], s = this.heights[this.heights.length - 1];
1501
- return t + s;
1502
- }
1503
- }
1504
- class St {
1505
- constructor(t) {
1506
- this.table = null, this.containerHeight = 0, this.topCacheCount = 0, this.attendedSkip = 0, this.propsSkip = 0, this.total = 0, this.scrollableVirtual = !1, this.realSkip = 0, this.pageSize = 0, this.PageChange = null, this.tableBodyRef = n.createRef(), this.fixedScroll = !1, this.askedSkip = void 0, this.containerRef = n.createRef(), this.tableTransform = "", this.scrollSyncing = !1, this.lastLoaded = 0, this.firstLoaded = 0, this.lastScrollTop = 0, this.reactVersion = Number.parseFloat(n.version), this.firstLoaded = this.pageSize, this.lastLoaded = this.realSkip + this.pageSize, this.scrollHandler = this.scrollHandler.bind(this);
1507
- }
1508
- get container() {
1509
- return this.containerRef.current;
1510
- }
1511
- translate(t, s) {
1512
- this.scrollableVirtual && this.table && (De || this.reactVersion <= 17 || s ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
1513
- }
1514
- changePage(t, s) {
1515
- this.PageChange && this.PageChange({ skip: Math.max(0, t), take: this.pageSize }, s);
1516
- }
1517
- reset() {
1518
- this.scrollSyncing = !0, !this.fixedScroll && (this.container && (this.container.scrollTop = 0), this.translate(0, !0));
1519
- }
1520
- scrollHandler(t) {
1521
- if (!this.scrollableVirtual || !this.container || !this.table || !this.rowHeightService || !this.containerRef.current)
1522
- return;
1523
- if (this.scrollSyncing) {
1524
- this.scrollSyncing = !1;
1525
- return;
1526
- }
1527
- const s = this.container.scrollTop, o = this.lastScrollTop >= s, e = !o;
1528
- this.lastScrollTop = s;
1529
- let r = this.rowHeightService.index(s), l = this.rowHeightService.offset(r);
1530
- const { offsetHeight: a } = this.containerRef.current, c = this.rowHeightService.index(s + a);
1531
- if (e && c >= this.lastLoaded && this.lastLoaded < this.total) {
1532
- const h = r + this.pageSize - this.total;
1533
- h > 0 && (r = r - h, l = this.rowHeightService.offset(r)), this.firstLoaded = r, this.translate(l);
1534
- let d = this.firstLoaded + this.pageSize;
1535
- this.lastLoaded = Math.min(d, this.total), this.changePage(this.firstLoaded, t);
1536
- } else if (o && r < this.firstLoaded) {
1537
- const h = Math.floor(this.pageSize * 0.3);
1538
- this.firstLoaded = Math.max(r - h, 0), this.translate(this.rowHeightService.offset(this.firstLoaded)), this.lastLoaded = Math.min(this.firstLoaded + this.pageSize, this.total), this.changePage(this.firstLoaded, t);
1539
- }
1540
- }
1541
- }
1542
- const Sr = 1, Ir = 20;
1543
- class yr {
1544
- constructor(t) {
1545
- this.columns = [], this.resizable = !1, this.isRtl = !1, this.setIsRtl = (s) => {
1546
- this.isRtl = s;
1547
- }, this.dragHandler = (s, o, e, r) => {
1548
- const l = s.originalEvent;
1549
- r || (l.preventDefault(), l.stopPropagation(), l.stopImmediatePropagation());
1550
- const a = e.closest("th");
1551
- if (!a || !a)
1552
- return;
1553
- const c = a.clientWidth;
1554
- let h = c;
1555
- if (this.isRtl ? h += e.getBoundingClientRect().right - e.offsetWidth / 2 - s.clientX : h += s.clientX - e.getBoundingClientRect().left - e.offsetWidth / 2, !r && Math.abs(h - c) < 1)
1556
- return;
1557
- this.fixateInitialWidths(a.parentElement.clientWidth), this.setWidths(o, Math.floor(h) / c);
1558
- const d = this.columns.filter((u) => !u.children.length).findIndex((u) => u.id === o.id);
1559
- this.onResize(d, c, h, l, r, o.id);
1560
- }, this.dblClickHandler = (s, o) => {
1561
- const e = this.columns.filter((f) => o.indexOf(f.id) > -1);
1562
- if (!this.colGroupMain || !e.length)
1563
- return;
1564
- const r = {}, l = e;
1565
- for (; l.length > 0; ) {
1566
- const f = l.pop();
1567
- if (!f)
1568
- break;
1569
- f.children.length ? l.push(...f.children) : r[f.id] = f;
1570
- }
1571
- const a = this.columns.filter((f) => !f.children.length), c = [];
1572
- a.forEach((f, g) => {
1573
- r[f.id] && c.push(g);
1574
- });
1575
- const h = [this.colGroupMain.parentElement], d = [this.colGroupMain];
1576
- this.colGroupHeader && (h.push(this.colGroupHeader.parentElement), d.push(this.colGroupHeader)), this.colGroupFooter && (h.push(this.colGroupFooter.parentElement), d.push(this.colGroupFooter)), h.forEach((f) => f.classList.add("k-autofitting"));
1577
- let u = [];
1578
- d.forEach((f) => {
1579
- c.forEach((g) => {
1580
- f.children[g] && (f.children[g].width = "", u[g] = Math.max(u[g] || 0, f.children[g].offsetWidth + Sr));
1581
- });
1582
- }), d.forEach((f) => {
1583
- c.forEach((g) => {
1584
- f.children[g] && (f.children[g].width = u[g] + "px", a[g].width = u[g]);
1585
- });
1586
- }), h.forEach((f) => f.classList.remove("k-autofitting")), this.onResize(c[0], 0, 0, s, !0, o[0]);
1587
- }, this.updateColElements = (s) => {
1588
- const o = this.columns.filter((r) => !r.children.length);
1589
- let e = 1e-10;
1590
- for (let r = 0; r < s.length; r++) {
1591
- const l = s[r], a = o.findIndex((u) => u.id === l.id), c = parseFloat((l.width || 0).toString()), h = Math.floor(c);
1592
- e += c - h;
1593
- const d = h + Math.floor(e);
1594
- if (e -= Math.floor(e), this.colGroupMain && this.colGroupMain.children[a]) {
1595
- const u = parseInt(this.colGroupMain.children[a].width, 10);
1596
- this.colGroupMain.children[a].width = d + "px", this.updateNextLockedCol(
1597
- this.colGroupMain.parentElement,
1598
- l,
1599
- u - d
1600
- );
1601
- }
1602
- if (this.colGroupHeader && this.colGroupHeader.children[a]) {
1603
- const u = parseInt(this.colGroupHeader.children[a].width, 10);
1604
- this.colGroupHeader.children[a].width = d + "px", this.updateNextLockedCol(
1605
- this.colGroupHeader.parentElement,
1606
- l,
1607
- u - d
1608
- );
1609
- }
1610
- if (this.colGroupFooter && this.colGroupFooter.children[a]) {
1611
- const u = parseInt(this.colGroupFooter.children[a].width, 10);
1612
- this.colGroupFooter.children[a].width = d + "px", this.updateNextLockedCol(
1613
- this.colGroupFooter.parentElement,
1614
- l,
1615
- u - d
1616
- );
1617
- }
1618
- }
1619
- }, this.onResize = t;
1620
- }
1621
- fixateInitialWidths(t) {
1622
- const s = this.columns.filter((l) => !l.children.length);
1623
- let o = 0, e = this.colGroupMain ? this.colGroupMain.children : [];
1624
- for (let l = 0; l < e.length; l++)
1625
- e[l].width ? t -= parseFloat(e[l].width) : o++;
1626
- if (o === 0)
1627
- return;
1628
- const r = Math.floor(t / o);
1629
- for (let l = 0; l < e.length; l++) {
1630
- const a = e[l];
1631
- a.width || (a.width = r, s[l].width = r.toString(), this.colGroupHeader && (this.colGroupHeader.children[l].width = r), this.colGroupFooter && (this.colGroupFooter.children[l].width = r));
1632
- }
1633
- }
1634
- setWidths(t, s) {
1635
- const o = this.columns.findIndex((l) => l.id === t.id), e = [];
1636
- let r = t.children.length;
1637
- for (let l = o + 1; r > 0 && l < this.columns.length; l++, r--) {
1638
- const a = this.columns[l];
1639
- a.children.length ? r += a.children.length : e.push(a);
1640
- }
1641
- return e.length === 0 && e.push(t), e.forEach((l) => {
1642
- let a = l.width ? parseFloat(l.width.toString()) * s : 0;
1643
- const c = l.minResizableWidth === void 0 ? 10 : l.minResizableWidth;
1644
- a < c && (a = c), l.width = a;
1645
- }), this.updateColElements(e), e;
1646
- }
1647
- updateNextLockedCol(t, s, o) {
1648
- const e = s.index, r = this.colGroupMain.parentElement.closest(".k-grid"), l = r == null ? void 0 : r.clientWidth, a = this.columns.filter((c) => c.locked).map((c) => parseInt(c.width + "", 10)).reduce((c, h) => c + h, 0);
1649
- !s.locked || l <= a + Ir || this.columns.forEach((c) => {
1650
- if (c != null && c.locked && o) {
1651
- const h = t == null ? void 0 : t.querySelectorAll('[aria-colindex="' + c.ariaColumnIndex + '"]');
1652
- h == null || h.forEach((d) => {
1653
- const u = d.style;
1654
- this.isRtl ? (c.index > e && u && u.right && (u.right = parseInt(u.right, 10) - o + "px"), c.index < e && u && u.left && (u.left = parseInt(u.left, 10) - o + "px")) : (c.index > e && u && u.left && (u.left = parseInt(u.left, 10) - o + "px"), c.index < e && u && u.right && (u.right = parseInt(u.right, 10) - o + "px"));
1655
- });
1656
- }
1657
- });
1658
- }
1659
- }
1660
- class wr {
1661
- constructor(t, s, o) {
1662
- this.refDragElementClue = n.createRef(), this.refDropElementClue = n.createRef(), this.columns = [], this.reorderable = !1, this.groupable = !1, this.startColumn = -1, this.startGroup = -1, this.currentColumn = -1, this.currentGroup = -1, this.groupPanelDivElement = null, this.refGroupPanelDiv = (e) => {
1663
- this.groupPanelDivElement = e && e.children ? e.children[0] : e;
1664
- }, this.pressHandler = (e, r) => {
1665
- const l = this.getColumnIndex(e, r);
1666
- if (this.startGroup = this.getGroupIndex(e), l >= 0) {
1667
- const a = this.columns[l];
1668
- (a.reorderable && this.reorderable || a.groupable && this.groupable) && (this.startColumn = l);
1669
- }
1670
- }, this.dragHandler = (e, r) => {
1671
- if (e.isTouch || e.originalEvent.preventDefault(), e.originalEvent.stopPropagation(), this.startColumn === -1 && this.startGroup === -1)
1672
- return;
1673
- this.currentColumn = this.getColumnIndex(e, r);
1674
- const l = this.groupPanelDivElement && this.groupPanelDivElement.children;
1675
- this.currentGroup = this.isTargetGroupingContainer(e) ? l && l.length ? l.length : 0 : this.getGroupIndex(e);
1676
- const a = !this.isValid();
1677
- a && (this.currentColumn = -1, this.currentGroup = -1);
1678
- const c = this.currentColumn >= 0 ? r.children[this.columns[this.currentColumn].index] : this.isTargetGroupingContainer(e) ? e.originalEvent.target : this.groupPanelDivElement && this.groupPanelDivElement.children[this.currentGroup];
1679
- this.updateDragElementClue(e, r, c, a), this.updateDropElementClue(e, r, c, a);
1680
- }, this.releaseHandler = (e) => {
1681
- const r = this.startColumn, l = this.currentColumn, a = this.startGroup, c = this.currentGroup;
1682
- e.originalEvent.preventDefault(), this.dropElementClue && this.dropElementClue.setState({ visible: !1 }), this.dragElementClue && this.dragElementClue.setState({ visible: !1 });
1683
- const h = this.isValid();
1684
- this.startColumn = this.startGroup = this.currentColumn = this.currentGroup = -1, h && (r >= 0 && l >= 0 ? this.columnReorder(r, l, e.originalEvent) : a >= 0 && c >= 0 ? this.groupReorder(a, c, e.originalEvent) : r >= 0 && c >= 0 && this.columnToGroup(r, c, e.originalEvent));
1685
- }, this.columnReorder = t, this.groupReorder = s, this.columnToGroup = o;
1686
- }
1687
- get dragClueRef() {
1688
- return this.refDragElementClue;
1689
- }
1690
- get dropClueRef() {
1691
- return this.refDropElementClue;
1692
- }
1693
- get dragElementClue() {
1694
- return this.refDragElementClue.current;
1695
- }
1696
- get dropElementClue() {
1697
- return this.refDropElementClue.current;
1698
- }
1699
- getColumnIndex(t, s) {
1700
- if (!s || s.parentElement === this.groupPanelDivElement)
1701
- return -1;
1702
- const o = dt(t, s);
1703
- if (o === -1)
1704
- return -1;
1705
- for (let e = 0; e < s.parentNode.children.length; e++)
1706
- if (s.parentNode.children[e] === s)
1707
- return this.columns.findIndex((r) => r.index === o && r.depth === e);
1708
- return -1;
1709
- }
1710
- isTargetGroupingContainer(t) {
1711
- const s = t.originalEvent.target;
1712
- return s.className.indexOf ? s.className.indexOf("k-grouping-drop-container") !== -1 : !1;
1713
- }
1714
- getGroupIndex(t) {
1715
- return dt(t, this.groupPanelDivElement);
1716
- }
1717
- isValid() {
1718
- return this.startGroup >= 0 ? this.currentGroup >= 0 && this.currentGroup !== this.startGroup : this.startColumn === -1 ? !1 : this.currentGroup >= 0 ? this.columns[this.startColumn].groupable === !0 && this.groupable === !0 : this.reorderable === !0 && this.currentColumn >= 0 && this.currentColumn !== this.startColumn && this.columns[this.startColumn].reorderable === !0 && this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
1719
- }
1720
- updateDragElementClue(t, s, o, e) {
1721
- if (!this.dragElementClue)
1722
- return;
1723
- const r = this.startColumn >= 0 ? s.children[this.columns[this.startColumn].index].innerText : s.innerText;
1724
- this.dragElementClue.setState({
1725
- visible: !0,
1726
- top: t.pageY + 10,
1727
- left: t.pageX,
1728
- innerText: r,
1729
- status: e || !o ? "k-i-cancel" : "k-i-plus"
1730
- });
1731
- }
1732
- updateDropElementClue(t, s, o, e) {
1733
- if (!this.dropElementClue)
1734
- return;
1735
- if (e || !o) {
1736
- this.dropElementClue.setState({ visible: !1 });
1737
- return;
1738
- }
1739
- const r = o.getBoundingClientRect(), a = (o.closest(".k-grouping-header") || o).getBoundingClientRect();
1740
- let c = r.left + t.pageX - t.clientX - 6;
1741
- !this.isTargetGroupingContainer(t) && (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) && (c += r.width);
1742
- const h = a.top + t.pageY - t.clientY;
1743
- this.dropElementClue.setState({
1744
- visible: !0,
1745
- top: h,
1746
- left: c,
1747
- height: this.currentColumn >= 0 ? s.clientHeight : a.height
1748
- });
1749
- }
1750
- }
1751
- const Rr = (i) => {
1752
- let t = null;
1753
- const s = Hs(), o = q(i.id), e = n.useCallback((h) => {
1754
- i.onContextMenu && i.onContextMenu.call(void 0, h, i.dataItem, i.field);
1755
- }, [i.onContextMenu, i.dataItem, i.field]);
1756
- let r = null, l = null;
1757
- if (i.rowType === "groupFooter")
1758
- r = {
1759
- onContextMenu: e,
1760
- className: i.className
1761
- }, t = /* @__PURE__ */ n.createElement("td", { ...r });
1762
- else if (i.rowType !== "groupHeader") {
1763
- if (i.field !== void 0) {
1764
- const d = M(i.field, i.dataItem);
1765
- d != null && (l = i.format ? s.format(i.format, d) : d.toString());
1766
- }
1767
- const h = y(
1768
- "k-table-td",
1769
- i.className,
1770
- { "k-selected": i.isSelected }
1771
- );
1772
- r = {
1773
- onContextMenu: e,
1774
- colSpan: i.colSpan,
1775
- style: i.style,
1776
- className: h,
1777
- role: "gridcell",
1778
- "aria-colindex": i.ariaColumnIndex,
1779
- "aria-selected": i.isSelected,
1780
- [se]: i.columnIndex,
1781
- ...o
1782
- }, t = /* @__PURE__ */ n.createElement("td", { ...r }, l);
1783
- }
1784
- const a = i.rowType || "data", c = i.cells;
1785
- if (c && c[a]) {
1786
- const h = c[a];
1787
- return /* @__PURE__ */ n.createElement(h, { ...i, tdProps: r }, l);
1788
- }
1789
- return i.render ? i.render.call(void 0, t, i) : t;
1790
- }, It = (i) => {
1791
- let t = null;
1792
- const { columnIndex: s, level: o, columnsCount: e, rowType: r, dataItem: l, field: a, onChange: c, expanded: h, render: d, dataIndex: u, ariaColumnIndex: f, isRtl: g } = i, b = a || "", E = q(i.id), C = Ue();
1793
- let x = null, S = null, v = null;
1794
- const _ = n.useCallback(
1795
- (F) => {
1796
- F.isDefaultPrevented() || F.keyCode === Ce.enter && c && (F.preventDefault(), c({
1797
- dataItem: l,
1798
- dataIndex: u,
1799
- syntheticEvent: F,
1800
- field: void 0,
1801
- value: !h
1802
- }));
1803
- },
1804
- [h, c, l, u]
1805
- ), T = n.useCallback((F) => {
1806
- i.onContextMenu && i.onContextMenu.call(void 0, F, i.dataItem, i.field);
1807
- }, [i.onContextMenu, i.dataItem, i.field]), de = (F, ke) => {
1808
- const pe = h ? Vt : Wt, Ee = C.toLanguageString(pe, k[pe]);
1809
- return x = {
1810
- className: "k-table-td",
1811
- style: { ...i.style, ...ke },
1812
- colSpan: F,
1813
- key: "g-colspan",
1814
- role: "gridcell",
1815
- ["aria-selected"]: !1,
1816
- ["aria-expanded"]: h,
1817
- ["aria-colindex"]: f,
1818
- onKeyDown: _,
1819
- onContextMenu: T,
1820
- ...E
1821
- }, v = /* @__PURE__ */ n.createElement("p", { className: "k-reset" }, /* @__PURE__ */ n.createElement(
1822
- "a",
1823
- {
1824
- onClick: (J) => {
1825
- J.preventDefault(), c && c({
1826
- dataItem: l,
1827
- dataIndex: u,
1828
- syntheticEvent: J,
1829
- field: void 0,
1830
- value: !h
1831
- });
1832
- },
1833
- href: "#",
1834
- tabIndex: -1,
1835
- "aria-label": Ee
1836
- },
1837
- /* @__PURE__ */ n.createElement(
1838
- O,
1839
- {
1840
- name: h ? "caret-alt-down" : g ? "caret-alt-left" : "caret-alt-right",
1841
- icon: h ? Ps : g ? As : Bs
1842
- }
1843
- )
1844
- ), l[b] instanceof Date && l[b].toString ? l[b].toString() : l[b]), /* @__PURE__ */ n.createElement(
1845
- "td",
1846
- {
1847
- ...x,
1848
- key: x.key
1849
- },
1850
- v
1851
- );
1852
- };
1853
- s === void 0 || o === void 0 || s < o || e === void 0 || r !== "groupHeader" || l[b] === void 0 ? (x = {
1854
- style: i.style,
1855
- key: "g" + s,
1856
- className: y(
1857
- "k-table-td",
1858
- "k-group-cell",
1859
- { "k-grid-content-sticky": i.locked }
1860
- ),
1861
- role: "gridcell",
1862
- onContextMenu: T
1863
- }, t = /* @__PURE__ */ n.createElement(
1864
- "td",
1865
- {
1866
- ...x,
1867
- key: x.key
1868
- }
1869
- )) : s <= o && !i.locked ? t = de(e - s, {}) : s <= o && i.locked && (S = {
1870
- className: "k-table-td",
1871
- role: "gridcell",
1872
- colSpan: e - s,
1873
- style: { borderLeftWidth: 0, borderRightWidth: 0 },
1874
- onContextMenu: T
1875
- }, t = /* @__PURE__ */ n.createElement(n.Fragment, null, de(0, { position: "sticky", zIndex: 2 }), /* @__PURE__ */ n.createElement(
1876
- "td",
1877
- {
1878
- ...S
1879
- }
1880
- )));
1881
- const Y = i.rowType || "data", $ = i.cells;
1882
- if ($ && $.group && $.group[Y]) {
1883
- const F = $.group[Y];
1884
- return /* @__PURE__ */ n.createElement(F, { ...i, tdProps: x, td2Props: S }, v);
1885
- }
1886
- return d ? d.call(void 0, t, i) : t;
1887
- };
1888
- class Fr extends n.Component {
1889
- /**
1890
- * @hidden
1891
- */
1892
- render() {
1893
- const t = y(
1894
- "k-table-row",
1895
- {
1896
- "k-table-group-row k-grouping-row": this.props.rowType === "groupHeader",
1897
- "k-group-footer": this.props.rowType === "groupFooter",
1898
- "k-master-row": this.props.rowType !== "groupHeader" && this.props.rowType !== "groupFooter",
1899
- "k-table-alt-row k-alt": this.props.rowType !== "groupHeader" && this.props.rowType !== "groupFooter" && this.props.isAltRow,
1900
- "k-selected": this.props.isSelected,
1901
- "k-grid-edit-row": this.props.isInEdit
1902
- }
1903
- ), s = /* @__PURE__ */ n.createElement(
1904
- "tr",
1905
- {
1906
- id: this.props.id,
1907
- onClick: this.props.onClick,
1908
- onDoubleClick: this.props.onDoubleClick,
1909
- className: t,
1910
- style: {
1911
- height: this.props.rowHeight ? this.props.rowHeight + "px" : "",
1912
- visibility: this.props.isHidden ? "hidden" : ""
1913
- },
1914
- role: "row",
1915
- "aria-rowindex": this.props.ariaRowIndex,
1916
- "absolute-row-index": this.props.absoluteRowIndex,
1917
- key: this.props.absoluteRowIndex,
1918
- [hr]: this.props.rowType === "data" ? this.props.dataIndex : void 0
1919
- },
1920
- this.props.children
1921
- );
1922
- return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
1923
- }
1924
- }
1925
- class is extends n.Component {
1926
- get _inputId() {
1927
- return this.props.id;
1928
- }
1929
- render() {
1930
- const t = D(this), { columnMenuWrapperProps: s } = this.props, o = [
1931
- /* @__PURE__ */ n.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
1932
- "input",
1933
- {
1934
- id: this._inputId,
1935
- type: "checkbox",
1936
- className: "k-checkbox k-checkbox-md k-rounded-md",
1937
- "aria-label": t.toLanguageString(le, k[le]),
1938
- "aria-checked": this.props.selectionValue,
1939
- checked: this.props.selectionValue,
1940
- onChange: (e) => this.props.selectionChange({
1941
- field: this.props.field,
1942
- syntheticEvent: e
1943
- })
1944
- }
1945
- )),
1946
- s.columnMenu && /* @__PURE__ */ n.createElement($t, { ...s })
1947
- ];
1948
- return this.props.render ? this.props.render.call(void 0, o, this.props) : o;
1949
- }
1950
- }
1951
- G(is);
1952
- const Nr = Dt(is);
1953
- class Ye extends n.Component {
1954
- /**
1955
- * @hidden
1956
- */
1957
- render() {
1958
- return this.props.children || D(this).toLanguageString(Te, k[Te]);
1959
- }
1960
- }
1961
- Ye.displayName = "KendoReactGridNoRecords";
1962
- G(Ye);
1963
- class Dr extends n.Component {
1964
- constructor() {
1965
- super(...arguments), this._element = null, this.renderCell = (t, s) => {
1966
- const o = {
1967
- colSpan: t.colSpan !== 1 ? t.colSpan : void 0,
1968
- style: t.left !== void 0 ? this.props.isRtl ? { left: t.right, right: t.left } : { left: t.left, right: t.right } : {},
1969
- className: y(
1970
- "k-table-td",
1971
- t.locked && t.left !== void 0 ? "k-grid-footer-sticky" : ""
1972
- ),
1973
- key: s,
1974
- role: "gridcell",
1975
- ["aria-colindex"]: t.ariaColumnIndex
1976
- }, e = {
1977
- field: t.field,
1978
- ariaColumnIndex: t.ariaColumnIndex,
1979
- ...o
1980
- }, r = xe(this.props.cells, t.cells);
1981
- if (r && r.footerCell) {
1982
- const l = r.footerCell;
1983
- return /* @__PURE__ */ n.createElement(l, { ...e, tdProps: o, index: s });
1984
- }
1985
- return t.footerCell && /* @__PURE__ */ n.createElement(t.footerCell, { ...e, key: s }) || /* @__PURE__ */ n.createElement("td", { ...o });
1986
- };
1987
- }
1988
- get element() {
1989
- return this._element;
1990
- }
1991
- render() {
1992
- return /* @__PURE__ */ n.createElement("tr", { className: "k-table-row", role: "row", "aria-rowindex": this.props.ariaRowIndex }, Ys(this.props.columns).map(this.renderCell));
1993
- }
1994
- }
1995
- const Tr = ({
1996
- buttonCount: i = 10,
1997
- info: t = !0,
1998
- type: s = "numeric",
1999
- pageSizes: o = void 0,
2000
- previousNext: e = !0,
2001
- responsive: r = void 0,
2002
- pageSizeValue: l = void 0
2003
- }) => ({
2004
- buttonCount: i,
2005
- info: t,
2006
- pageSizes: o === !0 ? [5, 10, 20] : o || void 0,
2007
- previousNext: e,
2008
- responsive: r !== !1,
2009
- type: s,
2010
- pageSizeValue: l
2011
- }), Mr = (i) => Tr(i === !0 ? {} : i), yt = {
2012
- name: "@progress/kendo-react-grid",
2013
- productName: "KendoReact",
2014
- productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
2015
- publishDate: 1709632006,
2016
- version: "",
2017
- licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
2018
- }, Gr = (i) => {
2019
- const { colSpan: t, ariaColIndex: s, dataItem: o, dataIndex: e, id: r } = i, l = q(r), a = n.useCallback((c) => {
2020
- i.onContextMenu && i.onContextMenu.call(void 0, c, i.dataItem);
2021
- }, [i.onContextMenu, i.dataItem]);
2022
- return /* @__PURE__ */ n.createElement(
2023
- "td",
2024
- {
2025
- onContextMenu: a,
2026
- className: "k-table-td k-detail-cell",
2027
- colSpan: t,
2028
- "aria-colindex": s,
2029
- role: "gridcell",
2030
- ...l
2031
- },
2032
- /* @__PURE__ */ n.createElement(i.detail, { dataItem: o, dataIndex: e })
2033
- );
2034
- }, Hr = (i) => {
2035
- const t = q(i.id);
2036
- return /* @__PURE__ */ n.createElement("td", { className: "k-table-td k-hierarchy-cell", ...t, role: "gridcell" });
2037
- };
2038
- let he = class extends n.Component {
2039
- constructor(t) {
2040
- super(t), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = n.createRef(), this.headerElementRef = n.createRef(), this._element = null, this.tableElement = null, this.containerRef = n.createRef(), this.tableBodyRef = n.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.observer = null, this.handleIntersection = (e) => {
2041
- const r = { rowIndex: this.rowIndex };
2042
- e.forEach((l) => {
2043
- l.isIntersecting || this.setCurrentOnTop(r);
2044
- });
2045
- }, this.setCurrentOnTop = (e) => {
2046
- if (!this.vs.container || this.props.scrollable === "none")
2047
- return;
2048
- this.observer && this.observer.disconnect();
2049
- const { rowIndex: r } = e;
2050
- if (this.props.scrollable === "virtual")
2051
- this.vs.askedSkip = r, this.vs.container.scroll(0, Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight));
2052
- else if (this.element) {
2053
- const l = r < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${r + 1})`);
2054
- l && this.containerRef.current && (this.containerRef.current.scrollTop = l.offsetTop);
2055
- }
2056
- }, this.scrollIntoView = (e) => {
2057
- if (!this.vs.container || this.props.scrollable === "none")
2058
- return;
2059
- this.rowIndex = e.rowIndex;
2060
- const { rowIndex: r } = e, l = this.element;
2061
- if (this.observer && l) {
2062
- this.observer.disconnect();
2063
- const a = l.querySelector(`[absolute-row-index="${r}"]`);
2064
- a ? this.observer.observe(a) : this.setCurrentOnTop(e);
2065
- }
2066
- }, this.fitColumns = (e) => {
2067
- this.columnResize.dblClickHandler(null, e);
2068
- }, this.onContextMenu = (e, r, l) => {
2069
- if (this.props.onContextMenu) {
2070
- const a = {
2071
- target: this,
2072
- syntheticEvent: e,
2073
- nativeEvent: e.nativeEvent,
2074
- dataItem: r,
2075
- field: l
2076
- };
2077
- this.props.onContextMenu.call(void 0, a);
2078
- }
2079
- }, this.getVirtualScroll = (e) => {
2080
- const { rowHeight: r, detailRowHeight: l, detail: a, expandField: c, groupable: h } = e, d = this.isAllData(), u = r !== void 0 && r > 0, f = l !== void 0 && l > 0, g = h === !0 || typeof h == "object" && h.enabled !== !1;
2081
- return !u || g && !d || !!(a && c) && (!f || !d) ? Er : St;
2082
- }, this.isAllData = () => {
2083
- const { data: e, total: r } = this.props;
2084
- return Array.isArray(e) ? e.length === r : e ? r === e.total : !1;
2085
- }, this.initializeVirtualization = (e, r) => {
2086
- if (this.reInitVirtualization(
2087
- this.props.scrollable === "virtual",
2088
- this.props.total,
2089
- this.props.filter,
2090
- this.props.group,
2091
- this.props.sort,
2092
- r || this.props.rowHeight === void 0 || this.props.rowHeight === 0
2093
- ), this.vs.fixedScroll = this.props.fixedScroll || !1, this.vs.PageChange = this.pageChange, this.vs.realSkip = this.props.skip || 0, this.vs.pageSize = (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 0, this.vs.scrollableVirtual = this.props.scrollable === "virtual", this.vs.total = e, this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0), this.props.rowHeight !== void 0 && this.props.rowHeight > 0 && !r) {
2094
- const l = this.props.rowHeight * e;
2095
- this.vs.containerHeight = De ? Math.min(vt, l) : l;
2096
- } else
2097
- this.vs.containerHeight = 1533915;
2098
- if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof St) {
2099
- const { rowHeight: l = 0, detail: a, expandField: c } = this.props;
2100
- let { detailRowHeight: h = 0 } = this.props;
2101
- h = a && c ? h : l, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, l, h, this._data)) : this.vs.rowHeightService = new Et(e, l, h);
2102
- const d = this.vs.rowHeightService.totalHeight();
2103
- this.vs.containerHeight = De ? Math.min(vt, d) : d;
2104
- }
2105
- }, this.scrollHandler = (e) => {
2106
- if (e.target !== e.currentTarget)
2107
- return;
2108
- clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
2109
- const r = e.currentTarget.scrollLeft, l = e.currentTarget.scrollTop;
2110
- this.props.columnVirtualization && (!this.vs.scrollableVirtual || l === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
2111
- this.forceUpdate();
2112
- }, 0)), this._header && this._header.setScrollLeft(r), this._footer && this._footer.setScrollLeft(r), this.vs && l !== this.wrapperScrollTop && this.vs.scrollHandler(e), Cs(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = l;
2113
- }, this.onKeyDown = (e) => {
2114
- if (X.onKeyDown(e, {
2115
- contextStateRef: this.contextStateRef,
2116
- navigationStateRef: this.navigationStateRef,
2117
- onNavigationAction: this.onNavigationAction
2118
- }), this.props.onKeyDown) {
2119
- const { mode: r, cell: l } = pt(this.props.selectable), a = {
2120
- dataItems: this.getLeafDataItems(),
2121
- mode: r,
2122
- cell: l,
2123
- componentId: this._gridId,
2124
- selectedField: this.props.selectedField,
2125
- ...this.getArguments(e)
2126
- };
2127
- this.props.onKeyDown.call(void 0, a);
2128
- }
2129
- }, this.onFocus = (e) => {
2130
- X.onFocus(e, {
2131
- contextStateRef: this.contextStateRef
2132
- });
2133
- }, this.onNavigationAction = (e) => {
2134
- if (this.props.onNavigationAction) {
2135
- const r = {
2136
- focusElement: e.focusElement,
2137
- ...this.getArguments(e.event)
2138
- };
2139
- this.props.onNavigationAction.call(void 0, r);
2140
- }
2141
- }, this.rowClick = (e, r) => {
2142
- this.props.onRowClick && e.target.nodeName === "TD" && this.props.onRowClick.call(
2143
- void 0,
2144
- {
2145
- dataItem: r.dataItem,
2146
- ...this.getArguments(e)
2147
- }
2148
- );
2149
- }, this.rowDblClick = (e, r) => {
2150
- this.props.onRowDoubleClick && e.target.nodeName === "TD" && this.props.onRowDoubleClick.call(
2151
- void 0,
2152
- {
2153
- dataItem: r.dataItem,
2154
- ...this.getArguments(e)
2155
- }
2156
- );
2157
- }, this.itemChange = (e) => {
2158
- const r = this.props.onItemChange;
2159
- if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
2160
- const l = this.props.onExpandChange;
2161
- l && l.call(
2162
- void 0,
2163
- {
2164
- ...this.getArguments(e.syntheticEvent),
2165
- dataItem: e.dataItem,
2166
- dataIndex: e.dataIndex,
2167
- value: e.value
2168
- }
2169
- );
2170
- return;
2171
- }
2172
- r && r.call(
2173
- void 0,
2174
- {
2175
- ...this.getArguments(e.syntheticEvent),
2176
- dataItem: e.dataItem,
2177
- field: e.field,
2178
- value: e.value
2179
- }
2180
- );
2181
- }, this.onHeaderSelectionChange = (e) => {
2182
- this.props.onHeaderSelectionChange && this.props.onHeaderSelectionChange.call(
2183
- void 0,
2184
- {
2185
- field: e.field,
2186
- nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
2187
- syntheticEvent: e.syntheticEvent,
2188
- target: this,
2189
- dataItems: this.getLeafDataItems(),
2190
- selectedField: this.props.selectedField
2191
- }
2192
- );
2193
- }, this.selectionRelease = (e) => {
2194
- if (this.props.onSelectionChange) {
2195
- const r = {
2196
- syntheticEvent: void 0,
2197
- target: this,
2198
- selectedField: this.props.selectedField || "",
2199
- componentId: this._gridId,
2200
- dataItems: this.getLeafDataItems(),
2201
- dataItem: null,
2202
- ...e
2203
- };
2204
- this.props.onSelectionChange.call(void 0, r);
2205
- }
2206
- }, this.pageChange = (e, r, l) => {
2207
- this.raiseDataEvent(
2208
- this.props.onPageChange,
2209
- { page: e },
2210
- { skip: e.skip, take: e.take },
2211
- r,
2212
- l
2213
- );
2214
- }, this.pagerPageChange = (e) => {
2215
- this.pageChange({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
2216
- }, this.sortChange = (e, r) => {
2217
- this.raiseDataEvent(
2218
- this.props.onSortChange,
2219
- { sort: e },
2220
- { sort: e, ...this.props.scrollable === "virtual" ? { skip: 0 } : {} },
2221
- r
2222
- );
2223
- }, this.filterChange = (e, r) => {
2224
- this.raiseDataEvent(
2225
- this.props.onFilterChange,
2226
- { filter: e },
2227
- { filter: e || void 0, skip: 0 },
2228
- r
2229
- );
2230
- }, this.groupChange = (e, r) => {
2231
- const l = r.nativeEvent ? r : { nativeEvent: r.nativeEvent || r.originalEvent };
2232
- this.raiseDataEvent(
2233
- this.props.onGroupChange,
2234
- { group: e },
2235
- { group: e, skip: 0 },
2236
- l
2237
- );
2238
- }, this.onClipboard = (e, r) => {
2239
- if (this.props.onClipboard) {
2240
- if (!this.inActiveElement() || !e)
2241
- return;
2242
- this.props.onClipboard.call(
2243
- void 0,
2244
- {
2245
- type: e,
2246
- nativeEvent: r,
2247
- columns: this._columns,
2248
- dataItemKey: this.props.dataItemKey || "",
2249
- ...typeof this.props.clipboard != "boolean" ? this.props.clipboard : {}
2250
- }
2251
- );
2252
- }
2253
- }, this.inActiveElement = () => {
2254
- var c, h, d;
2255
- if (!we)
2256
- return !1;
2257
- const e = bs(this.document), r = e ? e.matches(".k-table-td") ? e : (c = this.document) == null ? void 0 : c.body : (h = this.document) == null ? void 0 : h.body, l = r.closest(".k-grid-container"), a = r && ((d = this._element) == null ? void 0 : d.contains(r));
2258
- return !!(r && a && l);
2259
- }, this.onResize = (e, r, l, a, c, h) => {
2260
- this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
2261
- void 0,
2262
- {
2263
- columns: this.columns,
2264
- nativeEvent: a,
2265
- targetColumnId: h,
2266
- index: e,
2267
- newWidth: r,
2268
- oldWidth: l,
2269
- end: c,
2270
- target: this
2271
- }
2272
- );
2273
- }, this.reInitVirtualization = B((e, r, l, a, c, h) => {
2274
- this.vs.reset();
2275
- const d = this.getVirtualScroll(this.props);
2276
- this.vs = new d(h);
2277
- }), this.flatData = B((e, r, l, a, c, h, d) => {
2278
- const u = [], f = Ot(
2279
- u,
2280
- e,
2281
- r,
2282
- { index: l },
2283
- a !== void 0,
2284
- c
2285
- );
2286
- return { flattedData: u, resolvedGroupsCount: f };
2287
- }), this.rowHeightService = B((e, r, l, a, c) => new Et(r, l, a, c)), this.childrenToArray = B((e) => n.Children.toArray(e)), this.readColumns = B(
2288
- (e, r, l) => {
2289
- const a = e.filter((c) => c && c.type && c.type.displayName === "KendoReactGridColumn");
2290
- return _t(a, this.columns, { prevId: 0, idPrefix: r });
2291
- }
2292
- ), this.mapColumns = B(
2293
- (e) => Fs(e)
2294
- ), this.configureColumns = B((e, r, l) => {
2295
- this.props.selectedField && e.forEach((h) => {
2296
- h.field === this.props.selectedField ? (h.width = h.width || "50px", h.cell = h.cell || ar, h.headerCell = h.headerCell || Nr) : h.width = void 0;
2297
- });
2298
- const a = {
2299
- id: "",
2300
- resizable: !0,
2301
- width: "32px",
2302
- title: " ",
2303
- declarationIndex: -1,
2304
- orderIndex: -1,
2305
- children: [],
2306
- parentIndex: -1,
2307
- depth: 0,
2308
- colSpan: 0,
2309
- rowSpan: 0,
2310
- left: 0,
2311
- right: 0,
2312
- index: 0,
2313
- rightBorder: !1,
2314
- ariaColumnIndex: 0,
2315
- isAccessible: !0
2316
- };
2317
- let c = 0;
2318
- this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
2319
- ...a,
2320
- cell: cr,
2321
- field: this.props.expandField,
2322
- headerClassName: "k-hierarchy-cell k-header",
2323
- id: z.generateNavigatableId(`${this._columns.length}`, l, "column")
2324
- }), c++);
2325
- for (let h = 0; h < r; h++)
2326
- e.unshift({
2327
- ...a,
2328
- isAccessible: !1,
2329
- cell: It,
2330
- field: "value",
2331
- locked: this.props.lockGroups
2332
- }), c++;
2333
- e.slice(c).forEach((h) => h.parentIndex >= 0 && (h.parentIndex += c));
2334
- }), this.getHeaderRow = B((e, r, l, a, c, h, d, u, f, g, b, E) => /* @__PURE__ */ n.createElement(
2335
- jt,
2336
- {
2337
- cells: this.props.cells,
2338
- sort: e,
2339
- sortable: r,
2340
- sortChange: this.sortChange,
2341
- group: l || [],
2342
- groupable: a,
2343
- groupChange: this.groupChange,
2344
- filter: c,
2345
- filterable: h,
2346
- filterOperators: d,
2347
- filterChange: this.filterChange,
2348
- columnMenu: f,
2349
- selectionChange: this.onHeaderSelectionChange,
2350
- columns: g,
2351
- columnResize: this.columnResize,
2352
- pressHandler: this.dragLogic.pressHandler,
2353
- dragHandler: this.dragLogic.dragHandler,
2354
- releaseHandler: this.dragLogic.releaseHandler,
2355
- columnsMap: b,
2356
- cellRender: u,
2357
- isRtl: E,
2358
- dragClue: this.dragLogic.dragClueRef,
2359
- headerRef: this.headerElementRef,
2360
- containerRef: this.containerRef
2361
- }
2362
- )), this.resolveTitle = (e) => {
2363
- const r = this._columns.find((a) => a.field === e), l = r && (r.title || r.field);
2364
- return l === void 0 ? e : l;
2365
- }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), xs(yt), this.showLicenseWatermark = vs(yt);
2366
- const s = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, o = this.getVirtualScroll(t);
2367
- this.vs = new o(s || t.rowHeight === void 0 || t.rowHeight === 0), this.dragLogic = new wr(
2368
- this.columnReorder.bind(this),
2369
- this.groupReorder.bind(this),
2370
- this.columnToGroup.bind(this)
2371
- ), this.columnResize = new yr(this.onResize), this.props.clipboard && (this.clipboardService = new Ns(this.onClipboard)), X.onConstructor({
2372
- navigatable: !!t.navigatable,
2373
- contextStateRef: this.contextStateRef,
2374
- navigationStateRef: this.navigationStateRef,
2375
- idPrefix: this._gridId
2376
- });
2377
- }
2378
- /* eslint-disable max-len */
2379
- /**
2380
- * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
2381
- *
2382
- * @example
2383
- * ```jsx
2384
- * class App extends React.Component {
2385
- * constructor(props) {
2386
- * super(props);
2387
- * this.state = {
2388
- * data: [
2389
- * { 'foo': 'A1', 'bar': 'B1' },
2390
- * { 'foo': 'A2', 'bar': 'B2' },
2391
- * { 'foo': 'A3', 'bar': 'B2' }
2392
- * ]
2393
- * };
2394
- * this.grid = null;
2395
- * }
2396
- * render() {
2397
- * return (
2398
- * <div>
2399
- * <Grid
2400
- * data={this.state.data}
2401
- * reorderable={true}
2402
- * ref={(g) => { this.grid = g; }}
2403
- * >
2404
- * <GridColumn field="foo" />
2405
- * <GridColumn field="bar" />
2406
- * </Grid>
2407
- * <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
2408
- * log current properties into browser console.
2409
- * </button>
2410
- * </div>
2411
- * );
2412
- * }
2413
- * }
2414
- * ReactDOM.render(<App />, document.querySelector('my-app'));
2415
- * ```
2416
- */
2417
- // tslint:enable:max-line-length
2418
- get columns() {
2419
- const t = this._columns.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1);
2420
- return Pt(t);
2421
- }
2422
- /**
2423
- * Returns the HTML element of the Grid component.
2424
- */
2425
- get element() {
2426
- return this._element;
2427
- }
2428
- get document() {
2429
- if (we)
2430
- return this.element && this.element.ownerDocument || document;
2431
- }
2432
- get _header() {
2433
- return this.headerRef.current;
2434
- }
2435
- get _gridId() {
2436
- return this.props.id + "-role-element-id";
2437
- }
2438
- /**
2439
- * @hidden
2440
- */
2441
- componentDidMount() {
2442
- this.resetTableWidth(), ct();
2443
- const t = Tt(this.element);
2444
- this.isRtl = t, X.onComponentDidMount({
2445
- scope: this.element || void 0,
2446
- contextStateRef: this.contextStateRef,
2447
- navigationStateRef: this.navigationStateRef
2448
- }), this.isRtl && this.forceUpdate();
2449
- const s = {
2450
- rootMargin: "0px",
2451
- threshold: 0.9
2452
- };
2453
- this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = we && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, s) || null;
2454
- }
2455
- /**
2456
- * @hidden
2457
- */
2458
- getSnapshotBeforeUpdate() {
2459
- return X.onGetSnapshotBeforeUpdate({
2460
- document: this.document,
2461
- contextStateRef: this.contextStateRef,
2462
- navigationStateRef: this.navigationStateRef
2463
- }), null;
2464
- }
2465
- /**
2466
- * @hidden
2467
- */
2468
- componentDidUpdate() {
2469
- this.resetTableWidth(), ct(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), X.onComponentDidUpdate({
2470
- scope: this.element || void 0,
2471
- contextStateRef: this.contextStateRef,
2472
- navigationStateRef: this.navigationStateRef
2473
- });
2474
- }
2475
- /**
2476
- * @hidden
2477
- */
2478
- componentWillUnmount() {
2479
- clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document);
2480
- }
2481
- /**
2482
- * @hidden
2483
- */
2484
- render() {
2485
- var lt;
2486
- let t = this.props.total || 0;
2487
- const s = z.getIdPrefix(this.navigationStateRef);
2488
- let o = [];
2489
- Array.isArray(this.props.data) ? (o = this.props.data, t = t || this.props.data.length) : this.props.data && (o = this.props.data.data, t = t || this.props.data.total);
2490
- const e = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", { resolvedGroupsCount: r, flattedData: l } = this.flatData(
2491
- o,
2492
- e,
2493
- this.props.skip || 0,
2494
- this.props.group,
2495
- this.props.expandField,
2496
- this.props.filter,
2497
- this.props.sort
2498
- );
2499
- this._data = l;
2500
- const a = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
2501
- this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = a;
2502
- const c = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
2503
- this.initializeVirtualization(t, a);
2504
- const h = this.childrenToArray(this.props.children);
2505
- this.initColumns(h, r);
2506
- const d = h.map((m) => m && m.type && m.type.displayName === "KendoReactGridToolbar" ? n.cloneElement(m, { ...m.props, ariaControls: this._gridId }) : null), u = h.filter((m) => m && m.type && m.type.displayName === "KendoReactGridNoRecords"), f = h.filter((m) => m && m.type && m.type.displayName === "KendoReactGridStatusBar"), g = this._columns.filter((m) => m.children.length === 0), b = a && /* @__PURE__ */ n.createElement(
2507
- rs,
2508
- {
2509
- group: this.props.group || [],
2510
- groupChange: this.groupChange,
2511
- pressHandler: this.dragLogic.pressHandler,
2512
- dragHandler: this.dragLogic.dragHandler,
2513
- releaseHandler: this.dragLogic.releaseHandler,
2514
- refCallback: this.dragLogic.refGroupPanelDiv,
2515
- resolveTitle: this.resolveTitle,
2516
- ariaControls: this._gridId,
2517
- onContextMenu: this.onContextMenu
2518
- }
2519
- ), { sort: E, sortable: C, group: x, filter: S, filterable: v, filterOperators: _ = kt, headerCellRender: T, columnMenu: de } = this.props, Y = /* @__PURE__ */ n.createElement(
2520
- pr,
2521
- {
2522
- size: this.props.size,
2523
- columnResize: this.columnResize,
2524
- staticHeaders: this.props.scrollable !== "none",
2525
- scrollableDataElement: () => this.vs.container,
2526
- draggable: this.props.reorderable || a,
2527
- ref: this.headerRef,
2528
- elemRef: this.headerElementRef,
2529
- headerRow: this.getHeaderRow(
2530
- E,
2531
- C,
2532
- x,
2533
- a,
2534
- S,
2535
- v,
2536
- _,
2537
- T,
2538
- de,
2539
- this._columns,
2540
- this._columnsMap,
2541
- this.isRtl
2542
- ),
2543
- filterRow: this.props.filterable && /* @__PURE__ */ n.createElement(
2544
- ts,
2545
- {
2546
- cells: this.props.cells,
2547
- size: this.props.size,
2548
- columns: this._columns,
2549
- filter: this.props.filter,
2550
- filterOperators: this.props.filterOperators || kt,
2551
- filterChange: this.filterChange,
2552
- sort: this.props.sort,
2553
- cellRender: this.props.filterCellRender,
2554
- isRtl: this.isRtl,
2555
- ariaRowIndex: this._columnsMap.length + 1
2556
- }
2557
- ) || void 0,
2558
- cols: g.map((m, w) => /* @__PURE__ */ n.createElement(
2559
- "col",
2560
- {
2561
- key: w.toString(),
2562
- width: Re(m)
2563
- }
2564
- ))
2565
- }
2566
- ), $ = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, F = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: ke, hiddenColumns: pe } = Ds({
2567
- enabled: this.props.columnVirtualization,
2568
- columns: g,
2569
- tableViewPortWidth: F,
2570
- scrollLeft: $
2571
- }), Ee = (m, w, R) => {
2572
- let j = !1;
2573
- const V = this.props.selectedField ? M(this.props.selectedField, m.dataItem) : void 0;
2574
- return {
2575
- row: g.map((I, N) => {
2576
- if (pe[N])
2577
- return null;
2578
- const Z = I.id ? I.id : N, ee = `${I.className ? I.className + " " : ""}${I.locked ? "k-grid-content-sticky" : ""}`, P = I.left !== void 0 ? this.isRtl ? { left: I.right, right: I.left } : { left: I.left, right: I.right } : {};
2579
- let A = !1;
2580
- if (I.editable && this.props.editField) {
2581
- const H = M(this.props.editField, m.dataItem);
2582
- H && (H === !0 || H === I.field) && (j = !0, A = !0);
2583
- }
2584
- const ye = I.cell || A && dr || Rr;
2585
- return /* @__PURE__ */ n.createElement(
2586
- ye,
2587
- {
2588
- onContextMenu: this.onContextMenu,
2589
- key: Z,
2590
- locked: this.props.lockGroups,
2591
- id: z.generateNavigatableId(`${w}-${String(N)}`, s),
2592
- colSpan: ke[N],
2593
- dataItem: m.dataItem,
2594
- field: I.field,
2595
- editor: I.editor,
2596
- format: I.format,
2597
- className: ee,
2598
- render: this.props.cellRender,
2599
- cells: xe(this.props.cells, I.cells),
2600
- onChange: this.itemChange,
2601
- selectionChange: this.props.onSelectionChange ? (H) => {
2602
- this.selectionChange({ event: H, dataItem: m.dataItem, dataIndex: R, columnIndex: N });
2603
- } : void 0,
2604
- columnIndex: N,
2605
- columnsCount: g.length,
2606
- rowType: m.rowType,
2607
- level: m.level,
2608
- expanded: m.expanded,
2609
- dataIndex: m.dataIndex,
2610
- style: P,
2611
- ariaColumnIndex: I.ariaColumnIndex,
2612
- isSelected: Array.isArray(V) && V.indexOf(N) > -1
2613
- }
2614
- );
2615
- }),
2616
- isInEdit: j,
2617
- isSelected: typeof V == "boolean" && V
2618
- };
2619
- };
2620
- let J = 0;
2621
- if (this.props.scrollable === "virtual")
2622
- for (let m = 0; m < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); m++) {
2623
- const w = this._data.shift();
2624
- if (w)
2625
- this._data.push(w), J++, w.rowType === "groupHeader" && m--;
2626
- else
2627
- break;
2628
- }
2629
- const Qe = (m) => m >= this._data.length - J;
2630
- let Ze = this.vs.realSkip || 0;
2631
- const ue = [];
2632
- let Se = !1;
2633
- const Ie = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1, et = /* @__PURE__ */ n.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": Ie }, /* @__PURE__ */ n.createElement("div", { className: "k-grid-norecords-template" }, u.length ? u : /* @__PURE__ */ n.createElement(Ye, null)));
2634
- let Q = 0;
2635
- if (this._data.length) {
2636
- let m = -1, w = 0;
2637
- (this._slicedData || this._data).forEach((R, j) => {
2638
- R.rowType === "data" && (Ze++, m++);
2639
- const V = Ze % 2 === 0, I = this.props.dataItemKey && Fe(this.props.dataItemKey)(R.dataItem), N = j + (this.vs.realSkip || 0), Z = I || "ai" + N, ee = Z + "_1", P = Ee(R, Z, m);
2640
- if (Q = N + Ie + w, ue.push(/* @__PURE__ */ n.createElement(
2641
- Fr,
2642
- {
2643
- key: Z,
2644
- dataItem: R.dataItem,
2645
- isAltRow: V,
2646
- isInEdit: P.isInEdit,
2647
- rowType: R.rowType,
2648
- isHidden: Qe(j),
2649
- onClick: (A) => this.rowClick(A, R),
2650
- onDoubleClick: (A) => this.rowDblClick(A, R),
2651
- selectedField: this.props.selectedField,
2652
- rowHeight: this.props.rowHeight,
2653
- render: this.props.rowRender,
2654
- ariaRowIndex: Q,
2655
- absoluteRowIndex: N,
2656
- dataIndex: m,
2657
- isSelected: P.isSelected
2658
- },
2659
- P.row
2660
- )), this.props.detail && R.rowType === "data" && R.expanded) {
2661
- const A = g.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
2662
- w++, Q = N + Ie + w, ue.push(/* @__PURE__ */ n.createElement(
2663
- "tr",
2664
- {
2665
- key: ee,
2666
- className: y(
2667
- "k-table-row",
2668
- V ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
2669
- ),
2670
- style: { visibility: Qe(j) ? "hidden" : "", height: this.props.detailRowHeight },
2671
- role: "row",
2672
- "aria-rowindex": Q
2673
- },
2674
- this.props.group && this.props.group.map((ye, H) => {
2675
- var at;
2676
- const te = (at = P == null ? void 0 : P.row[H]) == null ? void 0 : at.props.style, ms = te ? this.isRtl ? { left: te.right, right: te.left } : { left: te.left, right: te.right } : {};
2677
- return /* @__PURE__ */ n.createElement(
2678
- It,
2679
- {
2680
- id: "",
2681
- dataIndex: R.dataIndex,
2682
- field: ye.field,
2683
- dataItem: R.dataItem,
2684
- key: H,
2685
- style: ms,
2686
- ariaColumnIndex: 1 + H,
2687
- isSelected: !1,
2688
- locked: this.props.lockGroups,
2689
- isRtl: this.isRtl,
2690
- cells: this.props.cells
2691
- }
2692
- );
2693
- }),
2694
- this.props.expandField && /* @__PURE__ */ n.createElement(
2695
- Hr,
2696
- {
2697
- id: z.generateNavigatableId(`${ee}-dhcell`, s)
2698
- }
2699
- ),
2700
- /* @__PURE__ */ n.createElement(
2701
- Gr,
2702
- {
2703
- onContextMenu: this.onContextMenu,
2704
- dataItem: R.dataItem,
2705
- dataIndex: R.dataIndex,
2706
- colSpan: A,
2707
- ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
2708
- detail: this.props.detail,
2709
- id: z.generateNavigatableId(`${ee}-dcell`, s)
2710
- }
2711
- )
2712
- ));
2713
- }
2714
- });
2715
- } else
2716
- Se = !0;
2717
- const tt = {
2718
- size: this.props.size,
2719
- onPageChange: this.pagerPageChange,
2720
- total: t,
2721
- dir: this.isRtl ? "rtl" : void 0,
2722
- skip: this.vs.propsSkip || 0,
2723
- take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
2724
- messagesMap: lr,
2725
- ...Mr(this.props.pageable || {})
2726
- }, st = this.props.pager ? /* @__PURE__ */ n.createElement(this.props.pager, { ...tt }) : /* @__PURE__ */ n.createElement(Ts, { className: "k-grid-pager", ...tt }), gs = (m) => this.props.sort && this.props.sort.filter((w) => w.field === m).length > 0, fs = (m, w) => /* @__PURE__ */ n.createElement(
2727
- "col",
2728
- {
2729
- key: w.toString(),
2730
- width: Re(m)
2731
- }
2732
- ), rt = (lt = this.props.cells) != null && lt.footerCell || this._columns.some(
2733
- (m) => {
2734
- var w;
2735
- return !!(m.footerCell || (w = m.cells) != null && w.footerCell);
2736
- }
2737
- ) ? /* @__PURE__ */ n.createElement(
2738
- kr,
2739
- {
2740
- size: this.props.size,
2741
- columnResize: this.columnResize,
2742
- staticHeaders: this.props.scrollable !== "none",
2743
- ref: (m) => this._footer = m,
2744
- row: /* @__PURE__ */ n.createElement(
2745
- Dr,
2746
- {
2747
- cells: this.props.cells,
2748
- columns: this._columns,
2749
- isRtl: this.isRtl,
2750
- ariaRowIndex: Q + 1
2751
- }
2752
- ),
2753
- cols: g.map(fs)
2754
- }
2755
- ) : null, it = /* @__PURE__ */ n.createElement(
2756
- "colgroup",
2757
- {
2758
- ref: (m) => {
2759
- this.columnResize.colGroupMain = m;
2760
- }
2761
- },
2762
- g.map(
2763
- (m, w) => /* @__PURE__ */ n.createElement(
2764
- "col",
2765
- {
2766
- key: w.toString(),
2767
- className: gs(m.field) ? "k-sorted" : void 0,
2768
- width: Re(m)
2769
- }
2770
- )
2771
- )
2772
- ), ot = this.dragLogic.reorderable || this.dragLogic.groupable, nt = this.props.columnVirtualization ? "block" : "table";
2773
- if (this.props.scrollable === "none")
2774
- return /* @__PURE__ */ n.createElement(Ne.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ n.createElement(
2775
- "div",
2776
- {
2777
- id: this.props.id,
2778
- style: this.props.style,
2779
- className: y(
2780
- "k-grid",
2781
- {
2782
- "k-grid-md": !this.props.size,
2783
- [`k-grid-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size
2784
- },
2785
- this.props.className
2786
- ),
2787
- ref: (m) => {
2788
- this._element = m;
2789
- },
2790
- "aria-label": this.props.ariaLabel,
2791
- onKeyDown: this.onKeyDown,
2792
- onFocus: this.onFocus,
2793
- ...ut
2794
- },
2795
- d,
2796
- b,
2797
- /* @__PURE__ */ n.createElement(
2798
- gt,
2799
- {
2800
- selectable: this.props.selectable,
2801
- onRelease: this.selectionRelease,
2802
- childRef: (m) => {
2803
- this.tableElement = m;
2804
- }
2805
- },
2806
- /* @__PURE__ */ n.createElement(
2807
- "table",
2808
- {
2809
- className: y(
2810
- "k-table k-grid-table",
2811
- { [`k-table-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
2812
- ),
2813
- style: { userSelect: c, display: nt }
2814
- },
2815
- it,
2816
- Y,
2817
- /* @__PURE__ */ n.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...ft }, ue),
2818
- rt
2819
- )
2820
- ),
2821
- Se && et,
2822
- ot && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(mt, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ n.createElement(Ct, { ref: this.dragLogic.refDragElementClue }))
2823
- ), f, this.props.pageable && st);
2824
- let ge = this.props.style || {};
2825
- return this.props.scrollable === "virtual" && (ge.height || (ge = Object.assign({}, ge, { height: "450px" }))), /* @__PURE__ */ n.createElement(Ne.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ n.createElement(
2826
- "div",
2827
- {
2828
- id: this.props.id,
2829
- style: ge,
2830
- className: y(
2831
- "k-grid",
2832
- {
2833
- "k-grid-md": !this.props.size,
2834
- [`k-grid-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
2835
- "k-grid-virtual": this.props.scrollable === "virtual"
2836
- },
2837
- this.props.className
2838
- ),
2839
- ref: (m) => {
2840
- this._element = m;
2841
- },
2842
- "aria-label": this.props.ariaLabel,
2843
- onKeyDown: this.onKeyDown,
2844
- onFocus: this.onFocus,
2845
- ...ut
2846
- },
2847
- d,
2848
- b,
2849
- /* @__PURE__ */ n.createElement(
2850
- "div",
2851
- {
2852
- className: "k-grid-aria-root",
2853
- role: "grid",
2854
- "aria-colcount": g.length,
2855
- "aria-rowcount": t,
2856
- id: this._gridId
2857
- },
2858
- Y,
2859
- /* @__PURE__ */ n.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ n.createElement(
2860
- "div",
2861
- {
2862
- ref: this.containerRef,
2863
- className: "k-grid-content k-virtual-content",
2864
- onScroll: this.scrollHandler,
2865
- role: "presentation"
2866
- },
2867
- /* @__PURE__ */ n.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ n.createElement(
2868
- gt,
2869
- {
2870
- selectable: this.props.selectable,
2871
- onRelease: this.selectionRelease,
2872
- childRef: (m) => {
2873
- this.tableElement = m;
2874
- }
2875
- },
2876
- /* @__PURE__ */ n.createElement(
2877
- "table",
2878
- {
2879
- className: y(
2880
- "k-table k-grid-table",
2881
- {
2882
- "k-table-md": !this.props.size,
2883
- [`k-table-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size
2884
- }
2885
- ),
2886
- role: "presentation",
2887
- style: { userSelect: c, display: nt }
2888
- },
2889
- it,
2890
- /* @__PURE__ */ n.createElement(
2891
- "tbody",
2892
- {
2893
- className: "k-table-tbody",
2894
- ref: this.tableBodyRef,
2895
- role: "rowgroup",
2896
- ...ft
2897
- },
2898
- ue
2899
- )
2900
- )
2901
- ), Se && et),
2902
- /* @__PURE__ */ n.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ n.createElement(
2903
- "div",
2904
- {
2905
- style: this.props.scrollable === "virtual" ? { height: this.vs.containerHeight + "px" } : {}
2906
- }
2907
- ))
2908
- )),
2909
- rt,
2910
- ot && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(mt, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ n.createElement(Ct, { ref: this.dragLogic.refDragElementClue })),
2911
- this.showLicenseWatermark && /* @__PURE__ */ n.createElement(ks, null)
2912
- ),
2913
- f,
2914
- this.props.pageable && st
2915
- ));
2916
- }
2917
- selectionChange(t) {
2918
- if (this.props.onSelectionChange) {
2919
- const { event: s, dataItem: o, dataIndex: e, columnIndex: r } = t, { mode: l, cell: a } = pt(this.props.selectable), c = {
2920
- ...this.getArguments(s.syntheticEvent),
2921
- dataItem: o,
2922
- startColIndex: r,
2923
- endColIndex: r,
2924
- startRowIndex: e,
2925
- endRowIndex: e,
2926
- dataItems: this.getLeafDataItems(),
2927
- altKey: !1,
2928
- ctrlKey: !1,
2929
- shiftKey: !1,
2930
- metaKey: !1,
2931
- mode: l,
2932
- cell: a,
2933
- isDrag: !1,
2934
- componentId: this._gridId,
2935
- selectedField: this.props.selectedField || ""
2936
- };
2937
- this.props.onSelectionChange.call(void 0, c);
2938
- }
2939
- }
2940
- raiseDataEvent(t, s, o, e, r) {
2941
- const l = this.props.onDataStateChange;
2942
- if (t) {
2943
- const a = { ...this.getArguments(e), ...s, targetEvent: r };
2944
- t.call(void 0, a);
2945
- } else
2946
- l && l.call(
2947
- void 0,
2948
- {
2949
- ...this.getArguments(e),
2950
- targetEvent: r || {},
2951
- dataState: {
2952
- ...this.getDataState(),
2953
- ...o
2954
- }
2955
- }
2956
- );
2957
- }
2958
- columnReorder(t, s, o) {
2959
- const e = this._columns[t], r = e.depth, l = (d) => {
2960
- do
2961
- d++;
2962
- while (d < this._columns.length && this._columns[d].depth > r);
2963
- return d;
2964
- }, a = this._columns.splice(t, l(t) - t);
2965
- this._columns.splice(t < s ? l(s - a.length) : s, 0, ...a), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, u) => d.orderIndex = u), this._columnsMutations++;
2966
- const c = this._columns[t].locked && this._columns[s].locked;
2967
- Ms(this._columnsMap, this._columns, c || this._shouldUpdateLeftRight), Gs(this._columnsMap, this._columns, c || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
2968
- const h = this.columns;
2969
- if (this.forceUpdate(), this.props.onColumnReorder) {
2970
- const d = {
2971
- target: this,
2972
- columns: h,
2973
- columnId: e.id,
2974
- nativeEvent: o
2975
- };
2976
- this.props.onColumnReorder.call(void 0, d);
2977
- }
2978
- }
2979
- groupReorder(t, s, o) {
2980
- if (this.props.group === void 0)
2981
- return;
2982
- const e = this.props.group.slice();
2983
- e.splice(s, 0, ...e.splice(t, 1)), this.groupChange(e, o);
2984
- }
2985
- columnToGroup(t, s, o) {
2986
- const e = this._columns[t].field;
2987
- if (!e)
2988
- return;
2989
- const r = (this.props.group || []).slice();
2990
- r.splice(s, 0, { field: e }), this.groupChange(r, o);
2991
- }
2992
- resetTableWidth() {
2993
- let t = 0;
2994
- if (!this.columnResize.colGroupMain)
2995
- return;
2996
- const s = this.columnResize.colGroupMain.children;
2997
- for (let o = 0; o < s.length; o++) {
2998
- const e = s[o].width;
2999
- if (!e)
3000
- return;
3001
- t += parseFloat(e.toString());
3002
- }
3003
- t = Math.round(t), this._header && this._header.setWidth(t), this._footer && this._footer.setWidth(t), this.tableElement && (this.tableElement.style.width = t + "px");
3004
- }
3005
- initColumns(t, s) {
3006
- const o = z.getIdPrefix(this.navigationStateRef);
3007
- this._columns = this.readColumns(t, o, this._columnsMutations), this._columns.length === 0 && (this._columns = js(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: o })), this.configureColumns(this._columns, s, o), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
3008
- }
3009
- getDataState() {
3010
- return {
3011
- filter: this.props.filter,
3012
- sort: this.props.sort,
3013
- skip: this.props.skip,
3014
- take: this.props.take !== void 0 ? this.props.take : this.props.pageSize,
3015
- group: this.props.group
3016
- };
3017
- }
3018
- getArguments(t) {
3019
- return {
3020
- nativeEvent: t && t.nativeEvent,
3021
- syntheticEvent: t,
3022
- target: this
3023
- };
3024
- }
3025
- };
3026
- he.displayName = "KendoReactGrid";
3027
- he.defaultProps = {
3028
- // never use this
3029
- };
3030
- he.propTypes = {
3031
- data: p.oneOfType([
3032
- p.array,
3033
- p.shape({
3034
- data: p.array,
3035
- total: p.number
3036
- })
3037
- ]),
3038
- sortable: p.oneOfType([
3039
- p.bool,
3040
- p.shape({
3041
- mode: p.oneOf(["single", "multiple"]),
3042
- allowUnsort: p.bool
3043
- })
3044
- ]),
3045
- onSortChange: p.func,
3046
- sort: p.array,
3047
- filterable: p.bool,
3048
- filter: p.any,
3049
- onFilterChange: p.func,
3050
- pageable: p.oneOfType([
3051
- p.bool,
3052
- p.shape({
3053
- buttonCount: p.number,
3054
- responsive: p.bool,
3055
- info: p.bool,
3056
- type: p.oneOf(["numeric", "input"]),
3057
- pageSizes: p.oneOfType(
3058
- [
3059
- p.bool,
3060
- p.arrayOf(p.oneOfType([
3061
- p.string,
3062
- p.number
3063
- ]))
3064
- ]
3065
- ),
3066
- previousNext: p.bool
3067
- })
3068
- ]),
3069
- pageSize: p.number,
3070
- onPageChange: p.func,
3071
- total: p.number,
3072
- skip: p.number,
3073
- take: p.number,
3074
- fixedScroll: p.bool,
3075
- onExpandChange: p.func,
3076
- expandField: p.string,
3077
- selectedField: p.string,
3078
- onSelectionChange: p.func,
3079
- onHeaderSelectionChange: p.func,
3080
- resizable: p.bool,
3081
- reorderable: p.bool,
3082
- group: p.any,
3083
- groupable: p.oneOfType([
3084
- p.bool,
3085
- p.shape({
3086
- enabled: p.bool,
3087
- footer: p.oneOf(["always", "visible", "none"])
3088
- })
3089
- ]),
3090
- onGroupChange: p.func,
3091
- onRowClick: p.func,
3092
- onRowDoubleClick: p.func,
3093
- onItemChange: p.func,
3094
- editField: p.string,
3095
- scrollable: p.oneOf(["none", "scrollable", "virtual"]),
3096
- rowHeight: p.number,
3097
- detailRowHeight: p.number,
3098
- detail: p.any,
3099
- style: p.object,
3100
- onDataStateChange: p.func,
3101
- onColumnResize: p.func,
3102
- onColumnReorder: p.func,
3103
- dataItemKey: p.string,
3104
- navigatable: p.bool,
3105
- size: p.oneOf(["small", "medium"])
3106
- };
3107
- he.contextType = Ne;
3108
- class ve extends n.Component {
3109
- /**
3110
- * @hidden
3111
- */
3112
- render() {
3113
- const { children: t } = this.props;
3114
- return /* @__PURE__ */ n.createElement(
3115
- "div",
3116
- {
3117
- id: this.props.id,
3118
- className: y("k-columnmenu-item-wrapper", this.props.className),
3119
- style: this.props.style
3120
- },
3121
- t
3122
- );
3123
- }
3124
- }
3125
- class ae extends n.Component {
3126
- /**
3127
- * @hidden
3128
- */
3129
- render() {
3130
- const { title: t, iconClass: s, svgIcon: o, selected: e } = this.props;
3131
- return /* @__PURE__ */ n.createElement("div", { onClick: this.props.onClick, className: `k-columnmenu-item ${e ? "k-selected" : ""}` }, (s || o) && /* @__PURE__ */ n.createElement(O, { name: s && Es(s), icon: o }), t);
3132
- }
3133
- }
3134
- class os extends n.Component {
3135
- constructor() {
3136
- super(...arguments), this.onGroupClick = (t) => {
3137
- if (t.preventDefault(), this.props.onGroupChange) {
3138
- const { column: s } = this.props;
3139
- if (!s.field)
3140
- return;
3141
- const o = (this.props.group || []).slice(), e = o.findIndex((r) => r.field === s.field);
3142
- e > -1 ? o.splice(e, 1) : o.push({
3143
- field: s.field
3144
- }), this.props.onGroupChange(o, t);
3145
- }
3146
- this.props.onCloseMenu && this.props.onCloseMenu();
3147
- };
3148
- }
3149
- /**
3150
- * @hidden
3151
- */
3152
- render() {
3153
- const { group: t, column: s } = this.props, o = D(this), e = !!(t && s.field && t.find((l) => l.field === s.field)), r = e ? Bt : At;
3154
- return /* @__PURE__ */ n.createElement(ve, null, /* @__PURE__ */ n.createElement(
3155
- ae,
3156
- {
3157
- title: o.toLanguageString(r, k[r]),
3158
- iconClass: e ? "k-i-ungroup" : "k-i-group",
3159
- svgIcon: e ? Vs : Ws,
3160
- onClick: this.onGroupClick
3161
- }
3162
- ));
3163
- }
3164
- }
3165
- Gt(os);
3166
- G(os);
3167
- const ns = "asc", ls = "desc", zr = {
3168
- true: {
3169
- asc: { asc: "", desc: "desc" },
3170
- desc: { asc: "asc", desc: "" },
3171
- "": { asc: "asc", desc: "desc" }
3172
- },
3173
- false: {
3174
- asc: { asc: "asc", desc: "desc" },
3175
- desc: { asc: "asc", desc: "desc" },
3176
- "": { asc: "asc", desc: "desc" }
3177
- }
3178
- }, as = (i, t) => t ? t.findIndex((s) => s.field === i) : -1, cs = (i, t) => !!(t && i > -1 && t[i].dir === ns), hs = (i, t) => !!(t && i > -1 && t[i].dir === ls);
3179
- class Je extends n.Component {
3180
- constructor() {
3181
- super(...arguments), this.onAscClick = (t) => {
3182
- this.onSort(t, ns), this.props.onCloseMenu && this.props.onCloseMenu();
3183
- }, this.onDescClick = (t) => {
3184
- this.onSort(t, ls), this.props.onCloseMenu && this.props.onCloseMenu();
3185
- }, this.onSort = (t, s) => {
3186
- if (t.preventDefault(), !this.props.onSortChange)
3187
- return;
3188
- const { column: o, sortable: e, sort: r } = this.props, { allowUnsort: l, mode: a } = qt(e || !1, !1), c = (r || []).filter((u) => u.field === o.field)[0], h = zr[l][c && c.dir || ""][s], d = a === "single" ? [] : (this.props.sort || []).filter((u) => u.field !== o.field);
3189
- h !== "" && o.field && d.push({ field: o.field, dir: h }), this.props.onSortChange(d, t);
3190
- };
3191
- }
3192
- /**
3193
- * @hidden
3194
- */
3195
- render() {
3196
- const { sort: t, column: s } = this.props, o = as(s.field, t), e = D(this);
3197
- return /* @__PURE__ */ n.createElement(ve, null, /* @__PURE__ */ n.createElement(
3198
- ae,
3199
- {
3200
- title: e.toLanguageString(He, k[He]),
3201
- iconClass: "k-i-sort-asc-sm",
3202
- svgIcon: qe,
3203
- selected: cs(o, t),
3204
- onClick: this.onAscClick
3205
- }
3206
- ), /* @__PURE__ */ n.createElement(
3207
- ae,
3208
- {
3209
- title: e.toLanguageString(ze, k[ze]),
3210
- iconClass: "k-i-sort-desc-sm",
3211
- svgIcon: $e,
3212
- selected: hs(o, t),
3213
- onClick: this.onDescClick
3214
- }
3215
- ));
3216
- }
3217
- }
3218
- Je.active = (i, t) => {
3219
- const s = as(i, t);
3220
- return hs(s, t) || cs(s, t);
3221
- };
3222
- Gt(Je);
3223
- G(Je);
3224
- class ds extends n.Component {
3225
- /**
3226
- * @hidden
3227
- */
3228
- render() {
3229
- return /* @__PURE__ */ n.createElement(
3230
- "div",
3231
- {
3232
- id: this.props.id,
3233
- className: y("k-columnmenu-item-content", this.props.className),
3234
- style: this.props.style
3235
- },
3236
- /* @__PURE__ */ n.createElement($s, { style: { position: "relative", display: "block" } }, this.props.show ? this.props.children : null)
3237
- );
3238
- }
3239
- }
3240
- class wt extends n.Component {
3241
- constructor(t) {
3242
- super(t), this.renderOperatorEditor = () => {
3243
- if (this.props.filterType === "boolean")
3244
- return;
3245
- const s = this.props.operators.find((o) => o.operator === this.props.operator) || null;
3246
- return /* @__PURE__ */ n.createElement(
3247
- ie,
3248
- {
3249
- value: s,
3250
- onChange: this.operatorChange,
3251
- data: this.props.operators,
3252
- textField: "text"
3253
- }
3254
- );
3255
- }, this.inputChange = this.inputChange.bind(this), this.operatorChange = this.operatorChange.bind(this), this.boolDropdownChange = this.boolDropdownChange.bind(this);
3256
- }
3257
- /**
3258
- * @hidden
3259
- */
3260
- render() {
3261
- return /* @__PURE__ */ n.createElement(n.Fragment, null, this.renderOperatorEditor(), this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues));
3262
- }
3263
- inputChange(t, s) {
3264
- Yt(t, s, this.props);
3265
- }
3266
- operatorChange(t) {
3267
- Zt(t, this.props.value, this.props.onChange);
3268
- }
3269
- boolDropdownChange(t) {
3270
- Qt(t, this.props.onChange);
3271
- }
3272
- filterComponent(t, s, o) {
3273
- switch (t) {
3274
- case "numeric":
3275
- return /* @__PURE__ */ n.createElement(
3276
- je,
3277
- {
3278
- value: s,
3279
- onChange: (e) => {
3280
- this.inputChange(e.value, e.syntheticEvent);
3281
- },
3282
- rangeOnEnter: !1
3283
- }
3284
- );
3285
- case "date":
3286
- return /* @__PURE__ */ n.createElement(
3287
- Xe,
3288
- {
3289
- value: s,
3290
- onChange: (e) => {
3291
- this.inputChange(e.value, e.syntheticEvent);
3292
- }
3293
- }
3294
- );
3295
- case "boolean": {
3296
- const e = (r) => r == null;
3297
- return /* @__PURE__ */ n.createElement(
3298
- ie,
3299
- {
3300
- onChange: this.boolDropdownChange,
3301
- value: o.find((r) => r.operator === (e(s) ? "" : s)),
3302
- data: o,
3303
- textField: "text"
3304
- }
3305
- );
3306
- }
3307
- default:
3308
- return /* @__PURE__ */ n.createElement(
3309
- Lt,
3310
- {
3311
- value: s || "",
3312
- onChange: (e) => {
3313
- this.inputChange(e.target.value, e.syntheticEvent);
3314
- }
3315
- }
3316
- );
3317
- }
3318
- }
3319
- }
3320
- class Lr extends n.Component {
3321
- render() {
3322
- const {
3323
- firstFilterProps: t,
3324
- hideSecondFilter: s,
3325
- secondFilterProps: o,
3326
- logicData: e,
3327
- logicValue: r,
3328
- onLogicChange: l
3329
- } = this.props;
3330
- return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(wt, { ...t }), !s && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
3331
- ie,
3332
- {
3333
- data: e,
3334
- value: r,
3335
- onChange: l,
3336
- className: "k-filter-and",
3337
- textField: "text"
3338
- }
3339
- ), /* @__PURE__ */ n.createElement(wt, { ...o })));
3340
- }
3341
- }
3342
- const Ke = (i) => i || { filters: [], logic: "and" }, fe = (i, t) => Ke(t).filters.filter((e) => bt(e) ? e.filters && e.filters.length && e.filters.length <= 2 && !e.filters.find((r) => bt(r) || r.field !== i) : !1)[0] || null;
3343
- class ps extends n.Component {
3344
- constructor(t) {
3345
- super(t), this.removeGroup = (o, e) => {
3346
- const r = [...e.filters], l = r.findIndex((a) => a === o);
3347
- return l > -1 && r.splice(l, 1), {
3348
- ...e,
3349
- filters: r
3350
- };
3351
- }, this.insertGroup = (o, e) => ({
3352
- ...e,
3353
- filters: [
3354
- o,
3355
- ...e.filters
3356
- ]
3357
- }), this.isControlled = () => this.props.expanded !== void 0, this.onFilterExpand = () => {
3358
- const o = this.isControlled(), e = !(o ? this.props.expanded : this.state.expanded);
3359
- this.props.onExpandChange && this.props.onExpandChange(e), o || this.setState({
3360
- expanded: e
3361
- });
3362
- }, this.firstFilterChange = (o) => {
3363
- this.filterChange(0, o);
3364
- }, this.secondFilterChange = (o) => {
3365
- this.filterChange(1, o);
3366
- }, this.filterChange = (o, e) => {
3367
- const r = this.state.filterGroup.filters.map((l, a) => a === o ? {
3368
- ...l,
3369
- value: e.value,
3370
- operator: e.operator
3371
- } : l);
3372
- this.setState({
3373
- filterGroup: {
3374
- ...this.state.filterGroup,
3375
- filters: r
3376
- }
3377
- });
3378
- }, this.logicChange = (o) => {
3379
- this.setState({
3380
- filterGroup: {
3381
- ...this.state.filterGroup,
3382
- logic: o.target.value.operator
3383
- }
3384
- });
3385
- }, this.clear = (o) => {
3386
- if (o.preventDefault(), !this.props.onFilterChange)
3387
- return;
3388
- const e = this.props.column.field, r = Ke(this.props.filter), l = fe(e, this.props.filter), a = r.filters.filter((c) => c !== l);
3389
- a.length ? this.props.onFilterChange({ ...r, filters: a }, o) : this.props.onFilterChange(null, o), this.props.onCloseMenu && this.props.onCloseMenu();
3390
- }, this.currentFilterGroup = () => ({
3391
- ...this.state.filterGroup,
3392
- filters: this.state.filterGroup.filters.filter((o) => o.value !== void 0 && o.value !== null && o.value !== "" || o.value === null && o.operator)
3393
- }), this.submit = (o) => {
3394
- if (o.preventDefault(), !this.props.onFilterChange)
3395
- return;
3396
- const e = this.props.column.field, r = Ke(this.props.filter), l = fe(e, this.props.filter), a = this.currentFilterGroup();
3397
- let c = null;
3398
- if (l && a.filters.length > 0) {
3399
- const h = r.filters.map((d) => d === l ? a : d);
3400
- c = {
3401
- ...r,
3402
- filters: h
3403
- };
3404
- } else if (a.filters.length === 0) {
3405
- const h = r.filters.filter((d) => d !== l);
3406
- h.length && (c = {
3407
- ...r,
3408
- filters: h
3409
- });
3410
- } else
3411
- c = {
3412
- ...r,
3413
- filters: [...r.filters, a]
3414
- };
3415
- this.props.onFilterChange(c, o), this.props.onCloseMenu && this.props.onCloseMenu();
3416
- };
3417
- let s;
3418
- if (t.column && t.column.field) {
3419
- const o = Ve(t.column.filter), e = Jt(t.filterOperators, o);
3420
- s = fe(t.column.field, t.filter), s = s ? {
3421
- ...s,
3422
- filters: s.filters.map((r) => ({ ...r }))
3423
- } : {
3424
- logic: "and",
3425
- filters: [
3426
- { field: t.column.field, operator: e, value: L(e) ? null : void 0 },
3427
- { field: t.column.field, operator: e, value: L(e) ? null : void 0 }
3428
- ]
3429
- }, s.filters.filter((r) => r.field === t.column.field).length === 1 && s.filters.splice(1, 0, { field: t.column.field, operator: e });
3430
- }
3431
- this.state = {
3432
- expanded: t.expanded || !1,
3433
- filterGroup: s
3434
- };
3435
- }
3436
- /**
3437
- * @hidden
3438
- */
3439
- render() {
3440
- const { column: t, filterUI: s, hideSecondFilter: o, filterOperators: e } = this.props;
3441
- if (!t || !t.field)
3442
- return /* @__PURE__ */ n.createElement("div", null);
3443
- const r = Ve(t.filter), l = o !== void 0 ? o : xr[r], a = D(this), c = this.state.filterGroup.filters, h = re(e[r], a), d = re(Xt, a), u = {
3444
- field: t.field,
3445
- value: c[0].value,
3446
- operator: c[0].operator,
3447
- operators: h,
3448
- booleanValues: d,
3449
- onChange: this.firstFilterChange,
3450
- filterType: r
3451
- }, f = {
3452
- field: t.field,
3453
- value: c[1].value,
3454
- operator: c[1].operator,
3455
- operators: h,
3456
- booleanValues: d,
3457
- onChange: this.secondFilterChange,
3458
- filterType: r
3459
- }, g = this.state.filterGroup.logic, b = re(Cr, a), E = {
3460
- value: b.find((T) => T.operator === (g === null ? "" : g)),
3461
- onChange: this.logicChange,
3462
- data: b
3463
- }, C = s, x = {
3464
- firstFilterProps: u,
3465
- secondFilterProps: f,
3466
- logicData: E.data,
3467
- logicValue: E.value,
3468
- onLogicChange: E.onChange,
3469
- hideSecondFilter: l
3470
- }, S = this.currentFilterGroup().filters.length !== 0 || L(c[0].operator) || L(c[1].operator), v = this.isControlled() ? this.props.expanded : this.state.expanded, _ = this.props.alwaysExpand;
3471
- return /* @__PURE__ */ n.createElement(ve, null, !_ && /* @__PURE__ */ n.createElement(
3472
- ae,
3473
- {
3474
- title: a.toLanguageString(ne, k[ne]),
3475
- iconClass: "k-i-filter",
3476
- svgIcon: be,
3477
- onClick: this.onFilterExpand
3478
- }
3479
- ), /* @__PURE__ */ n.createElement(ds, { show: _ || !!v }, /* @__PURE__ */ n.createElement(
3480
- "form",
3481
- {
3482
- className: "k-filter-menu",
3483
- onSubmit: this.submit,
3484
- onReset: this.clear,
3485
- onKeyDown: (T) => T.stopPropagation()
3486
- },
3487
- /* @__PURE__ */ n.createElement("div", { className: "k-filter-menu-container" }, C ? /* @__PURE__ */ n.createElement(C, { ...x }) : /* @__PURE__ */ n.createElement(Lr, { ...x }), /* @__PURE__ */ n.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ n.createElement(
3488
- W,
3489
- {
3490
- themeColor: "primary",
3491
- disabled: !S
3492
- },
3493
- a.toLanguageString(oe, k[oe])
3494
- ), /* @__PURE__ */ n.createElement(
3495
- W,
3496
- {
3497
- type: "reset"
3498
- },
3499
- a.toLanguageString(U, k[U])
3500
- )))
3501
- )));
3502
- }
3503
- }
3504
- ps.active = (i, t) => !!fe(i, t);
3505
- G(ps);
3506
- const Or = (i, t) => i.length !== t.length ? !1 : i.every((s, o) => s === t[o]);
3507
- class us extends n.Component {
3508
- constructor(t) {
3509
- super(t), this.defaultFilter = () => this.props.filter ? Ss(this.props.filter) : { filters: [], logic: "and" }, this.isControlled = () => this.props.expanded !== void 0, this.parseData = (s, o) => {
3510
- const e = this.props.column.field || "", r = s.map((l) => M(e, l));
3511
- return o ? r.filter((l, a) => r.indexOf(l) === a) : r;
3512
- }, this.getFilterIndex = () => {
3513
- const s = this.props.column.field;
3514
- return this.defaultFilter().filters.findIndex((r) => r.filters && r.filters.length > 0 && r.filters[0].field === s);
3515
- }, this.onFilterExpand = () => {
3516
- const s = this.isControlled(), o = !(s ? this.props.expanded : this.state.expanded);
3517
- this.props.onExpandChange && this.props.onExpandChange(o), s || this.setState({
3518
- expanded: o
3519
- });
3520
- }, this.handleSearchChange = (s) => {
3521
- const o = this.props.searchBoxFilterOperator ? this.props.searchBoxFilterOperator : "startswith", e = {
3522
- logic: "and",
3523
- filters: [
3524
- { field: this.props.column.field, operator: o, value: s.target.value, ignoreCase: !0 }
3525
- ]
3526
- };
3527
- this.setState({
3528
- value: s.target.value,
3529
- data: this.parseData(xt(this.props.data || [], e), this.props.uniqueData)
3530
- });
3531
- }, this.handleClear = () => {
3532
- const s = this.props.searchBoxFilterOperator ? this.props.searchBoxFilterOperator : "startswith", o = {
3533
- logic: "and",
3534
- filters: [
3535
- { field: this.props.column.field, operator: s, value: "", ignoreCase: !0 }
3536
- ]
3537
- };
3538
- this.setState({
3539
- value: "",
3540
- data: this.parseData(xt(this.props.data || [], o), this.props.uniqueData)
3541
- });
3542
- }, this.clear = (s) => {
3543
- if (s.preventDefault(), !this.props.onFilterChange)
3544
- return;
3545
- const o = this.state.currentFilter || null;
3546
- o !== null && o.filters.length > 0 ? (this.compositeFilterIndex >= 0 && o.filters.splice(this.compositeFilterIndex, 1), this.props.onFilterChange(o, s)) : this.props.onFilterChange(null, s), this.props.onCloseMenu && this.props.onCloseMenu();
3547
- }, this.submit = (s) => {
3548
- if (s.preventDefault(), !this.props.onFilterChange)
3549
- return;
3550
- const o = this.state.currentFilter || null;
3551
- this.props.onFilterChange(o, s), this.props.onCloseMenu && this.props.onCloseMenu();
3552
- }, this.handleCheckBoxChange = (s, o) => {
3553
- const e = this.props.column.field || "", r = { ...this.state.currentFilter }, l = [...this.state.currentFilter.filters];
3554
- let a = [];
3555
- if (this.compositeFilterIndex !== -1 && r.filters[this.compositeFilterIndex].filters && o !== "all" && (a = r.filters[this.compositeFilterIndex].filters), s.value && o === "all")
3556
- this.state.data.forEach((c) => {
3557
- a.push({ field: e, operator: "eq", value: c });
3558
- });
3559
- else if (s.value)
3560
- a.push({ field: e, operator: "eq", value: o });
3561
- else if (this.state.currentFilter) {
3562
- const c = a.findIndex((h) => h.value === o);
3563
- a.splice(c, 1);
3564
- }
3565
- r.logic = "and", this.compositeFilterIndex !== -1 ? l[this.compositeFilterIndex] = {
3566
- logic: "or",
3567
- filters: a
3568
- } : l.push({
3569
- logic: "or",
3570
- filters: a
3571
- }), (!s.value && o === "all" || a.length === 0) && l.splice(this.compositeFilterIndex, 1), r.filters = l, this.setState({ currentFilter: r });
3572
- }, this.isAllSelected = () => {
3573
- let s = !1;
3574
- if (this.state.currentFilter) {
3575
- const o = [...this.state.currentFilter.filters];
3576
- return this.compositeFilterIndex === -1 ? !1 : (s = this.state.data.every((e) => this.compositeFilterIndex !== -1 && o[this.compositeFilterIndex].filters ? o[this.compositeFilterIndex].filters.findIndex((l) => l.value === e) >= 0 : !1), s);
3577
- }
3578
- return s;
3579
- }, this.compositeFilterIndex = this.getFilterIndex(), this.state = {
3580
- expanded: t.expanded || !1,
3581
- value: "",
3582
- data: this.parseData(this.props.data, this.props.uniqueData) || [],
3583
- dataFromProps: this.parseData(this.props.data, !1) || [],
3584
- currentFilter: this.defaultFilter()
3585
- };
3586
- }
3587
- /**
3588
- * @hidden
3589
- */
3590
- componentDidUpdate() {
3591
- const t = this.props.column.field || "", s = this.props.data.map((o) => M(t, o));
3592
- Or(s, this.state.dataFromProps) || this.setState({
3593
- data: s,
3594
- dataFromProps: s
3595
- });
3596
- }
3597
- /**
3598
- * @hidden
3599
- */
3600
- render() {
3601
- const { column: t } = this.props;
3602
- if (!t || !t.field)
3603
- return /* @__PURE__ */ n.createElement("div", null);
3604
- const s = D(this), o = this.isControlled() ? this.props.expanded : this.state.expanded, e = [];
3605
- if (this.state.currentFilter) {
3606
- const a = [...this.state.currentFilter.filters];
3607
- this.compositeFilterIndex = a.findIndex((c) => c.filters && c.filters.length > 0 ? c.filters[0].field === t.field : !1), this.compositeFilterIndex !== -1 && a[this.compositeFilterIndex].filters.length > 0 && a[this.compositeFilterIndex].filters.forEach((c) => {
3608
- c.field === this.props.column.field && e.push(c.value);
3609
- });
3610
- }
3611
- const r = this.props.searchBox ? /* @__PURE__ */ n.createElement(this.props.searchBox, { value: this.state.value, onChange: this.handleSearchChange }) : /* @__PURE__ */ n.createElement("div", { className: "k-searchbox k-textbox k-input k-input-md k-input-solid" }, /* @__PURE__ */ n.createElement(O, { className: "k-input-icon", name: "search", icon: Ht }), /* @__PURE__ */ n.createElement(
3612
- Lt,
3613
- {
3614
- className: "k-input-inner",
3615
- type: "text",
3616
- placeholder: s.toLanguageString(Le, k[Le]),
3617
- value: this.state.value,
3618
- onChange: (a) => this.handleSearchChange(a.nativeEvent)
3619
- }
3620
- ), /* @__PURE__ */ n.createElement(
3621
- W,
3622
- {
3623
- type: "button",
3624
- rounded: null,
3625
- className: "k-input-button",
3626
- onClick: this.handleClear,
3627
- icon: "x",
3628
- svgIcon: Ks
3629
- }
3630
- )), l = e.filter((a, c) => e.indexOf(a) === c);
3631
- return /* @__PURE__ */ n.createElement(ve, null, /* @__PURE__ */ n.createElement(
3632
- ae,
3633
- {
3634
- title: s.toLanguageString(ne, k[ne]),
3635
- iconClass: "k-i-filter",
3636
- svgIcon: be,
3637
- onClick: this.onFilterExpand
3638
- }
3639
- ), /* @__PURE__ */ n.createElement(ds, { show: !!o }, /* @__PURE__ */ n.createElement(
3640
- "form",
3641
- {
3642
- className: "k-filter-menu",
3643
- onSubmit: this.submit,
3644
- onReset: this.clear
3645
- },
3646
- /* @__PURE__ */ n.createElement("div", { className: "k-filter-menu-container" }, r, /* @__PURE__ */ n.createElement("ul", { className: "k-reset k-multicheck-wrap" }, /* @__PURE__ */ n.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ n.createElement(
3647
- me,
3648
- {
3649
- label: s.toLanguageString(Oe, k[Oe]),
3650
- onChange: (a) => this.handleCheckBoxChange(a, "all"),
3651
- checked: this.isAllSelected()
3652
- }
3653
- )), this.state.data.map((a, c) => /* @__PURE__ */ n.createElement("li", { className: "k-item", key: c }, /* @__PURE__ */ n.createElement(
3654
- me,
3655
- {
3656
- label: String(a),
3657
- onChange: (h) => this.handleCheckBoxChange(h, a),
3658
- checked: l.includes(a)
3659
- }
3660
- )))), /* @__PURE__ */ n.createElement("div", { className: "k-filter-selected-items" }, l.length + " " + s.toLanguageString(Pe, k[Pe])), /* @__PURE__ */ n.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" }, /* @__PURE__ */ n.createElement(
3661
- W,
3662
- {
3663
- themeColor: "primary",
3664
- type: "submit"
3665
- },
3666
- s.toLanguageString(oe, k[oe])
3667
- ), /* @__PURE__ */ n.createElement(
3668
- W,
3669
- {
3670
- className: "k-button",
3671
- type: "reset"
3672
- },
3673
- s.toLanguageString(U, k[U])
3674
- )))
3675
- )));
3676
- }
3677
- }
3678
- us.defaultProps = {
3679
- uniqueData: !0
3680
- };
3681
- G(us);
3682
- const _r = (i) => {
3683
- const [t, s] = n.useState(""), o = n.useMemo(() => new Set(i.columnsState.map((g) => g.id)), [i.columnsState]), e = n.useMemo(() => i.columns.filter((g) => {
3684
- var b;
3685
- return (b = g.title || g.field) == null ? void 0 : b.toLowerCase().includes(t.toLowerCase());
3686
- }), [i.columns, t]), [r, l] = n.useState(i.columns.map((g) => o.has(g.id))), a = n.useCallback(() => {
3687
- const g = i.columns.filter((b, E) => r[E]);
3688
- i.onColumnsChange.call(void 0, g), i.onCloseMenu.call(void 0);
3689
- }, [r, i.columns, i.onColumnsChange, i.onCloseMenu]), c = n.useCallback(() => {
3690
- l(i.columns.map((g) => o.has(g.id)));
3691
- }, [o, i.columns]), h = r.filter((g) => g).length, d = h === r.length, u = n.useCallback(() => {
3692
- l(i.columns.map((g, b) => d && b === 0 ? !0 : !d));
3693
- }, [i.columns, d]), f = n.useCallback((g, b) => {
3694
- const E = r.slice();
3695
- E[b] = g, l(E);
3696
- }, [r]);
3697
- return /* @__PURE__ */ n.createElement("form", { className: "k-filter-menu" }, /* @__PURE__ */ n.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ n.createElement(
3698
- zt,
3699
- {
3700
- className: "k-searchbox",
3701
- value: t,
3702
- onChange: (g) => s(String(g.target.value)),
3703
- prefix: () => /* @__PURE__ */ n.createElement(Us, null, /* @__PURE__ */ n.createElement(O, { name: "search", icon: Ht }))
3704
- }
3705
- ), /* @__PURE__ */ n.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !t && /* @__PURE__ */ n.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ n.createElement(
3706
- me,
3707
- {
3708
- checked: d,
3709
- onChange: u,
3710
- label: "(Select all)"
3711
- }
3712
- )), e.map((g, b) => /* @__PURE__ */ n.createElement("li", { key: g.id, className: "k-item" }, /* @__PURE__ */ n.createElement(
3713
- me,
3714
- {
3715
- disabled: r[b] && h === 1,
3716
- checked: r[b],
3717
- onChange: (E) => {
3718
- var C;
3719
- return f(!!((C = E.target.element) != null && C.checked), b);
3720
- },
3721
- label: g.title || g.field
3722
- }
3723
- )))), /* @__PURE__ */ n.createElement("div", { className: "k-filter-selected-items" }, h, " selected items"), /* @__PURE__ */ n.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ n.createElement(W, { type: "button", themeColor: "primary", onClick: a }, "Apply"), /* @__PURE__ */ n.createElement(W, { type: "button", onClick: c }, "Reset"))));
3724
- };
3725
- _r.displayName = "GridColumnMenuColumnsList";
3726
- class ri extends n.Component {
3727
- /**
3728
- * @hidden
3729
- */
3730
- render() {
3731
- return null;
3732
- }
3733
- }
3734
- class Pr extends n.Component {
3735
- /**
3736
- * @hidden
3737
- */
3738
- render() {
3739
- return /* @__PURE__ */ n.createElement(
3740
- "div",
3741
- {
3742
- className: y(
3743
- "k-toolbar k-grid-toolbar",
3744
- {
3745
- "k-toolbar-md": !this.props.size,
3746
- [`k-toolbar-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size
3747
- },
3748
- this.props.className
3749
- ),
3750
- "aria-label": this.props.ariaLabel,
3751
- "aria-controls": this.props.ariaControls,
3752
- role: "toolbar"
3753
- },
3754
- this.props.children
3755
- );
3756
- }
3757
- }
3758
- Pr.displayName = "KendoReactGridToolbar";
3759
- const Ar = (i) => {
3760
- const { data: t = [] } = i;
3761
- return /* @__PURE__ */ n.createElement("div", { className: "k-selection-aggregates k-grid-selection-aggregates" }, t.map((s, o) => /* @__PURE__ */ n.createElement("div", { key: o }, /* @__PURE__ */ n.createElement("span", { className: "k-selection-aggregates-item-text" }, s.type, ": "), /* @__PURE__ */ n.createElement("span", { className: "k-selection-aggregates-item-value" }, s.formattedValue))));
3762
- };
3763
- Ar.displayName = "KendoReactGridStatusBar";
3764
- const Br = (i) => {
3765
- var s;
3766
- const t = i.slice();
3767
- for (let o = 0; o < t.length; o++)
3768
- for (; t[o] && ((s = t[o].children) != null && s.length); )
3769
- t.splice(o, 1, ...t[o].children);
3770
- return t;
3771
- }, ii = (i) => {
3772
- const { dataItems: t, target: s, selectedField: o } = i, r = Br(s.columns).map((C) => C.field).filter((C) => C && typeof C == "string").map((C) => Fe(C)), l = Fe(o), a = { dates: [], numbers: [], booleans: [], others: [] }, c = (C) => {
3773
- typeof C == "number" ? a.numbers.push(C) : typeof C == "boolean" ? a.booleans.push(C) : C instanceof Date ? a.dates.push(C) : a.others.push(C);
3774
- };
3775
- t.forEach((C) => {
3776
- const x = l(C);
3777
- x && x.forEach((S) => {
3778
- c(r[S](C));
3779
- });
3780
- });
3781
- const h = a.dates.map((C) => C.getTime()), d = a.booleans.filter((C) => C).length, u = a.booleans.filter((C) => !C).length, f = a.numbers.length ? a.numbers.reduce((C, x) => C += x, 0) : void 0, g = {
3782
- sum: f,
3783
- average: typeof f == "number" ? f / a.numbers.length : void 0,
3784
- min: a.numbers.length ? Math.min(...a.numbers) : void 0,
3785
- max: a.numbers.length ? Math.max(...a.numbers) : void 0,
3786
- count: a.numbers.length + a.booleans.length + a.dates.length + a.others.length,
3787
- isTrue: d > 0 ? d : void 0,
3788
- isFalse: u > 0 ? u : void 0,
3789
- earliest: a.dates.length ? new Date(Math.min(...h)) : void 0,
3790
- latest: a.dates.length ? new Date(Math.max(...h)) : void 0
3791
- }, b = (C, x) => (x === "sum" || x === "average") && typeof C == "number" ? C.toFixed(2) : (x === "earliest" || x === "latest") && C instanceof Date ? C.toLocaleDateString() : String(C), E = [];
3792
- return Object.keys(g).forEach((C) => {
3793
- const x = C, S = g[x];
3794
- S !== void 0 && E.push({ type: x, value: S, formattedValue: b(S, x) });
3795
- }), E;
3796
- }, Wr = Dt(he);
3797
- Wr.displayName = "KendoReactGrid";
9
+ import { Grid as r } from "./Grid.mjs";
10
+ import { GridColumn as p } from "./GridColumn.mjs";
11
+ import { GridColumnMenuWrapper as n } from "./columnMenu/GridColumnMenuWrapper.mjs";
12
+ import { GridColumnMenuGroup as u } from "./columnMenu/GridColumnMenuGroup.mjs";
13
+ import { GridColumnMenuSort as f } from "./columnMenu/GridColumnMenuSort.mjs";
14
+ import { GridColumnMenuFilter as x, filterGroupByField as s, rootFilterOrDefault as g } from "./columnMenu/GridColumnMenuFilter.mjs";
15
+ import { GridColumnMenuFilterUI as c } from "./columnMenu/GridColumnMenuFilterUI.mjs";
16
+ import { GridColumnMenuFilterCell as D } from "./columnMenu/GridColumnMenuFilterCell.mjs";
17
+ import { GridColumnMenuCheckboxFilter as R } from "./columnMenu/GridColumnMenuCheckboxFilter.mjs";
18
+ import { GridColumnMenuColumnsList as F } from "./columnMenu/GridColumnMenuColumnsList.mjs";
19
+ import { GridCell as _ } from "./cells/GridCell.mjs";
20
+ import { GridEditCell as P } from "./cells/GridEditCell.mjs";
21
+ import { GridGroupCell as h } from "./cells/GridGroupCell.mjs";
22
+ import { GridHierarchyCell as w } from "./cells/GridHierarchyCell.mjs";
23
+ import { GridFilterCell as y } from "./cells/GridFilterCell.mjs";
24
+ import { GridHeaderCell as H } from "./header/GridHeaderCell.mjs";
25
+ import { GridSelectionCell as A } from "./cells/GridSelectionCell.mjs";
26
+ import { GridDetailRow as V } from "./rows/GridDetailRow.mjs";
27
+ import { GridRow as X } from "./rows/GridRow.mjs";
28
+ import { GridToolbar as v } from "./GridToolbar.mjs";
29
+ import { GridNoRecords as j } from "./GridNoRecords.mjs";
30
+ import { GridColumnMenuItem as z } from "./columnMenu/GridColumnMenuItem.mjs";
31
+ import { GridColumnMenuItemContent as Q } from "./columnMenu/GridColumnMenuItemContent.mjs";
32
+ import { GridColumnMenuItemGroup as Z } from "./columnMenu/GridColumnMenuItemGroup.mjs";
33
+ import { GRID_COL_INDEX_ATTRIBUTE as er, GRID_PREVENT_SELECTION_ELEMENT as or, GRID_ROW_INDEX_ATTRIBUTE as tr } from "./constants/index.mjs";
34
+ import { getSelectedState as mr, getSelectedStateFromKeyDown as ir, setSelectedState as pr } from "@progress/kendo-react-data-tools";
35
+ import { CommonDragLogic as nr } from "./drag/CommonDragLogic.mjs";
36
+ import { booleanFilterValues as ur, cellBoolDropdownChange as Gr, cellInputChange as fr, cellOperatorChange as Cr, operators as xr } from "./filterCommon.mjs";
37
+ import { withIdHOC as e } from "@progress/kendo-react-common";
38
+ import { messages as gr, pagerFirstPage as Ir, pagerInfo as cr, pagerItemPerPage as Mr, pagerLastPage as Dr, pagerNextPage as Er, pagerPreviousPage as Rr } from "./messages/index.mjs";
39
+ import { StatusBar as Fr, getStatusData as Tr, leafColumns as _r } from "./StatusBar.mjs";
40
+ const o = e(r);
41
+ o.displayName = "KendoReactGrid";
3798
42
  export {
3799
- se as GRID_COL_INDEX_ATTRIBUTE,
3800
- ti as GRID_PREVENT_SELECTION_ELEMENT,
3801
- hr as GRID_ROW_INDEX_ATTRIBUTE,
3802
- Wr as Grid,
3803
- Rr as GridCell,
3804
- he as GridClassComponent,
3805
- ce as GridColumn,
3806
- us as GridColumnMenuCheckboxFilter,
3807
- _r as GridColumnMenuColumnsList,
3808
- ps as GridColumnMenuFilter,
3809
- wt as GridColumnMenuFilterCell,
3810
- Lr as GridColumnMenuFilterUI,
3811
- os as GridColumnMenuGroup,
3812
- ae as GridColumnMenuItem,
3813
- ds as GridColumnMenuItemContent,
3814
- ve as GridColumnMenuItemGroup,
3815
- Je as GridColumnMenuSort,
3816
- $t as GridColumnMenuWrapper,
3817
- wr as GridCommonDragLogic,
3818
- ri as GridDetailRow,
3819
- dr as GridEditCell,
3820
- es as GridFilterCell,
3821
- It as GridGroupCell,
3822
- gr as GridHeaderCell,
3823
- cr as GridHierarchyCell,
3824
- Ye as GridNoRecords,
3825
- Fr as GridRow,
3826
- ar as GridSelectionCell,
3827
- Pr as GridToolbar,
3828
- Ar as StatusBar,
3829
- Xt as booleanFilterValues,
3830
- Qt as cellBoolDropdownChange,
3831
- Yt as cellInputChange,
3832
- Zt as cellOperatorChange,
3833
- fe as filterGroupByField,
3834
- li as getSelectedState,
3835
- ai as getSelectedStateFromKeyDown,
3836
- ii as getStatusData,
3837
- k as gridMessages,
3838
- Br as leafColumns,
3839
- kt as operators,
3840
- Qs as pagerFirstPage,
3841
- Js as pagerInfo,
3842
- sr as pagerItemPerPage,
3843
- tr as pagerLastPage,
3844
- er as pagerNextPage,
3845
- Zs as pagerPreviousPage,
3846
- Ke as rootFilterOrDefault,
3847
- ci as setSelectedState
43
+ er as GRID_COL_INDEX_ATTRIBUTE,
44
+ or as GRID_PREVENT_SELECTION_ELEMENT,
45
+ tr as GRID_ROW_INDEX_ATTRIBUTE,
46
+ o as Grid,
47
+ _ as GridCell,
48
+ r as GridClassComponent,
49
+ p as GridColumn,
50
+ R as GridColumnMenuCheckboxFilter,
51
+ F as GridColumnMenuColumnsList,
52
+ x as GridColumnMenuFilter,
53
+ D as GridColumnMenuFilterCell,
54
+ c as GridColumnMenuFilterUI,
55
+ u as GridColumnMenuGroup,
56
+ z as GridColumnMenuItem,
57
+ Q as GridColumnMenuItemContent,
58
+ Z as GridColumnMenuItemGroup,
59
+ f as GridColumnMenuSort,
60
+ n as GridColumnMenuWrapper,
61
+ nr as GridCommonDragLogic,
62
+ V as GridDetailRow,
63
+ P as GridEditCell,
64
+ y as GridFilterCell,
65
+ h as GridGroupCell,
66
+ H as GridHeaderCell,
67
+ w as GridHierarchyCell,
68
+ j as GridNoRecords,
69
+ X as GridRow,
70
+ A as GridSelectionCell,
71
+ v as GridToolbar,
72
+ Fr as StatusBar,
73
+ ur as booleanFilterValues,
74
+ Gr as cellBoolDropdownChange,
75
+ fr as cellInputChange,
76
+ Cr as cellOperatorChange,
77
+ s as filterGroupByField,
78
+ mr as getSelectedState,
79
+ ir as getSelectedStateFromKeyDown,
80
+ Tr as getStatusData,
81
+ gr as gridMessages,
82
+ _r as leafColumns,
83
+ xr as operators,
84
+ Ir as pagerFirstPage,
85
+ cr as pagerInfo,
86
+ Mr as pagerItemPerPage,
87
+ Dr as pagerLastPage,
88
+ Er as pagerNextPage,
89
+ Rr as pagerPreviousPage,
90
+ g as rootFilterOrDefault,
91
+ pr as setSelectedState
3848
92
  };