@hi-ui/table 4.3.1 → 4.3.2
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/CHANGELOG.md +40 -0
- package/lib/cjs/BaseTable.js +136 -189
- package/lib/cjs/ColGroupContent.js +5 -28
- package/lib/cjs/SettingDrawer.js +76 -127
- package/lib/cjs/Table.js +107 -171
- package/lib/cjs/TableAdvancedFilter.js +49 -85
- package/lib/cjs/TableBody.js +33 -69
- package/lib/cjs/TableCell.js +56 -102
- package/lib/cjs/TableColumnMenu.js +39 -77
- package/lib/cjs/TableEmbedRow.js +11 -38
- package/lib/cjs/TableHeader.js +8 -33
- package/lib/cjs/TableRow.js +48 -88
- package/lib/cjs/TableSettingMenu.js +48 -94
- package/lib/cjs/TbodyContent.js +28 -56
- package/lib/cjs/TheadContent.js +20 -49
- package/lib/cjs/_virtual/index.js +0 -3
- package/lib/cjs/_virtual/index2.js +0 -3
- package/lib/cjs/_virtual/react-is.development.js +0 -3
- package/lib/cjs/_virtual/react-is.production.min.js +0 -3
- package/lib/cjs/context.js +0 -9
- package/lib/cjs/hooks/use-async-switch.js +13 -51
- package/lib/cjs/hooks/use-check.js +47 -77
- package/lib/cjs/hooks/use-col-hidden.js +16 -28
- package/lib/cjs/hooks/use-col-set.js +5 -18
- package/lib/cjs/hooks/use-col-sorter.js +18 -32
- package/lib/cjs/hooks/use-col-width.js +21 -57
- package/lib/cjs/hooks/use-colgroup.js +63 -85
- package/lib/cjs/hooks/use-drag.js +10 -31
- package/lib/cjs/hooks/use-embed-expand.js +23 -68
- package/lib/cjs/hooks/use-expand.js +32 -64
- package/lib/cjs/hooks/use-pagination.js +19 -50
- package/lib/cjs/hooks/use-queue.js +2 -14
- package/lib/cjs/icons/index.js +4 -21
- package/lib/cjs/index.js +0 -4
- package/lib/cjs/node_modules/classnames/index.js +2 -11
- package/lib/cjs/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js +31 -227
- package/lib/cjs/node_modules/rc-resize-observer/es/index.js +10 -68
- package/lib/cjs/node_modules/rc-resize-observer/node_modules/rc-util/es/Children/toArray.js +1 -17
- package/lib/cjs/node_modules/rc-resize-observer/node_modules/rc-util/es/Dom/findDOMNode.js +1 -14
- package/lib/cjs/node_modules/rc-resize-observer/node_modules/rc-util/es/ref.js +1 -25
- package/lib/cjs/node_modules/rc-resize-observer/node_modules/rc-util/es/warning.js +1 -5
- package/lib/cjs/node_modules/rc-util/es/Dom/canUseDom.js +0 -2
- package/lib/cjs/node_modules/rc-util/es/Dom/findDOMNode.js +1 -14
- package/lib/cjs/node_modules/rc-util/es/hooks/useLayoutEffect.js +2 -9
- package/lib/cjs/node_modules/rc-util/es/raf.js +0 -11
- package/lib/cjs/node_modules/rc-virtual-list/es/Filler.js +6 -25
- package/lib/cjs/node_modules/rc-virtual-list/es/Item.js +3 -14
- package/lib/cjs/node_modules/rc-virtual-list/es/List.js +103 -194
- package/lib/cjs/node_modules/rc-virtual-list/es/ScrollBar.js +16 -96
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useChildren.js +2 -11
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useDiffItem.js +8 -34
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useFrameWheel.js +0 -10
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useHeights.js +6 -39
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js +0 -16
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useOriginScroll.js +4 -9
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useScrollTo.js +3 -28
- package/lib/cjs/node_modules/rc-virtual-list/es/index.js +0 -2
- package/lib/cjs/node_modules/rc-virtual-list/es/utils/CacheMap.js +2 -9
- package/lib/cjs/node_modules/rc-virtual-list/es/utils/algorithmUtil.js +0 -15
- package/lib/cjs/node_modules/rc-virtual-list/es/utils/isFirefox.js +0 -2
- package/lib/cjs/node_modules/react-is/cjs/react-is.development.js +3 -29
- package/lib/cjs/node_modules/react-is/cjs/react-is.production.min.js +19 -45
- package/lib/cjs/node_modules/react-is/index.js +0 -5
- package/lib/cjs/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js +83 -248
- package/lib/cjs/packages/hooks/use-merge-refs/lib/esm/index.js +3 -14
- package/lib/cjs/packages/ui/scrollbar/lib/esm/Scrollbar.js +48 -86
- package/lib/cjs/packages/ui/scrollbar/lib/esm/styles/index.scss.js +1 -15
- package/lib/cjs/packages/ui/scrollbar/lib/esm/utils/index.js +0 -13
- package/lib/cjs/styles/index.scss.js +1 -4
- package/lib/cjs/use-table.js +268 -355
- package/lib/cjs/utils/index.js +11 -45
- package/lib/esm/BaseTable.js +117 -138
- package/lib/esm/ColGroupContent.js +3 -9
- package/lib/esm/SettingDrawer.js +64 -83
- package/lib/esm/Table.js +97 -124
- package/lib/esm/TableAdvancedFilter.js +37 -47
- package/lib/esm/TableBody.js +24 -34
- package/lib/esm/TableCell.js +48 -72
- package/lib/esm/TableColumnMenu.js +24 -38
- package/lib/esm/TableEmbedRow.js +8 -15
- package/lib/esm/TableHeader.js +5 -11
- package/lib/esm/TableRow.js +36 -51
- package/lib/esm/TableSettingMenu.js +33 -49
- package/lib/esm/TbodyContent.js +20 -27
- package/lib/esm/TheadContent.js +14 -21
- package/lib/esm/context.js +0 -4
- package/lib/esm/hooks/use-async-switch.js +9 -28
- package/lib/esm/hooks/use-check.js +42 -55
- package/lib/esm/hooks/use-col-hidden.js +16 -21
- package/lib/esm/hooks/use-col-set.js +5 -13
- package/lib/esm/hooks/use-col-sorter.js +18 -23
- package/lib/esm/hooks/use-col-width.js +14 -34
- package/lib/esm/hooks/use-colgroup.js +60 -66
- package/lib/esm/hooks/use-drag.js +9 -13
- package/lib/esm/hooks/use-embed-expand.js +20 -42
- package/lib/esm/hooks/use-expand.js +32 -56
- package/lib/esm/hooks/use-pagination.js +13 -25
- package/lib/esm/hooks/use-queue.js +2 -10
- package/lib/esm/node_modules/classnames/index.js +2 -9
- package/lib/esm/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js +31 -228
- package/lib/esm/node_modules/rc-resize-observer/es/index.js +3 -26
- package/lib/esm/node_modules/rc-resize-observer/node_modules/rc-util/es/Children/toArray.js +0 -3
- package/lib/esm/node_modules/rc-resize-observer/node_modules/rc-util/es/Dom/findDOMNode.js +1 -2
- package/lib/esm/node_modules/rc-resize-observer/node_modules/rc-util/es/ref.js +0 -8
- package/lib/esm/node_modules/rc-resize-observer/node_modules/rc-util/es/warning.js +0 -5
- package/lib/esm/node_modules/rc-util/es/Dom/canUseDom.js +0 -1
- package/lib/esm/node_modules/rc-util/es/Dom/findDOMNode.js +1 -2
- package/lib/esm/node_modules/rc-util/es/hooks/useLayoutEffect.js +1 -0
- package/lib/esm/node_modules/rc-util/es/raf.js +0 -10
- package/lib/esm/node_modules/rc-virtual-list/es/Filler.js +4 -15
- package/lib/esm/node_modules/rc-virtual-list/es/Item.js +1 -3
- package/lib/esm/node_modules/rc-virtual-list/es/List.js +101 -174
- package/lib/esm/node_modules/rc-virtual-list/es/ScrollBar.js +14 -86
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useChildren.js +0 -2
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useDiffItem.js +6 -25
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useFrameWheel.js +0 -6
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useHeights.js +4 -28
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js +0 -13
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useOriginScroll.js +4 -8
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useScrollTo.js +1 -19
- package/lib/esm/node_modules/rc-virtual-list/es/index.js +1 -1
- package/lib/esm/node_modules/rc-virtual-list/es/utils/CacheMap.js +2 -8
- package/lib/esm/node_modules/rc-virtual-list/es/utils/algorithmUtil.js +1 -12
- package/lib/esm/node_modules/rc-virtual-list/es/utils/isFirefox.js +0 -1
- package/lib/esm/node_modules/react-is/cjs/react-is.development.js +4 -27
- package/lib/esm/node_modules/react-is/cjs/react-is.production.min.js +20 -44
- package/lib/esm/node_modules/react-is/index.js +0 -1
- package/lib/esm/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js +82 -248
- package/lib/esm/packages/hooks/use-merge-refs/lib/esm/index.js +3 -9
- package/lib/esm/packages/ui/scrollbar/lib/esm/Scrollbar.js +47 -64
- package/lib/esm/packages/ui/scrollbar/lib/esm/styles/index.scss.js +1 -3
- package/lib/esm/packages/ui/scrollbar/lib/esm/utils/index.js +0 -10
- package/lib/esm/styles/index.scss.js +1 -3
- package/lib/esm/use-table.js +261 -318
- package/lib/esm/utils/index.js +11 -41
- package/lib/types/BaseTable.d.ts +2 -2
- package/package.json +33 -33
|
@@ -9,39 +9,29 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
|
|
16
12
|
var React = require('react');
|
|
17
|
-
|
|
18
13
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
19
|
-
|
|
20
14
|
var index = require('../utils/index.js');
|
|
21
|
-
|
|
22
15
|
var DEFAULT_COLUMNS = [];
|
|
23
16
|
/**
|
|
24
17
|
* 列操作逻辑
|
|
25
18
|
*/
|
|
26
|
-
|
|
27
19
|
var useColHidden = function useColHidden(_ref) {
|
|
28
20
|
var uniqueId = _ref.uniqueId,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
21
|
+
_ref$columns = _ref.columns,
|
|
22
|
+
columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
|
|
23
|
+
hiddenColKeysProp = _ref.hiddenColKeys,
|
|
24
|
+
onHiddenColKeysChange = _ref.onHiddenColKeysChange;
|
|
33
25
|
var cacheKey = uniqueId ? uniqueId + "_hiddenColKeys" : '';
|
|
34
|
-
|
|
35
26
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
return index.parseLocalArray({
|
|
28
|
+
key: cacheKey,
|
|
29
|
+
defaultValue: []
|
|
30
|
+
});
|
|
31
|
+
}, hiddenColKeysProp, onHiddenColKeysChange),
|
|
32
|
+
_hiddenColKeys = _useUncontrolledState[0],
|
|
33
|
+
setHiddenColKeys = _useUncontrolledState[1];
|
|
34
|
+
// 保证 includes 匹配 column,是有效的可展示的列
|
|
45
35
|
var hiddenColKeys = React.useMemo(function () {
|
|
46
36
|
return _hiddenColKeys.filter(function (dataKey) {
|
|
47
37
|
return typeof dataKey === 'string' && dataKey !== '';
|
|
@@ -50,12 +40,11 @@ var useColHidden = function useColHidden(_ref) {
|
|
|
50
40
|
React.useEffect(function () {
|
|
51
41
|
if (!cacheKey) return;
|
|
52
42
|
window.localStorage.setItem(cacheKey, JSON.stringify(hiddenColKeys));
|
|
53
|
-
}, [cacheKey, hiddenColKeys]);
|
|
54
|
-
|
|
43
|
+
}, [cacheKey, hiddenColKeys]);
|
|
44
|
+
// 用于维护列操作时显隐临时状态
|
|
55
45
|
var _useState = React.useState(hiddenColKeys),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
cacheHiddenColKeys = _useState[0],
|
|
47
|
+
setCacheHiddenColKeys = _useState[1];
|
|
59
48
|
var visibleCols = React.useMemo(function () {
|
|
60
49
|
// TODO: 支持隐藏叶子结点,而不是根节点
|
|
61
50
|
// @ts-ignore
|
|
@@ -71,5 +60,4 @@ var useColHidden = function useColHidden(_ref) {
|
|
|
71
60
|
setCacheHiddenColKeys: setCacheHiddenColKeys
|
|
72
61
|
};
|
|
73
62
|
};
|
|
74
|
-
|
|
75
63
|
exports.useColHidden = useColHidden;
|
|
@@ -9,50 +9,38 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
|
|
16
12
|
var React = require('react');
|
|
17
|
-
|
|
18
13
|
var DEFAULT_COLUMNS = [];
|
|
19
14
|
/**
|
|
20
15
|
* 列设置
|
|
21
16
|
*/
|
|
22
|
-
|
|
23
17
|
var useColSet = function useColSet(_ref) {
|
|
24
18
|
var _ref$columns = _ref.columns,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
|
|
20
|
+
sortedColKeysProp = _ref.sortedColKeys,
|
|
21
|
+
hiddenColKeysProp = _ref.hiddenColKeys;
|
|
28
22
|
var isColumnsEqual = React.useMemo(function () {
|
|
29
|
-
var _a;
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
var _a;
|
|
24
|
+
// 判断columns和之前的是不是一样的,如果之前columns对不上,那么认为设置数据无效。
|
|
32
25
|
if (!sortedColKeysProp) {
|
|
33
26
|
return true;
|
|
34
27
|
}
|
|
35
|
-
|
|
36
28
|
if (columns.length !== sortedColKeysProp.length) {
|
|
37
29
|
return false;
|
|
38
30
|
}
|
|
39
|
-
|
|
40
31
|
for (var cIndex = 0; cIndex < columns.length; cIndex++) {
|
|
41
32
|
var exist = false;
|
|
42
33
|
var dataKey = (_a = columns[cIndex]) === null || _a === void 0 ? void 0 : _a.dataKey;
|
|
43
|
-
|
|
44
34
|
for (var sIndex = 0; sIndex < sortedColKeysProp.length; sIndex++) {
|
|
45
35
|
if (dataKey === sortedColKeysProp[sIndex]) {
|
|
46
36
|
exist = true;
|
|
47
37
|
break;
|
|
48
38
|
}
|
|
49
39
|
}
|
|
50
|
-
|
|
51
40
|
if (!exist) {
|
|
52
41
|
return false;
|
|
53
42
|
}
|
|
54
43
|
}
|
|
55
|
-
|
|
56
44
|
return true;
|
|
57
45
|
}, [columns, sortedColKeysProp]);
|
|
58
46
|
return {
|
|
@@ -60,5 +48,4 @@ var useColSet = function useColSet(_ref) {
|
|
|
60
48
|
hiddenColKeys: isColumnsEqual ? hiddenColKeysProp : undefined
|
|
61
49
|
};
|
|
62
50
|
};
|
|
63
|
-
|
|
64
51
|
exports.useColSet = useColSet;
|
|
@@ -9,44 +9,32 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
|
|
16
12
|
var React = require('react');
|
|
17
|
-
|
|
18
13
|
var useUpdateEffect = require('@hi-ui/use-update-effect');
|
|
19
|
-
|
|
20
14
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
21
|
-
|
|
22
15
|
var useLatest = require('@hi-ui/use-latest');
|
|
23
|
-
|
|
24
16
|
var index = require('../utils/index.js');
|
|
25
|
-
|
|
26
17
|
var DEFAULT_COLUMNS = [];
|
|
27
18
|
/**
|
|
28
19
|
* 列排序
|
|
29
20
|
*/
|
|
30
|
-
|
|
31
21
|
var useColSorter = function useColSorter(_ref) {
|
|
32
22
|
var uniqueId = _ref.uniqueId,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
23
|
+
_ref$columns = _ref.columns,
|
|
24
|
+
columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
|
|
25
|
+
sortedColKeysProp = _ref.sortedColKeys,
|
|
26
|
+
onSortedColKeysChange = _ref.onSortedColKeysChange;
|
|
37
27
|
var cacheKey = uniqueId ? uniqueId + "_sortCols" : '';
|
|
38
|
-
|
|
39
28
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
29
|
+
return index.parseLocalArray({
|
|
30
|
+
key: cacheKey,
|
|
31
|
+
defaultValue: columns.map(function (column) {
|
|
32
|
+
return column.dataKey;
|
|
33
|
+
})
|
|
34
|
+
});
|
|
35
|
+
}, sortedColKeysProp, onSortedColKeysChange),
|
|
36
|
+
sortedColKeys = _useUncontrolledState[0],
|
|
37
|
+
setSortColKeys = _useUncontrolledState[1];
|
|
50
38
|
useUpdateEffect.useUpdateEffect(function () {
|
|
51
39
|
// 当column发生改变的时候,同步 setting 的 sortedCols 设置
|
|
52
40
|
setSortColKeys(columns.map(function (column) {
|
|
@@ -66,13 +54,12 @@ var useColSorter = function useColSorter(_ref) {
|
|
|
66
54
|
React.useEffect(function () {
|
|
67
55
|
if (!cacheKey) return;
|
|
68
56
|
window.localStorage.setItem(cacheKey, JSON.stringify(sortedColKeys));
|
|
69
|
-
}, [cacheKey, sortedColKeys]);
|
|
70
|
-
|
|
57
|
+
}, [cacheKey, sortedColKeys]);
|
|
58
|
+
// 用于维护列操作时排序临时状态((未确认保存时))
|
|
71
59
|
var _useState = React.useState(sortedCols),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
60
|
+
_cacheSortedCols = _useState[0],
|
|
61
|
+
setCacheSortedCols = _useState[1];
|
|
62
|
+
// 保证排序的 column,是有效的可展示的列
|
|
76
63
|
var cacheSortedCols = React.useMemo(function () {
|
|
77
64
|
return _cacheSortedCols.filter(function (col) {
|
|
78
65
|
return col && typeof col.dataKey === 'string' && col.dataKey !== '';
|
|
@@ -85,5 +72,4 @@ var useColSorter = function useColSorter(_ref) {
|
|
|
85
72
|
setCacheSortedCols: setCacheSortedCols
|
|
86
73
|
};
|
|
87
74
|
};
|
|
88
|
-
|
|
89
75
|
exports.useColSorter = useColSorter;
|
|
@@ -9,56 +9,32 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var React = require('react');
|
|
19
|
-
|
|
20
13
|
var index = require('../utils/index.js');
|
|
21
|
-
|
|
22
14
|
var useUpdateEffect = require('@hi-ui/use-update-effect');
|
|
23
|
-
|
|
24
|
-
function _interopDefaultLegacy(e) {
|
|
25
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
26
|
-
'default': e
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
|
|
32
15
|
var useColWidth = function useColWidth(_ref) {
|
|
33
16
|
var resizable = _ref.resizable,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var measureRowElementRef =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
setColWidths = _React$useState[1];
|
|
43
|
-
|
|
17
|
+
columns = _ref.columns,
|
|
18
|
+
virtual = _ref.virtual;
|
|
19
|
+
var measureRowElementRef = React.useRef(null);
|
|
20
|
+
var _React$useState = React.useState(function () {
|
|
21
|
+
return index.getGroupItemWidth(columns);
|
|
22
|
+
}),
|
|
23
|
+
colWidths = _React$useState[0],
|
|
24
|
+
setColWidths = _React$useState[1];
|
|
44
25
|
var getVirtualWidths = React.useCallback(function () {
|
|
45
26
|
var measureRowElement = measureRowElementRef.current;
|
|
46
|
-
|
|
47
27
|
if (!measureRowElement) {
|
|
48
28
|
return index.getGroupItemWidth(columns);
|
|
49
29
|
}
|
|
50
30
|
/** 虚拟滚动时,内容宽度不能用以前table自动渲染的方式获取,需要手动计算 */
|
|
51
|
-
|
|
52
|
-
|
|
53
31
|
var columnDefaultWidth = 200;
|
|
54
32
|
var containerWidth = measureRowElement.clientWidth;
|
|
55
33
|
var totalWidth = 0;
|
|
56
34
|
/** 虚拟滚动,需要根据collist的虚拟宽度来计算宽度 */
|
|
57
|
-
|
|
58
35
|
columns.forEach(function (columnItem) {
|
|
59
36
|
totalWidth += columnItem.width || columnDefaultWidth;
|
|
60
37
|
});
|
|
61
|
-
|
|
62
38
|
if (totalWidth < containerWidth) {
|
|
63
39
|
// 容器宽度大于设置的宽度总和时,col宽度等比分分配占满容器。
|
|
64
40
|
return columns.map(function (columnItem) {
|
|
@@ -83,15 +59,14 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
83
59
|
/**
|
|
84
60
|
* 根据实际内容区(table 的第一行)渲染,再次精确收集并设置每列宽度
|
|
85
61
|
*/
|
|
86
|
-
|
|
87
|
-
React__default["default"].useEffect(function () {
|
|
62
|
+
React.useEffect(function () {
|
|
88
63
|
var measureRowElement = measureRowElementRef.current;
|
|
89
|
-
|
|
90
64
|
if (measureRowElement) {
|
|
91
65
|
var _resizeObserver = new ResizeObserver(function () {
|
|
92
66
|
if (virtual) {
|
|
93
67
|
setColWidths(getVirtualWidths());
|
|
94
|
-
}
|
|
68
|
+
}
|
|
69
|
+
// else {
|
|
95
70
|
// if (measureRowElement.childNodes) {
|
|
96
71
|
// const _realColumnsWidth = Array.from(measureRowElement.childNodes).map((node) => {
|
|
97
72
|
// return (node as HTMLElement).getBoundingClientRect().width || 0
|
|
@@ -101,27 +76,22 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
101
76
|
// }
|
|
102
77
|
// }
|
|
103
78
|
// }
|
|
104
|
-
|
|
105
79
|
});
|
|
106
80
|
|
|
107
81
|
_resizeObserver.observe(measureRowElement);
|
|
108
82
|
}
|
|
109
|
-
|
|
110
|
-
|
|
83
|
+
return function () {};
|
|
84
|
+
// 测量元素在内容列为空时会是空,切换会使测量元素变化,导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
|
|
111
85
|
}, [getVirtualWidths, virtual]);
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
setHeaderTableElement = _React$useState2[1];
|
|
86
|
+
var _React$useState2 = React.useState(null),
|
|
87
|
+
headerTableElement = _React$useState2[0],
|
|
88
|
+
setHeaderTableElement = _React$useState2[1];
|
|
116
89
|
/**
|
|
117
90
|
* 控制列最小可调整宽度
|
|
118
91
|
*/
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
var minColWidth = React__default["default"].useMemo(function () {
|
|
92
|
+
var minColWidth = React.useMemo(function () {
|
|
122
93
|
if (resizable && headerTableElement) {
|
|
123
94
|
var resizableHandlerWidth = 4;
|
|
124
|
-
|
|
125
95
|
var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
|
|
126
96
|
var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
|
|
127
97
|
var childNodes = Array.from(th.childNodes);
|
|
@@ -131,17 +101,14 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
131
101
|
return prev + next;
|
|
132
102
|
}) + thPaddingLeft * 2 + resizableHandlerWidth;
|
|
133
103
|
});
|
|
134
|
-
|
|
135
104
|
return _minColWidth;
|
|
136
105
|
}
|
|
137
|
-
|
|
138
106
|
return Array(columns.length).fill(0);
|
|
139
107
|
}, [columns.length, headerTableElement, resizable]);
|
|
140
108
|
/**
|
|
141
109
|
* 列宽拖拽 resize,只处理拖拽线两边的列宽度
|
|
142
110
|
*/
|
|
143
|
-
|
|
144
|
-
var onColumnResizable = React__default["default"].useCallback(function (_, _ref2, index) {
|
|
111
|
+
var onColumnResizable = React.useCallback(function (_, _ref2, index) {
|
|
145
112
|
var size = _ref2.size;
|
|
146
113
|
var minWidth = minColWidth[index];
|
|
147
114
|
var anotherMinWidth = minColWidth[index + 1];
|
|
@@ -149,26 +116,24 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
149
116
|
setColWidths(function (prev) {
|
|
150
117
|
var nextColWidths = [].concat(prev);
|
|
151
118
|
var anotherWidth = nextColWidths[index + 1] + nextColWidths[index] - nextWidth;
|
|
152
|
-
|
|
153
119
|
if (anotherWidth <= anotherMinWidth) {
|
|
154
120
|
anotherWidth = anotherMinWidth;
|
|
155
121
|
nextWidth = nextColWidths[index + 1] - anotherMinWidth + nextColWidths[index];
|
|
156
122
|
}
|
|
157
|
-
|
|
158
123
|
nextColWidths[index] = nextWidth;
|
|
159
124
|
nextColWidths[index + 1] = anotherWidth;
|
|
160
125
|
return nextColWidths;
|
|
161
126
|
});
|
|
162
127
|
}, [minColWidth]);
|
|
163
|
-
var getColgroupProps =
|
|
128
|
+
var getColgroupProps = React.useCallback(function (column, index) {
|
|
164
129
|
var width = colWidths[index] || undefined;
|
|
165
130
|
return {
|
|
166
131
|
style: {
|
|
167
132
|
width: width,
|
|
168
133
|
// TODO(疑惑): minWidth 所要解决的问题
|
|
169
134
|
minWidth: width
|
|
170
|
-
}
|
|
171
|
-
|
|
135
|
+
}
|
|
136
|
+
// 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
|
|
172
137
|
};
|
|
173
138
|
}, [colWidths]);
|
|
174
139
|
return {
|
|
@@ -179,5 +144,4 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
179
144
|
colWidths: colWidths
|
|
180
145
|
};
|
|
181
146
|
};
|
|
182
|
-
|
|
183
147
|
exports.useColWidth = useColWidth;
|
|
@@ -9,99 +9,78 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var React = require('react');
|
|
19
|
-
|
|
20
13
|
var treeUtils = require('@hi-ui/tree-utils');
|
|
21
|
-
|
|
22
14
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
23
|
-
|
|
24
|
-
function _interopDefaultLegacy(e) {
|
|
25
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
26
|
-
'default': e
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
|
|
32
15
|
var useColumns = function useColumns(_ref) {
|
|
33
|
-
var columns = _ref.columns;
|
|
34
|
-
|
|
35
|
-
var _React$useMemo =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
// @ts-ignore
|
|
39
|
-
|
|
40
|
-
var flattedColumns = treeUtils.flattenTree(clonedColumns, function (node) {
|
|
41
|
-
var _a;
|
|
42
|
-
|
|
43
|
-
if (node.depth > maxDepth) {
|
|
44
|
-
maxDepth = node.depth;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
var raw = node.raw;
|
|
48
|
-
return Object.assign(Object.assign({}, node), {
|
|
49
|
-
id: raw.dataKey,
|
|
50
|
-
width: raw.width,
|
|
51
|
-
// TODO: remove it
|
|
52
|
-
dataKey: raw.dataKey,
|
|
53
|
-
title: raw.title,
|
|
54
|
-
align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
|
|
55
|
-
render: raw.render
|
|
56
|
-
});
|
|
57
|
-
}); // 记录下标位置,方便冻结列操作计算时快速获取更新
|
|
58
|
-
// 记录下标位置,方便冻结列操作计算时快速获取更新
|
|
59
|
-
|
|
60
|
-
flattedColumns.forEach(function (column, index) {
|
|
16
|
+
var columns = _ref.columns;
|
|
17
|
+
// 拉平后的数据
|
|
18
|
+
var _React$useMemo = React.useMemo(function () {
|
|
19
|
+
var clonedColumns = treeUtils.cloneTree(columns);
|
|
20
|
+
var maxDepth = 0;
|
|
61
21
|
// @ts-ignore
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
22
|
+
// @ts-ignore
|
|
23
|
+
var flattedColumns = treeUtils.flattenTree(clonedColumns, function (node) {
|
|
24
|
+
var _a;
|
|
25
|
+
if (node.depth > maxDepth) {
|
|
26
|
+
maxDepth = node.depth;
|
|
27
|
+
}
|
|
28
|
+
var raw = node.raw;
|
|
29
|
+
return Object.assign(Object.assign({}, node), {
|
|
30
|
+
id: raw.dataKey,
|
|
31
|
+
width: raw.width,
|
|
32
|
+
// TODO: remove it
|
|
33
|
+
dataKey: raw.dataKey,
|
|
34
|
+
title: raw.title,
|
|
35
|
+
align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
|
|
36
|
+
render: raw.render
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
// 记录下标位置,方便冻结列操作计算时快速获取更新
|
|
40
|
+
// 记录下标位置,方便冻结列操作计算时快速获取更新
|
|
41
|
+
flattedColumns.forEach(function (column, index) {
|
|
42
|
+
// @ts-ignore
|
|
43
|
+
column.index = index;
|
|
44
|
+
});
|
|
45
|
+
return [flattedColumns, maxDepth];
|
|
46
|
+
}, [columns]),
|
|
47
|
+
flattedColumns = _React$useMemo[0],
|
|
48
|
+
maxColumnDepth = _React$useMemo[1];
|
|
49
|
+
// 末级 column
|
|
50
|
+
var flattedColumnsWithoutChildren = React.useMemo(function () {
|
|
71
51
|
return flattedColumns.filter(function (col) {
|
|
72
52
|
return !typeAssertion.isArrayNonEmpty(col.children);
|
|
73
53
|
});
|
|
74
54
|
}, [flattedColumns]);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
55
|
+
var _React$useMemo2 = React.useMemo(function () {
|
|
56
|
+
var nextColumns = [].concat(
|
|
57
|
+
// @ts-ignore
|
|
58
|
+
// flattedColumns.filter((col) => isLeaf(col)) as FlattedTableColumnItemData[]
|
|
59
|
+
flattedColumns);
|
|
60
|
+
// 表头分组
|
|
61
|
+
// 在最后一层,colSpan = 1, rowSpan = maxDepth - depth + 1
|
|
62
|
+
// 不在最后一层,rowSpan = 1, colSpan = 叶子节点后代数量
|
|
63
|
+
// 表头分组
|
|
64
|
+
// 在最后一层,colSpan = 1, rowSpan = maxDepth - depth + 1
|
|
65
|
+
// 不在最后一层,rowSpan = 1, colSpan = 叶子节点后代数量
|
|
66
|
+
flattedColumns.forEach(function (column) {
|
|
67
|
+
if (treeUtils.isLeaf(column)) {
|
|
68
|
+
column.rowSpan = maxColumnDepth - column.depth + 1;
|
|
69
|
+
column.colSpan = 1;
|
|
70
|
+
} else {
|
|
71
|
+
column.rowSpan = 1;
|
|
72
|
+
column.colSpan = treeUtils.getLeafChildren(column).length;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
var leafColumns = flattedColumns.filter(function (col) {
|
|
76
|
+
return treeUtils.isLeaf(col);
|
|
77
|
+
});
|
|
78
|
+
var groupedColumns = treeUtils.groupByTreeDepth(nextColumns);
|
|
79
|
+
return [nextColumns, groupedColumns, leafColumns];
|
|
80
|
+
}, [flattedColumns, maxColumnDepth]),
|
|
81
|
+
mergedColumns = _React$useMemo2[0],
|
|
82
|
+
groupedColumns = _React$useMemo2[1],
|
|
83
|
+
leafColumns = _React$useMemo2[2];
|
|
105
84
|
return {
|
|
106
85
|
// getColgroupProps,
|
|
107
86
|
flattedColumns: flattedColumns,
|
|
@@ -111,5 +90,4 @@ var useColumns = function useColumns(_ref) {
|
|
|
111
90
|
flattedColumnsWithoutChildren: flattedColumnsWithoutChildren
|
|
112
91
|
};
|
|
113
92
|
};
|
|
114
|
-
|
|
115
93
|
exports.useColumns = useColumns;
|
|
@@ -9,54 +9,34 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var React = require('react');
|
|
19
|
-
|
|
20
13
|
var useLatest = require('@hi-ui/use-latest');
|
|
21
|
-
|
|
22
14
|
var treeUtils = require('@hi-ui/tree-utils');
|
|
23
|
-
|
|
24
15
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
25
|
-
|
|
26
|
-
function _interopDefaultLegacy(e) {
|
|
27
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
28
|
-
'default': e
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
|
-
|
|
34
16
|
var useTableDrag = function useTableDrag(_ref) {
|
|
35
17
|
var cacheData = _ref.cacheData,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var dragRowRef =
|
|
18
|
+
setCacheData = _ref.setCacheData,
|
|
19
|
+
draggable = _ref.draggable,
|
|
20
|
+
onDropEnd = _ref.onDropEnd,
|
|
21
|
+
onDropProp = _ref.onDrop,
|
|
22
|
+
fieldKey = _ref.fieldKey;
|
|
23
|
+
var dragRowRef = React.useRef(null);
|
|
42
24
|
var onDropEndLatest = useLatest.useLatestCallback(onDropEnd);
|
|
43
25
|
var onDrop = React.useCallback(function (evt, sourceId, targetId, dragDirection) {
|
|
44
26
|
if (!draggable) return;
|
|
45
|
-
if (targetId === sourceId) return;
|
|
27
|
+
if (targetId === sourceId) return;
|
|
28
|
+
// TODO: 根据 id 查询数据原始数据或者直接使用引用值,两者选择,避免bug
|
|
46
29
|
// const { rowData, dropRowData, level } = dragRowRef.current
|
|
47
|
-
|
|
48
30
|
var sourceNode = treeUtils.findNodeById(cacheData, sourceId, {
|
|
49
31
|
idFieldName: fieldKey
|
|
50
32
|
});
|
|
51
33
|
var targetNode = treeUtils.findNodeById(cacheData, targetId, {
|
|
52
34
|
idFieldName: fieldKey
|
|
53
35
|
});
|
|
54
|
-
|
|
55
36
|
if (!sourceNode || !targetNode) {
|
|
56
37
|
// console.log('未找到任何节点(sourceNode, targetNode)', sourceNode, targetNode)
|
|
57
38
|
return;
|
|
58
39
|
}
|
|
59
|
-
|
|
60
40
|
var nextTreeData = treeUtils.cloneTree(cacheData);
|
|
61
41
|
treeUtils.deleteNodeById(nextTreeData, sourceId, {
|
|
62
42
|
idFieldName: fieldKey
|
|
@@ -64,7 +44,8 @@ var useTableDrag = function useTableDrag(_ref) {
|
|
|
64
44
|
treeUtils.insertNodeById(nextTreeData, targetId, sourceNode, dragDirection === 'top' ? 0 : 1, {
|
|
65
45
|
idFieldName: fieldKey
|
|
66
46
|
});
|
|
67
|
-
var resultMaybePromise = typeAssertion.isFunction(onDropProp) ?
|
|
47
|
+
var resultMaybePromise = typeAssertion.isFunction(onDropProp) ?
|
|
48
|
+
// TODO: 支持 tree 拖拽层级,第四个参数
|
|
68
49
|
onDropProp(evt, {
|
|
69
50
|
dragNode: sourceNode,
|
|
70
51
|
dropNode: targetNode,
|
|
@@ -73,7 +54,6 @@ var useTableDrag = function useTableDrag(_ref) {
|
|
|
73
54
|
after: nextTreeData
|
|
74
55
|
}
|
|
75
56
|
}) : true;
|
|
76
|
-
|
|
77
57
|
if (typeAssertion.isPromise(resultMaybePromise)) {
|
|
78
58
|
resultMaybePromise.then(function (returnResult) {
|
|
79
59
|
if (returnResult === true) {
|
|
@@ -105,5 +85,4 @@ var useTableDrag = function useTableDrag(_ref) {
|
|
|
105
85
|
dragRowRef: dragRowRef
|
|
106
86
|
};
|
|
107
87
|
};
|
|
108
|
-
|
|
109
88
|
exports.useTableDrag = useTableDrag;
|