@kdcloudjs/table 1.1.5 → 1.1.6-0
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 +267 -96
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +7 -7
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/table.js +2 -2
- package/es/table/pipeline/features/autoFill.js +146 -46
- package/es/table/pipeline/features/columnResizeWidth.d.ts +3 -1
- package/es/table/pipeline/features/columnResizeWidth.js +33 -10
- package/es/table/pipeline/pipeline.js +3 -2
- package/lib/table/base/table.js +2 -2
- package/lib/table/pipeline/features/autoFill.js +144 -46
- package/lib/table/pipeline/features/columnResizeWidth.d.ts +3 -1
- package/lib/table/pipeline/features/columnResizeWidth.js +36 -12
- package/lib/table/pipeline/pipeline.js +3 -2
- package/package.json +1 -1
package/es/table/base/table.js
CHANGED
|
@@ -394,13 +394,13 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
394
394
|
last: footerDataSource.length - 1,
|
|
395
395
|
limit: Infinity
|
|
396
396
|
}
|
|
397
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
397
|
+
}), footerDataSource.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
398
398
|
className: Classes.verticalScrollPlaceholder,
|
|
399
399
|
style: this.hasScrollY ? {
|
|
400
400
|
width: this.getScrollBarWidth(),
|
|
401
401
|
visibility: 'initial'
|
|
402
402
|
} : undefined
|
|
403
|
-
}));
|
|
403
|
+
}) : null);
|
|
404
404
|
}
|
|
405
405
|
}, {
|
|
406
406
|
key: "renderLockShadows",
|
|
@@ -1,70 +1,170 @@
|
|
|
1
|
+
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
2
|
+
import _Number$MAX_SAFE_INTEGER from "@babel/runtime-corejs3/core-js-stable/number/max-safe-integer";
|
|
1
3
|
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
2
4
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
3
5
|
import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
|
|
6
|
+
import _Map from "@babel/runtime-corejs3/core-js-stable/map";
|
|
7
|
+
import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
|
|
4
8
|
import { getLeftNestedLockCount } from '../../base/calculations';
|
|
5
9
|
import { isLeafNode, makeRecursiveMapper } from '../../utils';
|
|
6
10
|
import { Classes } from '../../base/styles';
|
|
7
|
-
import {
|
|
11
|
+
import { COLUMN_SIZE_KEY, LAST_RESIZED_COLUMN_KEY, RESIZED_COLUMN_KEY } from './columnResizeWidth';
|
|
8
12
|
export var FILL_COLUMN_CODE = '$_fill_column_&';
|
|
9
13
|
export var tableWidthKey = 'tableWidth';
|
|
10
|
-
|
|
14
|
+
|
|
15
|
+
var FLEX_COLUMN_COUNT = _Symbol('flexCount');
|
|
16
|
+
|
|
11
17
|
export var autoFillTableWidth = function autoFillTableWidth() {
|
|
12
18
|
return function (pipeline) {
|
|
13
|
-
var
|
|
14
|
-
var
|
|
19
|
+
var flexColumnResult = findFlexColumns(pipeline);
|
|
20
|
+
var flexCount = flexColumnResult.get(FLEX_COLUMN_COUNT);
|
|
21
|
+
|
|
22
|
+
if (flexCount) {
|
|
23
|
+
// 设置了flex宽度,flex列平分剩余宽度
|
|
24
|
+
var remainingWidth = getTableRemainingWidth(pipeline) || 0;
|
|
25
|
+
|
|
26
|
+
if (remainingWidth > 0) {
|
|
27
|
+
// 保存剩余的flex总和和剩余宽度总和宽度
|
|
28
|
+
var residualFlexCount = flexCount;
|
|
29
|
+
var residualFlexWidth = remainingWidth;
|
|
30
|
+
var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY) || {};
|
|
31
|
+
pipeline.mapColumns(makeRecursiveMapper(function (col, recursiveFlatMapInfo) {
|
|
32
|
+
var isLeaf = recursiveFlatMapInfo.isLeaf;
|
|
15
33
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
34
|
+
if (isLeaf && isValidFlexColumn(col, pipeline)) {
|
|
35
|
+
var code = col.code,
|
|
36
|
+
_col$features = col.features,
|
|
37
|
+
features = _col$features === void 0 ? {} : _col$features;
|
|
38
|
+
var flex = features.flex,
|
|
39
|
+
_features$minWidth = features.minWidth,
|
|
40
|
+
minWidth = _features$minWidth === void 0 ? 0 : _features$minWidth,
|
|
41
|
+
_features$maxWidth = features.maxWidth,
|
|
42
|
+
maxWidth = _features$maxWidth === void 0 ? _Number$MAX_SAFE_INTEGER : _features$maxWidth;
|
|
43
|
+
var usedRemainingWidth = Math.floor(remainingWidth * flex / flexCount);
|
|
44
|
+
var preColWidth = col.width; // 如果当前已经是最后一个flex列,将剩余的宽度添加到该列,其他计算相应的列
|
|
19
45
|
|
|
20
|
-
|
|
21
|
-
|
|
46
|
+
col.width = clamp(minWidth, preColWidth + (residualFlexCount === flex ? residualFlexWidth : usedRemainingWidth), maxWidth);
|
|
47
|
+
residualFlexCount -= flex;
|
|
48
|
+
residualFlexWidth -= col.width - preColWidth;
|
|
49
|
+
columnSize[code] = col.width;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return col;
|
|
53
|
+
}));
|
|
54
|
+
pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
|
|
55
|
+
}
|
|
22
56
|
} else {
|
|
23
|
-
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
code
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
57
|
+
// 未设置了flex宽度,创建占位列
|
|
58
|
+
var columns = pipeline.getColumns();
|
|
59
|
+
|
|
60
|
+
var fillColumns = _findInstanceProperty(columns).call(columns, function (col) {
|
|
61
|
+
return col.code === FILL_COLUMN_CODE;
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
var width = getTableRemainingWidth(pipeline) || 0;
|
|
65
|
+
|
|
66
|
+
if (fillColumns) {
|
|
67
|
+
fillColumns.width = width;
|
|
68
|
+
} else {
|
|
69
|
+
var rightNestedLockCount = getLeftNestedLockCount(_sliceInstanceProperty(columns).call(columns).reverse());
|
|
70
|
+
var spliceIndex = columns.length - rightNestedLockCount;
|
|
71
|
+
var _fillColumns = {
|
|
72
|
+
name: '',
|
|
73
|
+
code: FILL_COLUMN_CODE,
|
|
74
|
+
width: width,
|
|
75
|
+
features: {
|
|
76
|
+
resizeable: false
|
|
77
|
+
},
|
|
78
|
+
getCellProps: function getCellProps(value, record, rowIndex) {
|
|
79
|
+
return {
|
|
80
|
+
className: Classes.emptyColCell
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
_spliceInstanceProperty(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
pipeline.columns(columns);
|
|
40
89
|
}
|
|
41
90
|
|
|
42
|
-
pipeline.columns(columns);
|
|
43
|
-
setAutoFillWidth(pipeline);
|
|
44
91
|
return pipeline;
|
|
92
|
+
|
|
93
|
+
function findFlexColumns(pipeline) {
|
|
94
|
+
var result = new _Map([[FLEX_COLUMN_COUNT, 0]]);
|
|
95
|
+
dfs(pipeline.getColumns(), result);
|
|
96
|
+
return result;
|
|
97
|
+
|
|
98
|
+
function dfs(columns, result) {
|
|
99
|
+
columns.forEach(function (col) {
|
|
100
|
+
if (isLeafNode(col)) {
|
|
101
|
+
if (isValidFlexColumn(col, pipeline)) {
|
|
102
|
+
result.set(FLEX_COLUMN_COUNT, result.get(FLEX_COLUMN_COUNT) + col.features.flex);
|
|
103
|
+
}
|
|
104
|
+
} else {
|
|
105
|
+
dfs(col.children, result);
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
}
|
|
45
110
|
};
|
|
46
111
|
};
|
|
47
112
|
|
|
48
|
-
|
|
113
|
+
function getColumnWidthSum(pipeline) {
|
|
114
|
+
return dfs(pipeline.getColumns());
|
|
115
|
+
|
|
116
|
+
function dfs(columns) {
|
|
117
|
+
return columns.reduce(function (acc, col) {
|
|
118
|
+
var width = col.width,
|
|
119
|
+
code = col.code;
|
|
120
|
+
|
|
121
|
+
if (isLeafNode(col) && code !== FILL_COLUMN_CODE) {
|
|
122
|
+
var resizeColumn = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
|
|
123
|
+
return acc + (resizeColumn && resizeColumn[code] || width);
|
|
124
|
+
} else {
|
|
125
|
+
return acc + dfs(col.children);
|
|
126
|
+
}
|
|
127
|
+
}, 0);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
function getTableRemainingWidth(pipeline) {
|
|
49
132
|
var tableWidth = pipeline.getStateAtKey(tableWidthKey);
|
|
50
133
|
if (!tableWidth) return;
|
|
51
|
-
var
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
134
|
+
var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
|
|
135
|
+
return remainingWidth > 0 ? remainingWidth : 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function isAfterLastResizeCol(column, pipeline) {
|
|
139
|
+
var _context, _context2;
|
|
140
|
+
|
|
141
|
+
var lastResizedColumnCode = pipeline.getFeatureOptions(LAST_RESIZED_COLUMN_KEY);
|
|
142
|
+
if (lastResizedColumnCode === undefined) return true;
|
|
60
143
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
|
|
65
|
-
var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
|
|
144
|
+
var lastResizedColumnIndex = _findIndexInstanceProperty(_context = pipeline.getColumns()).call(_context, function (col) {
|
|
145
|
+
return col.code === lastResizedColumnCode;
|
|
146
|
+
});
|
|
66
147
|
|
|
67
|
-
|
|
68
|
-
|
|
148
|
+
var colIndex = _findIndexInstanceProperty(_context2 = pipeline.getColumns()).call(_context2, function (col) {
|
|
149
|
+
return col.code === column.code;
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
return colIndex > lastResizedColumnIndex;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
function isValidFlexColumn(col, pipeline) {
|
|
156
|
+
var _a;
|
|
157
|
+
|
|
158
|
+
var resizeColumn = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY); // 拖拽列自动禁止flex
|
|
159
|
+
|
|
160
|
+
if (resizeColumn === null || resizeColumn === void 0 ? void 0 : resizeColumn.has(col.code)) {
|
|
161
|
+
return false;
|
|
69
162
|
}
|
|
70
|
-
|
|
163
|
+
|
|
164
|
+
var flex = (_a = col.features) === null || _a === void 0 ? void 0 : _a.flex;
|
|
165
|
+
return typeof flex === 'number' && flex > 0 && isAfterLastResizeCol(col, pipeline);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function clamp(min, x, max) {
|
|
169
|
+
return Math.max(min, Math.min(max, x));
|
|
170
|
+
}
|
|
@@ -20,6 +20,8 @@ export interface ColumnResizeOptions {
|
|
|
20
20
|
onChangeSize?(nextSize: ColumnSize): void;
|
|
21
21
|
afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
|
|
22
22
|
}
|
|
23
|
-
export declare const
|
|
23
|
+
export declare const COLUMN_SIZE_KEY = "columnResize";
|
|
24
|
+
export declare const RESIZED_COLUMN_KEY = "resizedColumn";
|
|
25
|
+
export declare const LAST_RESIZED_COLUMN_KEY = "lastResizedColumn";
|
|
24
26
|
export declare function columnResize(opts?: ColumnResizeOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
25
27
|
export {};
|
|
@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
|
|
|
3
3
|
|
|
4
4
|
var _templateObject, _templateObject2;
|
|
5
5
|
|
|
6
|
-
import
|
|
6
|
+
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
7
7
|
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
8
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
8
9
|
import React from 'react';
|
|
9
10
|
import styled from 'styled-components';
|
|
10
11
|
import { fromEvent } from 'rxjs';
|
|
@@ -24,7 +25,9 @@ function disableSelect(event) {
|
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
var stateKey = 'columnResize';
|
|
27
|
-
export var
|
|
28
|
+
export var COLUMN_SIZE_KEY = 'columnResize';
|
|
29
|
+
export var RESIZED_COLUMN_KEY = 'resizedColumn';
|
|
30
|
+
export var LAST_RESIZED_COLUMN_KEY = 'lastResizedColumn';
|
|
28
31
|
export function columnResize() {
|
|
29
32
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
30
33
|
|
|
@@ -49,10 +52,10 @@ export function columnResize() {
|
|
|
49
52
|
columnSize[code] = fallbackSize;
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
|
-
}); //
|
|
55
|
+
}); // 实时存储一份最新的columnSize,与autoFill共用一份数据
|
|
53
56
|
// 存在state里可能存到取不到最新的
|
|
54
57
|
|
|
55
|
-
pipeline.setFeatureOptions(
|
|
58
|
+
pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
|
|
56
59
|
|
|
57
60
|
var onChangeSize = function onChangeSize(nextColumnSize) {
|
|
58
61
|
window.requestAnimationFrame(function () {
|
|
@@ -64,7 +67,9 @@ export function columnResize() {
|
|
|
64
67
|
};
|
|
65
68
|
|
|
66
69
|
var handleDoubleClick = function handleDoubleClick(e, col) {
|
|
67
|
-
|
|
70
|
+
var _a;
|
|
71
|
+
|
|
72
|
+
(_a = opts.doubleClickCallback) === null || _a === void 0 ? void 0 : _a.call(opts, e, col);
|
|
68
73
|
};
|
|
69
74
|
|
|
70
75
|
var handleMouseDown = function handleMouseDown(e, col) {
|
|
@@ -72,7 +77,14 @@ export function columnResize() {
|
|
|
72
77
|
var changedColumnSize = {};
|
|
73
78
|
var startX = e.clientX;
|
|
74
79
|
var children = col.children,
|
|
75
|
-
code = col.code
|
|
80
|
+
code = col.code,
|
|
81
|
+
_col$features = col.features,
|
|
82
|
+
features = _col$features === void 0 ? {} : _col$features;
|
|
83
|
+
var minWidth = features.minWidth,
|
|
84
|
+
maxWidth = features.maxWidth;
|
|
85
|
+
var realMinSize = typeof minWidth === 'number' ? minWidth : minSize;
|
|
86
|
+
var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
|
|
87
|
+
var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
|
|
76
88
|
var recordColumnSize = columnSize;
|
|
77
89
|
e.stopPropagation();
|
|
78
90
|
var nextSize$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
|
|
@@ -95,17 +107,17 @@ export function columnResize() {
|
|
|
95
107
|
var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
|
|
96
108
|
|
|
97
109
|
if (index < leafChildColumns.length - 1) {
|
|
98
|
-
nextColumnSize[code] = clamp(
|
|
110
|
+
nextColumnSize[code] = clamp(realMinSize, startSize + currentDeltaWidth, realMaxSize);
|
|
99
111
|
changedColumnSize[code] = nextColumnSize[code];
|
|
100
112
|
deltaRemaining -= currentDeltaWidth;
|
|
101
113
|
} else {
|
|
102
|
-
nextColumnSize[code] = clamp(
|
|
114
|
+
nextColumnSize[code] = clamp(realMinSize, startSize + deltaRemaining, realMaxSize);
|
|
103
115
|
changedColumnSize[code] = nextColumnSize[code];
|
|
104
116
|
}
|
|
105
117
|
});
|
|
106
118
|
} else {
|
|
107
119
|
var startSize = columnSize[code];
|
|
108
|
-
nextColumnSize[code] = clamp(
|
|
120
|
+
nextColumnSize[code] = clamp(realMinSize, startSize + deltaSum, realMaxSize);
|
|
109
121
|
changedColumnSize[code] = nextColumnSize[code];
|
|
110
122
|
}
|
|
111
123
|
|
|
@@ -113,7 +125,18 @@ export function columnResize() {
|
|
|
113
125
|
return nextColumnSize;
|
|
114
126
|
}));
|
|
115
127
|
nextSize$.subscribe({
|
|
116
|
-
next:
|
|
128
|
+
next: function next(nextColumnSize) {
|
|
129
|
+
onChangeSize(nextColumnSize); // 由于COLUMN_RESIZE_KEY记录的是全量的列宽,此处记录被改变过的列宽
|
|
130
|
+
|
|
131
|
+
var resizedColumnSet = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY) || new _Set();
|
|
132
|
+
|
|
133
|
+
_Object$keys(changedColumnSize).forEach(function (code) {
|
|
134
|
+
resizedColumnSet.add(code, changedColumnSize[code]);
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
pipeline.setFeatureOptions(RESIZED_COLUMN_KEY, resizedColumnSet);
|
|
138
|
+
pipeline.setFeatureOptions(LAST_RESIZED_COLUMN_KEY, code);
|
|
139
|
+
},
|
|
117
140
|
complete: function complete() {
|
|
118
141
|
var _context;
|
|
119
142
|
|
|
@@ -300,8 +300,9 @@ export function useTablePipeline(ctx) {
|
|
|
300
300
|
state = _useState2[0],
|
|
301
301
|
setState = _useState2[1];
|
|
302
302
|
|
|
303
|
-
var ref = useRef({
|
|
304
|
-
|
|
303
|
+
var ref = useRef({
|
|
304
|
+
featureOptions: {}
|
|
305
|
+
});
|
|
305
306
|
return new TablePipeline({
|
|
306
307
|
state: state,
|
|
307
308
|
setState: setState,
|
package/lib/table/base/table.js
CHANGED
|
@@ -443,13 +443,13 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
443
443
|
last: footerDataSource.length - 1,
|
|
444
444
|
limit: Infinity
|
|
445
445
|
}
|
|
446
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
446
|
+
}), footerDataSource.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
|
|
447
447
|
className: _styles.Classes.verticalScrollPlaceholder,
|
|
448
448
|
style: this.hasScrollY ? {
|
|
449
449
|
width: this.getScrollBarWidth(),
|
|
450
450
|
visibility: 'initial'
|
|
451
451
|
} : undefined
|
|
452
|
-
}));
|
|
452
|
+
}) : null);
|
|
453
453
|
}
|
|
454
454
|
}, {
|
|
455
455
|
key: "renderLockShadows",
|
|
@@ -7,12 +7,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.tableWidthKey = exports.autoFillTableWidth = exports.FILL_COLUMN_CODE = void 0;
|
|
9
9
|
|
|
10
|
+
var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
|
|
11
|
+
|
|
12
|
+
var _maxSafeInteger = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/max-safe-integer"));
|
|
13
|
+
|
|
10
14
|
var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
|
|
11
15
|
|
|
12
16
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
13
17
|
|
|
14
18
|
var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
|
|
15
19
|
|
|
20
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
|
|
21
|
+
|
|
22
|
+
var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
|
|
23
|
+
|
|
16
24
|
var _calculations = require("../../base/calculations");
|
|
17
25
|
|
|
18
26
|
var _utils = require("../../utils");
|
|
@@ -25,65 +33,155 @@ var FILL_COLUMN_CODE = '$_fill_column_&';
|
|
|
25
33
|
exports.FILL_COLUMN_CODE = FILL_COLUMN_CODE;
|
|
26
34
|
var tableWidthKey = 'tableWidth';
|
|
27
35
|
exports.tableWidthKey = tableWidthKey;
|
|
28
|
-
var
|
|
36
|
+
var FLEX_COLUMN_COUNT = (0, _symbol.default)('flexCount');
|
|
29
37
|
|
|
30
38
|
var autoFillTableWidth = function autoFillTableWidth() {
|
|
31
39
|
return function (pipeline) {
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
var flexColumnResult = findFlexColumns(pipeline);
|
|
41
|
+
var flexCount = flexColumnResult.get(FLEX_COLUMN_COUNT);
|
|
42
|
+
|
|
43
|
+
if (flexCount) {
|
|
44
|
+
// 设置了flex宽度,flex列平分剩余宽度
|
|
45
|
+
var remainingWidth = getTableRemainingWidth(pipeline) || 0;
|
|
46
|
+
|
|
47
|
+
if (remainingWidth > 0) {
|
|
48
|
+
// 保存剩余的flex总和和剩余宽度总和宽度
|
|
49
|
+
var residualFlexCount = flexCount;
|
|
50
|
+
var residualFlexWidth = remainingWidth;
|
|
51
|
+
var columnSize = pipeline.getFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY) || {};
|
|
52
|
+
pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col, recursiveFlatMapInfo) {
|
|
53
|
+
var isLeaf = recursiveFlatMapInfo.isLeaf;
|
|
54
|
+
|
|
55
|
+
if (isLeaf && isValidFlexColumn(col, pipeline)) {
|
|
56
|
+
var code = col.code,
|
|
57
|
+
_col$features = col.features,
|
|
58
|
+
features = _col$features === void 0 ? {} : _col$features;
|
|
59
|
+
var flex = features.flex,
|
|
60
|
+
_features$minWidth = features.minWidth,
|
|
61
|
+
minWidth = _features$minWidth === void 0 ? 0 : _features$minWidth,
|
|
62
|
+
_features$maxWidth = features.maxWidth,
|
|
63
|
+
maxWidth = _features$maxWidth === void 0 ? _maxSafeInteger.default : _features$maxWidth;
|
|
64
|
+
var usedRemainingWidth = Math.floor(remainingWidth * flex / flexCount);
|
|
65
|
+
var preColWidth = col.width; // 如果当前已经是最后一个flex列,将剩余的宽度添加到该列,其他计算相应的列
|
|
66
|
+
|
|
67
|
+
col.width = clamp(minWidth, preColWidth + (residualFlexCount === flex ? residualFlexWidth : usedRemainingWidth), maxWidth);
|
|
68
|
+
residualFlexCount -= flex;
|
|
69
|
+
residualFlexWidth -= col.width - preColWidth;
|
|
70
|
+
columnSize[code] = col.width;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return col;
|
|
74
|
+
}));
|
|
75
|
+
pipeline.setFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY, columnSize);
|
|
76
|
+
}
|
|
40
77
|
} else {
|
|
41
|
-
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
78
|
+
// 未设置了flex宽度,创建占位列
|
|
79
|
+
var columns = pipeline.getColumns();
|
|
80
|
+
var fillColumns = (0, _find.default)(columns).call(columns, function (col) {
|
|
81
|
+
return col.code === FILL_COLUMN_CODE;
|
|
82
|
+
});
|
|
83
|
+
var width = getTableRemainingWidth(pipeline) || 0;
|
|
84
|
+
|
|
85
|
+
if (fillColumns) {
|
|
86
|
+
fillColumns.width = width;
|
|
87
|
+
} else {
|
|
88
|
+
var rightNestedLockCount = (0, _calculations.getLeftNestedLockCount)((0, _slice.default)(columns).call(columns).reverse());
|
|
89
|
+
var spliceIndex = columns.length - rightNestedLockCount;
|
|
90
|
+
var _fillColumns = {
|
|
91
|
+
name: '',
|
|
92
|
+
code: FILL_COLUMN_CODE,
|
|
93
|
+
width: width,
|
|
94
|
+
features: {
|
|
95
|
+
resizeable: false
|
|
96
|
+
},
|
|
97
|
+
getCellProps: function getCellProps(value, record, rowIndex) {
|
|
98
|
+
return {
|
|
99
|
+
className: _styles.Classes.emptyColCell
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
(0, _splice.default)(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
pipeline.columns(columns);
|
|
57
107
|
}
|
|
58
108
|
|
|
59
|
-
pipeline.columns(columns);
|
|
60
|
-
setAutoFillWidth(pipeline);
|
|
61
109
|
return pipeline;
|
|
110
|
+
|
|
111
|
+
function findFlexColumns(pipeline) {
|
|
112
|
+
var result = new _map.default([[FLEX_COLUMN_COUNT, 0]]);
|
|
113
|
+
dfs(pipeline.getColumns(), result);
|
|
114
|
+
return result;
|
|
115
|
+
|
|
116
|
+
function dfs(columns, result) {
|
|
117
|
+
columns.forEach(function (col) {
|
|
118
|
+
if ((0, _utils.isLeafNode)(col)) {
|
|
119
|
+
if (isValidFlexColumn(col, pipeline)) {
|
|
120
|
+
result.set(FLEX_COLUMN_COUNT, result.get(FLEX_COLUMN_COUNT) + col.features.flex);
|
|
121
|
+
}
|
|
122
|
+
} else {
|
|
123
|
+
dfs(col.children, result);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
}
|
|
62
128
|
};
|
|
63
129
|
};
|
|
64
130
|
|
|
65
131
|
exports.autoFillTableWidth = autoFillTableWidth;
|
|
66
132
|
|
|
67
|
-
|
|
133
|
+
function getColumnWidthSum(pipeline) {
|
|
134
|
+
return dfs(pipeline.getColumns());
|
|
135
|
+
|
|
136
|
+
function dfs(columns) {
|
|
137
|
+
return columns.reduce(function (acc, col) {
|
|
138
|
+
var width = col.width,
|
|
139
|
+
code = col.code;
|
|
140
|
+
|
|
141
|
+
if ((0, _utils.isLeafNode)(col) && code !== FILL_COLUMN_CODE) {
|
|
142
|
+
var resizeColumn = pipeline.getFeatureOptions(_columnResizeWidth.COLUMN_SIZE_KEY);
|
|
143
|
+
return acc + (resizeColumn && resizeColumn[code] || width);
|
|
144
|
+
} else {
|
|
145
|
+
return acc + dfs(col.children);
|
|
146
|
+
}
|
|
147
|
+
}, 0);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
function getTableRemainingWidth(pipeline) {
|
|
68
152
|
var tableWidth = pipeline.getStateAtKey(tableWidthKey);
|
|
69
153
|
if (!tableWidth) return;
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
154
|
+
var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
|
|
155
|
+
return remainingWidth > 0 ? remainingWidth : 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function isAfterLastResizeCol(column, pipeline) {
|
|
159
|
+
var _context, _context2;
|
|
160
|
+
|
|
161
|
+
var lastResizedColumnCode = pipeline.getFeatureOptions(_columnResizeWidth.LAST_RESIZED_COLUMN_KEY);
|
|
162
|
+
if (lastResizedColumnCode === undefined) return true;
|
|
163
|
+
var lastResizedColumnIndex = (0, _findIndex.default)(_context = pipeline.getColumns()).call(_context, function (col) {
|
|
164
|
+
return col.code === lastResizedColumnCode;
|
|
165
|
+
});
|
|
166
|
+
var colIndex = (0, _findIndex.default)(_context2 = pipeline.getColumns()).call(_context2, function (col) {
|
|
167
|
+
return col.code === column.code;
|
|
168
|
+
});
|
|
169
|
+
return colIndex > lastResizedColumnIndex;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
function isValidFlexColumn(col, pipeline) {
|
|
173
|
+
var _a;
|
|
174
|
+
|
|
175
|
+
var resizeColumn = pipeline.getFeatureOptions(_columnResizeWidth.RESIZED_COLUMN_KEY); // 拖拽列自动禁止flex
|
|
176
|
+
|
|
177
|
+
if (resizeColumn === null || resizeColumn === void 0 ? void 0 : resizeColumn.has(col.code)) {
|
|
178
|
+
return false;
|
|
179
|
+
}
|
|
79
180
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
|
|
84
|
-
var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
|
|
181
|
+
var flex = (_a = col.features) === null || _a === void 0 ? void 0 : _a.flex;
|
|
182
|
+
return typeof flex === 'number' && flex > 0 && isAfterLastResizeCol(col, pipeline);
|
|
183
|
+
}
|
|
85
184
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
};
|
|
185
|
+
function clamp(min, x, max) {
|
|
186
|
+
return Math.max(min, Math.min(max, x));
|
|
187
|
+
}
|
|
@@ -20,6 +20,8 @@ export interface ColumnResizeOptions {
|
|
|
20
20
|
onChangeSize?(nextSize: ColumnSize): void;
|
|
21
21
|
afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
|
|
22
22
|
}
|
|
23
|
-
export declare const
|
|
23
|
+
export declare const COLUMN_SIZE_KEY = "columnResize";
|
|
24
|
+
export declare const RESIZED_COLUMN_KEY = "resizedColumn";
|
|
25
|
+
export declare const LAST_RESIZED_COLUMN_KEY = "lastResizedColumn";
|
|
24
26
|
export declare function columnResize(opts?: ColumnResizeOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
25
27
|
export {};
|