tntd 2.8.8 → 2.8.10
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/es/array-input/index.js +99 -10
- package/es/array-input/index.js.map +1 -1
- package/es/array-input/index.less +5 -0
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/es/locale/en_US.js +1 -1
- package/es/locale/en_US.js.map +1 -1
- package/es/svg-components/illustration-offline.js +11 -29
- package/es/svg-components/illustration-offline.js.map +1 -1
- package/es/title/index.js +18 -4
- package/es/title/index.js.map +1 -1
- package/es/title/index.less +86 -35
- package/es/tntd-rc-select/style/index.less +4 -0
- package/es/tntd-virtual-tree/index.js +218 -0
- package/es/tntd-virtual-tree/index.js.map +1 -0
- package/es/tntd-virtual-tree/index.less +99 -0
- package/es/tntd-virtual-tree/utils.js +296 -0
- package/es/tntd-virtual-tree/utils.js.map +1 -0
- package/es/tntd-virtual-tree-select/VirtualTree.js +125 -0
- package/es/tntd-virtual-tree-select/VirtualTree.js.map +1 -0
- package/es/tntd-virtual-tree-select/index.js +65 -0
- package/es/tntd-virtual-tree-select/index.js.map +1 -0
- package/es/tntd-virtual-tree-select/index.less +3 -0
- package/es/tntd-virtual-tree-select/tree.less +29 -0
- package/es/tntd-virtual-tree-select/utils.js +135 -0
- package/es/tntd-virtual-tree-select/utils.js.map +1 -0
- package/lib/array-input/index.d.ts.map +1 -1
- package/lib/array-input/index.js +112 -14
- package/lib/array-input/index.js.map +1 -1
- package/lib/array-input/index.less +5 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +14 -0
- package/lib/index.js.map +1 -1
- package/lib/locale/en_US.js +1 -1
- package/lib/locale/en_US.js.map +1 -1
- package/lib/svg-components/illustration-offline.d.ts.map +1 -1
- package/lib/svg-components/illustration-offline.js +11 -29
- package/lib/svg-components/illustration-offline.js.map +1 -1
- package/lib/title/index.d.ts +1 -0
- package/lib/title/index.d.ts.map +1 -1
- package/lib/title/index.js +18 -4
- package/lib/title/index.js.map +1 -1
- package/lib/title/index.less +86 -35
- package/lib/tntd-rc-select/style/index.less +4 -0
- package/lib/tntd-virtual-tree/index.d.ts +18 -0
- package/lib/tntd-virtual-tree/index.d.ts.map +1 -0
- package/lib/tntd-virtual-tree/index.js +252 -0
- package/lib/tntd-virtual-tree/index.js.map +1 -0
- package/lib/tntd-virtual-tree/index.less +99 -0
- package/lib/tntd-virtual-tree/utils.d.ts +17 -0
- package/lib/tntd-virtual-tree/utils.d.ts.map +1 -0
- package/lib/tntd-virtual-tree/utils.js +353 -0
- package/lib/tntd-virtual-tree/utils.js.map +1 -0
- package/lib/tntd-virtual-tree-select/VirtualTree.d.ts +13 -0
- package/lib/tntd-virtual-tree-select/VirtualTree.d.ts.map +1 -0
- package/lib/tntd-virtual-tree-select/VirtualTree.js +155 -0
- package/lib/tntd-virtual-tree-select/VirtualTree.js.map +1 -0
- package/lib/tntd-virtual-tree-select/index.d.ts +17 -0
- package/lib/tntd-virtual-tree-select/index.d.ts.map +1 -0
- package/lib/tntd-virtual-tree-select/index.js +76 -0
- package/lib/tntd-virtual-tree-select/index.js.map +1 -0
- package/lib/tntd-virtual-tree-select/index.less +3 -0
- package/lib/tntd-virtual-tree-select/tree.less +29 -0
- package/lib/tntd-virtual-tree-select/utils.d.ts +10 -0
- package/lib/tntd-virtual-tree-select/utils.d.ts.map +1 -0
- package/lib/tntd-virtual-tree-select/utils.js +167 -0
- package/lib/tntd-virtual-tree-select/utils.js.map +1 -0
- package/package.json +6 -2
package/lib/title/index.less
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
.tntd-title {
|
|
2
2
|
& {
|
|
3
3
|
position: relative;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
overflow: hidden;
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: space-between;
|
|
8
7
|
}
|
|
9
8
|
|
|
10
9
|
&.has-number {
|
|
@@ -82,6 +81,7 @@
|
|
|
82
81
|
transform: rotate(-45deg);
|
|
83
82
|
}
|
|
84
83
|
}
|
|
84
|
+
|
|
85
85
|
&.is-bold {
|
|
86
86
|
.tntd-title-text {
|
|
87
87
|
h3 {
|
|
@@ -89,22 +89,26 @@
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
|
|
92
|
+
|
|
93
|
+
&.large,&.h1 {
|
|
93
94
|
& {
|
|
94
|
-
height:
|
|
95
|
-
line-height:
|
|
95
|
+
height: 40px;
|
|
96
|
+
line-height: 40px;
|
|
96
97
|
}
|
|
97
98
|
.tntd-title-text {
|
|
98
99
|
h3 {
|
|
99
|
-
font-size:
|
|
100
|
+
font-size: 20px;
|
|
100
101
|
}
|
|
101
102
|
&::before {
|
|
102
|
-
height:
|
|
103
|
-
top:
|
|
103
|
+
height: 16px;
|
|
104
|
+
top: 12px;
|
|
105
|
+
}
|
|
106
|
+
.sub-title {
|
|
107
|
+
font-size: 16px;
|
|
104
108
|
}
|
|
105
109
|
}
|
|
106
110
|
}
|
|
107
|
-
&.middle {
|
|
111
|
+
&.middle,&.h2 {
|
|
108
112
|
& {
|
|
109
113
|
height: 36px;
|
|
110
114
|
line-height: 36px;
|
|
@@ -115,64 +119,111 @@
|
|
|
115
119
|
}
|
|
116
120
|
&::before {
|
|
117
121
|
height: 14px;
|
|
118
|
-
top:
|
|
122
|
+
top: 11px;
|
|
119
123
|
}
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
|
-
&.
|
|
126
|
+
&.h3,&.h4,&.h5,&.small{
|
|
123
127
|
& {
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
height: 22px;
|
|
129
|
+
line-height: 22px;
|
|
130
|
+
.tntd-title-text{
|
|
131
|
+
h3 {
|
|
132
|
+
font-size: 14px;
|
|
133
|
+
}
|
|
134
|
+
.sub-title{
|
|
135
|
+
font-size: 14px;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
126
138
|
}
|
|
139
|
+
}
|
|
140
|
+
// 默认h3 和 small
|
|
141
|
+
&.h3,&.small {
|
|
127
142
|
.tntd-title-text {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
143
|
+
&::before {
|
|
144
|
+
height: 12px;
|
|
145
|
+
top: 5px;
|
|
146
|
+
}
|
|
147
|
+
h3 {
|
|
148
|
+
font-weight: bold;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
&.h4 {
|
|
153
|
+
.tntd-title-text {
|
|
154
|
+
&::before {
|
|
155
|
+
display: none;
|
|
156
|
+
}
|
|
157
|
+
h3 {
|
|
158
|
+
font-weight: bold;
|
|
159
|
+
margin-left:0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
&.h5 {
|
|
164
|
+
.tntd-title-text {
|
|
165
|
+
&::before {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
168
|
+
h3 {
|
|
169
|
+
margin-left: 0;
|
|
170
|
+
font-weight: normal;
|
|
171
|
+
}
|
|
135
172
|
}
|
|
136
173
|
}
|
|
137
174
|
.tntd-title-text {
|
|
138
175
|
& {
|
|
139
176
|
position: relative;
|
|
140
|
-
|
|
177
|
+
display: flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
flex:1;
|
|
180
|
+
min-width: 0;
|
|
141
181
|
}
|
|
142
182
|
h3 {
|
|
143
183
|
font-size: 16px;
|
|
144
184
|
color: @text-color;
|
|
145
185
|
font-weight: normal;
|
|
146
186
|
margin: 0;
|
|
147
|
-
margin-
|
|
148
|
-
|
|
149
|
-
|
|
187
|
+
margin-left: 12px;
|
|
188
|
+
white-space: nowrap;
|
|
189
|
+
overflow: hidden;
|
|
190
|
+
text-overflow: ellipsis;
|
|
191
|
+
&.has-sub-title{
|
|
192
|
+
max-width: 70%;
|
|
193
|
+
}
|
|
150
194
|
}
|
|
151
|
-
|
|
195
|
+
.sub-title {
|
|
152
196
|
position: relative;
|
|
153
|
-
|
|
154
|
-
font-size: 12px;
|
|
197
|
+
font-size: 14px;
|
|
155
198
|
color: #8b919e;
|
|
156
|
-
|
|
157
|
-
|
|
199
|
+
max-width: 30%;
|
|
200
|
+
white-space: nowrap;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
text-overflow: ellipsis;
|
|
203
|
+
margin-left: 8px;
|
|
204
|
+
}
|
|
205
|
+
.sub-tip{
|
|
206
|
+
margin-left: 4px;
|
|
207
|
+
font-size: 16px;
|
|
208
|
+
color:@text-color;
|
|
158
209
|
}
|
|
159
210
|
&::before {
|
|
160
211
|
position: absolute;
|
|
161
212
|
left: 0;
|
|
162
|
-
top:
|
|
213
|
+
top: 10px;
|
|
163
214
|
background-color: @primary-color;
|
|
164
215
|
content: '';
|
|
165
216
|
width: 4px;
|
|
166
217
|
height: 12px;
|
|
167
|
-
margin-right:
|
|
218
|
+
margin-right: 4px;
|
|
168
219
|
border-radius: 2px;
|
|
169
220
|
}
|
|
170
221
|
}
|
|
171
222
|
.tntd-title-extra {
|
|
172
223
|
& {
|
|
173
224
|
position: relative;
|
|
174
|
-
|
|
175
|
-
|
|
225
|
+
margin-left: 16px;
|
|
226
|
+
color: @primary-color;
|
|
176
227
|
}
|
|
177
228
|
}
|
|
178
229
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default VirtualTree;
|
|
2
|
+
declare function VirtualTree({ itemHeight, height, filterKey, treeData, checkable, checkStrictly, checkedKeys, defaultExpandAll, expandedKeys, fieldNames, titleRender, onCheck, onExpand }: {
|
|
3
|
+
itemHeight: any;
|
|
4
|
+
height: any;
|
|
5
|
+
filterKey: any;
|
|
6
|
+
treeData: any;
|
|
7
|
+
checkable: any;
|
|
8
|
+
checkStrictly: any;
|
|
9
|
+
checkedKeys: any;
|
|
10
|
+
defaultExpandAll?: boolean | undefined;
|
|
11
|
+
expandedKeys: any;
|
|
12
|
+
fieldNames: any;
|
|
13
|
+
titleRender: any;
|
|
14
|
+
onCheck: any;
|
|
15
|
+
onExpand: any;
|
|
16
|
+
}): React.JSX.Element;
|
|
17
|
+
import React from "react";
|
|
18
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tntd-virtual-tree/index.jsx"],"names":[],"mappings":";AAyBA;;;;;;;;;;;;;;sBAiNC"}
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
|
|
11
|
+
var _icon = _interopRequireDefault(require("../icon"));
|
|
12
|
+
var _ellipsis = _interopRequireDefault(require("../ellipsis"));
|
|
13
|
+
var _empty = _interopRequireDefault(require("../empty"));
|
|
14
|
+
var _checkbox = _interopRequireDefault(require("../checkbox"));
|
|
15
|
+
var _utils = require("./utils");
|
|
16
|
+
require("./index.less");
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
20
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
21
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
23
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
24
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
26
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(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); }
|
|
27
|
+
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; }
|
|
28
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
29
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
|
|
30
|
+
* @Descripttion: 基于antd3 tree 部分api实现的tree,增加了虚拟滚动
|
|
31
|
+
* @Author: 郑泳健
|
|
32
|
+
* @Date: 2024-07-31 14:46:55
|
|
33
|
+
* @LastEditors: 郑泳健
|
|
34
|
+
* @LastEditTime: 2024-08-09 17:51:50
|
|
35
|
+
*/
|
|
36
|
+
var VirtualTree = function VirtualTree(_ref) {
|
|
37
|
+
var itemHeight = _ref.itemHeight,
|
|
38
|
+
height = _ref.height,
|
|
39
|
+
filterKey = _ref.filterKey,
|
|
40
|
+
treeData = _ref.treeData,
|
|
41
|
+
checkable = _ref.checkable,
|
|
42
|
+
checkStrictly = _ref.checkStrictly,
|
|
43
|
+
checkedKeys = _ref.checkedKeys,
|
|
44
|
+
_ref$defaultExpandAll = _ref.defaultExpandAll,
|
|
45
|
+
defaultExpandAll = _ref$defaultExpandAll === void 0 ? true : _ref$defaultExpandAll,
|
|
46
|
+
expandedKeys = _ref.expandedKeys,
|
|
47
|
+
fieldNames = _ref.fieldNames,
|
|
48
|
+
titleRender = _ref.titleRender,
|
|
49
|
+
onCheck = _ref.onCheck,
|
|
50
|
+
onExpand = _ref.onExpand;
|
|
51
|
+
var ref = _react["default"].useRef(null);
|
|
52
|
+
var expandChangedRef = (0, _react.useRef)(0);
|
|
53
|
+
var checkedChangeRef = (0, _react.useRef)(0);
|
|
54
|
+
// 展开的节点列表
|
|
55
|
+
var _useState = (0, _react.useState)([]),
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
expandedList = _useState2[0],
|
|
58
|
+
setExpandedList = _useState2[1];
|
|
59
|
+
// checked 节点列表
|
|
60
|
+
var _useState3 = (0, _react.useState)([]),
|
|
61
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
62
|
+
checkedList = _useState4[0],
|
|
63
|
+
setCheckedList = _useState4[1];
|
|
64
|
+
// 当前被选中的节点
|
|
65
|
+
var _useState5 = (0, _react.useState)(undefined),
|
|
66
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
67
|
+
choosedValue = _useState6[0],
|
|
68
|
+
setChoosedValue = _useState6[1];
|
|
69
|
+
/** 给每个节点增加属性keys,值为其下面所有节点的集合 */
|
|
70
|
+
var treeDataWithKeys = (0, _react.useMemo)(function () {
|
|
71
|
+
return (0, _utils.addTreeNodeAttrs)(treeData, fieldNames);
|
|
72
|
+
}, [treeData, fieldNames]);
|
|
73
|
+
/** 默认是否全部展开 */
|
|
74
|
+
var mergeDefaultExpandAll = (0, _react.useMemo)(function () {
|
|
75
|
+
if (Array.isArray(expandedKeys)) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
return defaultExpandAll;
|
|
79
|
+
}, [defaultExpandAll, expandedKeys]);
|
|
80
|
+
/** 获取到所有选中的节点,因为checkedKeys可能传入的是最后一级 */
|
|
81
|
+
(0, _react.useEffect)(function () {
|
|
82
|
+
// 非第一次
|
|
83
|
+
if (checkedChangeRef.current > 0) {
|
|
84
|
+
setCheckedList(checkedKeys);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (checkable) {
|
|
88
|
+
// 如果是受控
|
|
89
|
+
if (checkStrictly) {
|
|
90
|
+
setCheckedList((0, _uniq2["default"])(Array.isArray(checkedKeys) ? checkedKeys : []));
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
var transCheckedKeys = Array.isArray(checkedKeys) ? checkedKeys.reduce(function (total, item) {
|
|
94
|
+
total.push(item);
|
|
95
|
+
var _ref2 = (0, _utils.findNodeDetail)(treeDataWithKeys, item) || {},
|
|
96
|
+
needCheckedChildrenValues = _ref2.needCheckedChildrenValues;
|
|
97
|
+
total = [].concat(_toConsumableArray(total), _toConsumableArray(needCheckedChildrenValues));
|
|
98
|
+
return total;
|
|
99
|
+
}, []) : [];
|
|
100
|
+
var _checkedKeys = (0, _utils.getFullCheckedKeys)(treeDataWithKeys, transCheckedKeys);
|
|
101
|
+
setCheckedList((0, _uniq2["default"])(_checkedKeys));
|
|
102
|
+
}
|
|
103
|
+
}, [treeDataWithKeys, checkStrictly, checkable, checkedKeys]);
|
|
104
|
+
(0, _react.useEffect)(function () {
|
|
105
|
+
setExpandedList(expandedKeys);
|
|
106
|
+
}, [expandedKeys]);
|
|
107
|
+
/** 初始化获取到所有展开的节点,因为初始化expandedKeys可能传入的是最后一级 */
|
|
108
|
+
(0, _react.useEffect)(function () {
|
|
109
|
+
if (expandChangedRef.current === 0) {
|
|
110
|
+
// 展开的节点
|
|
111
|
+
var transExpandedKeys = Array.isArray(expandedKeys) ? expandedKeys : [];
|
|
112
|
+
var _expandedKeys = (0, _utils.getFullExpandedKeys)(treeDataWithKeys, transExpandedKeys, mergeDefaultExpandAll);
|
|
113
|
+
setExpandedList(_expandedKeys);
|
|
114
|
+
}
|
|
115
|
+
}, [treeDataWithKeys, expandedKeys, mergeDefaultExpandAll]);
|
|
116
|
+
/** 最终渲染的数据 */
|
|
117
|
+
var renderData = (0, _react.useMemo)(function () {
|
|
118
|
+
return (0, _utils.flatTreeData)(treeDataWithKeys, filterKey, expandedList);
|
|
119
|
+
}, [treeDataWithKeys, filterKey, expandedList]);
|
|
120
|
+
/** 切换展开/收起 */
|
|
121
|
+
var handleToggle = function handleToggle(item) {
|
|
122
|
+
expandChangedRef.current++;
|
|
123
|
+
var _ref3 = item || {},
|
|
124
|
+
value = _ref3.value;
|
|
125
|
+
var bool = Array.isArray(expandedList) ? expandedList.includes(value) : false;
|
|
126
|
+
if (bool) {
|
|
127
|
+
var list = Array.isArray(expandedList) ? expandedList.filter(function (i) {
|
|
128
|
+
return i !== value;
|
|
129
|
+
}) : [];
|
|
130
|
+
if (onExpand) {
|
|
131
|
+
onExpand((0, _uniq2["default"])(list), {
|
|
132
|
+
node: item,
|
|
133
|
+
expanded: !bool
|
|
134
|
+
});
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
setExpandedList((0, _uniq2["default"])(list));
|
|
138
|
+
} else {
|
|
139
|
+
var arr = (0, _uniq2["default"])([].concat(_toConsumableArray(expandedList), [value]));
|
|
140
|
+
if (onExpand) {
|
|
141
|
+
onExpand(arr, {
|
|
142
|
+
node: item,
|
|
143
|
+
expanded: !bool
|
|
144
|
+
});
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
setExpandedList(arr);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
var handleCheck = function handleCheck(item, isChecked) {
|
|
151
|
+
var _value = item.value,
|
|
152
|
+
children = item.children,
|
|
153
|
+
disabled = item.disabled;
|
|
154
|
+
if (disabled) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
checkedChangeRef.current++;
|
|
158
|
+
// 需要增删的子节点
|
|
159
|
+
var itemChildrenValues = Array.isArray(children) && !!children.length ? item.needCheckedChildrenValues : [];
|
|
160
|
+
if (isChecked) {
|
|
161
|
+
// 需要删除的父节点
|
|
162
|
+
var itemParentValues = Array.isArray(item.needCheckedSiblingsValue) ? item.needCheckedSiblingsValue.map(function (i) {
|
|
163
|
+
return i.key;
|
|
164
|
+
}) : [];
|
|
165
|
+
// 当前节点所有的父节点
|
|
166
|
+
var delList = checkStrictly ? [_value] : [].concat(_toConsumableArray(itemChildrenValues), _toConsumableArray(itemParentValues), [_value]);
|
|
167
|
+
var _checkedList = checkedList.filter(function (i) {
|
|
168
|
+
return !delList.includes(i);
|
|
169
|
+
});
|
|
170
|
+
if (onCheck) {
|
|
171
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck((0, _uniq2["default"])(_checkedList), item, !isChecked);
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
setCheckedList((0, _uniq2["default"])(_checkedList));
|
|
175
|
+
} else {
|
|
176
|
+
// 递归循环其上级是否也要被选中
|
|
177
|
+
var _itemParentValues = (0, _utils.getNodeParentChoosed)(item.needCheckedSiblingsValue, [].concat(_toConsumableArray(checkedList), _toConsumableArray(itemChildrenValues), [_value]));
|
|
178
|
+
var addList = checkStrictly ? [_value] : [].concat(_toConsumableArray(itemChildrenValues), _toConsumableArray(_itemParentValues), [_value]);
|
|
179
|
+
var _checkedList2 = [].concat(_toConsumableArray(checkedList), _toConsumableArray(addList));
|
|
180
|
+
if (onCheck) {
|
|
181
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck((0, _uniq2["default"])(_checkedList2), item, !isChecked);
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
setCheckedList((0, _uniq2["default"])(_checkedList2));
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
var handleChoosed = function handleChoosed(item) {
|
|
188
|
+
if (item.disabled) {
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
setChoosedValue(item.value);
|
|
192
|
+
};
|
|
193
|
+
var defaultRenderItem = function defaultRenderItem(item) {
|
|
194
|
+
return _react["default"].createElement(_ellipsis["default"], {
|
|
195
|
+
title: item.title,
|
|
196
|
+
widthLimit: '100%'
|
|
197
|
+
});
|
|
198
|
+
};
|
|
199
|
+
return _react["default"].createElement("div", {
|
|
200
|
+
className: "tntd-virtual-tree"
|
|
201
|
+
}, !Array.isArray(renderData) || !renderData.length ? _react["default"].createElement(_empty["default"], {
|
|
202
|
+
size: "small"
|
|
203
|
+
}) : _react["default"].createElement(_rcVirtualList["default"], {
|
|
204
|
+
ref: ref,
|
|
205
|
+
height: height || 300,
|
|
206
|
+
itemHeight: itemHeight || 32,
|
|
207
|
+
data: renderData
|
|
208
|
+
}, function (item) {
|
|
209
|
+
var level = item.level,
|
|
210
|
+
children = item.children,
|
|
211
|
+
disabled = item.disabled;
|
|
212
|
+
var bool = Array.isArray(expandedList) ? expandedList.includes(item.value) : false;
|
|
213
|
+
// 当前节点半选状态
|
|
214
|
+
var indeterminateStatus = (0, _utils.getIndeterminate)(item, checkedList);
|
|
215
|
+
// 当前节点是否被选中
|
|
216
|
+
var checkedBingo = Array.isArray(checkedList) ? checkedList.includes(item.value) : false;
|
|
217
|
+
var isChecked = !checkStrictly || disabled ? checkedBingo && !indeterminateStatus : checkedBingo;
|
|
218
|
+
var checkBoxAttrs = {
|
|
219
|
+
className: "".concat(disabled ? 'tntd-virtual-tree-checkbox-disabled' : ''),
|
|
220
|
+
onChange: function onChange() {
|
|
221
|
+
return handleCheck(item, isChecked);
|
|
222
|
+
},
|
|
223
|
+
checked: isChecked
|
|
224
|
+
};
|
|
225
|
+
// 状态没有半选模式
|
|
226
|
+
if (!checkStrictly) {
|
|
227
|
+
checkBoxAttrs.indeterminate = indeterminateStatus;
|
|
228
|
+
}
|
|
229
|
+
return _react["default"].createElement("div", {
|
|
230
|
+
className: "tntd-virtual-tree-item ".concat(disabled ? 'tntd-virtual-tree-item_disabled' : ''),
|
|
231
|
+
style: {
|
|
232
|
+
paddingLeft: level * 18
|
|
233
|
+
},
|
|
234
|
+
key: item.value
|
|
235
|
+
}, _react["default"].createElement("div", {
|
|
236
|
+
className: "tntd-virtual-tree-item-expand-icon"
|
|
237
|
+
}, Array.isArray(children) && !!children.length ? _react["default"].createElement(_icon["default"], {
|
|
238
|
+
type: bool ? 'caret-down' : 'caret-right',
|
|
239
|
+
onClick: function onClick() {
|
|
240
|
+
return handleToggle(item);
|
|
241
|
+
}
|
|
242
|
+
}) : ''), checkable ? _react["default"].createElement("div", {
|
|
243
|
+
className: "tntd-virtual-tree-item-checkbox"
|
|
244
|
+
}, _react["default"].createElement(_checkbox["default"], Object.assign({}, checkBoxAttrs))) : '', _react["default"].createElement("div", {
|
|
245
|
+
className: "tntd-virtual-tree-title ".concat(choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''),
|
|
246
|
+
onClick: function onClick() {
|
|
247
|
+
return handleChoosed(item);
|
|
248
|
+
}
|
|
249
|
+
}, titleRender ? titleRender(item) : defaultRenderItem(item)));
|
|
250
|
+
}));
|
|
251
|
+
};
|
|
252
|
+
var _default = exports["default"] = VirtualTree;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tntd-virtual-tree/index.jsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * @Descripttion: 基于antd3 tree 部分api实现的tree,增加了虚拟滚动\n * @Author: 郑泳健\n * @Date: 2024-07-31 14:46:55\n * @LastEditors: 郑泳健\n * @LastEditTime: 2024-08-09 17:51:50\n */\nimport React, { useState, useMemo, useEffect, useRef } from 'react';\nimport List from 'rc-virtual-list';\nimport { uniq } from 'lodash';\nimport Icon from '../icon';\nimport Ellipsis from '../ellipsis';\nimport Empty from '../empty';\nimport Checkbox from '../checkbox';\nimport {\n flatTreeData,\n findNodeDetail,\n getFullExpandedKeys,\n getFullCheckedKeys,\n getNodeParentChoosed,\n addTreeNodeAttrs,\n getIndeterminate\n} from './utils';\nimport './index.less';\n\nconst VirtualTree = ({\n itemHeight,\n height,\n filterKey,\n treeData,\n checkable,\n checkStrictly,\n checkedKeys,\n defaultExpandAll = true,\n expandedKeys,\n fieldNames,\n titleRender,\n onCheck,\n onExpand\n}) => {\n const ref = React.useRef(null);\n const expandChangedRef = useRef(0);\n const checkedChangeRef = useRef(0);\n // 展开的节点列表\n const [expandedList, setExpandedList] = useState([]);\n // checked 节点列表\n const [checkedList, setCheckedList] = useState([]);\n // 当前被选中的节点\n const [choosedValue, setChoosedValue] = useState(undefined);\n\n /** 给每个节点增加属性keys,值为其下面所有节点的集合 */\n const treeDataWithKeys = useMemo(() => {\n return addTreeNodeAttrs(treeData, fieldNames);\n }, [treeData, fieldNames]);\n\n /** 默认是否全部展开 */\n const mergeDefaultExpandAll = useMemo(() => {\n if (Array.isArray(expandedKeys)) {\n return false;\n }\n\n return defaultExpandAll;\n }, [defaultExpandAll, expandedKeys]);\n\n /** 获取到所有选中的节点,因为checkedKeys可能传入的是最后一级 */\n useEffect(() => {\n // 非第一次\n if (checkedChangeRef.current > 0) {\n setCheckedList(checkedKeys);\n return;\n }\n\n if (checkable) {\n // 如果是受控\n if (checkStrictly) {\n setCheckedList(uniq(Array.isArray(checkedKeys) ? checkedKeys : []));\n return;\n }\n const transCheckedKeys = Array.isArray(checkedKeys)\n ? checkedKeys.reduce((total, item) => {\n total.push(item);\n const { needCheckedChildrenValues } = findNodeDetail(treeDataWithKeys, item) || {};\n total = [...total, ...needCheckedChildrenValues];\n return total;\n }, [])\n : [];\n const _checkedKeys = getFullCheckedKeys(treeDataWithKeys, transCheckedKeys);\n setCheckedList(uniq(_checkedKeys));\n }\n }, [treeDataWithKeys, checkStrictly, checkable, checkedKeys]);\n\n useEffect(() => {\n setExpandedList(expandedKeys);\n }, [expandedKeys]);\n\n /** 初始化获取到所有展开的节点,因为初始化expandedKeys可能传入的是最后一级 */\n useEffect(() => {\n if (expandChangedRef.current === 0) {\n // 展开的节点\n const transExpandedKeys = Array.isArray(expandedKeys) ? expandedKeys : [];\n const _expandedKeys = getFullExpandedKeys(treeDataWithKeys, transExpandedKeys, mergeDefaultExpandAll);\n setExpandedList(_expandedKeys);\n }\n }, [treeDataWithKeys, expandedKeys, mergeDefaultExpandAll]);\n\n /** 最终渲染的数据 */\n const renderData = useMemo(() => {\n return flatTreeData(treeDataWithKeys, filterKey, expandedList);\n }, [treeDataWithKeys, filterKey, expandedList]);\n\n /** 切换展开/收起 */\n const handleToggle = (item) => {\n expandChangedRef.current++;\n const { value } = item || {};\n const bool = Array.isArray(expandedList) ? expandedList.includes(value) : false;\n if (bool) {\n const list = Array.isArray(expandedList) ? expandedList.filter((i) => i !== value) : [];\n if (onExpand) {\n onExpand(uniq(list), { node: item, expanded: !bool });\n return;\n }\n setExpandedList(uniq(list));\n } else {\n const arr = uniq([...expandedList, value]);\n if (onExpand) {\n onExpand(arr, { node: item, expanded: !bool });\n return;\n }\n setExpandedList(arr);\n }\n };\n\n const handleCheck = (item, isChecked) => {\n const { value: _value, children, disabled } = item;\n if (disabled) {\n return;\n }\n checkedChangeRef.current++;\n // 需要增删的子节点\n const itemChildrenValues = Array.isArray(children) && !!children.length ? item.needCheckedChildrenValues : [];\n if (isChecked) {\n // 需要删除的父节点\n const itemParentValues = Array.isArray(item.needCheckedSiblingsValue) ? item.needCheckedSiblingsValue.map((i) => i.key) : [];\n // 当前节点所有的父节点\n const delList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];\n const _checkedList = checkedList.filter((i) => !delList.includes(i));\n if (onCheck) {\n onCheck?.(uniq(_checkedList), item, !isChecked);\n return;\n }\n\n setCheckedList(uniq(_checkedList));\n } else {\n // 递归循环其上级是否也要被选中\n const itemParentValues = getNodeParentChoosed(item.needCheckedSiblingsValue, [...checkedList, ...itemChildrenValues, _value]);\n const addList = checkStrictly ? [_value] : [...itemChildrenValues, ...itemParentValues, _value];\n const _checkedList = [...checkedList, ...addList];\n\n if (onCheck) {\n onCheck?.(uniq(_checkedList), item, !isChecked);\n return;\n }\n setCheckedList(uniq(_checkedList));\n }\n };\n\n const handleChoosed = (item) => {\n if (item.disabled) {\n return;\n }\n setChoosedValue(item.value);\n };\n\n const defaultRenderItem = (item) => {\n return <Ellipsis title={item.title} widthLimit={'100%'} />;\n };\n\n return (\n <div className=\"tntd-virtual-tree\">\n {!Array.isArray(renderData) || !renderData.length ? (\n <Empty size=\"small\" />\n ) : (\n <List ref={ref} height={height || 300} itemHeight={itemHeight || 32} data={renderData}>\n {(item) => {\n const { level, children, disabled } = item;\n const bool = Array.isArray(expandedList) ? expandedList.includes(item.value) : false;\n // 当前节点半选状态\n const indeterminateStatus = getIndeterminate(item, checkedList);\n // 当前节点是否被选中\n const checkedBingo = Array.isArray(checkedList) ? checkedList.includes(item.value) : false;\n const isChecked = !checkStrictly || disabled ? checkedBingo && !indeterminateStatus : checkedBingo;\n\n const checkBoxAttrs = {\n className: `${disabled ? 'tntd-virtual-tree-checkbox-disabled' : ''}`,\n onChange: () => handleCheck(item, isChecked),\n checked: isChecked\n };\n // 状态没有半选模式\n if (!checkStrictly) {\n checkBoxAttrs.indeterminate = indeterminateStatus;\n }\n return (\n <div\n className={`tntd-virtual-tree-item ${disabled ? 'tntd-virtual-tree-item_disabled' : ''}`}\n style={{ paddingLeft: level * 18 }}\n key={item.value}>\n <div className=\"tntd-virtual-tree-item-expand-icon\">\n {Array.isArray(children) && !!children.length ? (\n <Icon type={bool ? 'caret-down' : 'caret-right'} onClick={() => handleToggle(item)} />\n ) : (\n ''\n )}\n </div>\n\n {checkable ? (\n <div className=\"tntd-virtual-tree-item-checkbox\">\n <Checkbox {...checkBoxAttrs} />\n </div>\n ) : (\n ''\n )}\n\n <div\n className={`tntd-virtual-tree-title ${choosedValue === item.value ? 'tntd-virtual-tree-title_active' : ''}`}\n onClick={() => handleChoosed(item)}>\n {titleRender ? titleRender(item) : defaultRenderItem(item)}\n </div>\n </div>\n );\n }}\n </List>\n )}\n </div>\n );\n};\n\nexport default VirtualTree;\n"]}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.tntd-virtual-tree{
|
|
2
|
+
padding: 0;
|
|
3
|
+
white-space: nowrap;
|
|
4
|
+
.tntd-virtual-tree-item{
|
|
5
|
+
// display: flex;
|
|
6
|
+
border-radius: var(--border-radius-sm);
|
|
7
|
+
color: #17233d;
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
line-height: 24px;
|
|
11
|
+
padding: 4px 0;
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
|
|
15
|
+
.tntd-virtual-tree-item-expand-icon{
|
|
16
|
+
display: inline-block;
|
|
17
|
+
width: 18px;
|
|
18
|
+
padding-left: 3px;
|
|
19
|
+
margin-right: 4px;
|
|
20
|
+
|
|
21
|
+
.anticon-caret-down,.anticon-caret-right {
|
|
22
|
+
vertical-align: middle;
|
|
23
|
+
font-size: 16px;
|
|
24
|
+
margin-right: 4px;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.tntd-virtual-tree-item-checkbox{
|
|
29
|
+
display: inline-block;
|
|
30
|
+
margin: 0 4px;
|
|
31
|
+
vertical-align: middle;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.tntd-virtual-tree-title{
|
|
35
|
+
padding: 0 2px;
|
|
36
|
+
flex: 1;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
display: inline-block;
|
|
39
|
+
vertical-align: middle;
|
|
40
|
+
|
|
41
|
+
&:hover{
|
|
42
|
+
background-color: var(--blue-1);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&_active{
|
|
46
|
+
background-color: var(--blue-2) !important;
|
|
47
|
+
border-radius: @border-radius-base;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&.tntd-virtual-tree-item_disabled{
|
|
52
|
+
color: rgba(0, 0, 0, 0.25);
|
|
53
|
+
cursor: not-allowed;
|
|
54
|
+
|
|
55
|
+
.tntd-virtual-tree-title_checkable{
|
|
56
|
+
&:hover{
|
|
57
|
+
background-color: inherit !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.tntd-virtual-tree-checkbox-disabled{
|
|
63
|
+
color: var(--text-color-tertiary);
|
|
64
|
+
cursor: not-allowed;
|
|
65
|
+
|
|
66
|
+
.ant-checkbox{
|
|
67
|
+
&::after{
|
|
68
|
+
border-color: #c9d2dd;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ant-checkbox-input{
|
|
73
|
+
cursor: not-allowed;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ant-checkbox-inner{
|
|
77
|
+
background-color: #f1f2f5;
|
|
78
|
+
border-color: #c9d2dd !important;
|
|
79
|
+
|
|
80
|
+
&::after{
|
|
81
|
+
border-color: rgba(0, 0, 0, 0.25);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.ant-checkbox-indeterminate{
|
|
86
|
+
.ant-checkbox-inner{
|
|
87
|
+
&::after{
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
.tntd-rc-select-dropdown-hidden{
|
|
98
|
+
display: block;
|
|
99
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export function addTreeNodeAttrs(treeData: any, fieldNames?: {
|
|
2
|
+
title: string;
|
|
3
|
+
value: string;
|
|
4
|
+
children: string;
|
|
5
|
+
disabled: string;
|
|
6
|
+
}, needCheckedSiblingsValue?: any[]): any[];
|
|
7
|
+
export function getNodeStr(node: any, key: any, result?: any[]): any[];
|
|
8
|
+
export function getNodeValuess(node: any, widthSelf?: any, result?: any): any;
|
|
9
|
+
export function flatTreeData(treeData: any, filterKey?: string, expandedKeys?: any, treeDefaultExpandAll?: any, level?: any, result?: any): any;
|
|
10
|
+
export function getFullExpandedKeys(treeDataWithKeys: any, treeExpandedKeys: any, treeDefaultExpandAll: any, result?: any): any;
|
|
11
|
+
export function getFullCheckedKeys(treeDataWithKeys: any, transCheckedKeys: any, result?: any): any;
|
|
12
|
+
export function getNodeNoDisabledLastestChildrenValues(node: any, fieldNames: any, result?: any[]): any[];
|
|
13
|
+
export function getNodeNoDisabledChildrenValues(node: any, fieldNames: any, result?: any[]): any[];
|
|
14
|
+
export function getIndeterminate(item: any, checkedList: any, disabledList: any): boolean;
|
|
15
|
+
export function getNodeParentChoosed(needCheckedSiblingsValue: any, checkedList: any): any[];
|
|
16
|
+
export function findNodeDetail(tree: any, key: any, result: any): any;
|
|
17
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tntd-virtual-tree/utils.js"],"names":[],"mappings":"AAUO;;;;;4CA+CN;AAEM,uEAUN;AASM,8EAYN;AAWM,gJAuBN;AASM,gIAqBN;AASM,oGA2BN;AAQM,0GAaN;AAQM,mGAcN;AAOM,0FAeN;AAQM,6FAgBN;AASM,sEAiBN"}
|