@refinitiv-ui/efx-grid 6.0.79 → 6.0.80
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-dragging/es6/ColumnDragging.js +1 -1
- package/lib/column-selection-dialog/lib/column-selection-dialog.js +12 -11
- package/lib/column-selection-dialog/lib/locale/translation-de.js +2 -1
- package/lib/column-selection-dialog/lib/locale/translation-en.js +2 -1
- package/lib/column-selection-dialog/lib/locale/translation-ja.js +2 -1
- package/lib/column-selection-dialog/lib/locale/translation-zh-hant.js +2 -1
- package/lib/column-selection-dialog/lib/locale/translation-zh.js +2 -1
- package/lib/column-selection-dialog/themes/base.less +45 -24
- package/lib/column-selection-dialog/themes/elemental/dark/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/elemental/dark/es5/all-elements.js +1 -1
- package/lib/column-selection-dialog/themes/elemental/light/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/elemental/light/es5/all-elements.js +1 -1
- package/lib/column-selection-dialog/themes/halo/dark/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/halo/dark/es5/all-elements.js +1 -1
- package/lib/column-selection-dialog/themes/halo/light/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/halo/light/es5/all-elements.js +1 -1
- package/lib/column-selection-dialog/themes/solar/charcoal/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/solar/charcoal/es5/all-elements.js +1 -1
- package/lib/column-selection-dialog/themes/solar/pearl/column-selection-dialog.js +1 -1
- package/lib/column-selection-dialog/themes/solar/pearl/es5/all-elements.js +1 -1
- package/lib/core/dist/core.js +26 -1
- package/lib/core/dist/core.min.js +1 -1
- package/lib/core/es6/data/DataView.d.ts +4 -0
- package/lib/core/es6/data/DataView.js +25 -0
- package/lib/core/es6/grid/Core.js +1 -1
- package/lib/grid/index.js +1 -1
- package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts +1 -2
- package/lib/tr-grid-column-selection/es6/ColumnSelection.js +12 -42
- package/lib/tr-grid-contextmenu/es6/ContextMenu.d.ts +1 -2
- package/lib/tr-grid-contextmenu/es6/ContextMenu.js +99 -132
- package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts +2 -0
- package/lib/tr-grid-row-grouping/es6/RowGrouping.js +33 -15
- package/lib/tr-grid-row-selection/es6/RowSelection.d.ts +1 -2
- package/lib/tr-grid-row-selection/es6/RowSelection.js +28 -51
- package/lib/types/es6/ColumnSelection.d.ts +1 -2
- package/lib/types/es6/ContextMenu.d.ts +1 -2
- package/lib/types/es6/Core/data/DataView.d.ts +4 -0
- package/lib/types/es6/RowGrouping.d.ts +2 -0
- package/lib/types/es6/RowSelection.d.ts +1 -2
- package/lib/versions.json +6 -6
- package/package.json +1 -1
@@ -198,6 +198,10 @@ declare class DataView extends EventDispatcher {
|
|
198
198
|
|
199
199
|
public disableCollapsing(bool?: boolean|null): void;
|
200
200
|
|
201
|
+
public setGroupColor(groupColor: string): void;
|
202
|
+
|
203
|
+
public getGroupColor(): string;
|
204
|
+
|
201
205
|
public getVisibleRowCount(): number;
|
202
206
|
|
203
207
|
public isRowDataInGroup(rowData: any, groupID?: string|null): boolean;
|
@@ -233,6 +233,10 @@ DataView.prototype._groupRows = null; // Shared between groups
|
|
233
233
|
*/
|
234
234
|
DataView.prototype._groupId = "";
|
235
235
|
/** @private
|
236
|
+
* @type {string}
|
237
|
+
*/
|
238
|
+
DataView.prototype._groupColor = "";
|
239
|
+
/** @private
|
236
240
|
* @type {*}
|
237
241
|
*/
|
238
242
|
DataView.prototype._groupValue;
|
@@ -1815,6 +1819,27 @@ DataView.prototype.isCollapsible = function() {
|
|
1815
1819
|
DataView.prototype.disableCollapsing = function(bool) {
|
1816
1820
|
this._collapsible = !(bool !== false);
|
1817
1821
|
};
|
1822
|
+
/**
|
1823
|
+
* @public
|
1824
|
+
* @param {string} groupColor
|
1825
|
+
*/
|
1826
|
+
DataView.prototype.setGroupColor = function(groupColor) {
|
1827
|
+
if(this._groupLevel === 1) {
|
1828
|
+
this._groupColor = groupColor;
|
1829
|
+
}
|
1830
|
+
};
|
1831
|
+
/**
|
1832
|
+
* @public
|
1833
|
+
* @return {string}
|
1834
|
+
*/
|
1835
|
+
DataView.prototype.getGroupColor = function() {
|
1836
|
+
if(this._groupLevel === 0) {
|
1837
|
+
return "";
|
1838
|
+
} else if(this._groupLevel === 1) {
|
1839
|
+
return this._groupColor;
|
1840
|
+
}
|
1841
|
+
return this._parent.getGroupColor();
|
1842
|
+
};
|
1818
1843
|
/** @private
|
1819
1844
|
* @return {?Array.<string>}
|
1820
1845
|
*/
|
package/lib/grid/index.js
CHANGED
@@ -1,8 +1,7 @@
|
|
1
1
|
import { Ext } from "../../tr-grid-util/es6/Ext.js";
|
2
2
|
import { Dom } from "../../tr-grid-util/es6/Dom.js";
|
3
3
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
4
|
-
import {
|
5
|
-
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
4
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
6
5
|
|
7
6
|
declare namespace ColumnSelectionPlugin {
|
8
7
|
|
@@ -3,8 +3,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
3
3
|
import { Ext } from "../../tr-grid-util/es6/Ext.js";
|
4
4
|
import { Dom } from "../../tr-grid-util/es6/Dom.js";
|
5
5
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
6
|
-
import {
|
7
|
-
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
6
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
8
7
|
/** @event ColumnSelectionPlugin#selectionChanged
|
9
8
|
* @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
|
10
9
|
*/
|
@@ -36,7 +35,6 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
|
|
36
35
|
t._onColumnRemoved = t._onColumnRemoved.bind(t);
|
37
36
|
t._onColumnAdded = t._onColumnAdded.bind(t);
|
38
37
|
t._onReselection = t._onReselection.bind(t);
|
39
|
-
t._onThemeLoaded = t._onThemeLoaded.bind(t);
|
40
38
|
t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
|
41
39
|
t._onBeforeBatchOperation = t._onBeforeBatchOperation.bind(t);
|
42
40
|
t._onAfterBatchOperation = t._onAfterBatchOperation.bind(t);
|
@@ -129,10 +127,20 @@ ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
|
|
129
127
|
|
130
128
|
ColumnSelectionPlugin.prototype._prevSelectedCols = {}; // previous selected columns during batch operation
|
131
129
|
|
130
|
+
/** @private
|
131
|
+
* @return {string}
|
132
|
+
*/
|
133
|
+
|
134
|
+
ColumnSelectionPlugin._styleCalculator = function () {
|
135
|
+
var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
|
136
|
+
], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
|
137
|
+
return prettifyCss(styles);
|
138
|
+
};
|
132
139
|
/** @public
|
133
140
|
* @return {string}
|
134
141
|
*/
|
135
142
|
|
143
|
+
|
136
144
|
ColumnSelectionPlugin.prototype.getName = function () {
|
137
145
|
return "ColumnSelectionPlugin"; // Read Only
|
138
146
|
};
|
@@ -167,45 +175,7 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
|
|
167
175
|
host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
|
168
176
|
host.listen("afterBatchOperation", this._onAfterBatchOperation);
|
169
177
|
this.config(options);
|
170
|
-
|
171
|
-
if (ColumnSelectionPlugin._stylePromise) {
|
172
|
-
ColumnSelectionPlugin._applyThemeColor(host);
|
173
|
-
} else {
|
174
|
-
ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
|
175
|
-
|
176
|
-
ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
|
177
|
-
}
|
178
|
-
};
|
179
|
-
/** @private
|
180
|
-
*/
|
181
|
-
|
182
|
-
|
183
|
-
ColumnSelectionPlugin.prototype._onThemeLoaded = function () {
|
184
|
-
if (!ColumnSelectionPlugin._styles) {
|
185
|
-
var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
|
186
|
-
], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
|
187
|
-
ColumnSelectionPlugin._styles = prettifyCss(styles);
|
188
|
-
}
|
189
|
-
|
190
|
-
for (var i = this._hosts.length; --i >= 0;) {
|
191
|
-
ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
|
192
|
-
}
|
193
|
-
};
|
194
|
-
/** @private
|
195
|
-
* @param {Object} grid core grid instance
|
196
|
-
*/
|
197
|
-
|
198
|
-
|
199
|
-
ColumnSelectionPlugin._applyThemeColor = function (grid) {
|
200
|
-
if (!grid || grid._columnSelectionStyles) {
|
201
|
-
return;
|
202
|
-
}
|
203
|
-
|
204
|
-
if (ColumnSelectionPlugin._styles) {
|
205
|
-
grid._columnSelectionStyles = true; // Prevent loading the same style twice
|
206
|
-
|
207
|
-
injectCss(ColumnSelectionPlugin._styles, grid.getParent());
|
208
|
-
}
|
178
|
+
this.applyStaticStyles(ColumnSelectionPlugin._styleCalculator);
|
209
179
|
};
|
210
180
|
/**
|
211
181
|
* @protected
|
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
|
2
2
|
import Ext from "../../tr-grid-util/es6/Ext.js";
|
3
3
|
import MenuEventAPI from "./MenuEventAPI.js";
|
4
4
|
import PopupMenu from "./PopupMenu.js";
|
5
|
-
import {
|
6
|
-
import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
5
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
6
|
import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
|
8
7
|
|
9
8
|
declare namespace ContextMenuPlugin {
|
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
|
2
2
|
import Ext from "../../tr-grid-util/es6/Ext.js";
|
3
3
|
import MenuEventAPI from "./MenuEventAPI.js";
|
4
4
|
import PopupMenu from "./PopupMenu.js";
|
5
|
-
import {
|
6
|
-
import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
5
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
6
|
import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
|
8
7
|
|
9
8
|
/** @typedef {"header" | "content" | "footer" | "filterRow"} ContextMenuPlugin~Context
|
@@ -78,7 +77,6 @@ var ContextMenuPlugin = function (options) {
|
|
78
77
|
|
79
78
|
t._onItemClicked = t._onItemClicked.bind(t);
|
80
79
|
t._rightClickedHandler = t._rightClickedHandler.bind(t);
|
81
|
-
t._onThemeLoaded = t._onThemeLoaded.bind(t);
|
82
80
|
|
83
81
|
t.config({ "contextMenu": options });
|
84
82
|
};
|
@@ -93,14 +91,7 @@ ContextMenuPlugin.prototype._contextMap = {
|
|
93
91
|
"footer": "footer",
|
94
92
|
"filterRow": "filterRow"
|
95
93
|
};
|
96
|
-
|
97
|
-
* @private
|
98
|
-
*/
|
99
|
-
ContextMenuPlugin._styles = ""; // Static variable
|
100
|
-
/** @type {Promise<Object>}
|
101
|
-
* @private
|
102
|
-
*/
|
103
|
-
ContextMenuPlugin._stylePromise = null; // Static variable
|
94
|
+
|
104
95
|
/** @type {boolean}
|
105
96
|
* @private
|
106
97
|
*/
|
@@ -130,6 +121,102 @@ ContextMenuPlugin.prototype._rsp = null;
|
|
130
121
|
*/
|
131
122
|
ContextMenuPlugin.prototype._contextMenu = null;
|
132
123
|
|
124
|
+
/** @private
|
125
|
+
* @param {Object} colors
|
126
|
+
* @return {string}
|
127
|
+
*/
|
128
|
+
ContextMenuPlugin._styleCalculator = function (colors) {
|
129
|
+
var css = prettifyCss([
|
130
|
+
".tr-contextmenu", [
|
131
|
+
"outline: none;",
|
132
|
+
"box-sizing: border-box;",
|
133
|
+
"-moz-box-sizing: border-box;",
|
134
|
+
"border-style: solid;",
|
135
|
+
"border-width: 1px;",
|
136
|
+
"overflow: hidden;",
|
137
|
+
"padding: 1px;",
|
138
|
+
"margin: 0;",
|
139
|
+
"user-select: none;",
|
140
|
+
"list-style-type: none;",
|
141
|
+
"background-color: backgroundColor;",
|
142
|
+
"color: fontColor;",
|
143
|
+
"border-color: borderColor;"
|
144
|
+
],
|
145
|
+
".tr-contextmenu-item", [
|
146
|
+
"list-style: none;",
|
147
|
+
"padding: 3px 7px;",
|
148
|
+
"margin: 0;",
|
149
|
+
"vertical-align: middle;",
|
150
|
+
"white-space: nowrap;",
|
151
|
+
"cursor: pointer;",
|
152
|
+
"line-height: 20px;"
|
153
|
+
],
|
154
|
+
".tr-contextmenu-item[disabled]", [
|
155
|
+
"color: disabledColor;",
|
156
|
+
"cursor: default;"
|
157
|
+
],
|
158
|
+
".tr-contextmenu-item", [
|
159
|
+
"padding-right: 20px;"
|
160
|
+
],
|
161
|
+
".tr-contextmenu-item:hover:not([disabled])", [
|
162
|
+
"background-color: hoveredColor;"
|
163
|
+
],
|
164
|
+
".tr-contextmenu-popup", [
|
165
|
+
"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
|
166
|
+
"z-index: 10;"
|
167
|
+
],
|
168
|
+
".tr-contextmenu-item.has-child", [
|
169
|
+
"position: relative;"
|
170
|
+
],
|
171
|
+
".tr-contextmenu-item.has-child:after", [
|
172
|
+
"box-sizing: border-box;",
|
173
|
+
"-moz-box-sizing: border-box;",
|
174
|
+
"display: inline-block;",
|
175
|
+
"width: 7px;",
|
176
|
+
"height: 7px;",
|
177
|
+
"border-style: solid;",
|
178
|
+
"border-width: 1px;",
|
179
|
+
"content: \"\";",
|
180
|
+
"-webkit-transform: rotate(45deg);",
|
181
|
+
"transform: rotate(45deg);",
|
182
|
+
"border-left-width: 0;",
|
183
|
+
"border-bottom-width: 0;",
|
184
|
+
"position: absolute;",
|
185
|
+
"right: 8px;",
|
186
|
+
"top: -webkit-calc(50% - 4px);",
|
187
|
+
"top: -moz-calc(50% - 4px);",
|
188
|
+
"top: calc(50% - 4px);",
|
189
|
+
"border-color: fontColor;"
|
190
|
+
],
|
191
|
+
".tr-contextmenu-item[data-type=\"separator\"]", [
|
192
|
+
"padding: 0;",
|
193
|
+
"border: none;",
|
194
|
+
"border-bottom-style: solid;",
|
195
|
+
"border-bottom-width: 1px;",
|
196
|
+
"border-bottom-color: disabledColor;"
|
197
|
+
]
|
198
|
+
]);
|
199
|
+
|
200
|
+
var hex = CellPainter.rgb2Hex(colors.tableBg);
|
201
|
+
var triplet = CellPainter.hex2Num(hex);
|
202
|
+
var bw = CellPainter.blackAndWhite(triplet);
|
203
|
+
var blendRatio;
|
204
|
+
if (bw === "#000000") { // Light theme
|
205
|
+
blendRatio = 0.1;
|
206
|
+
css = css.replace(/disabledColor/g, "lightgrey");
|
207
|
+
} else { // Dark theme
|
208
|
+
blendRatio = 0.2;
|
209
|
+
css = css.replace(/disabledColor/g, "gray");
|
210
|
+
}
|
211
|
+
var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
|
212
|
+
css = css.replace(/hoveredColor/g, hoverd);
|
213
|
+
css = css.replace(/backgroundColor/g, colors.tableBg);
|
214
|
+
css = css.replace(/fontColor/g, colors.tableText);
|
215
|
+
css = css.replace(/borderColor/g, colors.tableBorder);
|
216
|
+
|
217
|
+
return css;
|
218
|
+
};
|
219
|
+
|
133
220
|
/** @public
|
134
221
|
* @return {string}
|
135
222
|
*/
|
@@ -151,14 +238,7 @@ ContextMenuPlugin.prototype.initialize = function (host, options) {
|
|
151
238
|
|
152
239
|
t.config(options);
|
153
240
|
|
154
|
-
|
155
|
-
ContextMenuPlugin._applyThemeColor(host);
|
156
|
-
} else { // Theme has NOT been loaded. Wait for the theme to be loaded
|
157
|
-
if(!ContextMenuPlugin._stylePromise) {
|
158
|
-
ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
|
159
|
-
}
|
160
|
-
ContextMenuPlugin._stylePromise.then(t._onThemeLoaded).catch(t._onThemeLoaded);
|
161
|
-
}
|
241
|
+
t.applyStaticStyles(ContextMenuPlugin._styleCalculator);
|
162
242
|
};
|
163
243
|
|
164
244
|
/** @public
|
@@ -356,119 +436,6 @@ ContextMenuPlugin.prototype._onItemClicked = function (e) {
|
|
356
436
|
}
|
357
437
|
};
|
358
438
|
|
359
|
-
/** @private
|
360
|
-
*/
|
361
|
-
ContextMenuPlugin.prototype._onThemeLoaded = function () {
|
362
|
-
if(!ContextMenuPlugin._styles) { // Theme can be loaded only once
|
363
|
-
var colors = ElfUtil.getColors();
|
364
|
-
var css = prettifyCss([
|
365
|
-
".tr-contextmenu", [
|
366
|
-
"outline: none;",
|
367
|
-
"box-sizing: border-box;",
|
368
|
-
"-moz-box-sizing: border-box;",
|
369
|
-
"border-style: solid;",
|
370
|
-
"border-width: 1px;",
|
371
|
-
"overflow: hidden;",
|
372
|
-
"padding: 1px;",
|
373
|
-
"margin: 0;",
|
374
|
-
"user-select: none;",
|
375
|
-
"list-style-type: none;",
|
376
|
-
"background-color: backgroundColor;",
|
377
|
-
"color: fontColor;",
|
378
|
-
"border-color: borderColor;"
|
379
|
-
],
|
380
|
-
".tr-contextmenu-item", [
|
381
|
-
"list-style: none;",
|
382
|
-
"padding: 3px 7px;",
|
383
|
-
"margin: 0;",
|
384
|
-
"vertical-align: middle;",
|
385
|
-
"white-space: nowrap;",
|
386
|
-
"cursor: pointer;",
|
387
|
-
"line-height: 20px;"
|
388
|
-
],
|
389
|
-
".tr-contextmenu-item[disabled]", [
|
390
|
-
"color: disabledColor;",
|
391
|
-
"cursor: default;"
|
392
|
-
],
|
393
|
-
".tr-contextmenu-item", [
|
394
|
-
"padding-right: 20px;"
|
395
|
-
],
|
396
|
-
".tr-contextmenu-item:hover:not([disabled])", [
|
397
|
-
"background-color: hoveredColor;"
|
398
|
-
],
|
399
|
-
".tr-contextmenu-popup", [
|
400
|
-
"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
|
401
|
-
"z-index: 10;"
|
402
|
-
],
|
403
|
-
".tr-contextmenu-item.has-child", [
|
404
|
-
"position: relative;"
|
405
|
-
],
|
406
|
-
".tr-contextmenu-item.has-child:after", [
|
407
|
-
"box-sizing: border-box;",
|
408
|
-
"-moz-box-sizing: border-box;",
|
409
|
-
"display: inline-block;",
|
410
|
-
"width: 7px;",
|
411
|
-
"height: 7px;",
|
412
|
-
"border-style: solid;",
|
413
|
-
"border-width: 1px;",
|
414
|
-
"content: \"\";",
|
415
|
-
"-webkit-transform: rotate(45deg);",
|
416
|
-
"transform: rotate(45deg);",
|
417
|
-
"border-left-width: 0;",
|
418
|
-
"border-bottom-width: 0;",
|
419
|
-
"position: absolute;",
|
420
|
-
"right: 8px;",
|
421
|
-
"top: -webkit-calc(50% - 4px);",
|
422
|
-
"top: -moz-calc(50% - 4px);",
|
423
|
-
"top: calc(50% - 4px);",
|
424
|
-
"border-color: fontColor;"
|
425
|
-
],
|
426
|
-
".tr-contextmenu-item[data-type=\"separator\"]", [
|
427
|
-
"padding: 0;",
|
428
|
-
"border: none;",
|
429
|
-
"border-bottom-style: solid;",
|
430
|
-
"border-bottom-width: 1px;",
|
431
|
-
"border-bottom-color: disabledColor;"
|
432
|
-
]
|
433
|
-
]);
|
434
|
-
|
435
|
-
var hex = CellPainter.rgb2Hex(colors.tableBg);
|
436
|
-
var triplet = CellPainter.hex2Num(hex);
|
437
|
-
var bw = CellPainter.blackAndWhite(triplet);
|
438
|
-
var blendRatio;
|
439
|
-
if (bw === "#000000") { // Light theme
|
440
|
-
blendRatio = 0.1;
|
441
|
-
css = css.replace(/disabledColor/g, "lightgrey");
|
442
|
-
} else { // Dark theme
|
443
|
-
blendRatio = 0.2;
|
444
|
-
css = css.replace(/disabledColor/g, "gray");
|
445
|
-
}
|
446
|
-
var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
|
447
|
-
css = css.replace(/hoveredColor/g, hoverd);
|
448
|
-
css = css.replace(/backgroundColor/g, colors.tableBg);
|
449
|
-
css = css.replace(/fontColor/g, colors.tableText);
|
450
|
-
css = css.replace(/borderColor/g, colors.tableBorder);
|
451
|
-
|
452
|
-
ContextMenuPlugin._styles = css;
|
453
|
-
}
|
454
|
-
|
455
|
-
for(var i = this._hosts.length; --i >= 0;) {
|
456
|
-
ContextMenuPlugin._applyThemeColor(this._hosts[i]);
|
457
|
-
}
|
458
|
-
};
|
459
|
-
/** @private
|
460
|
-
* @param {Object} grid core grid object
|
461
|
-
*/
|
462
|
-
ContextMenuPlugin._applyThemeColor = function(grid) {
|
463
|
-
if(!grid || grid._contextMenuStyles) {
|
464
|
-
return;
|
465
|
-
}
|
466
|
-
if(ContextMenuPlugin._styles) {
|
467
|
-
grid._contextMenuStyles = true; // Prevent loading the same style twice
|
468
|
-
injectCss(ContextMenuPlugin._styles, grid.getElement());
|
469
|
-
}
|
470
|
-
};
|
471
|
-
|
472
439
|
|
473
440
|
|
474
441
|
export default ContextMenuPlugin;
|
@@ -25,7 +25,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
|
25
25
|
* @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
|
26
26
|
* @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
|
27
27
|
* @property {Object=} predefinedColors Predefined color object map for color tag
|
28
|
-
* @property {Object=} groupColors
|
28
|
+
* @property {Object=} groupColors - Deprecated, the object map of group ID and predefined color.
|
29
29
|
* @property {boolean=} defaultCollapse=false Collapsing groups by default when a group is created
|
30
30
|
* @property {Function=} clicked=null Event handler when user clicks on arrows or cells
|
31
31
|
* @property {Function=} groupAdded=null Event handler
|
@@ -1012,6 +1012,25 @@ RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
|
|
1012
1012
|
}
|
1013
1013
|
};
|
1014
1014
|
|
1015
|
+
/** @public
|
1016
|
+
* @param {string} groupRef
|
1017
|
+
* @param {string} groupColor color name from predefinedColors
|
1018
|
+
*/
|
1019
|
+
RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
|
1020
|
+
var dv = this.getDataView();
|
1021
|
+
if(!dv) {
|
1022
|
+
return;
|
1023
|
+
}
|
1024
|
+
var grp = dv.getGroup(groupRef);
|
1025
|
+
if(grp) {
|
1026
|
+
grp.setGroupColor(groupColor);
|
1027
|
+
var host = this._hosts[0];
|
1028
|
+
if(host) {
|
1029
|
+
host.requestRowRefresh();
|
1030
|
+
}
|
1031
|
+
}
|
1032
|
+
};
|
1033
|
+
|
1015
1034
|
/** @public
|
1016
1035
|
* @return {boolean}
|
1017
1036
|
*/
|
@@ -1172,8 +1191,18 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
|
|
1172
1191
|
newGroup.disableCollapsing();
|
1173
1192
|
}
|
1174
1193
|
}
|
1175
|
-
this._dispatch("groupAdded", e);
|
1176
1194
|
|
1195
|
+
var groupColors = this._groupColors;
|
1196
|
+
var groupColor;
|
1197
|
+
if(groupColors) { // Backward compatibility
|
1198
|
+
var groupId = newGroup.getGroupId();
|
1199
|
+
groupColor = groupColors[groupId];
|
1200
|
+
if(groupColor) {
|
1201
|
+
newGroup.setGroupColor(groupColor);
|
1202
|
+
}
|
1203
|
+
}
|
1204
|
+
|
1205
|
+
this._dispatch("groupAdded", e);
|
1177
1206
|
if (this._autoGroupSorting) {
|
1178
1207
|
if (!this._sortingTimer) {
|
1179
1208
|
this._sortingTimer = setTimeout(this.sortGroups, 100);
|
@@ -1387,20 +1416,9 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
|
|
1387
1416
|
indentSize = maxColWidth;
|
1388
1417
|
}
|
1389
1418
|
|
1419
|
+
var groupColor = currentGroup.getGroupColor();
|
1420
|
+
arg.colorTagClass = groupColor;
|
1390
1421
|
arg.indentSize = indentSize;
|
1391
|
-
|
1392
|
-
if (this._groupColors) {
|
1393
|
-
// TODO: Need better method to find the first level parent's group id
|
1394
|
-
var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
|
1395
|
-
if (curGroupLevel > 1) {
|
1396
|
-
for (var i = curGroupLevel; i > 1; i--) {
|
1397
|
-
rootGroup = rootGroup.getDataSource();
|
1398
|
-
}
|
1399
|
-
}
|
1400
|
-
var groupId = rootGroup.getGroupId();
|
1401
|
-
arg.colorTagClass = this._groupColors[groupId];
|
1402
|
-
}
|
1403
|
-
|
1404
1422
|
if (groupView) {
|
1405
1423
|
rowPainter.applyHeaderStyle(arg);
|
1406
1424
|
this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);
|
@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
|
|
3
3
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
4
4
|
import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
|
5
5
|
import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
|
6
|
-
import {
|
7
|
-
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
6
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
8
7
|
|
9
8
|
declare namespace RowSelectionPlugin {
|
10
9
|
|
@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
|
|
3
3
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
4
4
|
import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
|
5
5
|
import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
|
6
|
-
import {
|
7
|
-
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
6
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
8
7
|
var isMac = isMacFn();
|
9
8
|
/** Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
|
10
9
|
* @event RowSelectionPlugin#selectionChanged
|
@@ -45,7 +44,6 @@ var RowSelectionPlugin = function (options) {
|
|
45
44
|
t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
|
46
45
|
t._onReselection = t._onReselection.bind(t);
|
47
46
|
t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
|
48
|
-
t._onThemeLoaded = t._onThemeLoaded.bind(t);
|
49
47
|
t._onRowPositionChanged = t._onRowPositionChanged.bind(t);
|
50
48
|
t._updateMenuIcon = t._updateMenuIcon.bind(t);
|
51
49
|
|
@@ -131,6 +129,32 @@ RowSelectionPlugin.prototype._timerMenuId = 0;
|
|
131
129
|
*/
|
132
130
|
RowSelectionPlugin.prototype._pendingSelection = null;
|
133
131
|
|
132
|
+
/** @private
|
133
|
+
* @return {string}
|
134
|
+
*/
|
135
|
+
RowSelectionPlugin._styleCalculator = function() {
|
136
|
+
var styles = [
|
137
|
+
".row-selection-menu", [
|
138
|
+
"position: absolute;",
|
139
|
+
"background-color: var(--grid-column-menu-icon-bgcolor);",
|
140
|
+
"color: var(--grid-column-menu-icon-color);",
|
141
|
+
"z-index: 1;",
|
142
|
+
"cursor: pointer;",
|
143
|
+
"text-align: center;",
|
144
|
+
"width: 16px;",
|
145
|
+
"height: 16px;",
|
146
|
+
"padding: 6px;"
|
147
|
+
],
|
148
|
+
".row-selection-menu:hover", [
|
149
|
+
"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
|
150
|
+
],
|
151
|
+
".row-selection-menu-inside", [
|
152
|
+
"padding: 4px;"
|
153
|
+
]
|
154
|
+
];
|
155
|
+
return prettifyCss(styles);
|
156
|
+
};
|
157
|
+
|
134
158
|
/** @public
|
135
159
|
* @return {string}
|
136
160
|
*/
|
@@ -172,57 +196,10 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
|
|
172
196
|
this.config(options);
|
173
197
|
|
174
198
|
if(this._onMenuClicked) { // use styles menu icon only when want to use icon menu
|
175
|
-
|
176
|
-
RowSelectionPlugin._applyThemeColor(host);
|
177
|
-
} else {
|
178
|
-
RowSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
|
179
|
-
RowSelectionPlugin._stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
|
180
|
-
}
|
199
|
+
this.applyStaticStyles(RowSelectionPlugin._styleCalculator);
|
181
200
|
}
|
182
|
-
|
183
201
|
};
|
184
202
|
|
185
|
-
/** @private
|
186
|
-
*/
|
187
|
-
RowSelectionPlugin.prototype._onThemeLoaded = function() {
|
188
|
-
if(!RowSelectionPlugin._styles) {
|
189
|
-
var styles = [
|
190
|
-
".row-selection-menu", [
|
191
|
-
"position: absolute;",
|
192
|
-
"background-color: var(--grid-column-menu-icon-bgcolor);",
|
193
|
-
"color: var(--grid-column-menu-icon-color);",
|
194
|
-
"z-index: 1;",
|
195
|
-
"cursor: pointer;",
|
196
|
-
"text-align: center;",
|
197
|
-
"width: 16px;",
|
198
|
-
"height: 16px;",
|
199
|
-
"padding: 6px;"
|
200
|
-
],
|
201
|
-
".row-selection-menu:hover", [
|
202
|
-
"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
|
203
|
-
],
|
204
|
-
".row-selection-menu-inside", [
|
205
|
-
"padding: 4px;"
|
206
|
-
]
|
207
|
-
];
|
208
|
-
RowSelectionPlugin._styles = prettifyCss(styles);
|
209
|
-
}
|
210
|
-
for(var i = this._hosts.length; --i >= 0;) {
|
211
|
-
RowSelectionPlugin._applyThemeColor(this._hosts[i]);
|
212
|
-
}
|
213
|
-
};
|
214
|
-
/** @private
|
215
|
-
* @param {Object} grid core grid instance
|
216
|
-
*/
|
217
|
-
RowSelectionPlugin._applyThemeColor = function(grid) {
|
218
|
-
if(!grid || grid._rowSelectionStyles) {
|
219
|
-
return;
|
220
|
-
}
|
221
|
-
if(RowSelectionPlugin._styles) {
|
222
|
-
grid._rowSelectionStyles = true; // Prevent loading the same style twice
|
223
|
-
injectCss(RowSelectionPlugin._styles, grid.getParent());
|
224
|
-
}
|
225
|
-
};
|
226
203
|
/** @public
|
227
204
|
* @param {Object=} host core grid instance
|
228
205
|
*/
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import { Ext } from "../../tr-grid-util/es6/Ext.js";
|
2
2
|
import { Dom } from "../../tr-grid-util/es6/Dom.js";
|
3
3
|
import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
4
|
-
import {
|
5
|
-
import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
4
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
6
5
|
|
7
6
|
declare namespace ColumnSelectionPlugin {
|
8
7
|
|
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
|
|
2
2
|
import Ext from "../../tr-grid-util/es6/Ext.js";
|
3
3
|
import MenuEventAPI from "./MenuEventAPI.js";
|
4
4
|
import PopupMenu from "./PopupMenu.js";
|
5
|
-
import {
|
6
|
-
import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
|
5
|
+
import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
7
6
|
import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
|
8
7
|
|
9
8
|
declare namespace ContextMenuPlugin {
|