@kdcloudjs/table 1.1.4-canary.2 → 1.1.4
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 +280 -625
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +9 -10
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/styles.d.ts +2 -10
- package/es/table/base/styles.js +7 -17
- package/es/table/base/table.d.ts +0 -2
- package/es/table/base/table.js +53 -31
- package/es/table/base/utils.d.ts +0 -7
- package/es/table/base/utils.js +1 -29
- package/es/table/pipeline/features/columnDrag.js +4 -5
- package/es/table/pipeline/features/columnFilter.d.ts +2 -4
- package/es/table/pipeline/features/columnFilter.js +17 -39
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +2 -22
- package/es/table/pipeline/features/filter/Filter.d.ts +2 -3
- package/es/table/pipeline/features/filter/Filter.js +34 -44
- package/es/table/pipeline/features/filter/FilterPanel.d.ts +1 -2
- package/es/table/pipeline/features/filter/FilterPanel.js +20 -29
- package/es/table/pipeline/features/filter/util.js +4 -4
- package/es/table/pipeline/features/index.d.ts +0 -1
- package/es/table/pipeline/features/index.js +1 -2
- package/es/table/pipeline/features/multiSelect.js +2 -7
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +28 -156
- package/es/table/pipeline/features/singleSelect.js +0 -4
- package/es/table/pipeline/features/treeMode.d.ts +0 -2
- package/es/table/pipeline/features/treeMode.js +20 -18
- package/es/table/pipeline/pipeline.d.ts +1 -5
- package/es/table/pipeline/pipeline.js +10 -11
- package/es/table/utils/mergeCellProps.js +6 -2
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +2 -10
- package/lib/table/base/styles.js +7 -17
- package/lib/table/base/table.d.ts +0 -2
- package/lib/table/base/table.js +53 -31
- package/lib/table/base/utils.d.ts +0 -7
- package/lib/table/base/utils.js +1 -35
- package/lib/table/pipeline/features/columnDrag.js +4 -5
- package/lib/table/pipeline/features/columnFilter.d.ts +2 -4
- package/lib/table/pipeline/features/columnFilter.js +17 -37
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +1 -23
- package/lib/table/pipeline/features/filter/Filter.d.ts +2 -3
- package/lib/table/pipeline/features/filter/Filter.js +34 -46
- package/lib/table/pipeline/features/filter/FilterPanel.d.ts +1 -2
- package/lib/table/pipeline/features/filter/FilterPanel.js +19 -30
- package/lib/table/pipeline/features/filter/util.js +4 -4
- package/lib/table/pipeline/features/index.d.ts +0 -1
- package/lib/table/pipeline/features/index.js +1 -15
- package/lib/table/pipeline/features/multiSelect.js +1 -6
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +30 -158
- package/lib/table/pipeline/features/singleSelect.js +0 -4
- package/lib/table/pipeline/features/treeMode.d.ts +0 -2
- package/lib/table/pipeline/features/treeMode.js +22 -19
- package/lib/table/pipeline/pipeline.d.ts +1 -5
- package/lib/table/pipeline/pipeline.js +10 -12
- package/lib/table/utils/mergeCellProps.js +6 -2
- package/package.json +3 -3
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +0 -20
- package/es/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/es/table/pipeline/features/footerDataSource.js +0 -25
- package/es/table/utils/keyCode.d.ts +0 -4
- package/es/table/utils/keyCode.js +0 -4
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +0 -30
- package/lib/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/lib/table/pipeline/features/footerDataSource.js +0 -41
- package/lib/table/utils/keyCode.d.ts +0 -4
- package/lib/table/utils/keyCode.js +0 -11
|
@@ -124,7 +124,7 @@ export function HtmlTable(_ref) {
|
|
|
124
124
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
125
125
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
126
126
|
positionStyle.position = 'sticky';
|
|
127
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) -
|
|
127
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({
|
|
@@ -2,7 +2,6 @@ export declare const LOCK_SHADOW_PADDING = 20;
|
|
|
2
2
|
export declare const Classes: {
|
|
3
3
|
/** BaseTable 表格组件的外层包裹 div */
|
|
4
4
|
readonly artTableWrapper: string;
|
|
5
|
-
readonly artTableBordered: string;
|
|
6
5
|
readonly artTable: string;
|
|
7
6
|
readonly tableHeaderMain: string;
|
|
8
7
|
readonly tableHeader: string;
|
|
@@ -41,8 +40,6 @@ export declare const Classes: {
|
|
|
41
40
|
readonly button: string;
|
|
42
41
|
readonly buttonPrimary: string;
|
|
43
42
|
readonly filterIcon: string;
|
|
44
|
-
readonly rangeSelection: string;
|
|
45
|
-
readonly tableCellRangeSingleCell: string;
|
|
46
43
|
readonly tableCellRangeSelected: string;
|
|
47
44
|
readonly tableCellRangeTop: string;
|
|
48
45
|
readonly tableCellRangeLeft: string;
|
|
@@ -63,9 +60,6 @@ export declare const Classes: {
|
|
|
63
60
|
readonly leaf: string;
|
|
64
61
|
readonly expanded: string;
|
|
65
62
|
readonly collapsed: string;
|
|
66
|
-
readonly popup: string;
|
|
67
|
-
readonly popupHeader: string;
|
|
68
|
-
readonly popupBody: string;
|
|
69
63
|
};
|
|
70
64
|
export declare const MenuClasses: {
|
|
71
65
|
menu: string;
|
|
@@ -118,13 +112,13 @@ export declare type BaseTableCSSVariables = Partial<{
|
|
|
118
112
|
'--border-color': string;
|
|
119
113
|
/** 单元格边框,默认为 1px solid #dfe3e8 */
|
|
120
114
|
'--cell-border': string;
|
|
121
|
-
/** 单元格上下边框,默认为
|
|
115
|
+
/** 单元格上下边框,默认为 #dfe3e8 */
|
|
122
116
|
'--cell-border-horizontal': string;
|
|
123
117
|
/** 单元格左右边框,默认为 #dfe3e8 */
|
|
124
118
|
'--cell-border-vertical': string;
|
|
125
119
|
/** 表头单元格边框,默认为 1px solid #dfe3e8 */
|
|
126
120
|
'--header-cell-border': string;
|
|
127
|
-
/** 表头单元格上下边框,默认为
|
|
121
|
+
/** 表头单元格上下边框,默认为 1px solid #dfe3e8 */
|
|
128
122
|
'--header-cell-border-horizontal': string;
|
|
129
123
|
/** 表头单元格左右边框,默认为 1px solid #dfe3e8 */
|
|
130
124
|
'--header-cell-border-vertical': string;
|
|
@@ -154,9 +148,7 @@ export declare const defaultCSSVariables: {
|
|
|
154
148
|
'--cell-border-horizontal': string;
|
|
155
149
|
'---cell-border-vertical': string;
|
|
156
150
|
'--header-cell-border': string;
|
|
157
|
-
'--cell-border-vertical': string;
|
|
158
151
|
'--header-cell-border-horizontal': string;
|
|
159
|
-
'--header-cell-border-vertical': string;
|
|
160
152
|
};
|
|
161
153
|
export declare const variableConst: string;
|
|
162
154
|
export declare const StyledArtTableWrapper: any;
|
package/es/table/base/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
4
4
|
|
|
5
5
|
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
6
6
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
@@ -10,7 +10,6 @@ var prefix = 'kd-';
|
|
|
10
10
|
export var Classes = {
|
|
11
11
|
/** BaseTable 表格组件的外层包裹 div */
|
|
12
12
|
artTableWrapper: "".concat(prefix, "table-wrapper"),
|
|
13
|
-
artTableBordered: "".concat(prefix, "table-bordered"),
|
|
14
13
|
artTable: "".concat(prefix, "table"),
|
|
15
14
|
tableHeaderMain: "".concat(prefix, "table-header-main"),
|
|
16
15
|
tableHeader: "".concat(prefix, "table-header"),
|
|
@@ -54,8 +53,6 @@ export var Classes = {
|
|
|
54
53
|
button: "".concat(prefix, "btn"),
|
|
55
54
|
buttonPrimary: "".concat(prefix, "btn-primary"),
|
|
56
55
|
filterIcon: "".concat(prefix, "filter-icon"),
|
|
57
|
-
rangeSelection: "".concat(prefix, "range-selection"),
|
|
58
|
-
tableCellRangeSingleCell: "".concat(prefix, "table-cell-range-single-cell"),
|
|
59
56
|
tableCellRangeSelected: "".concat(prefix, "table-cell-range-selected"),
|
|
60
57
|
tableCellRangeTop: "".concat(prefix, "table-cell-range-top"),
|
|
61
58
|
tableCellRangeLeft: "".concat(prefix, "table-cell-range-left"),
|
|
@@ -75,10 +72,7 @@ export var Classes = {
|
|
|
75
72
|
rowSpan: "".concat(prefix, "row-span"),
|
|
76
73
|
leaf: "".concat(prefix, "leaf"),
|
|
77
74
|
expanded: "".concat(prefix, "expanded"),
|
|
78
|
-
collapsed: "".concat(prefix, "collapsed")
|
|
79
|
-
popup: "".concat(prefix, "popup"),
|
|
80
|
-
popupHeader: "".concat(prefix, "popup-header"),
|
|
81
|
-
popupBody: "".concat(prefix, "popup-body")
|
|
75
|
+
collapsed: "".concat(prefix, "collapsed")
|
|
82
76
|
};
|
|
83
77
|
export var MenuClasses = {
|
|
84
78
|
menu: "".concat(prefix, "table-menu"),
|
|
@@ -97,7 +91,7 @@ var Z = {
|
|
|
97
91
|
scrollItem: 30,
|
|
98
92
|
loadingIndicator: 40
|
|
99
93
|
};
|
|
100
|
-
var outerBorderStyleMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
|
|
94
|
+
var outerBorderStyleMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n --border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
|
|
101
95
|
export var defaultCSSVariables = {
|
|
102
96
|
'--row-height': '48px',
|
|
103
97
|
'--color': '#333',
|
|
@@ -107,7 +101,7 @@ export var defaultCSSVariables = {
|
|
|
107
101
|
'--primary-color': '#5582F3',
|
|
108
102
|
'--primary-color-level1': 'rgb(242, 248, 255)',
|
|
109
103
|
'--primary-color-level2': 'rgb(135, 173, 255)',
|
|
110
|
-
'--icon-color': '#
|
|
104
|
+
'--icon-color': '#bfbfbf',
|
|
111
105
|
'--strong-border-color': '#d9d9d9',
|
|
112
106
|
'--header-row-height': '32px',
|
|
113
107
|
'--header-color': '#333',
|
|
@@ -123,15 +117,11 @@ export var defaultCSSVariables = {
|
|
|
123
117
|
'--cell-border-horizontal': '1px solid #dfe3e8',
|
|
124
118
|
'---cell-border-vertical': '1px solid #dfe3e8',
|
|
125
119
|
'--header-cell-border': '1px solid #dfe3e8',
|
|
126
|
-
'--cell-border-
|
|
127
|
-
'--header-cell-border-horizontal': '1px solid #dfe3e8',
|
|
128
|
-
'--header-cell-border-vertical': '1px solid #dfe3e8'
|
|
120
|
+
'--header-cell-border-horizontal': '1px solid #dfe3e8'
|
|
129
121
|
};
|
|
130
122
|
export var variableConst = getCssVariableText(defaultCSSVariables);
|
|
131
|
-
var
|
|
132
|
-
var
|
|
133
|
-
export var StyledArtTableWrapper = styled.div(_templateObject4 || (_templateObject4 = _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 // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\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 }\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 user-select:none;\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: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: var(--header-cell-border-vertical);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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 padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\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 \n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, 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, Classes.tableHeaderCellResize);
|
|
134
|
-
export var ButtonCSS = css(_templateObject5 || (_templateObject5 = _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);
|
|
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
|
+
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);
|
|
135
125
|
|
|
136
126
|
function getCssVariableText(obj) {
|
|
137
127
|
return _Object$keys(obj).reduce(function (acc, key) {
|
package/es/table/base/table.d.ts
CHANGED
package/es/table/base/table.js
CHANGED
|
@@ -3,13 +3,13 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
|
|
3
3
|
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
4
4
|
import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
|
|
5
5
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
6
|
-
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
7
6
|
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
8
7
|
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
|
|
9
8
|
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
|
|
10
9
|
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
|
|
11
10
|
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
|
|
12
11
|
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
|
|
12
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
13
13
|
|
|
14
14
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
15
15
|
|
|
@@ -37,10 +37,37 @@ import { getFullRenderRange, makeRowHeightManager } from './helpers/rowHeightMan
|
|
|
37
37
|
import { TableDOMHelper } from './helpers/TableDOMUtils';
|
|
38
38
|
import { HtmlTable } from './html-table';
|
|
39
39
|
import Loading from './loading';
|
|
40
|
-
import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper } from './styles';
|
|
41
|
-
import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$, getTableScrollFooterDOM, getTableScrollHeaderDOM
|
|
40
|
+
import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper, defaultCSSVariables } from './styles';
|
|
41
|
+
import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$, getTableScrollFooterDOM, getTableScrollHeaderDOM } from './utils';
|
|
42
|
+
import cssVars from 'css-vars-ponyfill';
|
|
42
43
|
import { console, browserType } from '../utils';
|
|
43
44
|
import getTableRenderTemplate from './renderTemplates';
|
|
45
|
+
|
|
46
|
+
var cssPolifill = function cssPolifill(_ref) {
|
|
47
|
+
var variables = _ref.variables,
|
|
48
|
+
enableCSSVariables = _ref.enableCSSVariables;
|
|
49
|
+
|
|
50
|
+
// const style = document.createElement('style')
|
|
51
|
+
// style.type = 'text/css'
|
|
52
|
+
// style.innerHTML = '.aaa{ --color: red; }'
|
|
53
|
+
// document.getElementsByTagName('head').item(0).appendChild(style)
|
|
54
|
+
// const variableNames = variableConst.match(/--.*?(?=:)/g)
|
|
55
|
+
// variables = variableNames.map((name) => rootElement.style[name])
|
|
56
|
+
if (enableCSSVariables === false) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
cssVars({
|
|
61
|
+
// exclude: 'link[href*="semantic-ui"]',
|
|
62
|
+
// onlyLegacy: false,
|
|
63
|
+
// rootElement: rootElement,
|
|
64
|
+
include: 'style[data-styled]',
|
|
65
|
+
variables: _extends({}, defaultCSSVariables, variables),
|
|
66
|
+
watch: true,
|
|
67
|
+
silent: true
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
|
|
44
71
|
var propsDotEmptyContentDeprecatedWarned = false;
|
|
45
72
|
|
|
46
73
|
function warnPropsDotEmptyContentIsDeprecated() {
|
|
@@ -450,8 +477,6 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
450
477
|
}, {
|
|
451
478
|
key: "render",
|
|
452
479
|
value: function render() {
|
|
453
|
-
var _cx;
|
|
454
|
-
|
|
455
480
|
// console.log('render table')
|
|
456
481
|
var info = calculateRenderInfo(this);
|
|
457
482
|
this.lastInfo = info;
|
|
@@ -467,31 +492,30 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
467
492
|
isLoading = _this$props6.isLoading,
|
|
468
493
|
getTableProps = _this$props6.getTableProps,
|
|
469
494
|
footerDataSource = _this$props6.footerDataSource,
|
|
470
|
-
components = _this$props6.components
|
|
471
|
-
|
|
472
|
-
var artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
|
|
495
|
+
components = _this$props6.components;
|
|
496
|
+
var artTableWrapperClassName = cx(Classes.artTableWrapper, {
|
|
473
497
|
'use-outer-border': useOuterBorder,
|
|
474
498
|
empty: dataSource.length === 0,
|
|
475
499
|
lock: info.hasLockColumn,
|
|
476
500
|
'has-header': hasHeader,
|
|
477
501
|
'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
|
|
478
502
|
'has-footer': footerDataSource.length > 0,
|
|
479
|
-
'sticky-footer': isStickyFooter
|
|
480
|
-
|
|
503
|
+
'sticky-footer': isStickyFooter,
|
|
504
|
+
'ie-polyfill-wrapper': browserType.isIE
|
|
505
|
+
}, className);
|
|
481
506
|
|
|
482
507
|
var artTableWrapperProps = _defineProperty({
|
|
483
508
|
className: artTableWrapperClassName,
|
|
484
509
|
style: style
|
|
485
510
|
}, STYLED_REF_PROP, this.artTableWrapperRef);
|
|
486
511
|
|
|
487
|
-
var tableProps = getTableProps() || {};
|
|
488
512
|
return /*#__PURE__*/React.createElement(StyledArtTableWrapper, _extends({}, artTableWrapperProps), /*#__PURE__*/React.createElement(Loading, {
|
|
489
513
|
visible: isLoading,
|
|
490
514
|
LoadingIcon: components.LoadingIcon,
|
|
491
515
|
LoadingContentWrapper: components.LoadingContentWrapper
|
|
492
|
-
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
493
|
-
className:
|
|
494
|
-
}), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
516
|
+
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
517
|
+
className: Classes.artTable
|
|
518
|
+
}, getTableProps()), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
495
519
|
}
|
|
496
520
|
}, {
|
|
497
521
|
key: "componentDidMount",
|
|
@@ -508,12 +532,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
508
532
|
|
|
509
533
|
var _this$props7 = this.props,
|
|
510
534
|
cssVariables = _this$props7.cssVariables,
|
|
511
|
-
enableCSSVariables = _this$props7.enableCSSVariables
|
|
512
|
-
bordered = _this$props7.bordered;
|
|
535
|
+
enableCSSVariables = _this$props7.enableCSSVariables;
|
|
513
536
|
cssPolifill({
|
|
514
537
|
variables: cssVariables || {},
|
|
515
|
-
enableCSSVariables: enableCSSVariables
|
|
516
|
-
bordered: bordered
|
|
538
|
+
enableCSSVariables: enableCSSVariables
|
|
517
539
|
});
|
|
518
540
|
(_b = (_a = this.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, this.domHelper.tableBody.clientWidth);
|
|
519
541
|
(_d = (_c = this.props).setTableDomHelper) === null || _d === void 0 ? void 0 : _d.call(_c, this.domHelper);
|
|
@@ -585,15 +607,15 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
585
607
|
|
|
586
608
|
this.rootSubscription.add(combineLatest([richVisibleRects$.pipe(op.map(function (p) {
|
|
587
609
|
return p.clipRect;
|
|
588
|
-
}), op.distinctUntilChanged(shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (
|
|
589
|
-
var
|
|
590
|
-
prevProps =
|
|
591
|
-
props =
|
|
610
|
+
}), op.distinctUntilChanged(shallowEqual)), this.props$.pipe(op.startWith(null), op.pairwise(), op.filter(function (_ref2) {
|
|
611
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
612
|
+
prevProps = _ref3[0],
|
|
613
|
+
props = _ref3[1];
|
|
592
614
|
|
|
593
615
|
return prevProps == null || !prevProps.isLoading && props.isLoading;
|
|
594
|
-
}))]).subscribe(function (
|
|
595
|
-
var
|
|
596
|
-
clipRect =
|
|
616
|
+
}))]).subscribe(function (_ref4) {
|
|
617
|
+
var _ref5 = _slicedToArray(_ref4, 1),
|
|
618
|
+
clipRect = _ref5[0];
|
|
597
619
|
|
|
598
620
|
var loadingIndicator = _this2.domHelper.getLoadingIndicator();
|
|
599
621
|
|
|
@@ -612,9 +634,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
612
634
|
horizontal = _this2$lastInfo$useVi.horizontal,
|
|
613
635
|
vertical = _this2$lastInfo$useVi.vertical;
|
|
614
636
|
return horizontal || vertical;
|
|
615
|
-
}), op.map(function (
|
|
616
|
-
var clipRect =
|
|
617
|
-
offsetY =
|
|
637
|
+
}), op.map(function (_ref6) {
|
|
638
|
+
var clipRect = _ref6.clipRect,
|
|
639
|
+
offsetY = _ref6.offsetY;
|
|
618
640
|
return {
|
|
619
641
|
maxRenderHeight: clipRect.bottom - clipRect.top,
|
|
620
642
|
maxRenderWidth: clipRect.right - clipRect.left,
|
|
@@ -631,9 +653,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
631
653
|
})).subscribe(function (sizeAndOffset) {
|
|
632
654
|
_this2.setState(sizeAndOffset);
|
|
633
655
|
}));
|
|
634
|
-
this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (
|
|
635
|
-
var clipRect =
|
|
636
|
-
offsetY =
|
|
656
|
+
this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref7) {
|
|
657
|
+
var clipRect = _ref7.clipRect,
|
|
658
|
+
offsetY = _ref7.offsetY;
|
|
637
659
|
return {
|
|
638
660
|
maxRenderHeight: clipRect.bottom - clipRect.top,
|
|
639
661
|
maxRenderWidth: clipRect.right - clipRect.left,
|
package/es/table/base/utils.d.ts
CHANGED
|
@@ -36,11 +36,4 @@ export declare function shallowEqual<T>(objA: T, objB: T): boolean;
|
|
|
36
36
|
export declare function composeRowPropsGetter(getRowProps: (record: any, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement>, pendingRowProps?: React.HTMLAttributes<HTMLTableRowElement>): (record: any, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement>;
|
|
37
37
|
export declare function getTableScrollHeaderDOM(domHelper: TableDOMHelper): HTMLDivElement;
|
|
38
38
|
export declare function getTableScrollFooterDOM(domHelper: TableDOMHelper): HTMLDivElement;
|
|
39
|
-
export declare const cssPolifill: ({ variables, enableCSSVariables, bordered }: {
|
|
40
|
-
variables: {
|
|
41
|
-
[key: string]: any;
|
|
42
|
-
};
|
|
43
|
-
enableCSSVariables?: boolean;
|
|
44
|
-
bordered?: boolean;
|
|
45
|
-
}) => void;
|
|
46
39
|
export {};
|
package/es/table/base/utils.js
CHANGED
|
@@ -18,10 +18,8 @@ import { asyncScheduler, BehaviorSubject, defer, fromEvent, Subscription } from
|
|
|
18
18
|
import { map, throttleTime } from 'rxjs/operators';
|
|
19
19
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
20
20
|
import * as styledComponents from 'styled-components';
|
|
21
|
-
import cssVars from 'css-vars-ponyfill';
|
|
22
21
|
import mergeCellProps from '../utils/mergeCellProps';
|
|
23
22
|
import { browserType } from '../utils';
|
|
24
|
-
import { defaultCSSVariables } from './styles';
|
|
25
23
|
/** styled-components 类库的版本,ali-react-table 同时支持 v3 和 v5 */
|
|
26
24
|
|
|
27
25
|
export var STYLED_VERSION = styledComponents.createGlobalStyle != null ? 'v5' : 'v3';
|
|
@@ -213,30 +211,4 @@ export function getTableScrollHeaderDOM(domHelper) {
|
|
|
213
211
|
}
|
|
214
212
|
export function getTableScrollFooterDOM(domHelper) {
|
|
215
213
|
return browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
|
|
216
|
-
}
|
|
217
|
-
export var cssPolifill = function cssPolifill(_ref) {
|
|
218
|
-
var variables = _ref.variables,
|
|
219
|
-
enableCSSVariables = _ref.enableCSSVariables,
|
|
220
|
-
bordered = _ref.bordered;
|
|
221
|
-
|
|
222
|
-
if (enableCSSVariables === false) {
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
var conditionCSSVariables = {}; // 默认情况下存在td、th无左右边框,开启`bordered`属性后才开启,否则隐藏这两种属性
|
|
227
|
-
|
|
228
|
-
if (!bordered) {
|
|
229
|
-
conditionCSSVariables['--cell-border-vertical'] = 'none';
|
|
230
|
-
conditionCSSVariables['--header-cell-border-vertical'] = 'none';
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
cssVars({
|
|
234
|
-
// exclude: 'link[href*="semantic-ui"]',
|
|
235
|
-
// onlyLegacy: false,
|
|
236
|
-
// rootElement: rootElement,
|
|
237
|
-
include: 'style[data-styled]',
|
|
238
|
-
variables: _extends({}, defaultCSSVariables, variables, conditionCSSVariables),
|
|
239
|
-
watch: true,
|
|
240
|
-
silent: true
|
|
241
|
-
});
|
|
242
|
-
};
|
|
214
|
+
}
|
|
@@ -65,7 +65,7 @@ export function columnDrag() {
|
|
|
65
65
|
},
|
|
66
66
|
headerCellProps: mergeCellProps(col.headerCellProps, {
|
|
67
67
|
onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
|
|
68
|
-
if (e.button !== 0
|
|
68
|
+
if (e.button !== 0) {
|
|
69
69
|
return;
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -241,14 +241,13 @@ export function columnDrag() {
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
function handleMouseUp(e) {
|
|
244
|
+
e.stopPropagation();
|
|
244
245
|
document.body.removeEventListener('mousemove', handleMouseMove);
|
|
245
246
|
document.body.removeEventListener('mouseup', handleMouseUp);
|
|
246
|
-
window.removeEventListener('selectstart', disableSelect);
|
|
247
|
+
window.removeEventListener('selectstart', disableSelect); // 阻止列头点击事件,防止拖动后触发列头过滤事件
|
|
247
248
|
|
|
248
249
|
if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件,防止拖动后触发列头过滤事件
|
|
250
|
+
currentTarget.addEventListener('click', stopClickPropagation);
|
|
252
251
|
}
|
|
253
252
|
|
|
254
253
|
window.requestAnimationFrame(function () {
|
|
@@ -12,11 +12,9 @@ export interface FilterFeatureOptions {
|
|
|
12
12
|
keepDataSource?: boolean;
|
|
13
13
|
/** 过滤模式。单列过滤 single,多列过滤 multiple,默认为多选 */
|
|
14
14
|
mode?: 'single' | 'multiple';
|
|
15
|
-
|
|
16
|
-
filterIcon?: ReactNode
|
|
15
|
+
/**过滤图标 */
|
|
16
|
+
filterIcon?: ReactNode;
|
|
17
17
|
/** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
|
|
18
18
|
stopClickEventPropagation?: boolean;
|
|
19
|
-
/** 是否隐藏过滤弹出菜单header区域 */
|
|
20
|
-
hideFilterPopupHeader?: boolean;
|
|
21
19
|
}
|
|
22
20
|
export declare function filter(opts?: FilterFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -28,8 +28,7 @@ export function filter() {
|
|
|
28
28
|
keepDataSource = opts.keepDataSource,
|
|
29
29
|
mode = opts.mode,
|
|
30
30
|
filterIcon = opts.filterIcon,
|
|
31
|
-
stopClickEventPropagation = opts.stopClickEventPropagation
|
|
32
|
-
hideFilterPopupHeader = opts.hideFilterPopupHeader;
|
|
31
|
+
stopClickEventPropagation = opts.stopClickEventPropagation;
|
|
33
32
|
var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
|
|
34
33
|
inputFilters = mode === 'single' ? _sliceInstanceProperty(inputFilters).call(inputFilters, 0, 1) : inputFilters;
|
|
35
34
|
var inputFiltersMap = new _Map(_mapInstanceProperty(inputFilters).call(inputFilters, function (filterItem) {
|
|
@@ -40,7 +39,7 @@ export function filter() {
|
|
|
40
39
|
return _mapInstanceProperty(columns).call(columns, dfs);
|
|
41
40
|
|
|
42
41
|
function dfs(col) {
|
|
43
|
-
var _a, _b, _c, _d, _e
|
|
42
|
+
var _a, _b, _c, _d, _e;
|
|
44
43
|
|
|
45
44
|
var result = _extends({}, col);
|
|
46
45
|
|
|
@@ -82,20 +81,18 @@ export function filter() {
|
|
|
82
81
|
};
|
|
83
82
|
|
|
84
83
|
var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
|
|
85
|
-
|
|
86
|
-
result.title = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [internals.safeRenderHeader(_extends(_extends({}, col), {
|
|
84
|
+
result.title = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [internals.safeRenderHeader(_extends(_extends({}, col), {
|
|
87
85
|
title: null
|
|
88
86
|
}))])), [/*#__PURE__*/React.createElement(Filter, {
|
|
89
87
|
key: "filter",
|
|
90
88
|
FilterPanelContent: filterPanel,
|
|
91
|
-
filterIcon:
|
|
89
|
+
filterIcon: filterIcon,
|
|
92
90
|
filterModel: inputFiltersMap.get(col.code),
|
|
93
91
|
setFilterModel: handleFilterChanged,
|
|
94
92
|
setFilter: setFilter,
|
|
95
93
|
isFilterActive: filterActive,
|
|
96
94
|
className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
|
|
97
|
-
stopClickEventPropagation: stopClickEventPropagation
|
|
98
|
-
hideFilterPopupHeader: hideFilterPopupHeader
|
|
95
|
+
stopClickEventPropagation: stopClickEventPropagation
|
|
99
96
|
})]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
|
|
100
97
|
// style: {
|
|
101
98
|
// paddingRight: '18px'
|
|
@@ -137,8 +134,8 @@ export function filter() {
|
|
|
137
134
|
return [item.key, _extends({}, item)];
|
|
138
135
|
}));
|
|
139
136
|
|
|
140
|
-
function isMatchedFilterCondition(record) {
|
|
141
|
-
return filtersKeys.
|
|
137
|
+
function isMatchedFilterCondition(record, rowIndex) {
|
|
138
|
+
return !filtersKeys.some(function (key) {
|
|
142
139
|
var _a, _b;
|
|
143
140
|
|
|
144
141
|
var filterItem = inputFiltersMap.get(key);
|
|
@@ -152,43 +149,24 @@ export function filter() {
|
|
|
152
149
|
} else {
|
|
153
150
|
console.warn("\u5217[".concat(key, "]\u672A\u914D\u7F6E\u7B5B\u9009\u51FD\u6570\uFF0C\u8BF7\u8BBE\u7F6E column.features.filterable \u6765\u4F5C\u4E3A\u8BE5\u5217\u7684\u7B5B\u9009\u51FD\u6570, \u76EE\u524D\u4F7F\u7528\u9ED8\u8BA4\u5305\u542B\u7B5B\u9009\u51FD\u6570"));
|
|
154
151
|
comparisonFn = _filterInstanceProperty(defaultFilterOptionsMap.get('contain'));
|
|
155
|
-
}
|
|
152
|
+
} // 不符合过滤条件,退出循环
|
|
156
153
|
|
|
157
|
-
|
|
154
|
+
|
|
155
|
+
return !comparisonFn(_filterInstanceProperty(filterItem), filterItem)(internals.safeGetValue(columnsMap.get(key), record, rowIndex), record);
|
|
158
156
|
});
|
|
159
157
|
}
|
|
160
158
|
|
|
161
|
-
return
|
|
159
|
+
return dataSource.reduce(function (pre, record, rowIndex) {
|
|
160
|
+
if (isMatchedFilterCondition(record, rowIndex)) {
|
|
161
|
+
return _concatInstanceProperty(pre).call(pre, [record]);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
return pre;
|
|
165
|
+
}, []);
|
|
162
166
|
}
|
|
163
167
|
|
|
164
168
|
pipeline.dataSource(processDataSource(dataSource));
|
|
165
169
|
pipeline.columns(processColumns(columns));
|
|
166
170
|
return pipeline;
|
|
167
171
|
};
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
function layeredFilter(array, matchFn) {
|
|
171
|
-
return dfs(array);
|
|
172
|
-
|
|
173
|
-
function dfs(rows) {
|
|
174
|
-
var _context6;
|
|
175
|
-
|
|
176
|
-
var parentMatched = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
177
|
-
return _filterInstanceProperty(_context6 = _mapInstanceProperty(rows).call(rows, function (row) {
|
|
178
|
-
var currentMatched = matchFn(row);
|
|
179
|
-
|
|
180
|
-
if (isLeafNode(row)) {
|
|
181
|
-
return (parentMatched || currentMatched) && _extends({}, row);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
var children = row.children;
|
|
185
|
-
|
|
186
|
-
var rowAfterFilterChildren = _extends(_extends({}, row), {
|
|
187
|
-
children: dfs(children, parentMatched || currentMatched)
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
var matchedByChildren = !isLeafNode(rowAfterFilterChildren);
|
|
191
|
-
return (parentMatched || currentMatched || matchedByChildren) && rowAfterFilterChildren;
|
|
192
|
-
})).call(_context6, Boolean);
|
|
193
|
-
}
|
|
194
172
|
}
|
|
@@ -12,7 +12,7 @@ import * as op from 'rxjs/operators';
|
|
|
12
12
|
import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from '../../utils';
|
|
13
13
|
import { internals } from '../../internals';
|
|
14
14
|
import { Classes } from '../../base/styles';
|
|
15
|
-
var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: -5px;\n height: 100%;\n width: 10px;\n cursor: ew-resize;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index:1;\n\n &:after {\n content: \"\";\n position: absolute;\n display: block;\n left: calc(50% - 1px);\n width: 1px;\n height: calc(100% - 14px);\n top: 7px;\n }\n"])));
|
|
15
|
+
var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: -5px;\n height: 100%;\n width: 10px;\n cursor: ew-resize;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index:1;\n\n &:after {\n content: \"\";\n position: absolute;\n display: block;\n left: calc(50% - 1px);\n width: 1px;\n height: calc(100% - 14px);\n top: 7px;\n background-color: var(--border-color);\n }\n"])));
|
|
16
16
|
var TableHeaderGroupCellResize = styled(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:after {\n height: 100%;\n top: 0;\n }\n"])));
|
|
17
17
|
|
|
18
18
|
function clamp(min, x, max) {
|