@hi-ui/tree-select 4.1.0 → 4.1.1
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 +25 -0
- package/lib/cjs/TreeSelect.js +94 -143
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +0 -3
- package/lib/esm/TreeSelect.js +90 -108
- package/lib/esm/styles/index.scss.js +0 -2
- package/package.json +20 -20
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,30 @@
|
|
1
1
|
# @hi-ui/tree-select
|
2
2
|
|
3
|
+
## 4.1.1
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
|
8
|
+
|
9
|
+
- Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
|
10
|
+
- @hi-ui/core@4.0.6
|
11
|
+
- @hi-ui/use-data-source@4.0.2
|
12
|
+
- @hi-ui/use-search-mode@4.1.2
|
13
|
+
- @hi-ui/use-toggle@4.0.2
|
14
|
+
- @hi-ui/use-uncontrolled-state@4.0.2
|
15
|
+
- @hi-ui/icons@4.0.16
|
16
|
+
- @hi-ui/highlighter@4.0.6
|
17
|
+
- @hi-ui/input@4.0.11
|
18
|
+
- @hi-ui/picker@4.1.2
|
19
|
+
- @hi-ui/popper@4.1.1
|
20
|
+
- @hi-ui/tree@4.5.6
|
21
|
+
- @hi-ui/array-utils@4.0.2
|
22
|
+
- @hi-ui/classname@4.0.2
|
23
|
+
- @hi-ui/env@4.0.2
|
24
|
+
- @hi-ui/func-utils@4.0.2
|
25
|
+
- @hi-ui/tree-utils@4.1.2
|
26
|
+
- @hi-ui/type-assertion@4.0.2
|
27
|
+
|
3
28
|
## 4.1.0
|
4
29
|
|
5
30
|
### Minor Changes
|
package/lib/cjs/TreeSelect.js
CHANGED
@@ -9,121 +9,85 @@
|
|
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 tslib = require('tslib');
|
19
|
-
|
20
13
|
var React = require('react');
|
21
|
-
|
22
14
|
var classname = require('@hi-ui/classname');
|
23
|
-
|
24
15
|
var env = require('@hi-ui/env');
|
25
|
-
|
26
16
|
var useToggle = require('@hi-ui/use-toggle');
|
27
|
-
|
28
17
|
var tree = require('@hi-ui/tree');
|
29
|
-
|
30
18
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
31
|
-
|
32
19
|
var picker = require('@hi-ui/picker');
|
33
|
-
|
34
20
|
var treeUtils = require('@hi-ui/tree-utils');
|
35
|
-
|
36
21
|
var typeAssertion = require('@hi-ui/type-assertion');
|
37
|
-
|
38
22
|
var arrayUtils = require('@hi-ui/array-utils');
|
39
|
-
|
40
23
|
var highlighter = require('@hi-ui/highlighter');
|
41
|
-
|
42
24
|
var input = require('@hi-ui/input');
|
43
|
-
|
44
25
|
var icons = require('@hi-ui/icons');
|
45
|
-
|
46
26
|
var core = require('@hi-ui/core');
|
47
|
-
|
48
27
|
var funcUtils = require('@hi-ui/func-utils');
|
49
|
-
|
50
28
|
var useSearchMode = require('@hi-ui/use-search-mode');
|
51
|
-
|
52
|
-
function _interopDefaultLegacy(e) {
|
53
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
54
|
-
'default': e
|
55
|
-
};
|
56
|
-
}
|
57
|
-
|
58
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
59
|
-
|
60
29
|
var TREE_SELECT_PREFIX = classname.getPrefixCls('tree-select');
|
61
|
-
var DEFAULT_DATA = [];
|
62
|
-
|
30
|
+
var DEFAULT_DATA = [];
|
31
|
+
// const DEFAULT_VALUE = [] as []
|
63
32
|
var DEFAULT_FIELD_NAMES = {};
|
64
33
|
var DEFAULT_EXPANDED_IDS = [];
|
65
34
|
/**
|
66
35
|
* 树形选择器
|
67
36
|
*/
|
68
|
-
|
69
37
|
var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
70
38
|
var _a$prefixCls = _a.prefixCls,
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
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
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
39
|
+
prefixCls = _a$prefixCls === void 0 ? TREE_SELECT_PREFIX : _a$prefixCls,
|
40
|
+
className = _a.className,
|
41
|
+
_a$data = _a.data,
|
42
|
+
data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
|
43
|
+
dataSource = _a.dataSource,
|
44
|
+
_a$disabled = _a.disabled,
|
45
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
46
|
+
visible = _a.visible,
|
47
|
+
onOpen = _a.onOpen,
|
48
|
+
onClose = _a.onClose,
|
49
|
+
_a$fieldNames = _a.fieldNames,
|
50
|
+
fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
|
51
|
+
_a$defaultExpandAll = _a.defaultExpandAll,
|
52
|
+
defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
|
53
|
+
expandedIdsProp = _a.expandedIds,
|
54
|
+
_a$defaultExpandedIds = _a.defaultExpandedIds,
|
55
|
+
defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
|
56
|
+
onExpand = _a.onExpand,
|
57
|
+
_a$defaultValue = _a.defaultValue,
|
58
|
+
defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
|
59
|
+
valueProp = _a.value,
|
60
|
+
onChange = _a.onChange,
|
61
|
+
searchableProp = _a.searchable,
|
62
|
+
searchModeProp = _a.searchMode,
|
63
|
+
onLoadChildren = _a.onLoadChildren,
|
64
|
+
titleRender = _a.render,
|
65
|
+
filterOption = _a.filterOption,
|
66
|
+
onSearchProp = _a.onSearch,
|
67
|
+
clearable = _a.clearable,
|
68
|
+
invalid = _a.invalid,
|
69
|
+
displayRenderProp = _a.displayRender,
|
70
|
+
placeholderProp = _a.placeholder,
|
71
|
+
appearance = _a.appearance,
|
72
|
+
virtual = _a.virtual,
|
73
|
+
itemHeight = _a.itemHeight,
|
74
|
+
height = _a.height,
|
75
|
+
_a$size = _a.size,
|
76
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
77
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size"]);
|
111
78
|
var i18n = core.useLocaleContext();
|
112
79
|
var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
|
113
|
-
|
114
80
|
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
81
|
+
visible: visible,
|
82
|
+
disabled: disabled,
|
83
|
+
onOpen: onOpen,
|
84
|
+
onClose: onClose
|
85
|
+
}),
|
86
|
+
menuVisible = _useUncontrolledToggl[0],
|
87
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
122
88
|
/**
|
123
89
|
* 转换对象
|
124
90
|
*/
|
125
|
-
|
126
|
-
|
127
91
|
var getKeyFields = React.useCallback(function (node, key) {
|
128
92
|
return node[fieldNames[key] || key];
|
129
93
|
}, [fieldNames]);
|
@@ -135,7 +99,6 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
135
99
|
},
|
136
100
|
transform: function transform(node) {
|
137
101
|
var _a, _b;
|
138
|
-
|
139
102
|
var flattedNode = node;
|
140
103
|
var raw = node.raw;
|
141
104
|
flattedNode.id = getKeyFields(raw, 'id');
|
@@ -145,50 +108,44 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
145
108
|
return flattedNode;
|
146
109
|
}
|
147
110
|
});
|
148
|
-
}, [data, getKeyFields]);
|
111
|
+
}, [data, getKeyFields]);
|
112
|
+
// TODO: 抽离展开hook
|
149
113
|
// TODO: onLoadChildren 和 defaultExpandAll 共存时
|
150
|
-
|
151
114
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function getDefaultExpandedIds() {
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
tryChangeExpandedIds = _useUncontrolledState[1];
|
163
|
-
|
115
|
+
// 开启默认展开全部
|
116
|
+
if (defaultExpandAll) {
|
117
|
+
return flattedData.map(function (node) {
|
118
|
+
return node.id;
|
119
|
+
});
|
120
|
+
}
|
121
|
+
return defaultExpandedIds;
|
122
|
+
}, expandedIdsProp, onExpand),
|
123
|
+
expandedIds = _useUncontrolledState[0],
|
124
|
+
tryChangeExpandedIds = _useUncontrolledState[1];
|
164
125
|
var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
|
165
|
-
|
166
|
-
|
167
|
-
|
126
|
+
value = _useUncontrolledState2[0],
|
127
|
+
tryChangeValue = _useUncontrolledState2[1];
|
168
128
|
var onSelect = React.useCallback(function (selectedId, selectedNode) {
|
169
129
|
// 关闭反选功能
|
170
130
|
if (selectedId) {
|
171
131
|
tryChangeValue(selectedId, selectedNode);
|
172
132
|
setSelectedItem(selectedNode);
|
173
|
-
}
|
174
|
-
|
175
|
-
|
133
|
+
}
|
134
|
+
// 关闭弹窗
|
176
135
|
menuVisibleAction.off();
|
177
|
-
}, [menuVisibleAction, tryChangeValue]);
|
178
|
-
|
136
|
+
}, [menuVisibleAction, tryChangeValue]);
|
137
|
+
// 搜索时临时选中缓存数据
|
179
138
|
var _useState = React.useState(null),
|
180
|
-
|
181
|
-
|
139
|
+
selectedItem = _useState[0],
|
140
|
+
setSelectedItem = _useState[1];
|
141
|
+
// ************************** 异步搜索 ************************* //
|
182
142
|
// const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
|
183
|
-
|
184
|
-
|
185
143
|
var _b = useSearchMode.useAsyncSearch({
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
144
|
+
dataSource: dataSource
|
145
|
+
}),
|
146
|
+
loading = _b.loading,
|
147
|
+
hasError = _b.hasError,
|
148
|
+
dataSourceStrategy = tslib.__rest(_b, ["loading", "hasError"]);
|
192
149
|
var customSearchStrategy = useSearchMode.useTreeCustomSearch({
|
193
150
|
data: data,
|
194
151
|
filterOption: filterOption
|
@@ -204,29 +161,25 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
204
161
|
flattedData: flattedData,
|
205
162
|
searchMode: searchModeProp
|
206
163
|
});
|
207
|
-
|
208
164
|
var _useSearchMode = useSearchMode.useSearchMode({
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
165
|
+
searchable: searchableProp,
|
166
|
+
strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy, highlightSearchStrategy]
|
167
|
+
}),
|
168
|
+
stateInSearch = _useSearchMode.state,
|
169
|
+
setStateInSearch = _useSearchMode.setStateInSearch,
|
170
|
+
searchable = _useSearchMode.searchable,
|
171
|
+
searchMode = _useSearchMode.searchMode,
|
172
|
+
onSearch = _useSearchMode.onSearch,
|
173
|
+
searchValue = _useSearchMode.keyword;
|
174
|
+
// 拦截 titleRender,自定义高亮展示
|
220
175
|
var proxyTitleRender = React.useCallback(function (node) {
|
221
176
|
if (titleRender) {
|
222
177
|
var _ret = titleRender(node);
|
223
|
-
|
224
178
|
if (_ret && _ret !== true) return _ret;
|
225
|
-
}
|
226
|
-
|
227
|
-
|
179
|
+
}
|
180
|
+
// 本地搜索执行默认高亮规则
|
228
181
|
var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
|
229
|
-
var ret = highlight ? /*#__PURE__*/
|
182
|
+
var ret = highlight ? /*#__PURE__*/React.createElement(highlighter.Highlighter, {
|
230
183
|
keyword: searchValue
|
231
184
|
}, node.title) : true;
|
232
185
|
return ret;
|
@@ -243,18 +196,17 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
243
196
|
});
|
244
197
|
} : tryChangeExpandedIds,
|
245
198
|
render: proxyTitleRender
|
246
|
-
};
|
247
|
-
|
199
|
+
};
|
200
|
+
// 下拉菜单不能合并(因为树形数据,不知道是第几级)
|
248
201
|
var mergedData = React.useMemo(function () {
|
249
202
|
if (selectedItem) {
|
250
203
|
var nextData = [selectedItem].concat(flattedData);
|
251
204
|
return arrayUtils.uniqBy(nextData, 'id');
|
252
205
|
}
|
253
|
-
|
254
206
|
return flattedData;
|
255
207
|
}, [selectedItem, flattedData]);
|
256
208
|
var cls = classname.cx(prefixCls, className);
|
257
|
-
return /*#__PURE__*/
|
209
|
+
return /*#__PURE__*/React.createElement(picker.Picker, Object.assign({
|
258
210
|
ref: ref,
|
259
211
|
className: cls
|
260
212
|
}, rest, {
|
@@ -268,14 +220,15 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
268
220
|
searchable: searchable,
|
269
221
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
270
222
|
loading: rest.loading !== undefined ? rest.loading : loading,
|
271
|
-
trigger: /*#__PURE__*/
|
223
|
+
trigger: /*#__PURE__*/React.createElement(input.MockInput
|
224
|
+
// disabled={disabled}
|
272
225
|
, {
|
273
226
|
// disabled={disabled}
|
274
227
|
size: size,
|
275
228
|
clearable: clearable,
|
276
229
|
placeholder: placeholder,
|
277
230
|
displayRender: displayRenderProp,
|
278
|
-
suffix: menuVisible ? /*#__PURE__*/
|
231
|
+
suffix: menuVisible ? /*#__PURE__*/React.createElement(icons.UpOutlined, null) : /*#__PURE__*/React.createElement(icons.DownOutlined, null),
|
279
232
|
focused: menuVisible,
|
280
233
|
value: value,
|
281
234
|
onChange: tryChangeValue,
|
@@ -284,7 +237,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
284
237
|
invalid: invalid,
|
285
238
|
appearance: appearance
|
286
239
|
})
|
287
|
-
}), typeAssertion.isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/
|
240
|
+
}), typeAssertion.isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/React.createElement(tree.Tree, Object.assign({
|
288
241
|
size: 'md',
|
289
242
|
className: prefixCls + "__tree",
|
290
243
|
selectable: true,
|
@@ -299,9 +252,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
299
252
|
height: height
|
300
253
|
}, treeProps)) : null);
|
301
254
|
});
|
302
|
-
|
303
255
|
if (env.__DEV__) {
|
304
256
|
TreeSelect.displayName = 'TreeSelect';
|
305
257
|
}
|
306
|
-
|
307
258
|
exports.TreeSelect = TreeSelect;
|
package/lib/cjs/index.js
CHANGED
@@ -12,10 +12,7 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
require('./styles/index.scss.js');
|
17
|
-
|
18
16
|
var TreeSelect = require('./TreeSelect.js');
|
19
|
-
|
20
17
|
exports.TreeSelect = TreeSelect.TreeSelect;
|
21
18
|
exports["default"] = TreeSelect.TreeSelect;
|
package/lib/esm/TreeSelect.js
CHANGED
@@ -25,72 +25,67 @@ import { useLocaleContext } from '@hi-ui/core';
|
|
25
25
|
import { callAllFuncs } from '@hi-ui/func-utils';
|
26
26
|
import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useHighlightSearch, useSearchMode } from '@hi-ui/use-search-mode';
|
27
27
|
var TREE_SELECT_PREFIX = getPrefixCls('tree-select');
|
28
|
-
var DEFAULT_DATA = [];
|
29
|
-
|
28
|
+
var DEFAULT_DATA = [];
|
29
|
+
// const DEFAULT_VALUE = [] as []
|
30
30
|
var DEFAULT_FIELD_NAMES = {};
|
31
31
|
var DEFAULT_EXPANDED_IDS = [];
|
32
32
|
/**
|
33
33
|
* 树形选择器
|
34
34
|
*/
|
35
|
-
|
36
35
|
var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
37
36
|
var _a$prefixCls = _a.prefixCls,
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
37
|
+
prefixCls = _a$prefixCls === void 0 ? TREE_SELECT_PREFIX : _a$prefixCls,
|
38
|
+
className = _a.className,
|
39
|
+
_a$data = _a.data,
|
40
|
+
data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
|
41
|
+
dataSource = _a.dataSource,
|
42
|
+
_a$disabled = _a.disabled,
|
43
|
+
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
44
|
+
visible = _a.visible,
|
45
|
+
onOpen = _a.onOpen,
|
46
|
+
onClose = _a.onClose,
|
47
|
+
_a$fieldNames = _a.fieldNames,
|
48
|
+
fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
|
49
|
+
_a$defaultExpandAll = _a.defaultExpandAll,
|
50
|
+
defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
|
51
|
+
expandedIdsProp = _a.expandedIds,
|
52
|
+
_a$defaultExpandedIds = _a.defaultExpandedIds,
|
53
|
+
defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
|
54
|
+
onExpand = _a.onExpand,
|
55
|
+
_a$defaultValue = _a.defaultValue,
|
56
|
+
defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
|
57
|
+
valueProp = _a.value,
|
58
|
+
onChange = _a.onChange,
|
59
|
+
searchableProp = _a.searchable,
|
60
|
+
searchModeProp = _a.searchMode,
|
61
|
+
onLoadChildren = _a.onLoadChildren,
|
62
|
+
titleRender = _a.render,
|
63
|
+
filterOption = _a.filterOption,
|
64
|
+
onSearchProp = _a.onSearch,
|
65
|
+
clearable = _a.clearable,
|
66
|
+
invalid = _a.invalid,
|
67
|
+
displayRenderProp = _a.displayRender,
|
68
|
+
placeholderProp = _a.placeholder,
|
69
|
+
appearance = _a.appearance,
|
70
|
+
virtual = _a.virtual,
|
71
|
+
itemHeight = _a.itemHeight,
|
72
|
+
height = _a.height,
|
73
|
+
_a$size = _a.size,
|
74
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
75
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size"]);
|
78
76
|
var i18n = useLocaleContext();
|
79
77
|
var placeholder = isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
|
80
|
-
|
81
78
|
var _useUncontrolledToggl = useUncontrolledToggle({
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
79
|
+
visible: visible,
|
80
|
+
disabled: disabled,
|
81
|
+
onOpen: onOpen,
|
82
|
+
onClose: onClose
|
83
|
+
}),
|
84
|
+
menuVisible = _useUncontrolledToggl[0],
|
85
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
89
86
|
/**
|
90
87
|
* 转换对象
|
91
88
|
*/
|
92
|
-
|
93
|
-
|
94
89
|
var getKeyFields = useCallback(function (node, key) {
|
95
90
|
return node[fieldNames[key] || key];
|
96
91
|
}, [fieldNames]);
|
@@ -102,7 +97,6 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
102
97
|
},
|
103
98
|
transform: function transform(node) {
|
104
99
|
var _a, _b;
|
105
|
-
|
106
100
|
var flattedNode = node;
|
107
101
|
var raw = node.raw;
|
108
102
|
flattedNode.id = getKeyFields(raw, 'id');
|
@@ -112,50 +106,44 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
112
106
|
return flattedNode;
|
113
107
|
}
|
114
108
|
});
|
115
|
-
}, [data, getKeyFields]);
|
109
|
+
}, [data, getKeyFields]);
|
110
|
+
// TODO: 抽离展开hook
|
116
111
|
// TODO: onLoadChildren 和 defaultExpandAll 共存时
|
117
|
-
|
118
112
|
var _useUncontrolledState = useUncontrolledState(function getDefaultExpandedIds() {
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
tryChangeExpandedIds = _useUncontrolledState[1];
|
130
|
-
|
113
|
+
// 开启默认展开全部
|
114
|
+
if (defaultExpandAll) {
|
115
|
+
return flattedData.map(function (node) {
|
116
|
+
return node.id;
|
117
|
+
});
|
118
|
+
}
|
119
|
+
return defaultExpandedIds;
|
120
|
+
}, expandedIdsProp, onExpand),
|
121
|
+
expandedIds = _useUncontrolledState[0],
|
122
|
+
tryChangeExpandedIds = _useUncontrolledState[1];
|
131
123
|
var _useUncontrolledState2 = useUncontrolledState(defaultValue, valueProp, onChange),
|
132
|
-
|
133
|
-
|
134
|
-
|
124
|
+
value = _useUncontrolledState2[0],
|
125
|
+
tryChangeValue = _useUncontrolledState2[1];
|
135
126
|
var onSelect = useCallback(function (selectedId, selectedNode) {
|
136
127
|
// 关闭反选功能
|
137
128
|
if (selectedId) {
|
138
129
|
tryChangeValue(selectedId, selectedNode);
|
139
130
|
setSelectedItem(selectedNode);
|
140
|
-
}
|
141
|
-
|
142
|
-
|
131
|
+
}
|
132
|
+
// 关闭弹窗
|
143
133
|
menuVisibleAction.off();
|
144
|
-
}, [menuVisibleAction, tryChangeValue]);
|
145
|
-
|
134
|
+
}, [menuVisibleAction, tryChangeValue]);
|
135
|
+
// 搜索时临时选中缓存数据
|
146
136
|
var _useState = useState(null),
|
147
|
-
|
148
|
-
|
137
|
+
selectedItem = _useState[0],
|
138
|
+
setSelectedItem = _useState[1];
|
139
|
+
// ************************** 异步搜索 ************************* //
|
149
140
|
// const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
|
150
|
-
|
151
|
-
|
152
141
|
var _b = useAsyncSearch({
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
142
|
+
dataSource: dataSource
|
143
|
+
}),
|
144
|
+
loading = _b.loading,
|
145
|
+
hasError = _b.hasError,
|
146
|
+
dataSourceStrategy = __rest(_b, ["loading", "hasError"]);
|
159
147
|
var customSearchStrategy = useTreeCustomSearch({
|
160
148
|
data: data,
|
161
149
|
filterOption: filterOption
|
@@ -171,27 +159,23 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
171
159
|
flattedData: flattedData,
|
172
160
|
searchMode: searchModeProp
|
173
161
|
});
|
174
|
-
|
175
162
|
var _useSearchMode = useSearchMode({
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
163
|
+
searchable: searchableProp,
|
164
|
+
strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy, highlightSearchStrategy]
|
165
|
+
}),
|
166
|
+
stateInSearch = _useSearchMode.state,
|
167
|
+
setStateInSearch = _useSearchMode.setStateInSearch,
|
168
|
+
searchable = _useSearchMode.searchable,
|
169
|
+
searchMode = _useSearchMode.searchMode,
|
170
|
+
onSearch = _useSearchMode.onSearch,
|
171
|
+
searchValue = _useSearchMode.keyword;
|
172
|
+
// 拦截 titleRender,自定义高亮展示
|
187
173
|
var proxyTitleRender = useCallback(function (node) {
|
188
174
|
if (titleRender) {
|
189
175
|
var _ret = titleRender(node);
|
190
|
-
|
191
176
|
if (_ret && _ret !== true) return _ret;
|
192
|
-
}
|
193
|
-
|
194
|
-
|
177
|
+
}
|
178
|
+
// 本地搜索执行默认高亮规则
|
195
179
|
var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
|
196
180
|
var ret = highlight ? /*#__PURE__*/React.createElement(Highlighter, {
|
197
181
|
keyword: searchValue
|
@@ -210,14 +194,13 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
210
194
|
});
|
211
195
|
} : tryChangeExpandedIds,
|
212
196
|
render: proxyTitleRender
|
213
|
-
};
|
214
|
-
|
197
|
+
};
|
198
|
+
// 下拉菜单不能合并(因为树形数据,不知道是第几级)
|
215
199
|
var mergedData = useMemo(function () {
|
216
200
|
if (selectedItem) {
|
217
201
|
var nextData = [selectedItem].concat(flattedData);
|
218
202
|
return uniqBy(nextData, 'id');
|
219
203
|
}
|
220
|
-
|
221
204
|
return flattedData;
|
222
205
|
}, [selectedItem, flattedData]);
|
223
206
|
var cls = cx(prefixCls, className);
|
@@ -235,7 +218,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
235
218
|
searchable: searchable,
|
236
219
|
onSearch: callAllFuncs(onSearchProp, onSearch),
|
237
220
|
loading: rest.loading !== undefined ? rest.loading : loading,
|
238
|
-
trigger: /*#__PURE__*/React.createElement(MockInput
|
221
|
+
trigger: /*#__PURE__*/React.createElement(MockInput
|
222
|
+
// disabled={disabled}
|
239
223
|
, {
|
240
224
|
// disabled={disabled}
|
241
225
|
size: size,
|
@@ -266,9 +250,7 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
266
250
|
height: height
|
267
251
|
}, treeProps)) : null);
|
268
252
|
});
|
269
|
-
|
270
253
|
if (__DEV__) {
|
271
254
|
TreeSelect.displayName = 'TreeSelect';
|
272
255
|
}
|
273
|
-
|
274
256
|
export { TreeSelect };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@hi-ui/tree-select",
|
3
|
-
"version": "4.1.
|
3
|
+
"version": "4.1.1",
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
5
5
|
"keywords": [],
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
@@ -43,31 +43,31 @@
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
44
44
|
},
|
45
45
|
"dependencies": {
|
46
|
-
"@hi-ui/array-utils": "^4.0.
|
47
|
-
"@hi-ui/classname": "^4.0.
|
48
|
-
"@hi-ui/env": "^4.0.
|
49
|
-
"@hi-ui/func-utils": "^4.0.
|
50
|
-
"@hi-ui/highlighter": "^4.0.
|
51
|
-
"@hi-ui/icons": "^4.0.
|
52
|
-
"@hi-ui/input": "^4.0.
|
53
|
-
"@hi-ui/picker": "^4.
|
54
|
-
"@hi-ui/popper": "^4.
|
55
|
-
"@hi-ui/tree": "^4.5.
|
56
|
-
"@hi-ui/tree-utils": "^4.
|
57
|
-
"@hi-ui/type-assertion": "^4.0.
|
58
|
-
"@hi-ui/use-data-source": "^4.0.
|
59
|
-
"@hi-ui/use-search-mode": "^4.
|
60
|
-
"@hi-ui/use-toggle": "^4.0.
|
61
|
-
"@hi-ui/use-uncontrolled-state": "^4.0.
|
46
|
+
"@hi-ui/array-utils": "^4.0.2",
|
47
|
+
"@hi-ui/classname": "^4.0.2",
|
48
|
+
"@hi-ui/env": "^4.0.2",
|
49
|
+
"@hi-ui/func-utils": "^4.0.2",
|
50
|
+
"@hi-ui/highlighter": "^4.0.6",
|
51
|
+
"@hi-ui/icons": "^4.0.16",
|
52
|
+
"@hi-ui/input": "^4.0.11",
|
53
|
+
"@hi-ui/picker": "^4.1.2",
|
54
|
+
"@hi-ui/popper": "^4.1.1",
|
55
|
+
"@hi-ui/tree": "^4.5.6",
|
56
|
+
"@hi-ui/tree-utils": "^4.1.2",
|
57
|
+
"@hi-ui/type-assertion": "^4.0.2",
|
58
|
+
"@hi-ui/use-data-source": "^4.0.2",
|
59
|
+
"@hi-ui/use-search-mode": "^4.1.2",
|
60
|
+
"@hi-ui/use-toggle": "^4.0.2",
|
61
|
+
"@hi-ui/use-uncontrolled-state": "^4.0.2"
|
62
62
|
},
|
63
63
|
"peerDependencies": {
|
64
|
-
"@hi-ui/core": ">=4.0.
|
64
|
+
"@hi-ui/core": ">=4.0.6",
|
65
65
|
"react": ">=16.8.6",
|
66
66
|
"react-dom": ">=16.8.6"
|
67
67
|
},
|
68
68
|
"devDependencies": {
|
69
|
-
"@hi-ui/core": "^4.0.
|
70
|
-
"@hi-ui/core-css": "^4.1.
|
69
|
+
"@hi-ui/core": "^4.0.6",
|
70
|
+
"@hi-ui/core-css": "^4.1.3",
|
71
71
|
"react": "^17.0.1",
|
72
72
|
"react-dom": "^17.0.1"
|
73
73
|
}
|