@kdcloudjs/table 1.1.3-canary.9 → 1.1.3
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 +113 -359
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +6 -6
- 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 +0 -2
- package/es/table/base/styles.js +1 -3
- package/es/table/base/table.js +3 -4
- package/es/table/pipeline/features/columnDrag.js +10 -19
- package/es/table/pipeline/features/columnFilter.d.ts +1 -1
- package/es/table/pipeline/features/columnFilter.js +15 -35
- 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/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +0 -2
- package/lib/table/base/styles.js +1 -3
- package/lib/table/base/table.js +3 -4
- package/lib/table/pipeline/features/columnDrag.js +10 -19
- package/lib/table/pipeline/features/columnFilter.d.ts +1 -1
- package/lib/table/pipeline/features/columnFilter.js +15 -33
- 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/package.json +3 -3
- package/es/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/es/table/pipeline/features/footerDataSource.js +0 -25
- package/lib/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/lib/table/pipeline/features/footerDataSource.js +0 -41
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
2
1
|
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
|
3
2
|
import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
|
|
3
|
+
import _toArray from "@babel/runtime-corejs3/helpers/toArray";
|
|
4
4
|
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
5
5
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
6
6
|
import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
|
|
7
7
|
|
|
8
8
|
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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
9
9
|
|
|
10
|
-
function _unsupportedIterableToArray(o, minLen) { var
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { var _context3; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context3 = Object.prototype.toString.call(o)).call(_context3, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
11
|
|
|
12
12
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
|
15
15
|
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
16
16
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
17
17
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
18
|
-
import
|
|
18
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
19
19
|
import cx from 'classnames';
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
|
|
@@ -31,6 +31,11 @@ export function treeMode() {
|
|
|
31
31
|
var stateKey = 'treeMode';
|
|
32
32
|
var ctx = pipeline.ctx;
|
|
33
33
|
var primaryKey = pipeline.ensurePrimaryKey('treeMode');
|
|
34
|
+
|
|
35
|
+
if (typeof primaryKey !== 'string') {
|
|
36
|
+
throw new Error('treeMode 仅支持字符串作为 primaryKey');
|
|
37
|
+
}
|
|
38
|
+
|
|
34
39
|
var openKeys = (_c = (_b = (_a = opts.openKeys) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultOpenKeys) !== null && _c !== void 0 ? _c : [];
|
|
35
40
|
var openKeySet = new _Set(openKeys);
|
|
36
41
|
|
|
@@ -85,7 +90,7 @@ export function treeMode() {
|
|
|
85
90
|
try {
|
|
86
91
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
87
92
|
var node = _step.value;
|
|
88
|
-
var rowKey =
|
|
93
|
+
var rowKey = node[primaryKey];
|
|
89
94
|
var expanded = openKeySet.has(rowKey);
|
|
90
95
|
var isLeaf = isLeafNode(node, {
|
|
91
96
|
depth: depth,
|
|
@@ -115,20 +120,18 @@ export function treeMode() {
|
|
|
115
120
|
}
|
|
116
121
|
|
|
117
122
|
function processColumns(columns) {
|
|
123
|
+
var _context2;
|
|
124
|
+
|
|
118
125
|
if (columns.length === 0) {
|
|
119
126
|
return columns;
|
|
120
127
|
}
|
|
121
128
|
|
|
122
|
-
var
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
expandColIndex = expandColIndex === -1 ? 0 : expandColIndex;
|
|
128
|
-
var expandCol = columns[expandColIndex];
|
|
129
|
+
var _columns = _toArray(columns),
|
|
130
|
+
firstCol = _columns[0],
|
|
131
|
+
others = _sliceInstanceProperty(_columns).call(_columns, 1);
|
|
129
132
|
|
|
130
133
|
var render = function render(value, record, recordIndex) {
|
|
131
|
-
var content = internals.safeRender(
|
|
134
|
+
var content = internals.safeRender(firstCol, record, recordIndex);
|
|
132
135
|
|
|
133
136
|
if (record[treeMetaKey] == null) {
|
|
134
137
|
// 没有 treeMeta 信息的话,就返回原先的渲染结果
|
|
@@ -188,7 +191,7 @@ export function treeMode() {
|
|
|
188
191
|
};
|
|
189
192
|
|
|
190
193
|
var getCellProps = function getCellProps(value, record, rowIndex) {
|
|
191
|
-
var prevProps = internals.safeGetCellProps(
|
|
194
|
+
var prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);
|
|
192
195
|
|
|
193
196
|
if (record[treeMetaKey] == null) {
|
|
194
197
|
// 没有 treeMeta 信息的话,就返回原先的 cellProps
|
|
@@ -217,16 +220,15 @@ export function treeMode() {
|
|
|
217
220
|
});
|
|
218
221
|
};
|
|
219
222
|
|
|
220
|
-
|
|
223
|
+
return _concatInstanceProperty(_context2 = [_extends(_extends({}, firstCol), {
|
|
221
224
|
title: /*#__PURE__*/React.createElement("span", {
|
|
222
225
|
style: {
|
|
223
226
|
marginLeft: iconIndent + iconWidth + iconGap
|
|
224
227
|
}
|
|
225
|
-
}, internals.safeRenderHeader(
|
|
228
|
+
}, internals.safeRenderHeader(firstCol)),
|
|
226
229
|
render: render,
|
|
227
|
-
getCellProps: clickArea === 'cell' ? getCellProps :
|
|
228
|
-
});
|
|
229
|
-
return _toConsumableArray(columns);
|
|
230
|
+
getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps
|
|
231
|
+
})]).call(_context2, _toConsumableArray(others));
|
|
230
232
|
}
|
|
231
233
|
};
|
|
232
234
|
}
|
|
@@ -36,7 +36,7 @@ export declare class TablePipeline {
|
|
|
36
36
|
private _tableProps;
|
|
37
37
|
private _dataSource;
|
|
38
38
|
private _columns;
|
|
39
|
-
private _footerDataSource
|
|
39
|
+
private _footerDataSource;
|
|
40
40
|
static defaultIndents: TablePipelineIndentsConfig;
|
|
41
41
|
readonly ctx: TablePipelineCtx;
|
|
42
42
|
private readonly state;
|
|
@@ -88,10 +88,6 @@ export declare class TablePipeline {
|
|
|
88
88
|
setFeatureOptions(optionKey: string, value: any): void;
|
|
89
89
|
/** 获取 BaseTable 的 props,结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
|
|
90
90
|
getProps(this: TablePipeline): TableProps;
|
|
91
|
-
/**
|
|
92
|
-
* 清除范围选中内容
|
|
93
|
-
*/
|
|
94
|
-
clearRangeSelection(): void;
|
|
95
91
|
}
|
|
96
92
|
export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
|
|
97
93
|
export {};
|
|
@@ -8,7 +8,6 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
|
|
|
8
8
|
import { useState, useRef } from 'react';
|
|
9
9
|
import { mergeCellProps } from '../utils';
|
|
10
10
|
import { autoFillTableWidth, tableWidthKey } from './features/autoFill';
|
|
11
|
-
import { rangeSelectionKey } from './features/rangeSelection';
|
|
12
11
|
/**
|
|
13
12
|
* 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法,包括……
|
|
14
13
|
*
|
|
@@ -277,18 +276,18 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
277
276
|
|
|
278
277
|
result.setTableDomHelper = function (domHelper) {
|
|
279
278
|
_this2.ref.current.domHelper = domHelper;
|
|
280
|
-
};
|
|
279
|
+
}; // if (this.getFeatureOptions(rangeSelectionKey)) {
|
|
280
|
+
// result.clearRangeSelectionStatus = () => {
|
|
281
|
+
// const { rangeSelectedChange } = this.getFeatureOptions(rangeSelectionKey)
|
|
282
|
+
// const rangeSelection = this.getStateAtKey(rangeSelectionKey)
|
|
283
|
+
// if (rangeSelection) {
|
|
284
|
+
// rangeSelectedChange?.(null)
|
|
285
|
+
// }
|
|
286
|
+
// }
|
|
287
|
+
// }
|
|
281
288
|
|
|
282
|
-
return result;
|
|
283
|
-
}
|
|
284
|
-
/**
|
|
285
|
-
* 清除范围选中内容
|
|
286
|
-
*/
|
|
287
289
|
|
|
288
|
-
|
|
289
|
-
key: "clearRangeSelection",
|
|
290
|
-
value: function clearRangeSelection() {
|
|
291
|
-
this.setStateAtKey(rangeSelectionKey, null);
|
|
290
|
+
return result;
|
|
292
291
|
}
|
|
293
292
|
}]);
|
|
294
293
|
|
|
@@ -141,7 +141,7 @@ function HtmlTable(_ref) {
|
|
|
141
141
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
142
142
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
143
143
|
positionStyle.position = 'sticky';
|
|
144
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) -
|
|
144
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
|
|
@@ -40,8 +40,6 @@ export declare const Classes: {
|
|
|
40
40
|
readonly button: string;
|
|
41
41
|
readonly buttonPrimary: string;
|
|
42
42
|
readonly filterIcon: string;
|
|
43
|
-
readonly rangeSelection: string;
|
|
44
|
-
readonly tableCellRangeSingleCell: string;
|
|
45
43
|
readonly tableCellRangeSelected: string;
|
|
46
44
|
readonly tableCellRangeTop: string;
|
|
47
45
|
readonly tableCellRangeLeft: string;
|
package/lib/table/base/styles.js
CHANGED
|
@@ -76,8 +76,6 @@ var Classes = {
|
|
|
76
76
|
button: "".concat(prefix, "btn"),
|
|
77
77
|
buttonPrimary: "".concat(prefix, "btn-primary"),
|
|
78
78
|
filterIcon: "".concat(prefix, "filter-icon"),
|
|
79
|
-
rangeSelection: "".concat(prefix, "range-selection"),
|
|
80
|
-
tableCellRangeSingleCell: "".concat(prefix, "table-cell-range-single-cell"),
|
|
81
79
|
tableCellRangeSelected: "".concat(prefix, "table-cell-range-selected"),
|
|
82
80
|
tableCellRangeTop: "".concat(prefix, "table-cell-range-top"),
|
|
83
81
|
tableCellRangeLeft: "".concat(prefix, "table-cell-range-left"),
|
|
@@ -150,7 +148,7 @@ exports.defaultCSSVariables = defaultCSSVariables;
|
|
|
150
148
|
var variableConst = getCssVariableText(defaultCSSVariables);
|
|
151
149
|
exports.variableConst = variableConst;
|
|
152
150
|
|
|
153
|
-
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 }\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 .", "
|
|
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);
|
|
154
152
|
|
|
155
153
|
exports.StyledArtTableWrapper = StyledArtTableWrapper;
|
|
156
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);
|
package/lib/table/base/table.js
CHANGED
|
@@ -556,14 +556,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
556
556
|
className: artTableWrapperClassName,
|
|
557
557
|
style: style
|
|
558
558
|
}, _utils.STYLED_REF_PROP, this.artTableWrapperRef);
|
|
559
|
-
var tableProps = getTableProps() || {};
|
|
560
559
|
return /*#__PURE__*/_react.default.createElement(_styles.StyledArtTableWrapper, (0, _extends2.default)({}, artTableWrapperProps), /*#__PURE__*/_react.default.createElement(_loading.default, {
|
|
561
560
|
visible: isLoading,
|
|
562
561
|
LoadingIcon: components.LoadingIcon,
|
|
563
562
|
LoadingContentWrapper: components.LoadingContentWrapper
|
|
564
|
-
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
565
|
-
className:
|
|
566
|
-
}), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
563
|
+
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
564
|
+
className: _styles.Classes.artTable
|
|
565
|
+
}, getTableProps()), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
567
566
|
}
|
|
568
567
|
}, {
|
|
569
568
|
key: "componentDidMount",
|
|
@@ -105,8 +105,6 @@ function columnDrag() {
|
|
|
105
105
|
var currentTarget = e.currentTarget;
|
|
106
106
|
var rect = e.currentTarget.parentElement.getClientRects()[0];
|
|
107
107
|
var startX = rect.left;
|
|
108
|
-
var mouseDownClientX = e.clientX;
|
|
109
|
-
var mouseDownClientY = e.clientY;
|
|
110
108
|
var moveData = [];
|
|
111
109
|
var allColumns = (0, _utils.collectNodes)(columns);
|
|
112
110
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
@@ -126,6 +124,8 @@ function columnDrag() {
|
|
|
126
124
|
}
|
|
127
125
|
};
|
|
128
126
|
|
|
127
|
+
var stopClickPropagationFlag = false;
|
|
128
|
+
|
|
129
129
|
function handleMouseMove(e) {
|
|
130
130
|
var client = {
|
|
131
131
|
clientX: e.clientX,
|
|
@@ -139,6 +139,12 @@ function columnDrag() {
|
|
|
139
139
|
if (e.clientX - leftPosition < 20) {
|
|
140
140
|
return;
|
|
141
141
|
} else {
|
|
142
|
+
// 阻止列头点击事件,防止拖动后触发列头过滤事件
|
|
143
|
+
if (stopClickPropagationFlag === false) {
|
|
144
|
+
stopClickPropagationFlag = true;
|
|
145
|
+
currentTarget.addEventListener('click', stopClickPropagation);
|
|
146
|
+
}
|
|
147
|
+
|
|
142
148
|
e.stopPropagation();
|
|
143
149
|
}
|
|
144
150
|
|
|
@@ -258,15 +264,11 @@ function columnDrag() {
|
|
|
258
264
|
e.stopPropagation();
|
|
259
265
|
document.body.removeEventListener('mousemove', handleMouseMove);
|
|
260
266
|
document.body.removeEventListener('mouseup', handleMouseUp);
|
|
261
|
-
window.removeEventListener('selectstart', disableSelect);
|
|
262
|
-
|
|
263
|
-
if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
|
|
264
|
-
currentTarget.addEventListener('click', stopClickPropagation);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
+
window.removeEventListener('selectstart', disableSelect);
|
|
267
268
|
window.requestAnimationFrame(function () {
|
|
268
269
|
// 取消阻止列头点击事件
|
|
269
270
|
currentTarget.removeEventListener('click', stopClickPropagation);
|
|
271
|
+
stopClickPropagationFlag = false;
|
|
270
272
|
currentTarget = null;
|
|
271
273
|
|
|
272
274
|
var _moveData = moveData,
|
|
@@ -384,15 +386,4 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
|
|
|
384
386
|
moveAllChildren(children, cloumnsTranslateData, width);
|
|
385
387
|
}
|
|
386
388
|
});
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
|
|
390
|
-
var xDiff = mouseUpClientX - mouseDownClientX;
|
|
391
|
-
var yDiff = mouseUpClientY - mouseDownClientY; // 鼠标点按和松开的偏移量大于5px,认为存在移动
|
|
392
|
-
|
|
393
|
-
if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
|
|
394
|
-
return true;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
return false;
|
|
398
389
|
}
|
|
@@ -12,7 +12,7 @@ export interface FilterFeatureOptions {
|
|
|
12
12
|
keepDataSource?: boolean;
|
|
13
13
|
/** 过滤模式。单列过滤 single,多列过滤 multiple,默认为多选 */
|
|
14
14
|
mode?: 'single' | 'multiple';
|
|
15
|
-
|
|
15
|
+
/**过滤图标 */
|
|
16
16
|
filterIcon?: ReactNode;
|
|
17
17
|
/** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
|
|
18
18
|
stopClickEventPropagation?: boolean;
|
|
@@ -65,7 +65,7 @@ function filter() {
|
|
|
65
65
|
return (0, _map2.default)(columns).call(columns, dfs);
|
|
66
66
|
|
|
67
67
|
function dfs(col) {
|
|
68
|
-
var _a, _b, _c, _d, _e
|
|
68
|
+
var _a, _b, _c, _d, _e;
|
|
69
69
|
|
|
70
70
|
var result = (0, _extends2.default)({}, col);
|
|
71
71
|
var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
|
|
@@ -104,13 +104,12 @@ function filter() {
|
|
|
104
104
|
};
|
|
105
105
|
|
|
106
106
|
var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
|
|
107
|
-
|
|
108
|
-
result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [_internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
|
|
107
|
+
result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [_internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
|
|
109
108
|
title: null
|
|
110
109
|
}))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
|
|
111
110
|
key: "filter",
|
|
112
111
|
FilterPanelContent: filterPanel,
|
|
113
|
-
filterIcon:
|
|
112
|
+
filterIcon: filterIcon,
|
|
114
113
|
filterModel: inputFiltersMap.get(col.code),
|
|
115
114
|
setFilterModel: handleFilterChanged,
|
|
116
115
|
setFilter: setFilter,
|
|
@@ -158,8 +157,8 @@ function filter() {
|
|
|
158
157
|
return [item.key, (0, _extends2.default)({}, item)];
|
|
159
158
|
}));
|
|
160
159
|
|
|
161
|
-
function isMatchedFilterCondition(record) {
|
|
162
|
-
return filtersKeys.
|
|
160
|
+
function isMatchedFilterCondition(record, rowIndex) {
|
|
161
|
+
return !filtersKeys.some(function (key) {
|
|
163
162
|
var _a, _b;
|
|
164
163
|
|
|
165
164
|
var filterItem = inputFiltersMap.get(key);
|
|
@@ -173,41 +172,24 @@ function filter() {
|
|
|
173
172
|
} else {
|
|
174
173
|
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"));
|
|
175
174
|
comparisonFn = (0, _filter.default)(defaultFilterOptionsMap.get('contain'));
|
|
176
|
-
}
|
|
175
|
+
} // 不符合过滤条件,退出循环
|
|
177
176
|
|
|
178
|
-
|
|
177
|
+
|
|
178
|
+
return !comparisonFn((0, _filter.default)(filterItem), filterItem)(_internals.internals.safeGetValue(columnsMap.get(key), record, rowIndex), record);
|
|
179
179
|
});
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
-
return
|
|
182
|
+
return dataSource.reduce(function (pre, record, rowIndex) {
|
|
183
|
+
if (isMatchedFilterCondition(record, rowIndex)) {
|
|
184
|
+
return (0, _concat.default)(pre).call(pre, [record]);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
return pre;
|
|
188
|
+
}, []);
|
|
183
189
|
}
|
|
184
190
|
|
|
185
191
|
pipeline.dataSource(processDataSource(dataSource));
|
|
186
192
|
pipeline.columns(processColumns(columns));
|
|
187
193
|
return pipeline;
|
|
188
194
|
};
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
function layeredFilter(array, matchFn) {
|
|
192
|
-
return dfs(array);
|
|
193
|
-
|
|
194
|
-
function dfs(rows) {
|
|
195
|
-
var _context6;
|
|
196
|
-
|
|
197
|
-
var parentMatched = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
198
|
-
return (0, _filter.default)(_context6 = (0, _map2.default)(rows).call(rows, function (row) {
|
|
199
|
-
var currentMatched = matchFn(row);
|
|
200
|
-
|
|
201
|
-
if ((0, _utils.isLeafNode)(row)) {
|
|
202
|
-
return (parentMatched || currentMatched) && (0, _extends2.default)({}, row);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
var children = row.children;
|
|
206
|
-
var rowAfterFilterChildren = (0, _extends2.default)((0, _extends2.default)({}, row), {
|
|
207
|
-
children: dfs(children, parentMatched || currentMatched)
|
|
208
|
-
});
|
|
209
|
-
var matchedByChildren = !(0, _utils.isLeafNode)(rowAfterFilterChildren);
|
|
210
|
-
return (parentMatched || currentMatched || matchedByChildren) && rowAfterFilterChildren;
|
|
211
|
-
})).call(_context6, Boolean);
|
|
212
|
-
}
|
|
213
195
|
}
|
|
@@ -22,7 +22,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
22
22
|
data = data + '';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
return (0, _includes.default)(data).call(data, value
|
|
25
|
+
return (0, _includes.default)(data).call(data, value);
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
@@ -38,7 +38,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
38
38
|
data = data + '';
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
return !(0, _includes.default)(data).call(data, value
|
|
41
|
+
return !(0, _includes.default)(data).call(data, value);
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
}, {
|
|
@@ -46,7 +46,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
46
46
|
key: 'equal',
|
|
47
47
|
filter: function filter(value) {
|
|
48
48
|
return function (data) {
|
|
49
|
-
return value
|
|
49
|
+
return value !== data;
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
}, {
|
|
@@ -54,7 +54,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
54
54
|
key: 'notEqual',
|
|
55
55
|
filter: function filter(value) {
|
|
56
56
|
return function (data) {
|
|
57
|
-
return value
|
|
57
|
+
return value !== data;
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
60
|
}, {
|
|
@@ -16,4 +16,3 @@ export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
|
|
|
16
16
|
export { filter, FilterFeatureOptions } from './columnFilter';
|
|
17
17
|
export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
|
|
18
18
|
export { mergeCellHover } from './mergeCellHover';
|
|
19
|
-
export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
|
|
@@ -55,18 +55,6 @@ Object.defineProperty(exports, "filter", {
|
|
|
55
55
|
return _filterInstanceProperty(_columnFilter);
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
Object.defineProperty(exports, "footerDataSource", {
|
|
59
|
-
enumerable: true,
|
|
60
|
-
get: function get() {
|
|
61
|
-
return _footerDataSource.footerDataSource;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
Object.defineProperty(exports, "footerRowMetaSymbol", {
|
|
65
|
-
enumerable: true,
|
|
66
|
-
get: function get() {
|
|
67
|
-
return _footerDataSource.footerRowMetaSymbol;
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
58
|
Object.defineProperty(exports, "mergeCellHover", {
|
|
71
59
|
enumerable: true,
|
|
72
60
|
get: function get() {
|
|
@@ -168,6 +156,4 @@ var _columnFilter = require("./columnFilter");
|
|
|
168
156
|
|
|
169
157
|
var _rangeSelection = require("./rangeSelection");
|
|
170
158
|
|
|
171
|
-
var _mergeCellHover = require("./mergeCellHover");
|
|
172
|
-
|
|
173
|
-
var _footerDataSource = require("./footerDataSource");
|
|
159
|
+
var _mergeCellHover = require("./mergeCellHover");
|
|
@@ -61,8 +61,7 @@ function multiSelect() {
|
|
|
61
61
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
62
62
|
|
|
63
63
|
var allKeys = [];
|
|
64
|
-
|
|
65
|
-
flatDataSource.forEach(function (row, rowIndex) {
|
|
64
|
+
dataSource.forEach(function (row, rowIndex) {
|
|
66
65
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
67
66
|
|
|
68
67
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
@@ -131,10 +130,6 @@ function multiSelect() {
|
|
|
131
130
|
return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
|
|
132
131
|
},
|
|
133
132
|
render: function render(_, row, rowIndex) {
|
|
134
|
-
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
133
|
var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
139
134
|
|
|
140
135
|
var checked = set.has(key);
|
|
@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
|
|
|
6
6
|
preventkDefaultOfKeyDownEvent?: boolean;
|
|
7
7
|
}
|
|
8
8
|
export declare const rangeSelectionKey = "rangeSelection";
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const lastClickCell = "lastClickCell";
|
|
10
10
|
export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|