@kdcloudjs/table 1.1.3-canary.4 → 1.1.3-canary.6
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/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +153 -48
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +5 -5
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/helpers/TableDOMUtils.d.ts +2 -0
- package/es/table/base/helpers/TableDOMUtils.js +48 -12
- package/es/table/base/helpers/getRichVisibleRectsStream.js +1 -1
- package/es/table/base/styles.js +1 -1
- package/es/table/base/table.d.ts +0 -1
- package/es/table/base/table.js +9 -24
- package/es/table/pipeline/features/index.d.ts +1 -0
- package/es/table/pipeline/features/index.js +2 -1
- package/es/table/pipeline/features/mergeCellHover.d.ts +2 -0
- package/es/table/pipeline/features/mergeCellHover.js +32 -0
- package/lib/table/base/helpers/TableDOMUtils.d.ts +2 -0
- package/lib/table/base/helpers/TableDOMUtils.js +51 -12
- package/lib/table/base/helpers/getRichVisibleRectsStream.js +1 -1
- package/lib/table/base/styles.js +1 -1
- package/lib/table/base/table.d.ts +0 -1
- package/lib/table/base/table.js +9 -24
- package/lib/table/pipeline/features/index.d.ts +1 -0
- package/lib/table/pipeline/features/index.js +9 -1
- package/lib/table/pipeline/features/mergeCellHover.d.ts +2 -0
- package/lib/table/pipeline/features/mergeCellHover.js +43 -0
- package/package.json +1 -1
|
@@ -18,4 +18,6 @@ export declare class TableDOMHelper {
|
|
|
18
18
|
getRightLockShadow(): HTMLDivElement;
|
|
19
19
|
getLoadingIndicator(): HTMLDivElement;
|
|
20
20
|
getRowTop(rowIndex: number): number;
|
|
21
|
+
getRowNodeListByEvent: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => HTMLElement[];
|
|
22
|
+
getInRangeRowByCellEvent: (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>) => unknown[];
|
|
21
23
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
|
|
3
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
4
|
+
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
|
3
5
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
6
|
import { Classes } from '../styles'; // 表格 DOM 结构
|
|
5
7
|
// div.art-table-wrapper
|
|
@@ -41,10 +43,44 @@ import { Classes } from '../styles'; // 表格 DOM 结构
|
|
|
41
43
|
|
|
42
44
|
export var TableDOMHelper = /*#__PURE__*/function () {
|
|
43
45
|
function TableDOMHelper(artTableWrapper) {
|
|
44
|
-
var
|
|
46
|
+
var _this = this,
|
|
47
|
+
_context2;
|
|
45
48
|
|
|
46
49
|
_classCallCheck(this, TableDOMHelper);
|
|
47
50
|
|
|
51
|
+
this.getRowNodeListByEvent = function (e) {
|
|
52
|
+
var nodeList = null;
|
|
53
|
+
var rowIndex = e.currentTarget.dataset.rowindex;
|
|
54
|
+
|
|
55
|
+
if (rowIndex !== undefined) {
|
|
56
|
+
var targetParent = _this.tableBody.contains(e.currentTarget) ? _this.tableBody : _this.tableFooter;
|
|
57
|
+
nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return nodeList;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
this.getInRangeRowByCellEvent = function (e) {
|
|
64
|
+
var _context;
|
|
65
|
+
|
|
66
|
+
var _a;
|
|
67
|
+
|
|
68
|
+
var getParentNode = function getParentNode(ele, target) {
|
|
69
|
+
if (ele.parentNode.nodeName === target) {
|
|
70
|
+
return ele.parentNode;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return getParentNode(ele.parentNode, target);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
e = e instanceof Array ? e[0] : e;
|
|
77
|
+
var curCell = e === null || e === void 0 ? void 0 : e.currentTarget;
|
|
78
|
+
var curRow = getParentNode(curCell, 'TR');
|
|
79
|
+
var curRowSpan = parseInt(e.currentTarget.getAttribute('rowspan')) || 1;
|
|
80
|
+
var rows = (_a = getParentNode(curCell, 'TABLE')) === null || _a === void 0 ? void 0 : _a.rows;
|
|
81
|
+
return _sliceInstanceProperty(_context = _Array$from(rows)).call(_context, curRow.rowIndex, curRow.rowIndex + curRowSpan);
|
|
82
|
+
};
|
|
83
|
+
|
|
48
84
|
this.artTableWrapper = artTableWrapper;
|
|
49
85
|
this.artTable = artTableWrapper.querySelector(".".concat(Classes.artTable));
|
|
50
86
|
this.tableHeader = this.artTable.querySelector(".".concat(Classes.tableHeader));
|
|
@@ -55,7 +91,7 @@ export var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
55
91
|
this.tableFooter = this.artTable.querySelector(".".concat(Classes.tableFooter));
|
|
56
92
|
this.tableFooterMain = this.artTable.querySelector(".".concat(Classes.tableFooterMain));
|
|
57
93
|
|
|
58
|
-
var stickyScrollSelector = _concatInstanceProperty(
|
|
94
|
+
var stickyScrollSelector = _concatInstanceProperty(_context2 = ".".concat(Classes.artTable, " + .")).call(_context2, Classes.stickyScroll);
|
|
59
95
|
|
|
60
96
|
this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
|
|
61
97
|
this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(Classes.stickyScrollItem));
|
|
@@ -69,33 +105,33 @@ export var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
69
105
|
}, {
|
|
70
106
|
key: "getTableRows",
|
|
71
107
|
value: function getTableRows() {
|
|
72
|
-
var
|
|
108
|
+
var _context3;
|
|
73
109
|
|
|
74
|
-
var tbody = this.artTable.querySelector(_concatInstanceProperty(
|
|
110
|
+
var tbody = this.artTable.querySelector(_concatInstanceProperty(_context3 = ".".concat(Classes.tableBody, " .")).call(_context3, Classes.virtual, " table tbody"));
|
|
75
111
|
return tbody.childNodes;
|
|
76
112
|
}
|
|
77
113
|
}, {
|
|
78
114
|
key: "getTableBodyHtmlTable",
|
|
79
115
|
value: function getTableBodyHtmlTable() {
|
|
80
|
-
var
|
|
116
|
+
var _context4;
|
|
81
117
|
|
|
82
|
-
return this.artTable.querySelector(_concatInstanceProperty(
|
|
118
|
+
return this.artTable.querySelector(_concatInstanceProperty(_context4 = ".".concat(Classes.tableBody, " .")).call(_context4, Classes.virtual, " table"));
|
|
83
119
|
}
|
|
84
120
|
}, {
|
|
85
121
|
key: "getLeftLockShadow",
|
|
86
122
|
value: function getLeftLockShadow() {
|
|
87
|
-
var
|
|
123
|
+
var _context5;
|
|
88
124
|
|
|
89
|
-
var selector = _concatInstanceProperty(
|
|
125
|
+
var selector = _concatInstanceProperty(_context5 = ".".concat(Classes.lockShadowMask, " .")).call(_context5, Classes.leftLockShadow);
|
|
90
126
|
|
|
91
127
|
return this.artTable.querySelector(selector);
|
|
92
128
|
}
|
|
93
129
|
}, {
|
|
94
130
|
key: "getRightLockShadow",
|
|
95
131
|
value: function getRightLockShadow() {
|
|
96
|
-
var
|
|
132
|
+
var _context6;
|
|
97
133
|
|
|
98
|
-
var selector = _concatInstanceProperty(
|
|
134
|
+
var selector = _concatInstanceProperty(_context6 = ".".concat(Classes.lockShadowMask, " .")).call(_context6, Classes.rightLockShadow);
|
|
99
135
|
|
|
100
136
|
return this.artTable.querySelector(selector);
|
|
101
137
|
}
|
|
@@ -107,11 +143,11 @@ export var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
107
143
|
}, {
|
|
108
144
|
key: "getRowTop",
|
|
109
145
|
value: function getRowTop(rowIndex) {
|
|
110
|
-
var
|
|
146
|
+
var _context7, _context8;
|
|
111
147
|
|
|
112
148
|
if (rowIndex === 0) return 0;
|
|
113
149
|
|
|
114
|
-
var selector = _concatInstanceProperty(
|
|
150
|
+
var selector = _concatInstanceProperty(_context7 = _concatInstanceProperty(_context8 = ".".concat(Classes.tableBody, " .")).call(_context8, Classes.tableRow, "[data-rowindex=\"")).call(_context7, rowIndex, "\"]");
|
|
115
151
|
|
|
116
152
|
var row = this.artTable.querySelector(selector);
|
|
117
153
|
var rowOffsetTop = row && row.offsetTop || 0;
|
|
@@ -12,7 +12,7 @@ import * as op from 'rxjs/operators';
|
|
|
12
12
|
import { shallowEqual } from '../utils';
|
|
13
13
|
|
|
14
14
|
function isWindow(arg) {
|
|
15
|
-
return arg.toString() === '[object Window]';
|
|
15
|
+
return arg.toString() === '[object Window]' || arg.toString() === '[object global]';
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
function isBody(arg) {
|
package/es/table/base/styles.js
CHANGED
|
@@ -120,7 +120,7 @@ export var defaultCSSVariables = {
|
|
|
120
120
|
'--header-cell-border-horizontal': '1px solid #dfe3e8'
|
|
121
121
|
};
|
|
122
122
|
export var variableConst = getCssVariableText(defaultCSSVariables);
|
|
123
|
-
export var StyledArtTableWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n user-select:none;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n
|
|
123
|
+
export var StyledArtTableWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n user-select:none;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right:none\n }\n\n th.", " {\n border-right: none;\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: auto;\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
|
|
124
124
|
export var ButtonCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
|
|
125
125
|
|
|
126
126
|
function getCssVariableText(obj) {
|
package/es/table/base/table.d.ts
CHANGED
|
@@ -145,7 +145,6 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
|
|
|
145
145
|
/** 同步横向滚动偏移量 */
|
|
146
146
|
private syncHorizontalScroll;
|
|
147
147
|
getVerticalRenderRange(useVirtual: ResolvedUseVirtual): VerticalRenderRange;
|
|
148
|
-
private getRowNodeListByEvent;
|
|
149
148
|
private handleRowMouseEnter;
|
|
150
149
|
private handleRowMouseLeave;
|
|
151
150
|
private renderTableBody;
|
package/es/table/base/table.js
CHANGED
|
@@ -95,23 +95,8 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
95
95
|
_this.resizeSubject = new Subject();
|
|
96
96
|
_this.offsetY = 0;
|
|
97
97
|
|
|
98
|
-
_this.getRowNodeListByEvent = function (e) {
|
|
99
|
-
var nodeList = null;
|
|
100
|
-
var rowIndex = e.currentTarget.dataset.rowindex;
|
|
101
|
-
|
|
102
|
-
if (rowIndex !== undefined) {
|
|
103
|
-
var _this$domHelper = _this.domHelper,
|
|
104
|
-
tableBody = _this$domHelper.tableBody,
|
|
105
|
-
tableFooter = _this$domHelper.tableFooter;
|
|
106
|
-
var targetParent = tableBody.contains(e.currentTarget) ? tableBody : tableFooter;
|
|
107
|
-
nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
return nodeList;
|
|
111
|
-
};
|
|
112
|
-
|
|
113
98
|
_this.handleRowMouseEnter = function (e) {
|
|
114
|
-
var nodeList = _this.getRowNodeListByEvent(e);
|
|
99
|
+
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
115
100
|
|
|
116
101
|
nodeList && nodeList.forEach(function (node) {
|
|
117
102
|
node.classList.add('row-hover');
|
|
@@ -119,7 +104,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
119
104
|
};
|
|
120
105
|
|
|
121
106
|
_this.handleRowMouseLeave = function (e) {
|
|
122
|
-
var nodeList = _this.getRowNodeListByEvent(e);
|
|
107
|
+
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
123
108
|
|
|
124
109
|
nodeList && nodeList.forEach(function (node) {
|
|
125
110
|
node.classList.remove('row-hover');
|
|
@@ -251,10 +236,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
251
236
|
value: function updateStickyScroll() {
|
|
252
237
|
var _a, _b;
|
|
253
238
|
|
|
254
|
-
var _this$
|
|
255
|
-
stickyScroll = _this$
|
|
256
|
-
artTable = _this$
|
|
257
|
-
stickyScrollItem = _this$
|
|
239
|
+
var _this$domHelper = this.domHelper,
|
|
240
|
+
stickyScroll = _this$domHelper.stickyScroll,
|
|
241
|
+
artTable = _this$domHelper.artTable,
|
|
242
|
+
stickyScrollItem = _this$domHelper.stickyScrollItem;
|
|
258
243
|
var _lastHasScrollY = this.hasScrollY;
|
|
259
244
|
|
|
260
245
|
if (!artTable) {
|
|
@@ -595,9 +580,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
595
580
|
value: function initSubscriptions() {
|
|
596
581
|
var _this2 = this;
|
|
597
582
|
|
|
598
|
-
var _this$
|
|
599
|
-
virtual = _this$
|
|
600
|
-
stickyScroll = _this$
|
|
583
|
+
var _this$domHelper2 = this.domHelper,
|
|
584
|
+
virtual = _this$domHelper2.virtual,
|
|
585
|
+
stickyScroll = _this$domHelper2.stickyScroll;
|
|
601
586
|
this.rootSubscription.add(throttledWindowResize$.subscribe(function () {
|
|
602
587
|
_this2.updateStickyScroll();
|
|
603
588
|
|
|
@@ -15,3 +15,4 @@ export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
|
|
|
15
15
|
export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
|
|
16
16
|
export { filter, FilterFeatureOptions } from './columnFilter';
|
|
17
17
|
export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
|
|
18
|
+
export { mergeCellHover } from './mergeCellHover';
|
|
@@ -14,4 +14,5 @@ export { columnDrag } from './columnDrag';
|
|
|
14
14
|
export { columnResize } from './columnResizeWidth';
|
|
15
15
|
export { contextMenu } from './contextMenu';
|
|
16
16
|
export { filter } from './columnFilter';
|
|
17
|
-
export { rangeSelection } from './rangeSelection';
|
|
17
|
+
export { rangeSelection } from './rangeSelection';
|
|
18
|
+
export { mergeCellHover } from './mergeCellHover';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
+
import { isLeafNode, makeRecursiveMapper, mergeCellProps } from '../../utils';
|
|
3
|
+
export function mergeCellHover() {
|
|
4
|
+
return function (pipeline) {
|
|
5
|
+
return pipeline.mapColumns(makeRecursiveMapper(function (col) {
|
|
6
|
+
if (!isLeafNode(col)) {
|
|
7
|
+
return col;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
var prevGetCellProps = col.getCellProps;
|
|
11
|
+
return _extends(_extends({}, col), {
|
|
12
|
+
getCellProps: function getCellProps(value, record, rowIndex) {
|
|
13
|
+
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
14
|
+
return mergeCellProps(prevCellProps, {
|
|
15
|
+
onMouseEnter: function onMouseEnter(e) {
|
|
16
|
+
var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
|
|
17
|
+
InRangeRow.forEach(function (row) {
|
|
18
|
+
row.classList.add('row-hover');
|
|
19
|
+
});
|
|
20
|
+
},
|
|
21
|
+
onMouseLeave: function onMouseLeave(e) {
|
|
22
|
+
var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
|
|
23
|
+
InRangeRow.forEach(function (row) {
|
|
24
|
+
row.classList.remove('row-hover');
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}));
|
|
31
|
+
};
|
|
32
|
+
}
|
|
@@ -18,4 +18,6 @@ export declare class TableDOMHelper {
|
|
|
18
18
|
getRightLockShadow(): HTMLDivElement;
|
|
19
19
|
getLoadingIndicator(): HTMLDivElement;
|
|
20
20
|
getRowTop(rowIndex: number): number;
|
|
21
|
+
getRowNodeListByEvent: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => HTMLElement[];
|
|
22
|
+
getInRangeRowByCellEvent: (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>) => unknown[];
|
|
21
23
|
}
|
|
@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.TableDOMHelper = void 0;
|
|
9
9
|
|
|
10
|
+
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
11
|
+
|
|
12
|
+
var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
|
|
13
|
+
|
|
10
14
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
11
15
|
|
|
12
16
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
|
|
@@ -54,9 +58,44 @@ var _styles = require("../styles");
|
|
|
54
58
|
// 表格 DOM 结构辅助工具
|
|
55
59
|
var TableDOMHelper = /*#__PURE__*/function () {
|
|
56
60
|
function TableDOMHelper(artTableWrapper) {
|
|
57
|
-
var
|
|
61
|
+
var _this = this,
|
|
62
|
+
_context2;
|
|
58
63
|
|
|
59
64
|
(0, _classCallCheck2.default)(this, TableDOMHelper);
|
|
65
|
+
|
|
66
|
+
this.getRowNodeListByEvent = function (e) {
|
|
67
|
+
var nodeList = null;
|
|
68
|
+
var rowIndex = e.currentTarget.dataset.rowindex;
|
|
69
|
+
|
|
70
|
+
if (rowIndex !== undefined) {
|
|
71
|
+
var targetParent = _this.tableBody.contains(e.currentTarget) ? _this.tableBody : _this.tableFooter;
|
|
72
|
+
nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return nodeList;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
this.getInRangeRowByCellEvent = function (e) {
|
|
79
|
+
var _context;
|
|
80
|
+
|
|
81
|
+
var _a;
|
|
82
|
+
|
|
83
|
+
var getParentNode = function getParentNode(ele, target) {
|
|
84
|
+
if (ele.parentNode.nodeName === target) {
|
|
85
|
+
return ele.parentNode;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return getParentNode(ele.parentNode, target);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
e = e instanceof Array ? e[0] : e;
|
|
92
|
+
var curCell = e === null || e === void 0 ? void 0 : e.currentTarget;
|
|
93
|
+
var curRow = getParentNode(curCell, 'TR');
|
|
94
|
+
var curRowSpan = parseInt(e.currentTarget.getAttribute('rowspan')) || 1;
|
|
95
|
+
var rows = (_a = getParentNode(curCell, 'TABLE')) === null || _a === void 0 ? void 0 : _a.rows;
|
|
96
|
+
return (0, _slice.default)(_context = (0, _from.default)(rows)).call(_context, curRow.rowIndex, curRow.rowIndex + curRowSpan);
|
|
97
|
+
};
|
|
98
|
+
|
|
60
99
|
this.artTableWrapper = artTableWrapper;
|
|
61
100
|
this.artTable = artTableWrapper.querySelector(".".concat(_styles.Classes.artTable));
|
|
62
101
|
this.tableHeader = this.artTable.querySelector(".".concat(_styles.Classes.tableHeader));
|
|
@@ -66,7 +105,7 @@ var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
66
105
|
this.tableElement = this.artTable.querySelector(".".concat(_styles.Classes.tableBody, " table"));
|
|
67
106
|
this.tableFooter = this.artTable.querySelector(".".concat(_styles.Classes.tableFooter));
|
|
68
107
|
this.tableFooterMain = this.artTable.querySelector(".".concat(_styles.Classes.tableFooterMain));
|
|
69
|
-
var stickyScrollSelector = (0, _concat.default)(
|
|
108
|
+
var stickyScrollSelector = (0, _concat.default)(_context2 = ".".concat(_styles.Classes.artTable, " + .")).call(_context2, _styles.Classes.stickyScroll);
|
|
70
109
|
this.stickyScroll = artTableWrapper.querySelector(stickyScrollSelector);
|
|
71
110
|
this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(_styles.Classes.stickyScrollItem));
|
|
72
111
|
}
|
|
@@ -79,32 +118,32 @@ var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
79
118
|
}, {
|
|
80
119
|
key: "getTableRows",
|
|
81
120
|
value: function getTableRows() {
|
|
82
|
-
var
|
|
121
|
+
var _context3;
|
|
83
122
|
|
|
84
|
-
var tbody = this.artTable.querySelector((0, _concat.default)(
|
|
123
|
+
var tbody = this.artTable.querySelector((0, _concat.default)(_context3 = ".".concat(_styles.Classes.tableBody, " .")).call(_context3, _styles.Classes.virtual, " table tbody"));
|
|
85
124
|
return tbody.childNodes;
|
|
86
125
|
}
|
|
87
126
|
}, {
|
|
88
127
|
key: "getTableBodyHtmlTable",
|
|
89
128
|
value: function getTableBodyHtmlTable() {
|
|
90
|
-
var
|
|
129
|
+
var _context4;
|
|
91
130
|
|
|
92
|
-
return this.artTable.querySelector((0, _concat.default)(
|
|
131
|
+
return this.artTable.querySelector((0, _concat.default)(_context4 = ".".concat(_styles.Classes.tableBody, " .")).call(_context4, _styles.Classes.virtual, " table"));
|
|
93
132
|
}
|
|
94
133
|
}, {
|
|
95
134
|
key: "getLeftLockShadow",
|
|
96
135
|
value: function getLeftLockShadow() {
|
|
97
|
-
var
|
|
136
|
+
var _context5;
|
|
98
137
|
|
|
99
|
-
var selector = (0, _concat.default)(
|
|
138
|
+
var selector = (0, _concat.default)(_context5 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context5, _styles.Classes.leftLockShadow);
|
|
100
139
|
return this.artTable.querySelector(selector);
|
|
101
140
|
}
|
|
102
141
|
}, {
|
|
103
142
|
key: "getRightLockShadow",
|
|
104
143
|
value: function getRightLockShadow() {
|
|
105
|
-
var
|
|
144
|
+
var _context6;
|
|
106
145
|
|
|
107
|
-
var selector = (0, _concat.default)(
|
|
146
|
+
var selector = (0, _concat.default)(_context6 = ".".concat(_styles.Classes.lockShadowMask, " .")).call(_context6, _styles.Classes.rightLockShadow);
|
|
108
147
|
return this.artTable.querySelector(selector);
|
|
109
148
|
}
|
|
110
149
|
}, {
|
|
@@ -115,10 +154,10 @@ var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
115
154
|
}, {
|
|
116
155
|
key: "getRowTop",
|
|
117
156
|
value: function getRowTop(rowIndex) {
|
|
118
|
-
var
|
|
157
|
+
var _context7, _context8;
|
|
119
158
|
|
|
120
159
|
if (rowIndex === 0) return 0;
|
|
121
|
-
var selector = (0, _concat.default)(
|
|
160
|
+
var selector = (0, _concat.default)(_context7 = (0, _concat.default)(_context8 = ".".concat(_styles.Classes.tableBody, " .")).call(_context8, _styles.Classes.tableRow, "[data-rowindex=\"")).call(_context7, rowIndex, "\"]");
|
|
122
161
|
var row = this.artTable.querySelector(selector);
|
|
123
162
|
var rowOffsetTop = row && row.offsetTop || 0;
|
|
124
163
|
var tableOffsetTop = this.tableElement.offsetTop || 0;
|
|
@@ -42,7 +42,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
|
42
42
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
43
43
|
|
|
44
44
|
function isWindow(arg) {
|
|
45
|
-
return arg.toString() === '[object Window]';
|
|
45
|
+
return arg.toString() === '[object Window]' || arg.toString() === '[object global]';
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
function isBody(arg) {
|
package/lib/table/base/styles.js
CHANGED
|
@@ -148,7 +148,7 @@ exports.defaultCSSVariables = defaultCSSVariables;
|
|
|
148
148
|
var variableConst = getCssVariableText(defaultCSSVariables);
|
|
149
149
|
exports.variableConst = variableConst;
|
|
150
150
|
|
|
151
|
-
var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n user-select:none;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n
|
|
151
|
+
var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n user-select:none;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right:none\n }\n\n th.", " {\n border-right: none;\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: auto;\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
|
|
152
152
|
|
|
153
153
|
exports.StyledArtTableWrapper = StyledArtTableWrapper;
|
|
154
154
|
var ButtonCSS = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
|
|
@@ -145,7 +145,6 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
|
|
|
145
145
|
/** 同步横向滚动偏移量 */
|
|
146
146
|
private syncHorizontalScroll;
|
|
147
147
|
getVerticalRenderRange(useVirtual: ResolvedUseVirtual): VerticalRenderRange;
|
|
148
|
-
private getRowNodeListByEvent;
|
|
149
148
|
private handleRowMouseEnter;
|
|
150
149
|
private handleRowMouseLeave;
|
|
151
150
|
private renderTableBody;
|
package/lib/table/base/table.js
CHANGED
|
@@ -145,23 +145,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
145
145
|
_this.resizeSubject = new _rxjs.Subject();
|
|
146
146
|
_this.offsetY = 0;
|
|
147
147
|
|
|
148
|
-
_this.getRowNodeListByEvent = function (e) {
|
|
149
|
-
var nodeList = null;
|
|
150
|
-
var rowIndex = e.currentTarget.dataset.rowindex;
|
|
151
|
-
|
|
152
|
-
if (rowIndex !== undefined) {
|
|
153
|
-
var _this$domHelper = _this.domHelper,
|
|
154
|
-
tableBody = _this$domHelper.tableBody,
|
|
155
|
-
tableFooter = _this$domHelper.tableFooter;
|
|
156
|
-
var targetParent = tableBody.contains(e.currentTarget) ? tableBody : tableFooter;
|
|
157
|
-
nodeList = targetParent.querySelectorAll("tr[data-rowindex=\"".concat(rowIndex, "\"]"));
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
return nodeList;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
148
|
_this.handleRowMouseEnter = function (e) {
|
|
164
|
-
var nodeList = _this.getRowNodeListByEvent(e);
|
|
149
|
+
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
165
150
|
|
|
166
151
|
nodeList && nodeList.forEach(function (node) {
|
|
167
152
|
node.classList.add('row-hover');
|
|
@@ -169,7 +154,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
169
154
|
};
|
|
170
155
|
|
|
171
156
|
_this.handleRowMouseLeave = function (e) {
|
|
172
|
-
var nodeList = _this.getRowNodeListByEvent(e);
|
|
157
|
+
var nodeList = _this.domHelper.getRowNodeListByEvent(e);
|
|
173
158
|
|
|
174
159
|
nodeList && nodeList.forEach(function (node) {
|
|
175
160
|
node.classList.remove('row-hover');
|
|
@@ -302,10 +287,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
302
287
|
value: function updateStickyScroll() {
|
|
303
288
|
var _a, _b;
|
|
304
289
|
|
|
305
|
-
var _this$
|
|
306
|
-
stickyScroll = _this$
|
|
307
|
-
artTable = _this$
|
|
308
|
-
stickyScrollItem = _this$
|
|
290
|
+
var _this$domHelper = this.domHelper,
|
|
291
|
+
stickyScroll = _this$domHelper.stickyScroll,
|
|
292
|
+
artTable = _this$domHelper.artTable,
|
|
293
|
+
stickyScrollItem = _this$domHelper.stickyScrollItem;
|
|
309
294
|
var _lastHasScrollY = this.hasScrollY;
|
|
310
295
|
|
|
311
296
|
if (!artTable) {
|
|
@@ -642,9 +627,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
642
627
|
value: function initSubscriptions() {
|
|
643
628
|
var _this2 = this;
|
|
644
629
|
|
|
645
|
-
var _this$
|
|
646
|
-
virtual = _this$
|
|
647
|
-
stickyScroll = _this$
|
|
630
|
+
var _this$domHelper2 = this.domHelper,
|
|
631
|
+
virtual = _this$domHelper2.virtual,
|
|
632
|
+
stickyScroll = _this$domHelper2.stickyScroll;
|
|
648
633
|
this.rootSubscription.add(_utils.throttledWindowResize$.subscribe(function () {
|
|
649
634
|
_this2.updateStickyScroll();
|
|
650
635
|
|
|
@@ -15,3 +15,4 @@ export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
|
|
|
15
15
|
export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
|
|
16
16
|
export { filter, FilterFeatureOptions } from './columnFilter';
|
|
17
17
|
export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
|
|
18
|
+
export { mergeCellHover } from './mergeCellHover';
|
|
@@ -55,6 +55,12 @@ Object.defineProperty(exports, "filter", {
|
|
|
55
55
|
return _filterInstanceProperty(_columnFilter);
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
+
Object.defineProperty(exports, "mergeCellHover", {
|
|
59
|
+
enumerable: true,
|
|
60
|
+
get: function get() {
|
|
61
|
+
return _mergeCellHover.mergeCellHover;
|
|
62
|
+
}
|
|
63
|
+
});
|
|
58
64
|
Object.defineProperty(exports, "multiSelect", {
|
|
59
65
|
enumerable: true,
|
|
60
66
|
get: function get() {
|
|
@@ -148,4 +154,6 @@ var _contextMenu = require("./contextMenu");
|
|
|
148
154
|
|
|
149
155
|
var _columnFilter = require("./columnFilter");
|
|
150
156
|
|
|
151
|
-
var _rangeSelection = require("./rangeSelection");
|
|
157
|
+
var _rangeSelection = require("./rangeSelection");
|
|
158
|
+
|
|
159
|
+
var _mergeCellHover = require("./mergeCellHover");
|