@refinitiv-ui/efx-grid 6.0.19 → 6.0.20
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/lib/column-selection-dialog/lib/column-selection-dialog.d.ts +2 -1
- package/lib/column-selection-dialog/lib/column-selection-dialog.js +89 -8
- package/lib/filter-dialog/lib/checkbox-list.js +148 -81
- package/lib/filter-dialog/lib/filter-dialog.js +23 -10
- package/lib/grid/index.js +1 -1
- package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts +15 -14
- package/lib/tr-grid-row-dragging/es6/RowDragging.js +44 -6
- package/lib/types/es6/RowDragging.d.ts +15 -14
- package/lib/types/es6/RowGrouping.d.ts +5 -0
- package/lib/versions.json +3 -3
- package/package.json +1 -1
@@ -22,7 +22,8 @@ declare namespace ColumnSelectionDialog {
|
|
22
22
|
excludedLeftColumns?: number|null,
|
23
23
|
excludedRightColumns?: number|null,
|
24
24
|
unmovableColumns?: number|null,
|
25
|
-
descriptionBox?: boolean|null
|
25
|
+
descriptionBox?: boolean|null,
|
26
|
+
middleSeparator?: string|null
|
26
27
|
};
|
27
28
|
|
28
29
|
}
|
@@ -21,6 +21,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
|
21
21
|
* @property {number=} excludedRightColumns Number of columns on the right side that should be hidden from Visible Columns.
|
22
22
|
* @property {number=} unmovableColumns Depricated, Alias with stationary column option. Number of columns that is unmovable in Visible Columns.
|
23
23
|
* @property {boolean=} descriptionBox Show description box
|
24
|
+
* @property {string=} middleSeparator Field of column which used as middle separator to divide grid into two sides
|
24
25
|
*/
|
25
26
|
|
26
27
|
/** Insert multiple items to the given array. This is an in-place modification.
|
@@ -492,6 +493,7 @@ class ColumnSelectionDialog extends BasicElement {
|
|
492
493
|
this._highlightedElem = null; // There can only one highlighted elem
|
493
494
|
this._pendingTreeRefresh = false;
|
494
495
|
this._pendingResetSearchInput = false;
|
496
|
+
this._middleSeparator = "";
|
495
497
|
|
496
498
|
this._allItemMapping = {};
|
497
499
|
this._filterItemMapping = {};
|
@@ -838,6 +840,7 @@ class ColumnSelectionDialog extends BasicElement {
|
|
838
840
|
var itemCount = visibleItems.length;
|
839
841
|
|
840
842
|
var autoGeneratedColumnCount = _countAutoGenerated(visibleItems);
|
843
|
+
var middleSeparator = config.middleSeparator;
|
841
844
|
|
842
845
|
var excludedLeftColumns = config.excludedLeftColumns;
|
843
846
|
if (excludedLeftColumns == null && config.excludedColumns != null) {
|
@@ -869,6 +872,11 @@ class ColumnSelectionDialog extends BasicElement {
|
|
869
872
|
}
|
870
873
|
}
|
871
874
|
|
875
|
+
if(middleSeparator && item.field === middleSeparator){
|
876
|
+
item.disabled = true;
|
877
|
+
this._middleSeparator = middleSeparator;
|
878
|
+
}
|
879
|
+
|
872
880
|
}
|
873
881
|
|
874
882
|
this._allColumnList = allItems.map(function (obj) {
|
@@ -973,7 +981,25 @@ class ColumnSelectionDialog extends BasicElement {
|
|
973
981
|
return false;
|
974
982
|
}
|
975
983
|
|
976
|
-
|
984
|
+
var colItem = this._allItemMapping[obj.value];
|
985
|
+
var movable = _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
|
986
|
+
if(this._middleSeparator && colItem.rawValue == this._middleSeparator){
|
987
|
+
movable = false;
|
988
|
+
}
|
989
|
+
|
990
|
+
return movable;
|
991
|
+
}
|
992
|
+
|
993
|
+
/** Get visible middle separator column index
|
994
|
+
* @private
|
995
|
+
* @return {number}
|
996
|
+
*/
|
997
|
+
_getVisibleSeparatorIndex() {
|
998
|
+
if(!this._middleSeparator){
|
999
|
+
return -1;
|
1000
|
+
}
|
1001
|
+
var separatorCol = this._allItemMapping[this._middleSeparator];
|
1002
|
+
return getItemIndex(this._visibleColumnList, separatorCol.value, "value");
|
977
1003
|
}
|
978
1004
|
|
979
1005
|
/** This will also remove focused state set by ef-item
|
@@ -1420,6 +1446,27 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1420
1446
|
break;
|
1421
1447
|
}
|
1422
1448
|
}
|
1449
|
+
|
1450
|
+
// disabled move button when selection are in different section between separator
|
1451
|
+
if(c > 1 && this._middleSeparator){
|
1452
|
+
var separatorIndex = this._getVisibleSeparatorIndex();
|
1453
|
+
var aboveSeparator = false;
|
1454
|
+
var belowSeparator = false;
|
1455
|
+
|
1456
|
+
for(i = 0; i < c; i++){
|
1457
|
+
selectedIndex = moveableList[i];
|
1458
|
+
if(selectedIndex < separatorIndex){
|
1459
|
+
aboveSeparator = true;
|
1460
|
+
} else if(selectedIndex > separatorIndex){
|
1461
|
+
belowSeparator = true;
|
1462
|
+
}
|
1463
|
+
if(aboveSeparator && belowSeparator){
|
1464
|
+
this._downItem.disabled = true;
|
1465
|
+
this._upItem.disabled = true;
|
1466
|
+
break;
|
1467
|
+
}
|
1468
|
+
}
|
1469
|
+
}
|
1423
1470
|
}
|
1424
1471
|
|
1425
1472
|
/**
|
@@ -1507,6 +1554,9 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1507
1554
|
_selectAllCheckedChanged(e) {
|
1508
1555
|
var selected = e.detail.value;
|
1509
1556
|
var items = [];
|
1557
|
+
|
1558
|
+
var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
|
1559
|
+
|
1510
1560
|
for (var key in this._filterItemMapping) {
|
1511
1561
|
var item = this._filterItemMapping[key];
|
1512
1562
|
if (item.disabled || item.isGroup) continue; // ignore disabled item and groupItem
|
@@ -1517,7 +1567,7 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1517
1567
|
}
|
1518
1568
|
|
1519
1569
|
if (selected) {
|
1520
|
-
this._addToVisibleColumn(items);
|
1570
|
+
this._addToVisibleColumn(items, highligtedRows);
|
1521
1571
|
} else {
|
1522
1572
|
this._removeFromVisibleColumn(items);
|
1523
1573
|
}
|
@@ -1540,6 +1590,8 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1540
1590
|
selectedMapping[value] = true;
|
1541
1591
|
}
|
1542
1592
|
|
1593
|
+
var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
|
1594
|
+
|
1543
1595
|
// clear all selected item on visible column
|
1544
1596
|
this._visibleColumnList.forEach(deselectItem);
|
1545
1597
|
|
@@ -1562,7 +1614,7 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1562
1614
|
}
|
1563
1615
|
}
|
1564
1616
|
this._removeFromVisibleColumn(removeList);
|
1565
|
-
this._addToVisibleColumn(addList);
|
1617
|
+
this._addToVisibleColumn(addList, highligtedRows);
|
1566
1618
|
this._updateSelectAllStatus();
|
1567
1619
|
this.requestUpdate();
|
1568
1620
|
}
|
@@ -1581,12 +1633,16 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1581
1633
|
|
1582
1634
|
/**
|
1583
1635
|
* @param {Array} items
|
1636
|
+
* @param {Array<number>=} highligtedRows
|
1584
1637
|
* @private
|
1585
1638
|
*/
|
1586
|
-
_addToVisibleColumn(items) {
|
1587
|
-
var
|
1588
|
-
|
1589
|
-
|
1639
|
+
_addToVisibleColumn(items, highligtedRows) {
|
1640
|
+
var itemCount = items.length;
|
1641
|
+
var separatorIndex = this._middleSeparator ? getItemIndex(this._allColumnList, this._middleSeparator, 'rawValue') : -1;
|
1642
|
+
var i, j;
|
1643
|
+
if (itemCount === 0) return;
|
1644
|
+
for (i = 0; i < itemCount; i++) {
|
1645
|
+
var visibleSeparatorIndex = this._getVisibleSeparatorIndex();
|
1590
1646
|
var item = items[i];
|
1591
1647
|
if(item.isUnique) {
|
1592
1648
|
continue;
|
@@ -1597,8 +1653,33 @@ class ColumnSelectionDialog extends BasicElement {
|
|
1597
1653
|
if(this._allItemMapping[rawValue].isDuplicate && this._allItemMapping[item.value].strGroup) {
|
1598
1654
|
coralItem.label = coralItem.label + ' (' + this._allItemMapping[item.value].strGroup + ')';
|
1599
1655
|
}
|
1656
|
+
var index = getItemIndex(this._allColumnList, item.value, 'value');
|
1600
1657
|
coralItem.selected = true;
|
1601
|
-
|
1658
|
+
|
1659
|
+
var isInserted = false;
|
1660
|
+
if(separatorIndex !== -1 && index < separatorIndex){
|
1661
|
+
for(j = 0; j < highligtedRows.length; j++){
|
1662
|
+
if(highligtedRows[j] < visibleSeparatorIndex){
|
1663
|
+
this._visibleColumnList.splice(highligtedRows[j], 0, coralItem);
|
1664
|
+
isInserted = true;
|
1665
|
+
break;
|
1666
|
+
}
|
1667
|
+
}
|
1668
|
+
if(!isInserted){
|
1669
|
+
this._visibleColumnList.splice(visibleSeparatorIndex, 0, coralItem);
|
1670
|
+
}
|
1671
|
+
} else {
|
1672
|
+
for(j = 0; j < highligtedRows.length; j++){
|
1673
|
+
if(highligtedRows[j] > visibleSeparatorIndex){
|
1674
|
+
this._visibleColumnList.splice(highligtedRows[j], 0, coralItem);
|
1675
|
+
isInserted = true;
|
1676
|
+
break;
|
1677
|
+
}
|
1678
|
+
}
|
1679
|
+
if(!isInserted){
|
1680
|
+
this._visibleColumnList.push(coralItem);
|
1681
|
+
}
|
1682
|
+
}
|
1602
1683
|
}
|
1603
1684
|
this._pendingScroll = true;
|
1604
1685
|
this._pendingButtonUpdate = true;
|
@@ -5,59 +5,72 @@ import "@refinitiv-ui/elements/item";
|
|
5
5
|
import "@refinitiv-ui/elements/checkbox";
|
6
6
|
import translation from "./locale/translation.js";
|
7
7
|
|
8
|
-
/**
|
8
|
+
/** @type {number}
|
9
9
|
* @private
|
10
|
-
* @
|
10
|
+
* @constant
|
11
|
+
*/
|
12
|
+
const ITEM_LIMIT = 500;
|
13
|
+
|
14
|
+
/** @private
|
15
|
+
* @function
|
16
|
+
* @param {*=} val
|
11
17
|
* @return {string}
|
12
18
|
*/
|
13
|
-
const
|
14
|
-
if(typeof
|
15
|
-
return
|
16
|
-
} else if(
|
17
|
-
return
|
19
|
+
const _toLabelText = function(val) {
|
20
|
+
if(typeof val === "string") {
|
21
|
+
return val;
|
22
|
+
} else if(val) {
|
23
|
+
return val.title || val.label || "";
|
18
24
|
}
|
19
25
|
return "";
|
20
26
|
};
|
21
|
-
/**
|
22
|
-
* @
|
23
|
-
* @param {
|
24
|
-
* @param {
|
27
|
+
/** @private
|
28
|
+
* @function
|
29
|
+
* @param {*} val
|
30
|
+
* @param {number} idx
|
31
|
+
* @return {!Object}
|
25
32
|
*/
|
26
|
-
const
|
27
|
-
|
28
|
-
|
33
|
+
const _toItemStates = function(val, idx) {
|
34
|
+
return {
|
35
|
+
label: _toLabelText(val),
|
36
|
+
checked: (val && val.checked) ? true : false,
|
37
|
+
index: idx,
|
38
|
+
elem: null
|
39
|
+
};
|
29
40
|
};
|
30
|
-
/**
|
31
|
-
* @
|
32
|
-
* @param {
|
33
|
-
* @param {
|
34
|
-
* @return {!Array} Array containing filtered data objects
|
41
|
+
/** @private
|
42
|
+
* @function
|
43
|
+
* @param {!Object} state
|
44
|
+
* @param {*} val
|
35
45
|
*/
|
36
|
-
const
|
37
|
-
|
38
|
-
|
39
|
-
|
46
|
+
const _assignItemState = function(state, val) {
|
47
|
+
state.label = _toLabelText(val);
|
48
|
+
state.checked = (val && val.checked) ? true : false;
|
49
|
+
if(state.elem) {
|
50
|
+
_updateElement(state.elem, state.label, state.checked);
|
40
51
|
}
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
52
|
+
};
|
53
|
+
/** @private
|
54
|
+
* @function
|
55
|
+
* @param {!Object} state
|
56
|
+
* @return {boolean}
|
57
|
+
*/
|
58
|
+
const _getCheckedState = function(state) {
|
59
|
+
return state.elem ? state.elem._checkbox.checked : state.checked;
|
60
|
+
};
|
61
|
+
/** @private
|
62
|
+
* @function
|
63
|
+
* @param {!Element} elem
|
64
|
+
* @param {string} txt
|
65
|
+
* @param {boolean} checked
|
66
|
+
*/
|
67
|
+
const _updateElement = function(elem, txt, checked) {
|
68
|
+
if(elem._label.textContent !== txt) {
|
69
|
+
elem._label.textContent = txt;
|
49
70
|
}
|
50
|
-
|
51
|
-
|
52
|
-
for(var i = 0; i < len; ++i) {
|
53
|
-
var elem = ary[i];
|
54
|
-
var str = elem._label.textContent;
|
55
|
-
if(filterMethod(str, i, ctx)) {
|
56
|
-
filteredList.push(elem);
|
57
|
-
}
|
71
|
+
if(elem._checkbox.checked !== checked) {
|
72
|
+
elem._checkbox.checked = checked;
|
58
73
|
}
|
59
|
-
|
60
|
-
return filteredList;
|
61
74
|
};
|
62
75
|
/** @private
|
63
76
|
* @param {string} str
|
@@ -81,16 +94,19 @@ class CheckboxList extends BasicElement {
|
|
81
94
|
constructor() {
|
82
95
|
super();
|
83
96
|
|
84
|
-
this.lang = "en";
|
85
|
-
this._translation = translation;
|
86
97
|
this.selectAll = this.selectAll.bind(this);
|
87
98
|
this.deselectAll = this.deselectAll.bind(this);
|
88
99
|
this._onItemClicked = this._onItemClicked.bind(this);
|
100
|
+
this._toItemElement = this._toItemElement.bind(this);
|
101
|
+
this._byLabelText = this._byLabelText.bind(this);
|
102
|
+
|
103
|
+
this.lang = "en";
|
104
|
+
this._translation = translation;
|
89
105
|
|
90
106
|
this._config = {};
|
107
|
+
this._states = []; // Item states before filtering
|
91
108
|
this._cachedItems = []; // To avoid repeatedly creating the same item element
|
92
109
|
this._items = []; // Actual existing elements (filtered items)
|
93
|
-
this._origItems = this._items; // Original items before being filtered
|
94
110
|
this._inputFilter = null;
|
95
111
|
}
|
96
112
|
|
@@ -152,38 +168,40 @@ class CheckboxList extends BasicElement {
|
|
152
168
|
|
153
169
|
updated(changedProps) {
|
154
170
|
if (changedProps.has("data")) {
|
155
|
-
var
|
156
|
-
var len =
|
157
|
-
|
171
|
+
var dataList = this.data;
|
172
|
+
var len = dataList ? dataList.length : 0;
|
158
173
|
if (this._cachedItems.length < len) {
|
159
174
|
this._cachedItems.length = len;
|
160
175
|
}
|
161
|
-
this._items = new Array(len);
|
162
|
-
|
163
|
-
for (var i = 0; i < len; i++) {
|
164
|
-
var item = this._cachedItems[i]; // ef-item
|
165
|
-
if (!item) {
|
166
|
-
item = this._cachedItems[i] = this._templateItemEl.cloneNode(true);
|
167
|
-
item.addEventListener("click", this._onItemClicked);
|
168
|
-
|
169
|
-
var itemContainer = item.firstChild; // div.item-container
|
170
|
-
item._checkbox = itemContainer.firstChild; // ef-checkbox
|
171
|
-
item._label = itemContainer.lastChild; // label
|
172
|
-
}
|
173
|
-
this._items[i] = item;
|
174
176
|
|
175
|
-
|
176
|
-
|
177
|
+
this._states = dataList.map(_toItemStates);
|
178
|
+
this._filterItems();
|
179
|
+
this._renderItems();
|
180
|
+
}
|
181
|
+
}
|
177
182
|
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
+
/** @private
|
184
|
+
* @param {!Object} state
|
185
|
+
* @return {!Element}
|
186
|
+
*/
|
187
|
+
_toItemElement(state) {
|
188
|
+
var elem = state.elem;
|
189
|
+
if(!elem) {
|
190
|
+
var idx = state.index;
|
191
|
+
elem = this._cachedItems[idx];
|
192
|
+
if(!elem) {
|
193
|
+
elem = this._cachedItems[idx] = this._templateItemEl.cloneNode(true);
|
194
|
+
elem.addEventListener("click", this._onItemClicked);
|
195
|
+
|
196
|
+
var itemContainer = elem.firstChild; // div.item-container
|
197
|
+
elem._checkbox = itemContainer.firstChild; // ef-checkbox
|
198
|
+
elem._label = itemContainer.lastChild; // label
|
183
199
|
}
|
184
200
|
|
185
|
-
|
201
|
+
_updateElement(elem, state.label, state.checked);
|
202
|
+
state.elem = elem;
|
186
203
|
}
|
204
|
+
return elem;
|
187
205
|
}
|
188
206
|
/**
|
189
207
|
* @private
|
@@ -198,9 +216,11 @@ class CheckboxList extends BasicElement {
|
|
198
216
|
while(container.lastChild) {
|
199
217
|
container.removeChild(container.lastChild);
|
200
218
|
}
|
201
|
-
|
219
|
+
|
220
|
+
var ary = this._items;
|
221
|
+
var len = ary.length;
|
202
222
|
for(var i = 0; i < len; ++i) {
|
203
|
-
container.appendChild(
|
223
|
+
container.appendChild(ary[i]);
|
204
224
|
}
|
205
225
|
this._updateSelectAllState();
|
206
226
|
}
|
@@ -228,9 +248,10 @@ class CheckboxList extends BasicElement {
|
|
228
248
|
return;
|
229
249
|
}
|
230
250
|
|
231
|
-
var
|
251
|
+
var states = this._states;
|
252
|
+
var len = states.length;
|
232
253
|
for(var i = 0; i < len; ++i) {
|
233
|
-
|
254
|
+
_assignItemState(states[i], this.data[i]);
|
234
255
|
}
|
235
256
|
|
236
257
|
this._updateSelectAllState();
|
@@ -242,11 +263,13 @@ class CheckboxList extends BasicElement {
|
|
242
263
|
*/
|
243
264
|
getSelectedItems() {
|
244
265
|
var items = [];
|
245
|
-
var
|
266
|
+
var states = this._states;
|
267
|
+
var len = states.length;
|
246
268
|
for(var i = 0; i < len; ++i) {
|
247
|
-
|
269
|
+
var state = states[i];
|
270
|
+
if(_getCheckedState(state)) {
|
248
271
|
items.push({
|
249
|
-
title:
|
272
|
+
title: state.label,
|
250
273
|
index: i
|
251
274
|
});
|
252
275
|
}
|
@@ -260,9 +283,10 @@ class CheckboxList extends BasicElement {
|
|
260
283
|
*/
|
261
284
|
selectAll(selected) {
|
262
285
|
selected = selected !== false;
|
263
|
-
var
|
286
|
+
var ary = this._items;
|
287
|
+
var len = ary.length;
|
264
288
|
for(var i = 0; i < len; ++i) {
|
265
|
-
|
289
|
+
ary[i]._checkbox.checked = selected;
|
266
290
|
}
|
267
291
|
this._updateSelectAllState(selected);
|
268
292
|
}
|
@@ -288,18 +312,60 @@ class CheckboxList extends BasicElement {
|
|
288
312
|
dirty = true;
|
289
313
|
}
|
290
314
|
if(dirty) {
|
291
|
-
this.
|
315
|
+
this._filterItems();
|
292
316
|
this._renderItems();
|
293
317
|
}
|
294
318
|
}
|
295
319
|
|
320
|
+
/**
|
321
|
+
* @private
|
322
|
+
*/
|
323
|
+
_filterItems() {
|
324
|
+
var states = this._states;
|
325
|
+
var len = states ? states.length : 0;
|
326
|
+
if(!len) {
|
327
|
+
this._items.length = 0;
|
328
|
+
return; // No new copy is generated
|
329
|
+
}
|
330
|
+
|
331
|
+
var inputFilter = this._inputFilter;
|
332
|
+
if(inputFilter) {
|
333
|
+
if(typeof inputFilter === "function") {
|
334
|
+
this._filterMethod = inputFilter;
|
335
|
+
this._filterCtx = states;
|
336
|
+
} else {
|
337
|
+
this._filterMethod = _caseInsensitiveFilter;
|
338
|
+
this._filterCtx = (inputFilter + "").toLowerCase(); // Convert to lowercased string for case insensitive comparison
|
339
|
+
}
|
340
|
+
states = states.filter(this._byLabelText);
|
341
|
+
|
342
|
+
this._filterMethod = null;
|
343
|
+
this._filterCtx = null;
|
344
|
+
}
|
345
|
+
|
346
|
+
if(states.length > ITEM_LIMIT) {
|
347
|
+
states = states.slice(0, ITEM_LIMIT);
|
348
|
+
}
|
349
|
+
|
350
|
+
this._items = states.map(this._toItemElement);
|
351
|
+
}
|
352
|
+
/**
|
353
|
+
* @private
|
354
|
+
* @param {Object} state
|
355
|
+
* @param {number} idx
|
356
|
+
* @return {boolean}
|
357
|
+
*/
|
358
|
+
_byLabelText(state, idx) {
|
359
|
+
return this._filterMethod(state.label, idx, this._filterCtx);
|
360
|
+
}
|
361
|
+
|
296
362
|
/**
|
297
363
|
* @private
|
298
364
|
* @param {Event} e
|
299
365
|
*/
|
300
366
|
_onItemClicked(e) {
|
301
|
-
var itemEl = e.currentTarget;
|
302
367
|
if(e.target.tagName !== "EF-CHECKBOX") { // checkbox may already toggle its state
|
368
|
+
var itemEl = e.currentTarget;
|
303
369
|
itemEl._checkbox.checked = !itemEl._checkbox.checked;
|
304
370
|
}
|
305
371
|
this._updateSelectAllState();
|
@@ -315,10 +381,11 @@ class CheckboxList extends BasicElement {
|
|
315
381
|
}
|
316
382
|
|
317
383
|
if(selected == null) {
|
318
|
-
var
|
384
|
+
var ary = this._items;
|
385
|
+
var len = ary.length;
|
319
386
|
selected = len ? false : true;
|
320
387
|
for (var i = 0; i < len; i++) {
|
321
|
-
if (
|
388
|
+
if (ary[i]._checkbox.checked) {
|
322
389
|
selected = true;
|
323
390
|
break;
|
324
391
|
}
|
@@ -31,6 +31,11 @@ import "./checkbox-list.js";
|
|
31
31
|
* @property {Function=} sortChanged Sort changed handler
|
32
32
|
*/
|
33
33
|
|
34
|
+
/** @type {number}
|
35
|
+
* @private
|
36
|
+
* @constant
|
37
|
+
*/
|
38
|
+
const ITEM_LIMIT = 500;
|
34
39
|
/** @type {Array.<Array>}
|
35
40
|
* @private
|
36
41
|
* @constant
|
@@ -411,8 +416,10 @@ class FilterDialog extends BasicElement {
|
|
411
416
|
if (changedProps.has("isShown")) {
|
412
417
|
if (this.isShown) {
|
413
418
|
this._updateUIState(); // should updateUIState everytime popup being show
|
414
|
-
this._popup.show(
|
419
|
+
this._popup.show(); // Update position
|
415
420
|
setTimeout(this._afterDialogOpened, 0); //use setTimeout to make sure everything is rendered before focus
|
421
|
+
} else { // This is to handle the case where isShown is directly modified from the dialog. We need to synchronize the states
|
422
|
+
this._popup.hide();
|
416
423
|
}
|
417
424
|
}
|
418
425
|
}
|
@@ -426,7 +433,7 @@ class FilterDialog extends BasicElement {
|
|
426
433
|
this._updateDialogHeight(true);
|
427
434
|
if(!this._firstRendered) {
|
428
435
|
this._firstRendered = true;
|
429
|
-
this._popup.show(
|
436
|
+
this._popup.show(); // Update position
|
430
437
|
}
|
431
438
|
}
|
432
439
|
}
|
@@ -837,19 +844,25 @@ class FilterDialog extends BasicElement {
|
|
837
844
|
* @private
|
838
845
|
*/
|
839
846
|
_updateValueSelector() {
|
840
|
-
|
841
|
-
|
842
|
-
let data = this.data || [];
|
843
|
-
let items = null;
|
847
|
+
let data = this.data;
|
848
|
+
let ary = null;
|
844
849
|
if (Array.isArray(data)) {
|
845
|
-
|
850
|
+
ary = data;
|
851
|
+
} else if(data) {
|
852
|
+
ary = Object.keys(data); // TODO: Obsolete this
|
846
853
|
} else {
|
847
|
-
|
854
|
+
ary = [];
|
848
855
|
}
|
849
856
|
|
857
|
+
// Data selector can take large number of items
|
858
|
+
this._dataSelector.data = ary; // Preserve original referencing
|
859
|
+
|
850
860
|
// Value selector for Filter by Condition
|
851
|
-
|
852
|
-
|
861
|
+
if(ary.length > ITEM_LIMIT) {
|
862
|
+
ary = ary.slice(0, ITEM_LIMIT); // Prevent combo box from over population
|
863
|
+
}
|
864
|
+
this._generalComboBoxes[1].data = ary.map(this._toComboBoxItem);
|
865
|
+
this._generalComboBoxes[3].data = ary.map(this._toComboBoxItem);
|
853
866
|
}
|
854
867
|
/**
|
855
868
|
* @private
|
package/lib/grid/index.js
CHANGED
@@ -4,27 +4,28 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
|
4
4
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
5
5
|
import Dom from "../../tr-grid-util/es6/Dom.js";
|
6
6
|
import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
|
7
|
+
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
8
|
|
8
9
|
declare namespace RowDraggingPlugin {
|
9
10
|
|
10
11
|
type Options = {
|
11
|
-
dragBox?: boolean,
|
12
|
-
disabled?: boolean,
|
13
|
-
mouseInput?: boolean,
|
14
|
-
dataTransfer?: boolean,
|
15
|
-
autoScroll?: boolean,
|
16
|
-
dragBoxRenderer?: ((...params: any[]) => any),
|
17
|
-
dragStart?: ((...params: any[]) => any),
|
18
|
-
drag?: ((...params: any[]) => any),
|
19
|
-
dragEnd?: ((...params: any[]) => any),
|
20
|
-
dataMoved?: ((...params: any[]) => any)
|
12
|
+
dragBox?: boolean|null,
|
13
|
+
disabled?: boolean|null,
|
14
|
+
mouseInput?: boolean|null,
|
15
|
+
dataTransfer?: boolean|null,
|
16
|
+
autoScroll?: boolean|null,
|
17
|
+
dragBoxRenderer?: ((...params: any[]) => any)|null,
|
18
|
+
dragStart?: ((...params: any[]) => any)|null,
|
19
|
+
drag?: ((...params: any[]) => any)|null,
|
20
|
+
dragEnd?: ((...params: any[]) => any)|null,
|
21
|
+
dataMoved?: ((...params: any[]) => any)|null
|
21
22
|
};
|
22
23
|
|
23
24
|
}
|
24
25
|
|
25
26
|
declare class RowDraggingPlugin extends GridPlugin {
|
26
27
|
|
27
|
-
constructor(options?: RowDraggingPlugin.Options);
|
28
|
+
constructor(options?: RowDraggingPlugin.Options|null);
|
28
29
|
|
29
30
|
public hasMultiTableSupport(): boolean;
|
30
31
|
|
@@ -38,7 +39,7 @@ declare class RowDraggingPlugin extends GridPlugin {
|
|
38
39
|
|
39
40
|
public getConfigObject(out_obj?: any): any;
|
40
41
|
|
41
|
-
public startDrag(startRef: any, opt_suppressEvent?: boolean): void;
|
42
|
+
public startDrag(startRef: any, opt_suppressEvent?: boolean|null): void;
|
42
43
|
|
43
44
|
public stopDrag(): void;
|
44
45
|
|
@@ -46,11 +47,11 @@ declare class RowDraggingPlugin extends GridPlugin {
|
|
46
47
|
|
47
48
|
public getGuideline(): Element|null;
|
48
49
|
|
49
|
-
public disable(disabled?: boolean): void;
|
50
|
+
public disable(disabled?: boolean|null): void;
|
50
51
|
|
51
52
|
public isDisabled(): boolean;
|
52
53
|
|
53
|
-
public disableUIs(disabled?: boolean): void;
|
54
|
+
public disableUIs(disabled?: boolean|null): void;
|
54
55
|
|
55
56
|
}
|
56
57
|
|
@@ -4,6 +4,7 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
|
4
4
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
5
5
|
import Dom from "../../tr-grid-util/es6/Dom.js";
|
6
6
|
import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
|
7
|
+
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
8
|
|
8
9
|
/** @typedef {Object} RowDraggingPlugin~Options
|
9
10
|
* @description Available options describing `rowDragging` object specified in grid's option
|
@@ -198,6 +199,14 @@ RowDraggingPlugin.prototype._autoScroll = true;
|
|
198
199
|
*/
|
199
200
|
RowDraggingPlugin.prototype._dragUI = null;
|
200
201
|
|
202
|
+
/** @private Applied theme color in row dragging and dragUI
|
203
|
+
* @param {Object} host core grid instance
|
204
|
+
*/
|
205
|
+
var _applyStyles = function(host) {
|
206
|
+
RowDraggingPlugin._applyThemeColor(host);
|
207
|
+
DragUI.applyThemeColor(host);
|
208
|
+
};
|
209
|
+
|
201
210
|
/** Prevent built-in config
|
202
211
|
* @public
|
203
212
|
* @ignore
|
@@ -252,12 +261,12 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
|
|
252
261
|
});
|
253
262
|
|
254
263
|
// Share dragging styles
|
255
|
-
if(DragUI.stylePromise) {
|
256
|
-
DragUI.applyThemeColor(host);
|
257
|
-
} else {
|
264
|
+
if(!DragUI.stylePromise) {
|
258
265
|
DragUI.stylePromise = ElfUtil.getThemeColors();
|
259
266
|
DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
|
260
267
|
}
|
268
|
+
// TODO: Create a manager to manage styles. Currently, we have to use setTimeout to wait for an element to be created before applying styles
|
269
|
+
setTimeout(_applyStyles.bind(this, host), 0);
|
261
270
|
|
262
271
|
// In case of lazy loading
|
263
272
|
// host.getAllSections("content").forEach(this._registerSection);
|
@@ -284,10 +293,34 @@ RowDraggingPlugin.prototype.unload = function (host) {
|
|
284
293
|
/** @private
|
285
294
|
*/
|
286
295
|
RowDraggingPlugin.prototype._onThemeLoaded = function() {
|
296
|
+
if(!RowDraggingPlugin._styles) {
|
297
|
+
var styles = [
|
298
|
+
":host .row-dragging .cover-layer .selection-bound", [
|
299
|
+
"border: var(--grid-drag-indicator)"
|
300
|
+
],
|
301
|
+
":host .row-dragging .tr-lg .cell.selected-row", [
|
302
|
+
"background-color: unset;"
|
303
|
+
]
|
304
|
+
];
|
305
|
+
RowDraggingPlugin._styles = prettifyCss(styles);
|
306
|
+
}
|
307
|
+
|
287
308
|
var colors = ElfUtil.getColors();
|
288
309
|
this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
|
289
310
|
for(var i = this._hosts.length; --i >= 0;) {
|
290
|
-
|
311
|
+
_applyStyles(this._hosts[i]);
|
312
|
+
}
|
313
|
+
};
|
314
|
+
/** @private
|
315
|
+
* @param {Object} grid core grid instance
|
316
|
+
*/
|
317
|
+
RowDraggingPlugin._applyThemeColor = function(grid) {
|
318
|
+
if(!grid || grid._rowDraggingStyles) {
|
319
|
+
return;
|
320
|
+
}
|
321
|
+
if(RowDraggingPlugin._styles) {
|
322
|
+
grid._rowDraggingStyles = true; // Prevent loading the same style twice
|
323
|
+
injectCss(RowDraggingPlugin._styles, grid.getParent());
|
291
324
|
}
|
292
325
|
};
|
293
326
|
|
@@ -528,7 +561,9 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
|
|
528
561
|
// TODO: Just update curser will not gonna work since cell is pointer-events: none;
|
529
562
|
// we should do something to overwrite pointer-events first
|
530
563
|
// then set cursor move will have an effect
|
531
|
-
grid.getElement()
|
564
|
+
var gridElem = grid.getElement();
|
565
|
+
gridElem.classList.add("mouse-dragging");
|
566
|
+
gridElem.classList.add("row-dragging");
|
532
567
|
|
533
568
|
this._updateGuidePosition();
|
534
569
|
|
@@ -609,7 +644,10 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
|
|
609
644
|
}
|
610
645
|
|
611
646
|
var srcGrid = this._startingGrid || this._hosts[0];
|
612
|
-
|
647
|
+
|
648
|
+
var srcGridElem = srcGrid.getElement();
|
649
|
+
srcGridElem.classList.remove("mouse-dragging");
|
650
|
+
srcGridElem.classList.remove("row-dragging");
|
613
651
|
|
614
652
|
var destPos = this._pos; // This can be null
|
615
653
|
if(!this._isDragCancelled()) {
|
@@ -4,27 +4,28 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
|
4
4
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
5
5
|
import Dom from "../../tr-grid-util/es6/Dom.js";
|
6
6
|
import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
|
7
|
+
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
8
|
|
8
9
|
declare namespace RowDraggingPlugin {
|
9
10
|
|
10
11
|
type Options = {
|
11
|
-
dragBox?: boolean,
|
12
|
-
disabled?: boolean,
|
13
|
-
mouseInput?: boolean,
|
14
|
-
dataTransfer?: boolean,
|
15
|
-
autoScroll?: boolean,
|
16
|
-
dragBoxRenderer?: ((...params: any[]) => any),
|
17
|
-
dragStart?: ((...params: any[]) => any),
|
18
|
-
drag?: ((...params: any[]) => any),
|
19
|
-
dragEnd?: ((...params: any[]) => any),
|
20
|
-
dataMoved?: ((...params: any[]) => any)
|
12
|
+
dragBox?: boolean|null,
|
13
|
+
disabled?: boolean|null,
|
14
|
+
mouseInput?: boolean|null,
|
15
|
+
dataTransfer?: boolean|null,
|
16
|
+
autoScroll?: boolean|null,
|
17
|
+
dragBoxRenderer?: ((...params: any[]) => any)|null,
|
18
|
+
dragStart?: ((...params: any[]) => any)|null,
|
19
|
+
drag?: ((...params: any[]) => any)|null,
|
20
|
+
dragEnd?: ((...params: any[]) => any)|null,
|
21
|
+
dataMoved?: ((...params: any[]) => any)|null
|
21
22
|
};
|
22
23
|
|
23
24
|
}
|
24
25
|
|
25
26
|
declare class RowDraggingPlugin extends GridPlugin {
|
26
27
|
|
27
|
-
constructor(options?: RowDraggingPlugin.Options);
|
28
|
+
constructor(options?: RowDraggingPlugin.Options|null);
|
28
29
|
|
29
30
|
public hasMultiTableSupport(): boolean;
|
30
31
|
|
@@ -38,7 +39,7 @@ declare class RowDraggingPlugin extends GridPlugin {
|
|
38
39
|
|
39
40
|
public getConfigObject(out_obj?: any): any;
|
40
41
|
|
41
|
-
public startDrag(startRef: any, opt_suppressEvent?: boolean): void;
|
42
|
+
public startDrag(startRef: any, opt_suppressEvent?: boolean|null): void;
|
42
43
|
|
43
44
|
public stopDrag(): void;
|
44
45
|
|
@@ -46,11 +47,11 @@ declare class RowDraggingPlugin extends GridPlugin {
|
|
46
47
|
|
47
48
|
public getGuideline(): Element|null;
|
48
49
|
|
49
|
-
public disable(disabled?: boolean): void;
|
50
|
+
public disable(disabled?: boolean|null): void;
|
50
51
|
|
51
52
|
public isDisabled(): boolean;
|
52
53
|
|
53
|
-
public disableUIs(disabled?: boolean): void;
|
54
|
+
public disableUIs(disabled?: boolean|null): void;
|
54
55
|
|
55
56
|
}
|
56
57
|
|
@@ -29,6 +29,7 @@ declare namespace RowGroupingPlugin {
|
|
29
29
|
colorTag?: boolean|null,
|
30
30
|
predefinedColors?: any,
|
31
31
|
groupColors?: any,
|
32
|
+
defaultCollapse?: boolean|null,
|
32
33
|
clicked?: ((...params: any[]) => any)|null,
|
33
34
|
groupAdded?: ((...params: any[]) => any)|null,
|
34
35
|
beforeGroupAdded?: ((...params: any[]) => any)|null,
|
@@ -84,6 +85,10 @@ declare class RowGroupingPlugin extends GridPlugin {
|
|
84
85
|
|
85
86
|
public setPredefinedColors(predefinedColors: any): void;
|
86
87
|
|
88
|
+
public setDefaultCollapse(collapse: boolean): void;
|
89
|
+
|
90
|
+
public getDefaultCollapse(): boolean;
|
91
|
+
|
87
92
|
public sortGroups(): void;
|
88
93
|
|
89
94
|
public updateHeaders(): void;
|
package/lib/versions.json
CHANGED
@@ -23,7 +23,7 @@
|
|
23
23
|
"tr-grid-percent-bar": "1.0.22",
|
24
24
|
"tr-grid-printer": "1.0.16",
|
25
25
|
"tr-grid-range-bar": "1.0.9",
|
26
|
-
"tr-grid-row-dragging": "1.0.
|
26
|
+
"tr-grid-row-dragging": "1.0.24",
|
27
27
|
"tr-grid-row-filtering": "1.0.55",
|
28
28
|
"tr-grid-row-grouping": "1.0.80",
|
29
29
|
"tr-grid-row-selection": "1.0.21",
|
@@ -31,7 +31,7 @@
|
|
31
31
|
"tr-grid-textformatting": "1.0.44",
|
32
32
|
"tr-grid-titlewrap": "1.0.19",
|
33
33
|
"@grid/formatters": "1.0.49",
|
34
|
-
"@grid/column-selection-dialog": "4.0.
|
35
|
-
"@grid/filter-dialog": "4.0.
|
34
|
+
"@grid/column-selection-dialog": "4.0.46",
|
35
|
+
"@grid/filter-dialog": "4.0.56",
|
36
36
|
"@grid/column-format-dialog": "4.0.43"
|
37
37
|
}
|
package/package.json
CHANGED