@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.
@@ -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
- return _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
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 c = items.length;
1588
- if (c === 0) return;
1589
- for (var i = 0; i < c; i++) {
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
- this._visibleColumnList.push(coralItem);
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
- * @param {Object=} states
10
+ * @constant
11
+ */
12
+ const ITEM_LIMIT = 500;
13
+
14
+ /** @private
15
+ * @function
16
+ * @param {*=} val
11
17
  * @return {string}
12
18
  */
13
- const _getStateText = function(states) {
14
- if(typeof states === "string") {
15
- return states;
16
- } else if(states) {
17
- return states.title || states.label || "";
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
- * @private
23
- * @param {Element} item
24
- * @param {Object=} states
27
+ /** @private
28
+ * @function
29
+ * @param {*} val
30
+ * @param {number} idx
31
+ * @return {!Object}
25
32
  */
26
- const _updateItemStates = function(item, states) {
27
- item._label.textContent = _getStateText(states);
28
- item._checkbox.checked = (states && states.checked) ? true : false;
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
- * @private
32
- * @param {Array.<Element>} ary Array of Items
33
- * @param {(string|Function)=} inputFilter
34
- * @return {!Array} Array containing filtered data objects
41
+ /** @private
42
+ * @function
43
+ * @param {!Object} state
44
+ * @param {*} val
35
45
  */
36
- const _filter = function(ary, inputFilter) {
37
- var len = ary ? ary.length : 0;
38
- if(!len || !inputFilter) {
39
- return ary; // No new copy is generated
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
- var filterMethod, ctx;
43
- if(typeof inputFilter === "function") {
44
- filterMethod = inputFilter;
45
- ctx = ary;
46
- } else {
47
- filterMethod = _caseInsensitiveFilter;
48
- ctx = (inputFilter + "").toLowerCase(); // Convert to lowercased string for case insensitive comparison
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
- var filteredList = [];
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 list = this.data;
156
- var len = list ? list.length : 0;
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
- _updateItemStates(item, list[i]);
176
- }
177
+ this._states = dataList.map(_toItemStates);
178
+ this._filterItems();
179
+ this._renderItems();
180
+ }
181
+ }
177
182
 
178
- if (this._inputFilter) {
179
- this._origItems = this._items;
180
- this._items = _filter(this._origItems, this._inputFilter);
181
- } else {
182
- this._origItems = this._items;
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
- this._renderItems();
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
- var len = this._items.length;
219
+
220
+ var ary = this._items;
221
+ var len = ary.length;
202
222
  for(var i = 0; i < len; ++i) {
203
- container.appendChild(this._items[i]);
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 len = this._items.length;
251
+ var states = this._states;
252
+ var len = states.length;
232
253
  for(var i = 0; i < len; ++i) {
233
- _updateItemStates(this._items[i], this.data[i]);
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 len = this._items.length;
266
+ var states = this._states;
267
+ var len = states.length;
246
268
  for(var i = 0; i < len; ++i) {
247
- if(this._items[i]._checkbox.checked) {
269
+ var state = states[i];
270
+ if(_getCheckedState(state)) {
248
271
  items.push({
249
- title: this._items[i]._label.textContent,
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 len = this._items.length;
286
+ var ary = this._items;
287
+ var len = ary.length;
264
288
  for(var i = 0; i < len; ++i) {
265
- this._items[i]._checkbox.checked = selected;
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._items = _filter(this._origItems, this._inputFilter);
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 len = this._items.length;
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 (this._items[i]._checkbox.checked) {
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(true); // Update positioning
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(true); // Update positioning
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
- this._dataSelector.data = this.data; // Preserve original referencing
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
- items = data;
850
+ ary = data;
851
+ } else if(data) {
852
+ ary = Object.keys(data); // TODO: Obsolete this
846
853
  } else {
847
- items = Object.keys(data); // TODO: Obsolete this
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
- this._generalComboBoxes[1].data = items.map(this._toComboBoxItem);
852
- this._generalComboBoxes[3].data = items.map(this._toComboBoxItem);
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
@@ -1,3 +1,3 @@
1
1
  import {Grid} from "./lib/efx-grid.js";
2
2
  export {Grid}
3
- window.EFX_GRID = { version: "6.0.19" };
3
+ window.EFX_GRID = { version: "6.0.20" };
@@ -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
- DragUI.applyThemeColor(this._hosts[i]);
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().classList.add("mouse-dragging");
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
- srcGrid.getElement().classList.remove("mouse-dragging");
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.23",
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.45",
35
- "@grid/filter-dialog": "4.0.55",
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
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "version": "6.0.19"
61
+ "version": "6.0.20"
62
62
  }