@progress/kendo-react-grid 7.2.4-develop.4 → 7.3.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Grid.js +1 -1
- package/Grid.mjs +256 -253
- package/dist/cdn/js/kendo-react-grid.js +1 -1
- package/index.d.mts +6 -0
- package/index.d.ts +6 -0
- package/messages/index.js +1 -1
- package/messages/index.mjs +11 -9
- package/package-metadata.mjs +1 -1
- package/package.json +10 -10
package/Grid.mjs
CHANGED
|
@@ -8,34 +8,35 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as r from "react";
|
|
10
10
|
import s from "prop-types";
|
|
11
|
-
import { dispatchEvent as
|
|
12
|
-
import { tableKeyboardNavigation as
|
|
13
|
-
import { GridSelectionCell as
|
|
14
|
-
import { GridHierarchyCell as
|
|
15
|
-
import { GridEditCell as
|
|
16
|
-
import { Header as
|
|
17
|
-
import { HeaderRow as
|
|
18
|
-
import { FilterRow as
|
|
19
|
-
import { GroupPanel as
|
|
20
|
-
import { Footer as
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
|
|
11
|
+
import { dispatchEvent as Ae, canUseDOM as U, getActiveElement as Ge, memoizeOne as S, validatePackage as Ke, shouldShowValidationUI as Oe, setScrollbarWidth as re, getter as Pe, classNames as L, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
|
|
12
|
+
import { tableKeyboardNavigation as x, getSelectionOptions as ae, mapColumns as Ve, tableKeyboardNavigationTools as _, ClipboardService as We, TableKeyboardNavigationContext as V, isRtl as Be, tableColumnsVirtualization as $e, Pager as je, tableKeyboardNavigationScopeAttributes as le, TableSelection as ne, tableKeyboardNavigationBodyAttributes as he, DropClue as pe, DragClue as de, updateLeft as qe, updateRight as Je } from "@progress/kendo-react-data-tools";
|
|
13
|
+
import { GridSelectionCell as Qe } from "./cells/GridSelectionCell.mjs";
|
|
14
|
+
import { GridHierarchyCell as Xe } from "./cells/GridHierarchyCell.mjs";
|
|
15
|
+
import { GridEditCell as Ye } from "./cells/GridEditCell.mjs";
|
|
16
|
+
import { Header as Ze } from "./header/Header.mjs";
|
|
17
|
+
import { HeaderRow as et } from "./header/HeaderRow.mjs";
|
|
18
|
+
import { FilterRow as tt } from "./header/FilterRow.mjs";
|
|
19
|
+
import { GroupPanel as st } from "./header/GroupPanel.mjs";
|
|
20
|
+
import { Footer as it } from "./footer/Footer.mjs";
|
|
21
|
+
import { provideLocalizationService as ot, registerForLocalization as rt } from "@progress/kendo-react-intl";
|
|
22
|
+
import { pagerMessagesMap as at, gridAriaLabel as ce, messages as lt } from "./messages/index.mjs";
|
|
23
|
+
import { VirtualScroll as nt } from "./VirtualScroll.mjs";
|
|
24
|
+
import { VirtualScrollFixed as ue, RowHeightService as ge } from "./VirtualScrollFixed.mjs";
|
|
25
|
+
import { ColumnResize as ht } from "./drag/ColumnResize.mjs";
|
|
26
|
+
import { CommonDragLogic as pt } from "./drag/CommonDragLogic.mjs";
|
|
27
|
+
import { firefox as me, firefoxMaxHeight as fe, flatData as dt, readColumns as ct, sanitizeColumns as ut, getColumnWidth as W, autoGenerateColumns as gt, getNestedValue as ve, resolveCells as mt } from "./utils/index.mjs";
|
|
28
|
+
import { GridCell as ft } from "./cells/GridCell.mjs";
|
|
29
|
+
import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
|
|
30
|
+
import { GridRow as vt } from "./rows/GridRow.mjs";
|
|
31
|
+
import { GridHeaderSelectionCell as bt } from "./header/GridHeaderSelectionCell.mjs";
|
|
32
|
+
import { GridNoRecords as Ct } from "./GridNoRecords.mjs";
|
|
33
|
+
import { operators as Ce } from "./filterCommon.mjs";
|
|
34
|
+
import { FooterRow as Rt } from "./footer/FooterRow.mjs";
|
|
35
|
+
import { normalize as yt } from "./paging/GridPagerSettings.mjs";
|
|
36
|
+
import { packageMetadata as Re } from "./package-metadata.mjs";
|
|
37
|
+
import { GridDetailCell as wt } from "./cells/GridDetailCell.mjs";
|
|
38
|
+
import { GridDetailHierarchyCell as St } from "./cells/GridDetailHierarchyCell.mjs";
|
|
39
|
+
const z = class z extends r.Component {
|
|
39
40
|
constructor(a) {
|
|
40
41
|
super(a), 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 = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.observer = null, this.handleIntersection = (e) => {
|
|
41
42
|
const t = { rowIndex: this.rowIndex };
|
|
@@ -60,25 +61,25 @@ const _ = class _ extends r.Component {
|
|
|
60
61
|
const { rowIndex: t } = e, i = this.element;
|
|
61
62
|
if (this.observer && i) {
|
|
62
63
|
this.observer.disconnect();
|
|
63
|
-
const
|
|
64
|
-
|
|
64
|
+
const n = i.querySelector(`[absolute-row-index="${t}"]`);
|
|
65
|
+
n ? this.observer.observe(n) : this.setCurrentOnTop(e);
|
|
65
66
|
}
|
|
66
67
|
}, this.fitColumns = (e) => {
|
|
67
68
|
this.columnResize.dblClickHandler(null, e);
|
|
68
69
|
}, this.onContextMenu = (e, t, i) => {
|
|
69
70
|
if (this.props.onContextMenu) {
|
|
70
|
-
const
|
|
71
|
+
const n = {
|
|
71
72
|
target: this,
|
|
72
73
|
syntheticEvent: e,
|
|
73
74
|
nativeEvent: e.nativeEvent,
|
|
74
75
|
dataItem: t,
|
|
75
76
|
field: i
|
|
76
77
|
};
|
|
77
|
-
this.props.onContextMenu.call(void 0,
|
|
78
|
+
this.props.onContextMenu.call(void 0, n);
|
|
78
79
|
}
|
|
79
80
|
}, this.getVirtualScroll = (e) => {
|
|
80
|
-
const { rowHeight: t, detailRowHeight: i, detail:
|
|
81
|
-
return !
|
|
81
|
+
const { rowHeight: t, detailRowHeight: i, detail: n, expandField: h, groupable: l } = e, p = this.isAllData(), v = t !== void 0 && t > 0, R = i !== void 0 && i > 0, I = l === !0 || typeof l == "object" && l.enabled !== !1;
|
|
82
|
+
return !v || I && !p || !!(n && h) && (!R || !p) ? nt : ue;
|
|
82
83
|
}, this.isAllData = () => {
|
|
83
84
|
const { data: e, total: t } = this.props;
|
|
84
85
|
return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
|
|
@@ -92,15 +93,15 @@ const _ = class _ extends r.Component {
|
|
|
92
93
|
t || this.props.rowHeight === void 0 || this.props.rowHeight === 0
|
|
93
94
|
), 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 && !t) {
|
|
94
95
|
const i = this.props.rowHeight * e;
|
|
95
|
-
this.vs.containerHeight =
|
|
96
|
+
this.vs.containerHeight = me ? Math.min(fe, i) : i;
|
|
96
97
|
} else
|
|
97
98
|
this.vs.containerHeight = 1533915;
|
|
98
|
-
if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof
|
|
99
|
-
const { rowHeight: i = 0, detail:
|
|
100
|
-
let { detailRowHeight:
|
|
101
|
-
|
|
102
|
-
const
|
|
103
|
-
this.vs.containerHeight =
|
|
99
|
+
if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ue) {
|
|
100
|
+
const { rowHeight: i = 0, detail: n, expandField: h } = this.props;
|
|
101
|
+
let { detailRowHeight: l = 0 } = this.props;
|
|
102
|
+
l = n && h ? l : i, 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, i, l, this._data)) : this.vs.rowHeightService = new ge(e, i, l);
|
|
103
|
+
const p = this.vs.rowHeightService.totalHeight();
|
|
104
|
+
this.vs.containerHeight = me ? Math.min(fe, p) : p;
|
|
104
105
|
}
|
|
105
106
|
}, this.scrollHandler = (e) => {
|
|
106
107
|
if (e.target !== e.currentTarget)
|
|
@@ -109,14 +110,14 @@ const _ = class _ extends r.Component {
|
|
|
109
110
|
const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
|
|
110
111
|
this.props.columnVirtualization && (!this.vs.scrollableVirtual || i === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
|
|
111
112
|
this.forceUpdate();
|
|
112
|
-
}, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && i !== this.wrapperScrollTop && this.vs.scrollHandler(e),
|
|
113
|
+
}, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && i !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ae(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = i;
|
|
113
114
|
}, this.onKeyDown = (e) => {
|
|
114
|
-
if (
|
|
115
|
+
if (x.onKeyDown(e, {
|
|
115
116
|
contextStateRef: this.contextStateRef,
|
|
116
117
|
navigationStateRef: this.navigationStateRef,
|
|
117
118
|
onNavigationAction: this.onNavigationAction
|
|
118
119
|
}), this.props.onKeyDown) {
|
|
119
|
-
const { mode: t, cell: i } =
|
|
120
|
+
const { mode: t, cell: i } = ae(this.props.selectable), n = {
|
|
120
121
|
dataItems: this.getLeafDataItems(),
|
|
121
122
|
mode: t,
|
|
122
123
|
cell: i,
|
|
@@ -124,10 +125,10 @@ const _ = class _ extends r.Component {
|
|
|
124
125
|
selectedField: this.props.selectedField,
|
|
125
126
|
...this.getArguments(e)
|
|
126
127
|
};
|
|
127
|
-
this.props.onKeyDown.call(void 0,
|
|
128
|
+
this.props.onKeyDown.call(void 0, n);
|
|
128
129
|
}
|
|
129
130
|
}, this.onFocus = (e) => {
|
|
130
|
-
|
|
131
|
+
x.onFocus(e, {
|
|
131
132
|
contextStateRef: this.contextStateRef
|
|
132
133
|
});
|
|
133
134
|
}, this.onNavigationAction = (e) => {
|
|
@@ -251,18 +252,18 @@ const _ = class _ extends r.Component {
|
|
|
251
252
|
);
|
|
252
253
|
}
|
|
253
254
|
}, this.inActiveElement = () => {
|
|
254
|
-
var h,
|
|
255
|
+
var h, l, p;
|
|
255
256
|
if (!U)
|
|
256
257
|
return !1;
|
|
257
|
-
const e =
|
|
258
|
-
return !!(t &&
|
|
259
|
-
}, this.onResize = (e, t, i,
|
|
258
|
+
const e = Ge(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (l = this.document) == null ? void 0 : l.body, i = t.closest(".k-grid-container"), n = t && ((p = this._element) == null ? void 0 : p.contains(t));
|
|
259
|
+
return !!(t && n && i);
|
|
260
|
+
}, this.onResize = (e, t, i, n, h, l) => {
|
|
260
261
|
this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
|
|
261
262
|
void 0,
|
|
262
263
|
{
|
|
263
264
|
columns: this.columns,
|
|
264
|
-
nativeEvent:
|
|
265
|
-
targetColumnId:
|
|
265
|
+
nativeEvent: n,
|
|
266
|
+
targetColumnId: l,
|
|
266
267
|
index: e,
|
|
267
268
|
newWidth: t,
|
|
268
269
|
oldWidth: i,
|
|
@@ -270,32 +271,32 @@ const _ = class _ extends r.Component {
|
|
|
270
271
|
target: this
|
|
271
272
|
}
|
|
272
273
|
);
|
|
273
|
-
}, this.reInitVirtualization = S((e, t, i,
|
|
274
|
+
}, this.reInitVirtualization = S((e, t, i, n, h, l) => {
|
|
274
275
|
this.vs.reset();
|
|
275
|
-
const
|
|
276
|
-
this.vs = new
|
|
277
|
-
}), this.flatData = S((e, t, i,
|
|
278
|
-
const
|
|
279
|
-
|
|
276
|
+
const p = this.getVirtualScroll(this.props);
|
|
277
|
+
this.vs = new p(l);
|
|
278
|
+
}), this.flatData = S((e, t, i, n, h, l, p) => {
|
|
279
|
+
const v = [], R = dt(
|
|
280
|
+
v,
|
|
280
281
|
e,
|
|
281
282
|
t,
|
|
282
283
|
{ index: i },
|
|
283
|
-
|
|
284
|
+
n !== void 0,
|
|
284
285
|
h
|
|
285
286
|
);
|
|
286
|
-
return { flattedData:
|
|
287
|
-
}), this.rowHeightService = S((e, t, i,
|
|
287
|
+
return { flattedData: v, resolvedGroupsCount: R };
|
|
288
|
+
}), this.rowHeightService = S((e, t, i, n, h) => new ge(t, i, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
|
|
288
289
|
(e, t, i) => {
|
|
289
|
-
const
|
|
290
|
-
return
|
|
290
|
+
const n = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
|
|
291
|
+
return ct(n, this.columns, { prevId: 0, idPrefix: t });
|
|
291
292
|
}
|
|
292
293
|
), this.mapColumns = S(
|
|
293
|
-
(e) =>
|
|
294
|
+
(e) => Ve(e)
|
|
294
295
|
), this.configureColumns = S((e, t, i) => {
|
|
295
|
-
this.props.selectedField && e.forEach((
|
|
296
|
-
|
|
296
|
+
this.props.selectedField && e.filter((l) => l.field === this.props.selectedField).forEach((l) => {
|
|
297
|
+
l.width = l.width || "50px", l.cell = l.cell || Qe, l.headerCell = l.headerCell || bt;
|
|
297
298
|
});
|
|
298
|
-
const
|
|
299
|
+
const n = {
|
|
299
300
|
id: "",
|
|
300
301
|
resizable: !0,
|
|
301
302
|
width: "32px",
|
|
@@ -316,59 +317,59 @@ const _ = class _ extends r.Component {
|
|
|
316
317
|
};
|
|
317
318
|
let h = 0;
|
|
318
319
|
this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
|
|
319
|
-
...
|
|
320
|
-
cell:
|
|
320
|
+
...n,
|
|
321
|
+
cell: Xe,
|
|
321
322
|
field: this.props.expandField,
|
|
322
323
|
headerClassName: "k-hierarchy-cell k-header",
|
|
323
|
-
id:
|
|
324
|
+
id: _.generateNavigatableId(`${this._columns.length}`, i, "column")
|
|
324
325
|
}), h++);
|
|
325
|
-
for (let
|
|
326
|
+
for (let l = 0; l < t; l++)
|
|
326
327
|
e.unshift({
|
|
327
|
-
...
|
|
328
|
+
...n,
|
|
328
329
|
isAccessible: !1,
|
|
329
|
-
cell:
|
|
330
|
+
cell: be,
|
|
330
331
|
field: "value",
|
|
331
332
|
locked: this.props.lockGroups
|
|
332
333
|
}), h++;
|
|
333
|
-
e.slice(h).forEach((
|
|
334
|
-
}), this.getHeaderRow = S((e, t, i,
|
|
335
|
-
|
|
334
|
+
e.slice(h).forEach((l) => l.parentIndex >= 0 && (l.parentIndex += h));
|
|
335
|
+
}), this.getHeaderRow = S((e, t, i, n, h, l, p, v, R, I, b, F) => /* @__PURE__ */ r.createElement(
|
|
336
|
+
et,
|
|
336
337
|
{
|
|
337
338
|
cells: this.props.cells,
|
|
338
339
|
sort: e,
|
|
339
340
|
sortable: t,
|
|
340
341
|
sortChange: this.sortChange,
|
|
341
342
|
group: i || [],
|
|
342
|
-
groupable:
|
|
343
|
+
groupable: n,
|
|
343
344
|
groupChange: this.groupChange,
|
|
344
345
|
filter: h,
|
|
345
|
-
filterable:
|
|
346
|
-
filterOperators:
|
|
346
|
+
filterable: l,
|
|
347
|
+
filterOperators: p,
|
|
347
348
|
filterChange: this.filterChange,
|
|
348
349
|
columnMenu: R,
|
|
349
350
|
selectionChange: this.onHeaderSelectionChange,
|
|
350
|
-
columns:
|
|
351
|
+
columns: I,
|
|
351
352
|
columnResize: this.columnResize,
|
|
352
353
|
pressHandler: this.dragLogic.pressHandler,
|
|
353
354
|
dragHandler: this.dragLogic.dragHandler,
|
|
354
355
|
releaseHandler: this.dragLogic.releaseHandler,
|
|
355
|
-
columnsMap:
|
|
356
|
-
cellRender:
|
|
357
|
-
isRtl:
|
|
356
|
+
columnsMap: b,
|
|
357
|
+
cellRender: v,
|
|
358
|
+
isRtl: F,
|
|
358
359
|
dragClue: this.dragLogic.dragClueRef,
|
|
359
360
|
headerRef: this.headerElementRef,
|
|
360
361
|
containerRef: this.containerRef
|
|
361
362
|
}
|
|
362
363
|
)), this.resolveTitle = (e) => {
|
|
363
|
-
const t = this._columns.find((
|
|
364
|
+
const t = this._columns.find((n) => n.field === e), i = t && (t.title || t.field);
|
|
364
365
|
return i === void 0 ? e : i;
|
|
365
|
-
}, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem),
|
|
366
|
-
const
|
|
367
|
-
this.vs = new c(
|
|
366
|
+
}, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), Ke(Re), this.showLicenseWatermark = Oe(Re);
|
|
367
|
+
const d = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
|
|
368
|
+
this.vs = new c(d || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new pt(
|
|
368
369
|
this.columnReorder.bind(this),
|
|
369
370
|
this.groupReorder.bind(this),
|
|
370
371
|
this.columnToGroup.bind(this)
|
|
371
|
-
), this.columnResize = new
|
|
372
|
+
), this.columnResize = new ht(this.onResize), this.props.clipboard && (this.clipboardService = new We(this.onClipboard)), x.onConstructor({
|
|
372
373
|
navigatable: !!a.navigatable,
|
|
373
374
|
contextStateRef: this.contextStateRef,
|
|
374
375
|
navigationStateRef: this.navigationStateRef,
|
|
@@ -416,8 +417,8 @@ const _ = class _ extends r.Component {
|
|
|
416
417
|
*/
|
|
417
418
|
// tslint:enable:max-line-length
|
|
418
419
|
get columns() {
|
|
419
|
-
const a = this._columns.filter((
|
|
420
|
-
return
|
|
420
|
+
const a = this._columns.filter((d) => d.declarationIndex >= 0 && d.parentIndex === -1);
|
|
421
|
+
return ut(a);
|
|
421
422
|
}
|
|
422
423
|
/**
|
|
423
424
|
* Returns the HTML element of the Grid component.
|
|
@@ -439,24 +440,24 @@ const _ = class _ extends r.Component {
|
|
|
439
440
|
* @hidden
|
|
440
441
|
*/
|
|
441
442
|
componentDidMount() {
|
|
442
|
-
this.resetTableWidth(),
|
|
443
|
-
const a =
|
|
444
|
-
this.isRtl = a,
|
|
443
|
+
this.resetTableWidth(), re();
|
|
444
|
+
const a = Be(this.element);
|
|
445
|
+
this.isRtl = a, x.onComponentDidMount({
|
|
445
446
|
scope: this.element || void 0,
|
|
446
447
|
contextStateRef: this.contextStateRef,
|
|
447
448
|
navigationStateRef: this.navigationStateRef
|
|
448
449
|
}), this.isRtl && this.forceUpdate();
|
|
449
|
-
const
|
|
450
|
+
const d = {
|
|
450
451
|
rootMargin: "0px",
|
|
451
452
|
threshold: 0.9
|
|
452
453
|
};
|
|
453
|
-
this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = U && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection,
|
|
454
|
+
this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = U && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, d) || null;
|
|
454
455
|
}
|
|
455
456
|
/**
|
|
456
457
|
* @hidden
|
|
457
458
|
*/
|
|
458
459
|
getSnapshotBeforeUpdate() {
|
|
459
|
-
return
|
|
460
|
+
return x.onGetSnapshotBeforeUpdate({
|
|
460
461
|
document: this.document,
|
|
461
462
|
contextStateRef: this.contextStateRef,
|
|
462
463
|
navigationStateRef: this.navigationStateRef
|
|
@@ -466,7 +467,7 @@ const _ = class _ extends r.Component {
|
|
|
466
467
|
* @hidden
|
|
467
468
|
*/
|
|
468
469
|
componentDidUpdate() {
|
|
469
|
-
this.resetTableWidth(),
|
|
470
|
+
this.resetTableWidth(), re(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), x.onComponentDidUpdate({
|
|
470
471
|
scope: this.element || void 0,
|
|
471
472
|
contextStateRef: this.contextStateRef,
|
|
472
473
|
navigationStateRef: this.navigationStateRef
|
|
@@ -482,29 +483,29 @@ const _ = class _ extends r.Component {
|
|
|
482
483
|
* @hidden
|
|
483
484
|
*/
|
|
484
485
|
render() {
|
|
485
|
-
var
|
|
486
|
+
var ie;
|
|
486
487
|
let a = this.props.total || 0;
|
|
487
|
-
const
|
|
488
|
-
let
|
|
489
|
-
Array.isArray(this.props.data) ? (
|
|
490
|
-
const
|
|
491
|
-
c,
|
|
488
|
+
const d = _.getIdPrefix(this.navigationStateRef), c = ot(this);
|
|
489
|
+
let e = [];
|
|
490
|
+
Array.isArray(this.props.data) ? (e = this.props.data, a = a || this.props.data.length) : this.props.data && (e = this.props.data.data, a = a || this.props.data.total);
|
|
491
|
+
const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", { resolvedGroupsCount: i, flattedData: n } = this.flatData(
|
|
492
492
|
e,
|
|
493
|
+
t,
|
|
493
494
|
this.props.skip || 0,
|
|
494
495
|
this.props.group,
|
|
495
496
|
this.props.expandField,
|
|
496
497
|
this.props.filter,
|
|
497
498
|
this.props.sort
|
|
498
499
|
);
|
|
499
|
-
this._data =
|
|
500
|
-
const
|
|
501
|
-
this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable =
|
|
502
|
-
const
|
|
503
|
-
this.initializeVirtualization(a,
|
|
504
|
-
const
|
|
505
|
-
this.initColumns(
|
|
506
|
-
const
|
|
507
|
-
|
|
500
|
+
this._data = n;
|
|
501
|
+
const h = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
|
|
502
|
+
this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = h;
|
|
503
|
+
const l = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
|
|
504
|
+
this.initializeVirtualization(a, h);
|
|
505
|
+
const p = this.childrenToArray(this.props.children);
|
|
506
|
+
this.initColumns(p, i);
|
|
507
|
+
const v = p.map((o) => o && o.type && o.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(o, { ...o.props, ariaControls: this._gridId }) : null), R = p.filter((o) => o && o.type && o.type.displayName === "KendoReactGridNoRecords"), I = p.filter((o) => o && o.type && o.type.displayName === "KendoReactGridStatusBar"), b = this._columns.filter((o) => o.children.length === 0), F = h && /* @__PURE__ */ r.createElement(
|
|
508
|
+
st,
|
|
508
509
|
{
|
|
509
510
|
group: this.props.group || [],
|
|
510
511
|
groupChange: this.groupChange,
|
|
@@ -516,38 +517,38 @@ const _ = class _ extends r.Component {
|
|
|
516
517
|
ariaControls: this._gridId,
|
|
517
518
|
onContextMenu: this.onContextMenu
|
|
518
519
|
}
|
|
519
|
-
), { sort:
|
|
520
|
-
|
|
520
|
+
), { sort: ye, sortable: we, group: Se, filter: ke, filterable: Ie, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e } = this.props, $ = /* @__PURE__ */ r.createElement(
|
|
521
|
+
Ze,
|
|
521
522
|
{
|
|
522
523
|
size: this.props.size,
|
|
523
524
|
columnResize: this.columnResize,
|
|
524
525
|
staticHeaders: this.props.scrollable !== "none",
|
|
525
526
|
scrollableDataElement: () => this.vs.container,
|
|
526
|
-
draggable: this.props.reorderable ||
|
|
527
|
+
draggable: this.props.reorderable || h,
|
|
527
528
|
ref: this.headerRef,
|
|
528
529
|
elemRef: this.headerElementRef,
|
|
529
530
|
headerRow: this.getHeaderRow(
|
|
530
|
-
G,
|
|
531
|
-
Re,
|
|
532
531
|
ye,
|
|
533
|
-
l,
|
|
534
532
|
we,
|
|
535
533
|
Se,
|
|
534
|
+
h,
|
|
536
535
|
ke,
|
|
537
536
|
Ie,
|
|
538
537
|
Ee,
|
|
538
|
+
xe,
|
|
539
|
+
_e,
|
|
539
540
|
this._columns,
|
|
540
541
|
this._columnsMap,
|
|
541
542
|
this.isRtl
|
|
542
543
|
),
|
|
543
544
|
filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
|
|
544
|
-
|
|
545
|
+
tt,
|
|
545
546
|
{
|
|
546
547
|
cells: this.props.cells,
|
|
547
548
|
size: this.props.size,
|
|
548
549
|
columns: this._columns,
|
|
549
550
|
filter: this.props.filter,
|
|
550
|
-
filterOperators: this.props.filterOperators ||
|
|
551
|
+
filterOperators: this.props.filterOperators || Ce,
|
|
551
552
|
filterChange: this.filterChange,
|
|
552
553
|
sort: this.props.sort,
|
|
553
554
|
cellRender: this.props.filterCellRender,
|
|
@@ -555,7 +556,7 @@ const _ = class _ extends r.Component {
|
|
|
555
556
|
ariaRowIndex: this._columnsMap.length + 1
|
|
556
557
|
}
|
|
557
558
|
) || void 0,
|
|
558
|
-
cols:
|
|
559
|
+
cols: b.map((o, g) => /* @__PURE__ */ r.createElement(
|
|
559
560
|
"col",
|
|
560
561
|
{
|
|
561
562
|
key: g.toString(),
|
|
@@ -563,126 +564,126 @@ const _ = class _ extends r.Component {
|
|
|
563
564
|
}
|
|
564
565
|
))
|
|
565
566
|
}
|
|
566
|
-
),
|
|
567
|
+
), ze = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Te } = $e({
|
|
567
568
|
enabled: this.props.columnVirtualization,
|
|
568
|
-
columns:
|
|
569
|
-
tableViewPortWidth:
|
|
570
|
-
scrollLeft:
|
|
571
|
-
}),
|
|
572
|
-
let
|
|
573
|
-
const k = this.props.selectedField ?
|
|
569
|
+
columns: b,
|
|
570
|
+
tableViewPortWidth: De,
|
|
571
|
+
scrollLeft: ze
|
|
572
|
+
}), Ne = (o, g, m) => {
|
|
573
|
+
let E = !1;
|
|
574
|
+
const k = this.props.selectedField ? ve(this.props.selectedField, o.dataItem) : void 0;
|
|
574
575
|
return {
|
|
575
|
-
row:
|
|
576
|
-
if (
|
|
576
|
+
row: b.map((u, f) => {
|
|
577
|
+
if (Te[f])
|
|
577
578
|
return null;
|
|
578
|
-
const H = u.id ? u.id :
|
|
579
|
+
const H = u.id ? u.id : f, T = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
|
|
579
580
|
let w = !1;
|
|
580
581
|
if (u.editable && this.props.editField) {
|
|
581
|
-
const C =
|
|
582
|
-
C && (C === !0 || C === u.field) && (
|
|
582
|
+
const C = ve(this.props.editField, o.dataItem);
|
|
583
|
+
C && (C === !0 || C === u.field) && (E = !0, w = !0);
|
|
583
584
|
}
|
|
584
|
-
const P = u.cell || w &&
|
|
585
|
+
const P = u.cell || w && Ye || ft;
|
|
585
586
|
return /* @__PURE__ */ r.createElement(
|
|
586
587
|
P,
|
|
587
588
|
{
|
|
588
589
|
onContextMenu: this.onContextMenu,
|
|
589
590
|
key: H,
|
|
590
591
|
locked: this.props.lockGroups,
|
|
591
|
-
id:
|
|
592
|
-
colSpan:
|
|
592
|
+
id: _.generateNavigatableId(`${g}-${String(f)}`, d),
|
|
593
|
+
colSpan: He[f],
|
|
593
594
|
dataItem: o.dataItem,
|
|
594
595
|
field: u.field,
|
|
595
596
|
editor: u.editor,
|
|
596
597
|
format: u.format,
|
|
597
598
|
className: T,
|
|
598
599
|
render: this.props.cellRender,
|
|
599
|
-
cells:
|
|
600
|
+
cells: mt(this.props.cells, u.cells),
|
|
600
601
|
onChange: this.itemChange,
|
|
601
602
|
selectionChange: this.props.onSelectionChange ? (C) => {
|
|
602
|
-
this.selectionChange({ event: C, dataItem: o.dataItem, dataIndex: m, columnIndex:
|
|
603
|
+
this.selectionChange({ event: C, dataItem: o.dataItem, dataIndex: m, columnIndex: f });
|
|
603
604
|
} : void 0,
|
|
604
|
-
columnIndex:
|
|
605
|
-
columnsCount:
|
|
605
|
+
columnIndex: f,
|
|
606
|
+
columnsCount: b.length,
|
|
606
607
|
rowType: o.rowType,
|
|
607
608
|
level: o.level,
|
|
608
609
|
expanded: o.expanded,
|
|
609
610
|
dataIndex: o.dataIndex,
|
|
610
611
|
style: y,
|
|
611
612
|
ariaColumnIndex: u.ariaColumnIndex,
|
|
612
|
-
isSelected: Array.isArray(k) && k.indexOf(
|
|
613
|
+
isSelected: Array.isArray(k) && k.indexOf(f) > -1
|
|
613
614
|
}
|
|
614
615
|
);
|
|
615
616
|
}),
|
|
616
|
-
isInEdit:
|
|
617
|
+
isInEdit: E,
|
|
617
618
|
isSelected: typeof k == "boolean" && k
|
|
618
619
|
};
|
|
619
620
|
};
|
|
620
|
-
let
|
|
621
|
+
let j = 0;
|
|
621
622
|
if (this.props.scrollable === "virtual")
|
|
622
623
|
for (let o = 0; o < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); o++) {
|
|
623
624
|
const g = this._data.shift();
|
|
624
625
|
if (g)
|
|
625
|
-
this._data.push(g),
|
|
626
|
+
this._data.push(g), j++, g.rowType === "groupHeader" && o--;
|
|
626
627
|
else
|
|
627
628
|
break;
|
|
628
629
|
}
|
|
629
|
-
const
|
|
630
|
-
let
|
|
631
|
-
const
|
|
630
|
+
const q = (o) => o >= this._data.length - j;
|
|
631
|
+
let J = this.vs.realSkip || 0;
|
|
632
|
+
const M = [];
|
|
632
633
|
let K = !1;
|
|
633
|
-
const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1,
|
|
634
|
+
const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1, Q = /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, R.length ? R : /* @__PURE__ */ r.createElement(Ct, null)));
|
|
634
635
|
let D = 0;
|
|
635
636
|
if (this._data.length) {
|
|
636
637
|
let o = -1, g = 0;
|
|
637
|
-
(this._slicedData || this._data).forEach((m,
|
|
638
|
-
m.rowType === "data" && (
|
|
639
|
-
const k =
|
|
640
|
-
if (D =
|
|
641
|
-
|
|
638
|
+
(this._slicedData || this._data).forEach((m, E) => {
|
|
639
|
+
m.rowType === "data" && (J++, o++);
|
|
640
|
+
const k = J % 2 === 0, u = this.props.dataItemKey && Pe(this.props.dataItemKey)(m.dataItem), f = E + (this.vs.realSkip || 0), H = u || "ai" + f, T = H + "_1", y = Ne(m, H, o);
|
|
641
|
+
if (D = f + O + g, M.push(/* @__PURE__ */ r.createElement(
|
|
642
|
+
vt,
|
|
642
643
|
{
|
|
643
644
|
key: H,
|
|
644
645
|
dataItem: m.dataItem,
|
|
645
646
|
isAltRow: k,
|
|
646
647
|
isInEdit: y.isInEdit,
|
|
647
648
|
rowType: m.rowType,
|
|
648
|
-
isHidden:
|
|
649
|
+
isHidden: q(E),
|
|
649
650
|
onClick: (w) => this.rowClick(w, m),
|
|
650
651
|
onDoubleClick: (w) => this.rowDblClick(w, m),
|
|
651
652
|
selectedField: this.props.selectedField,
|
|
652
653
|
rowHeight: this.props.rowHeight,
|
|
653
654
|
render: this.props.rowRender,
|
|
654
655
|
ariaRowIndex: D,
|
|
655
|
-
absoluteRowIndex:
|
|
656
|
+
absoluteRowIndex: f,
|
|
656
657
|
dataIndex: o,
|
|
657
658
|
isSelected: y.isSelected
|
|
658
659
|
},
|
|
659
660
|
y.row
|
|
660
661
|
)), this.props.detail && m.rowType === "data" && m.expanded) {
|
|
661
|
-
const w =
|
|
662
|
-
g++, D =
|
|
662
|
+
const w = b.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
|
|
663
|
+
g++, D = f + O + g, M.push(/* @__PURE__ */ r.createElement(
|
|
663
664
|
"tr",
|
|
664
665
|
{
|
|
665
666
|
key: T,
|
|
666
|
-
className:
|
|
667
|
+
className: L(
|
|
667
668
|
"k-table-row",
|
|
668
669
|
k ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
|
|
669
670
|
),
|
|
670
|
-
style: { visibility:
|
|
671
|
+
style: { visibility: q(E) ? "hidden" : "", height: this.props.detailRowHeight },
|
|
671
672
|
role: "row",
|
|
672
673
|
"aria-rowindex": D
|
|
673
674
|
},
|
|
674
675
|
this.props.group && this.props.group.map((P, C) => {
|
|
675
|
-
var
|
|
676
|
-
const N = (
|
|
676
|
+
var oe;
|
|
677
|
+
const N = (oe = y == null ? void 0 : y.row[C]) == null ? void 0 : oe.props.style, Me = N ? this.isRtl ? { left: N.right, right: N.left } : { left: N.left, right: N.right } : {};
|
|
677
678
|
return /* @__PURE__ */ r.createElement(
|
|
678
|
-
|
|
679
|
+
be,
|
|
679
680
|
{
|
|
680
681
|
id: "",
|
|
681
682
|
dataIndex: m.dataIndex,
|
|
682
683
|
field: P.field,
|
|
683
684
|
dataItem: m.dataItem,
|
|
684
685
|
key: C,
|
|
685
|
-
style:
|
|
686
|
+
style: Me,
|
|
686
687
|
ariaColumnIndex: 1 + C,
|
|
687
688
|
isSelected: !1,
|
|
688
689
|
locked: this.props.lockGroups,
|
|
@@ -692,13 +693,13 @@ const _ = class _ extends r.Component {
|
|
|
692
693
|
);
|
|
693
694
|
}),
|
|
694
695
|
this.props.expandField && /* @__PURE__ */ r.createElement(
|
|
695
|
-
|
|
696
|
+
St,
|
|
696
697
|
{
|
|
697
|
-
id:
|
|
698
|
+
id: _.generateNavigatableId(`${T}-dhcell`, d)
|
|
698
699
|
}
|
|
699
700
|
),
|
|
700
701
|
/* @__PURE__ */ r.createElement(
|
|
701
|
-
|
|
702
|
+
wt,
|
|
702
703
|
{
|
|
703
704
|
onContextMenu: this.onContextMenu,
|
|
704
705
|
dataItem: m.dataItem,
|
|
@@ -706,7 +707,7 @@ const _ = class _ extends r.Component {
|
|
|
706
707
|
colSpan: w,
|
|
707
708
|
ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
|
|
708
709
|
detail: this.props.detail,
|
|
709
|
-
id:
|
|
710
|
+
id: _.generateNavigatableId(`${T}-dcell`, d)
|
|
710
711
|
}
|
|
711
712
|
)
|
|
712
713
|
));
|
|
@@ -714,35 +715,35 @@ const _ = class _ extends r.Component {
|
|
|
714
715
|
});
|
|
715
716
|
} else
|
|
716
717
|
K = !0;
|
|
717
|
-
const
|
|
718
|
+
const X = {
|
|
718
719
|
size: this.props.size,
|
|
719
720
|
onPageChange: this.pagerPageChange,
|
|
720
721
|
total: a,
|
|
721
722
|
dir: this.isRtl ? "rtl" : void 0,
|
|
722
723
|
skip: this.vs.propsSkip || 0,
|
|
723
724
|
take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
|
|
724
|
-
messagesMap:
|
|
725
|
-
...
|
|
726
|
-
},
|
|
725
|
+
messagesMap: at,
|
|
726
|
+
...yt(this.props.pageable || {})
|
|
727
|
+
}, Y = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...X }) : /* @__PURE__ */ r.createElement(je, { className: "k-grid-pager", ...X }), Le = (o) => this.props.sort && this.props.sort.filter((g) => g.field === o).length > 0, Fe = (o, g) => /* @__PURE__ */ r.createElement(
|
|
727
728
|
"col",
|
|
728
729
|
{
|
|
729
730
|
key: g.toString(),
|
|
730
731
|
width: W(o)
|
|
731
732
|
}
|
|
732
|
-
),
|
|
733
|
+
), Z = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
|
|
733
734
|
(o) => {
|
|
734
735
|
var g;
|
|
735
736
|
return !!(o.footerCell || (g = o.cells) != null && g.footerCell);
|
|
736
737
|
}
|
|
737
738
|
) ? /* @__PURE__ */ r.createElement(
|
|
738
|
-
|
|
739
|
+
it,
|
|
739
740
|
{
|
|
740
741
|
size: this.props.size,
|
|
741
742
|
columnResize: this.columnResize,
|
|
742
743
|
staticHeaders: this.props.scrollable !== "none",
|
|
743
744
|
ref: (o) => this._footer = o,
|
|
744
745
|
row: /* @__PURE__ */ r.createElement(
|
|
745
|
-
|
|
746
|
+
Rt,
|
|
746
747
|
{
|
|
747
748
|
cells: this.props.cells,
|
|
748
749
|
columns: this._columns,
|
|
@@ -750,37 +751,37 @@ const _ = class _ extends r.Component {
|
|
|
750
751
|
ariaRowIndex: D + 1
|
|
751
752
|
}
|
|
752
753
|
),
|
|
753
|
-
cols:
|
|
754
|
+
cols: b.map(Fe)
|
|
754
755
|
}
|
|
755
|
-
) : null,
|
|
756
|
+
) : null, ee = /* @__PURE__ */ r.createElement(
|
|
756
757
|
"colgroup",
|
|
757
758
|
{
|
|
758
759
|
ref: (o) => {
|
|
759
760
|
this.columnResize.colGroupMain = o;
|
|
760
761
|
}
|
|
761
762
|
},
|
|
762
|
-
|
|
763
|
+
b.map(
|
|
763
764
|
(o, g) => /* @__PURE__ */ r.createElement(
|
|
764
765
|
"col",
|
|
765
766
|
{
|
|
766
767
|
key: g.toString(),
|
|
767
|
-
className:
|
|
768
|
+
className: Le(o.field) ? "k-sorted" : void 0,
|
|
768
769
|
width: W(o)
|
|
769
770
|
}
|
|
770
771
|
)
|
|
771
772
|
)
|
|
772
|
-
),
|
|
773
|
+
), te = this.dragLogic.reorderable || this.dragLogic.groupable, se = this.props.columnVirtualization ? "block" : "table";
|
|
773
774
|
if (this.props.scrollable === "none")
|
|
774
775
|
return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
|
|
775
776
|
"div",
|
|
776
777
|
{
|
|
777
778
|
id: this.props.id,
|
|
778
779
|
style: this.props.style,
|
|
779
|
-
className:
|
|
780
|
+
className: L(
|
|
780
781
|
"k-grid",
|
|
781
782
|
{
|
|
782
783
|
"k-grid-md": !this.props.size,
|
|
783
|
-
[`k-grid-${
|
|
784
|
+
[`k-grid-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size
|
|
784
785
|
},
|
|
785
786
|
this.props.className
|
|
786
787
|
),
|
|
@@ -790,12 +791,12 @@ const _ = class _ extends r.Component {
|
|
|
790
791
|
"aria-label": this.props.ariaLabel,
|
|
791
792
|
onKeyDown: this.onKeyDown,
|
|
792
793
|
onFocus: this.onFocus,
|
|
793
|
-
...
|
|
794
|
+
...le
|
|
794
795
|
},
|
|
795
|
-
|
|
796
|
-
|
|
796
|
+
v,
|
|
797
|
+
F,
|
|
797
798
|
/* @__PURE__ */ r.createElement(
|
|
798
|
-
|
|
799
|
+
ne,
|
|
799
800
|
{
|
|
800
801
|
selectable: this.props.selectable,
|
|
801
802
|
onRelease: this.selectionRelease,
|
|
@@ -806,32 +807,32 @@ const _ = class _ extends r.Component {
|
|
|
806
807
|
/* @__PURE__ */ r.createElement(
|
|
807
808
|
"table",
|
|
808
809
|
{
|
|
809
|
-
className:
|
|
810
|
+
className: L(
|
|
810
811
|
"k-table k-grid-table",
|
|
811
|
-
{ [`k-table-${
|
|
812
|
+
{ [`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
|
|
812
813
|
),
|
|
813
|
-
style: { userSelect:
|
|
814
|
+
style: { userSelect: l, display: se }
|
|
814
815
|
},
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
/* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...
|
|
818
|
-
|
|
816
|
+
ee,
|
|
817
|
+
$,
|
|
818
|
+
/* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...he }, M),
|
|
819
|
+
Z
|
|
819
820
|
)
|
|
820
821
|
),
|
|
821
|
-
K &&
|
|
822
|
-
|
|
823
|
-
),
|
|
824
|
-
let
|
|
825
|
-
return this.props.scrollable === "virtual" && (
|
|
822
|
+
K && Q,
|
|
823
|
+
te && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDragElementClue }))
|
|
824
|
+
), I, this.props.pageable && Y);
|
|
825
|
+
let A = this.props.style || {};
|
|
826
|
+
return this.props.scrollable === "virtual" && (A.height || (A = Object.assign({}, A, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
|
|
826
827
|
"div",
|
|
827
828
|
{
|
|
828
829
|
id: this.props.id,
|
|
829
|
-
style:
|
|
830
|
-
className:
|
|
830
|
+
style: A,
|
|
831
|
+
className: L(
|
|
831
832
|
"k-grid",
|
|
832
833
|
{
|
|
833
834
|
"k-grid-md": !this.props.size,
|
|
834
|
-
[`k-grid-${
|
|
835
|
+
[`k-grid-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
|
|
835
836
|
"k-grid-virtual": this.props.scrollable === "virtual"
|
|
836
837
|
},
|
|
837
838
|
this.props.className
|
|
@@ -842,20 +843,21 @@ const _ = class _ extends r.Component {
|
|
|
842
843
|
"aria-label": this.props.ariaLabel,
|
|
843
844
|
onKeyDown: this.onKeyDown,
|
|
844
845
|
onFocus: this.onFocus,
|
|
845
|
-
...
|
|
846
|
+
...le
|
|
846
847
|
},
|
|
847
|
-
|
|
848
|
-
|
|
848
|
+
v,
|
|
849
|
+
F,
|
|
849
850
|
/* @__PURE__ */ r.createElement(
|
|
850
851
|
"div",
|
|
851
852
|
{
|
|
852
853
|
className: "k-grid-aria-root",
|
|
853
854
|
role: "grid",
|
|
854
|
-
"aria-colcount":
|
|
855
|
+
"aria-colcount": b.length,
|
|
855
856
|
"aria-rowcount": a,
|
|
856
|
-
id: this._gridId
|
|
857
|
+
id: this._gridId,
|
|
858
|
+
"aria-label": c.toLanguageString(ce, lt[ce])
|
|
857
859
|
},
|
|
858
|
-
|
|
860
|
+
$,
|
|
859
861
|
/* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
|
|
860
862
|
"div",
|
|
861
863
|
{
|
|
@@ -865,7 +867,7 @@ const _ = class _ extends r.Component {
|
|
|
865
867
|
role: "presentation"
|
|
866
868
|
},
|
|
867
869
|
/* @__PURE__ */ r.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ r.createElement(
|
|
868
|
-
|
|
870
|
+
ne,
|
|
869
871
|
{
|
|
870
872
|
selectable: this.props.selectable,
|
|
871
873
|
onRelease: this.selectionRelease,
|
|
@@ -876,29 +878,29 @@ const _ = class _ extends r.Component {
|
|
|
876
878
|
/* @__PURE__ */ r.createElement(
|
|
877
879
|
"table",
|
|
878
880
|
{
|
|
879
|
-
className:
|
|
881
|
+
className: L(
|
|
880
882
|
"k-table k-grid-table",
|
|
881
883
|
{
|
|
882
884
|
"k-table-md": !this.props.size,
|
|
883
|
-
[`k-table-${
|
|
885
|
+
[`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size
|
|
884
886
|
}
|
|
885
887
|
),
|
|
886
888
|
role: "presentation",
|
|
887
|
-
style: { userSelect:
|
|
889
|
+
style: { userSelect: l, display: se }
|
|
888
890
|
},
|
|
889
|
-
|
|
891
|
+
ee,
|
|
890
892
|
/* @__PURE__ */ r.createElement(
|
|
891
893
|
"tbody",
|
|
892
894
|
{
|
|
893
895
|
className: "k-table-tbody",
|
|
894
896
|
ref: this.tableBodyRef,
|
|
895
897
|
role: "rowgroup",
|
|
896
|
-
...
|
|
898
|
+
...he
|
|
897
899
|
},
|
|
898
|
-
|
|
900
|
+
M
|
|
899
901
|
)
|
|
900
902
|
)
|
|
901
|
-
), K &&
|
|
903
|
+
), K && Q),
|
|
902
904
|
/* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
|
|
903
905
|
"div",
|
|
904
906
|
{
|
|
@@ -906,18 +908,18 @@ const _ = class _ extends r.Component {
|
|
|
906
908
|
}
|
|
907
909
|
))
|
|
908
910
|
)),
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
this.showLicenseWatermark && /* @__PURE__ */ r.createElement(
|
|
911
|
+
Z,
|
|
912
|
+
te && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDragElementClue })),
|
|
913
|
+
this.showLicenseWatermark && /* @__PURE__ */ r.createElement(Ue, null)
|
|
912
914
|
),
|
|
913
|
-
|
|
914
|
-
this.props.pageable &&
|
|
915
|
+
I,
|
|
916
|
+
this.props.pageable && Y
|
|
915
917
|
));
|
|
916
918
|
}
|
|
917
919
|
selectionChange(a) {
|
|
918
920
|
if (this.props.onSelectionChange) {
|
|
919
|
-
const { event:
|
|
920
|
-
...this.getArguments(
|
|
921
|
+
const { event: d, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: n } = ae(this.props.selectable), h = {
|
|
922
|
+
...this.getArguments(d.syntheticEvent),
|
|
921
923
|
dataItem: c,
|
|
922
924
|
startColIndex: t,
|
|
923
925
|
endColIndex: t,
|
|
@@ -929,7 +931,7 @@ const _ = class _ extends r.Component {
|
|
|
929
931
|
shiftKey: !1,
|
|
930
932
|
metaKey: !1,
|
|
931
933
|
mode: i,
|
|
932
|
-
cell:
|
|
934
|
+
cell: n,
|
|
933
935
|
isDrag: !1,
|
|
934
936
|
componentId: this._gridId,
|
|
935
937
|
selectedField: this.props.selectedField || ""
|
|
@@ -937,11 +939,11 @@ const _ = class _ extends r.Component {
|
|
|
937
939
|
this.props.onSelectionChange.call(void 0, h);
|
|
938
940
|
}
|
|
939
941
|
}
|
|
940
|
-
raiseDataEvent(a,
|
|
942
|
+
raiseDataEvent(a, d, c, e, t) {
|
|
941
943
|
const i = this.props.onDataStateChange;
|
|
942
944
|
if (a) {
|
|
943
|
-
const
|
|
944
|
-
a.call(void 0,
|
|
945
|
+
const n = { ...this.getArguments(e), ...d, targetEvent: t };
|
|
946
|
+
a.call(void 0, n);
|
|
945
947
|
} else
|
|
946
948
|
i && i.call(
|
|
947
949
|
void 0,
|
|
@@ -955,56 +957,56 @@ const _ = class _ extends r.Component {
|
|
|
955
957
|
}
|
|
956
958
|
);
|
|
957
959
|
}
|
|
958
|
-
columnReorder(a,
|
|
959
|
-
const e = this._columns[a], t = e.depth, i = (
|
|
960
|
+
columnReorder(a, d, c) {
|
|
961
|
+
const e = this._columns[a], t = e.depth, i = (p) => {
|
|
960
962
|
do
|
|
961
|
-
|
|
962
|
-
while (
|
|
963
|
-
return
|
|
964
|
-
},
|
|
965
|
-
this._columns.splice(a <
|
|
966
|
-
const h = this._columns[a].locked && this._columns[
|
|
967
|
-
|
|
968
|
-
const
|
|
963
|
+
p++;
|
|
964
|
+
while (p < this._columns.length && this._columns[p].depth > t);
|
|
965
|
+
return p;
|
|
966
|
+
}, n = this._columns.splice(a, i(a) - a);
|
|
967
|
+
this._columns.splice(a < d ? i(d - n.length) : d, 0, ...n), this._columns.filter((p) => p.declarationIndex >= 0).forEach((p, v) => p.orderIndex = v), this._columnsMutations++;
|
|
968
|
+
const h = this._columns[a].locked && this._columns[d].locked;
|
|
969
|
+
qe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Je(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
|
|
970
|
+
const l = this.columns;
|
|
969
971
|
if (this.forceUpdate(), this.props.onColumnReorder) {
|
|
970
|
-
const
|
|
972
|
+
const p = {
|
|
971
973
|
target: this,
|
|
972
|
-
columns:
|
|
974
|
+
columns: l,
|
|
973
975
|
columnId: e.id,
|
|
974
976
|
nativeEvent: c
|
|
975
977
|
};
|
|
976
|
-
this.props.onColumnReorder.call(void 0,
|
|
978
|
+
this.props.onColumnReorder.call(void 0, p);
|
|
977
979
|
}
|
|
978
980
|
}
|
|
979
|
-
groupReorder(a,
|
|
981
|
+
groupReorder(a, d, c) {
|
|
980
982
|
if (this.props.group === void 0)
|
|
981
983
|
return;
|
|
982
984
|
const e = this.props.group.slice();
|
|
983
|
-
e.splice(
|
|
985
|
+
e.splice(d, 0, ...e.splice(a, 1)), this.groupChange(e, c);
|
|
984
986
|
}
|
|
985
|
-
columnToGroup(a,
|
|
987
|
+
columnToGroup(a, d, c) {
|
|
986
988
|
const e = this._columns[a].field;
|
|
987
989
|
if (!e)
|
|
988
990
|
return;
|
|
989
991
|
const t = (this.props.group || []).slice();
|
|
990
|
-
t.splice(
|
|
992
|
+
t.splice(d, 0, { field: e }), this.groupChange(t, c);
|
|
991
993
|
}
|
|
992
994
|
resetTableWidth() {
|
|
993
995
|
let a = 0;
|
|
994
996
|
if (!this.columnResize.colGroupMain)
|
|
995
997
|
return;
|
|
996
|
-
const
|
|
997
|
-
for (let c = 0; c <
|
|
998
|
-
const e =
|
|
998
|
+
const d = this.columnResize.colGroupMain.children;
|
|
999
|
+
for (let c = 0; c < d.length; c++) {
|
|
1000
|
+
const e = d[c].width;
|
|
999
1001
|
if (!e)
|
|
1000
1002
|
return;
|
|
1001
1003
|
a += parseFloat(e.toString());
|
|
1002
1004
|
}
|
|
1003
1005
|
a = Math.round(a), this._header && this._header.setWidth(a), this._footer && this._footer.setWidth(a), this.tableElement && (this.tableElement.style.width = a + "px");
|
|
1004
1006
|
}
|
|
1005
|
-
initColumns(a,
|
|
1006
|
-
const c =
|
|
1007
|
-
this._columns = this.readColumns(a, c, this._columnsMutations), this._columns.length === 0 && (this._columns =
|
|
1007
|
+
initColumns(a, d) {
|
|
1008
|
+
const c = _.getIdPrefix(this.navigationStateRef);
|
|
1009
|
+
this._columns = this.readColumns(a, c, this._columnsMutations), this._columns.length === 0 && (this._columns = gt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, d, c), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
|
|
1008
1010
|
}
|
|
1009
1011
|
getDataState() {
|
|
1010
1012
|
return {
|
|
@@ -1023,9 +1025,9 @@ const _ = class _ extends r.Component {
|
|
|
1023
1025
|
};
|
|
1024
1026
|
}
|
|
1025
1027
|
};
|
|
1026
|
-
|
|
1028
|
+
z.displayName = "KendoReactGrid", z.defaultProps = {
|
|
1027
1029
|
// never use this
|
|
1028
|
-
},
|
|
1030
|
+
}, z.propTypes = {
|
|
1029
1031
|
data: s.oneOfType([
|
|
1030
1032
|
s.array,
|
|
1031
1033
|
s.shape({
|
|
@@ -1101,8 +1103,9 @@ _.displayName = "KendoReactGrid", _.defaultProps = {
|
|
|
1101
1103
|
dataItemKey: s.string,
|
|
1102
1104
|
navigatable: s.bool,
|
|
1103
1105
|
size: s.oneOf(["small", "medium"])
|
|
1104
|
-
},
|
|
1105
|
-
let
|
|
1106
|
+
}, z.contextType = V;
|
|
1107
|
+
let B = z;
|
|
1108
|
+
rt(B);
|
|
1106
1109
|
export {
|
|
1107
|
-
|
|
1110
|
+
B as Grid
|
|
1108
1111
|
};
|