@hi-ui/cascader 4.1.1 → 4.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/lib/cjs/Cascader.js +95 -159
- package/lib/cjs/CascaderMenuList.js +35 -74
- package/lib/cjs/context.js +0 -9
- package/lib/cjs/hooks/use-async-switch.js +9 -45
- package/lib/cjs/hooks/use-cache/lib/esm/index.js +3 -10
- package/lib/cjs/hooks/use-select.js +3 -17
- package/lib/cjs/icons/index.js +3 -20
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +1 -4
- package/lib/cjs/use-cascader.js +33 -53
- package/lib/cjs/utils/index.js +1 -24
- package/lib/esm/Cascader.js +84 -113
- package/lib/esm/CascaderMenuList.js +22 -38
- package/lib/esm/context.js +0 -4
- package/lib/esm/hooks/use-async-switch.js +5 -22
- package/lib/esm/hooks/use-cache/lib/esm/index.js +3 -5
- package/lib/esm/hooks/use-select.js +3 -9
- package/lib/esm/styles/index.scss.js +1 -3
- package/lib/esm/use-cascader.js +33 -42
- package/lib/esm/utils/index.js +1 -18
- package/package.json +22 -22
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,41 @@
|
|
1
1
|
# @hi-ui/cascader
|
2
2
|
|
3
|
+
## 4.1.3
|
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-check-state@4.0.2
|
12
|
+
- @hi-ui/use-data-source@4.0.2
|
13
|
+
- @hi-ui/use-latest@4.0.2
|
14
|
+
- @hi-ui/use-search-mode@4.1.2
|
15
|
+
- @hi-ui/use-toggle@4.0.2
|
16
|
+
- @hi-ui/use-uncontrolled-state@4.0.2
|
17
|
+
- @hi-ui/icons@4.0.16
|
18
|
+
- @hi-ui/highlighter@4.0.6
|
19
|
+
- @hi-ui/input@4.0.11
|
20
|
+
- @hi-ui/picker@4.1.2
|
21
|
+
- @hi-ui/popper@4.1.1
|
22
|
+
- @hi-ui/spinner@4.0.6
|
23
|
+
- @hi-ui/array-utils@4.0.2
|
24
|
+
- @hi-ui/classname@4.0.2
|
25
|
+
- @hi-ui/env@4.0.2
|
26
|
+
- @hi-ui/func-utils@4.0.2
|
27
|
+
- @hi-ui/tree-utils@4.1.2
|
28
|
+
- @hi-ui/type-assertion@4.0.2
|
29
|
+
|
30
|
+
## 4.1.2
|
31
|
+
|
32
|
+
### Patch Changes
|
33
|
+
|
34
|
+
- [#2653](https://github.com/XiaoMi/hiui/pull/2653) [`b477d91db`](https://github.com/XiaoMi/hiui/commit/b477d91db15bbc92c8712a9a771af5b332779315) Thanks [@zyprepare](https://github.com/zyprepare)! - chore: 更新使用到的 G40 颜色值
|
35
|
+
|
36
|
+
- Updated dependencies [[`b477d91db`](https://github.com/XiaoMi/hiui/commit/b477d91db15bbc92c8712a9a771af5b332779315)]:
|
37
|
+
- @hi-ui/input@4.0.10
|
38
|
+
|
3
39
|
## 4.1.1
|
4
40
|
|
5
41
|
### Patch Changes
|
package/lib/cjs/Cascader.js
CHANGED
@@ -9,151 +9,104 @@
|
|
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 useCascader = require('./use-cascader.js');
|
29
|
-
|
30
18
|
var input = require('@hi-ui/input');
|
31
|
-
|
32
19
|
var icons = require('@hi-ui/icons');
|
33
|
-
|
34
20
|
var index$1 = require('./utils/index.js');
|
35
|
-
|
36
21
|
var context = require('./context.js');
|
37
|
-
|
38
22
|
var treeUtils = require('@hi-ui/tree-utils');
|
39
|
-
|
40
23
|
var typeAssertion = require('@hi-ui/type-assertion');
|
41
|
-
|
42
24
|
var picker = require('@hi-ui/picker');
|
43
|
-
|
44
25
|
var useSearchMode = require('@hi-ui/use-search-mode');
|
45
|
-
|
46
26
|
var arrayUtils = require('@hi-ui/array-utils');
|
47
|
-
|
48
27
|
var index = require('./hooks/use-cache/lib/esm/index.js');
|
49
|
-
|
50
28
|
var core = require('@hi-ui/core');
|
51
|
-
|
52
29
|
var funcUtils = require('@hi-ui/func-utils');
|
53
|
-
|
54
30
|
var CascaderMenuList = require('./CascaderMenuList.js');
|
55
|
-
|
56
31
|
var Highlighter = require('@hi-ui/highlighter');
|
57
|
-
|
58
|
-
function _interopDefaultLegacy(e) {
|
59
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
60
|
-
'default': e
|
61
|
-
};
|
62
|
-
}
|
63
|
-
|
64
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
65
|
-
|
66
|
-
var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
|
67
|
-
|
68
32
|
var _prefix = classname.getPrefixCls('cascader');
|
69
|
-
|
70
33
|
var NOOP_ARRAY = [];
|
71
34
|
/**
|
72
35
|
* 级联选择器
|
73
36
|
* Trigger + MenuList + Search
|
74
37
|
*/
|
75
|
-
|
76
38
|
var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
77
39
|
var _props$prefixCls = props.prefixCls,
|
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
|
-
|
111
|
-
|
112
|
-
|
40
|
+
prefixCls = _props$prefixCls === void 0 ? _prefix : _props$prefixCls,
|
41
|
+
className = props.className,
|
42
|
+
placeholderProp = props.placeholder,
|
43
|
+
_props$disabled = props.disabled,
|
44
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
45
|
+
_props$clearable = props.clearable,
|
46
|
+
clearable = _props$clearable === void 0 ? true : _props$clearable,
|
47
|
+
_props$type = props.type,
|
48
|
+
type = _props$type === void 0 ? 'tree' : _props$type,
|
49
|
+
fieldNames = props.fieldNames,
|
50
|
+
_props$expandTrigger = props.expandTrigger,
|
51
|
+
expandTrigger = _props$expandTrigger === void 0 ? 'click' : _props$expandTrigger,
|
52
|
+
displayRenderProp = props.displayRender,
|
53
|
+
onSelectProp = props.onSelect,
|
54
|
+
onLoadChildren = props.onLoadChildren,
|
55
|
+
appearance = props.appearance,
|
56
|
+
invalid = props.invalid,
|
57
|
+
filterOption = props.filterOption,
|
58
|
+
searchableProp = props.searchable,
|
59
|
+
onSearchProp = props.onSearch,
|
60
|
+
titleRender = props.render,
|
61
|
+
overlayClassName = props.overlayClassName,
|
62
|
+
_props$data = props.data,
|
63
|
+
data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
|
64
|
+
_props$flattedSearchR = props.flattedSearchResult,
|
65
|
+
flattedSearchResult = _props$flattedSearchR === void 0 ? true : _props$flattedSearchR,
|
66
|
+
visible = props.visible,
|
67
|
+
_props$size = props.size,
|
68
|
+
size = _props$size === void 0 ? 'md' : _props$size,
|
69
|
+
onOpen = props.onOpen,
|
70
|
+
onClose = props.onClose,
|
71
|
+
renderExtraFooter = props.renderExtraFooter,
|
72
|
+
dropdownColumnRender = props.dropdownColumnRender,
|
73
|
+
rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "onOpen", "onClose", "renderExtraFooter", "dropdownColumnRender"]);
|
113
74
|
var i18n = core.useLocaleContext();
|
114
75
|
var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
|
115
|
-
|
116
76
|
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
77
|
+
visible: visible,
|
78
|
+
disabled: disabled,
|
79
|
+
onOpen: onOpen,
|
80
|
+
onClose: onClose
|
81
|
+
}),
|
82
|
+
menuVisible = _useUncontrolledToggl[0],
|
83
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
84
|
+
// 搜索时临时选中缓存数据
|
126
85
|
var _useState = React.useState(null),
|
127
|
-
|
128
|
-
|
129
|
-
|
86
|
+
selectedItem = _useState[0],
|
87
|
+
setSelectedItem = _useState[1];
|
130
88
|
var onSelect = function onSelect(value, item, itemPaths) {
|
131
89
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
132
|
-
setSelectedItem(item);
|
133
|
-
|
90
|
+
setSelectedItem(item);
|
91
|
+
// 关闭弹窗
|
134
92
|
menuVisibleAction.off();
|
135
|
-
};
|
136
|
-
|
137
|
-
|
93
|
+
};
|
94
|
+
// 拦截 titleRender,自定义高亮展示
|
138
95
|
var proxyTitleRender = function proxyTitleRender(node) {
|
139
96
|
// 本地搜索执行默认高亮规则
|
140
97
|
var highlight = !!searchValue && searchMode === 'upMatch';
|
141
|
-
|
142
98
|
if (highlight) {
|
143
99
|
return flattedSearchResult ? renderHighlightTitles(searchValue, node, titleRender) : renderHighlightTitle(searchValue, node, titleRender);
|
144
100
|
}
|
145
|
-
|
146
101
|
return typeAssertion.isFunction(titleRender) ? titleRender(node) : true;
|
147
102
|
};
|
148
|
-
|
149
103
|
var _useCache = index.useCache(data),
|
150
|
-
|
151
|
-
|
152
|
-
|
104
|
+
cascaderData = _useCache[0],
|
105
|
+
setCascaderData = _useCache[1];
|
153
106
|
var flattedData = React.useMemo(function () {
|
154
107
|
return index$1.flattenTreeData(cascaderData, fieldNames);
|
155
|
-
}, [cascaderData, fieldNames]);
|
156
|
-
|
108
|
+
}, [cascaderData, fieldNames]);
|
109
|
+
// ************************** 异步搜索 ************************* //
|
157
110
|
var customSearchStrategy = useSearchMode.useTreeCustomSearch({
|
158
111
|
data: flattedData,
|
159
112
|
filterOption: filterOption
|
@@ -164,80 +117,70 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
164
117
|
enabled: searchableProp,
|
165
118
|
exclude: function exclude(node) {
|
166
119
|
return node.disabled;
|
167
|
-
}
|
120
|
+
}
|
121
|
+
// exclude: (option: FlattedCascaderDataItem) => {
|
168
122
|
// return checkCanLoadChildren(option, onLoadChildren)
|
169
123
|
// },
|
170
|
-
|
171
124
|
});
|
172
125
|
|
173
126
|
var _useSearchMode = useSearchMode.useSearchMode({
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
127
|
+
searchable: searchableProp,
|
128
|
+
strategies: [customSearchStrategy, upMatchSearchStrategy]
|
129
|
+
}),
|
130
|
+
stateInSearch = _useSearchMode.state,
|
131
|
+
searchable = _useSearchMode.searchable,
|
132
|
+
searchMode = _useSearchMode.searchMode,
|
133
|
+
onSearch = _useSearchMode.onSearch,
|
134
|
+
searchValue = _useSearchMode.keyword;
|
183
135
|
var displayRender = function displayRender(item) {
|
184
136
|
var itemPaths = treeUtils.getTopDownAncestors(item);
|
185
|
-
|
186
137
|
if (displayRenderProp) {
|
187
138
|
var eventOption = index$1.getItemEventData(item, getItemRequiredProps(item));
|
188
139
|
return displayRenderProp(eventOption, itemPaths.map(function (item) {
|
189
140
|
return index$1.getItemEventData(item, getItemRequiredProps(item));
|
190
141
|
}));
|
191
142
|
}
|
192
|
-
|
193
143
|
var mergedTitle = itemPaths.reduce(function (acc, item, index, _ref) {
|
194
144
|
var length = _ref.length;
|
195
145
|
acc.push(item.title);
|
196
|
-
|
197
146
|
if (length - 1 !== index) {
|
198
147
|
acc.push('/');
|
199
148
|
}
|
200
|
-
|
201
149
|
return acc;
|
202
150
|
}, []);
|
203
|
-
return /*#__PURE__*/
|
151
|
+
return /*#__PURE__*/React.createElement("span", {
|
204
152
|
className: "title__text"
|
205
153
|
}, mergedTitle);
|
206
154
|
};
|
207
|
-
|
208
|
-
|
209
|
-
|
155
|
+
var shouldUseSearch = !!searchValue;
|
156
|
+
// 搜索的结果列表也采用 flatted 模式进行展示
|
210
157
|
var flatted = shouldUseSearch ? flattedSearchResult : type === 'flatted';
|
211
|
-
|
212
158
|
var _a = useCascader.useCascader(Object.assign(Object.assign({}, rest), {
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
159
|
+
disabled: disabled,
|
160
|
+
fieldNames: fieldNames,
|
161
|
+
flatted: flatted,
|
162
|
+
onSelect: onSelect,
|
163
|
+
onLoadChildren: onLoadChildren,
|
164
|
+
data: data,
|
165
|
+
// @ts-ignore
|
166
|
+
cascaderData: cascaderData,
|
167
|
+
setCascaderData: setCascaderData,
|
168
|
+
flattedData: flattedData
|
169
|
+
})),
|
170
|
+
rootProps = _a.rootProps,
|
171
|
+
context$1 = tslib.__rest(_a, ["rootProps"]);
|
227
172
|
var value = context$1.value,
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
173
|
+
tryChangeValue = context$1.tryChangeValue,
|
174
|
+
reset = context$1.reset,
|
175
|
+
menuList = context$1.menuList,
|
176
|
+
getItemRequiredProps = context$1.getItemRequiredProps;
|
232
177
|
var showData = React.useMemo(function () {
|
233
178
|
if (shouldUseSearch) {
|
234
179
|
if (!flattedSearchResult) {
|
235
180
|
return index$1.getFilteredMenuList(menuList, stateInSearch.data);
|
236
181
|
}
|
237
|
-
|
238
182
|
return typeAssertion.isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
|
239
183
|
}
|
240
|
-
|
241
184
|
return menuList;
|
242
185
|
}, [shouldUseSearch, flattedSearchResult, stateInSearch.data, menuList]);
|
243
186
|
React.useEffect(function () {
|
@@ -245,25 +188,24 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
245
188
|
if (!menuVisible) {
|
246
189
|
reset();
|
247
190
|
}
|
248
|
-
}, [menuVisible, reset]);
|
249
|
-
|
191
|
+
}, [menuVisible, reset]);
|
192
|
+
// 下拉菜单不能合并(因为树形数据,不知道是第几级)
|
250
193
|
var mergedData = React.useMemo(function () {
|
251
194
|
if (selectedItem) {
|
252
195
|
var nextData = [selectedItem].concat(flattedData);
|
253
196
|
return arrayUtils.uniqBy(nextData, 'id');
|
254
197
|
}
|
255
|
-
|
256
198
|
return flattedData;
|
257
199
|
}, [selectedItem, flattedData]);
|
258
200
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
259
|
-
return /*#__PURE__*/
|
201
|
+
return /*#__PURE__*/React.createElement(context.CascaderProvider, {
|
260
202
|
value: Object.assign(Object.assign({}, context$1), {
|
261
203
|
expandTrigger: expandTrigger,
|
262
204
|
titleRender: proxyTitleRender,
|
263
205
|
menuList: showData,
|
264
206
|
dropdownColumnRender: dropdownColumnRender
|
265
207
|
})
|
266
|
-
}, /*#__PURE__*/
|
208
|
+
}, /*#__PURE__*/React.createElement(picker.Picker, Object.assign({
|
267
209
|
ref: ref,
|
268
210
|
className: cls,
|
269
211
|
overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName)
|
@@ -280,12 +222,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
280
222
|
scrollable: false,
|
281
223
|
footer: typeAssertion.isFunction(renderExtraFooter) && renderExtraFooter(),
|
282
224
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
283
|
-
trigger: /*#__PURE__*/
|
225
|
+
trigger: /*#__PURE__*/React.createElement(input.MockInput, {
|
284
226
|
size: size,
|
285
227
|
clearable: clearable,
|
286
228
|
placeholder: placeholder,
|
287
229
|
displayRender: displayRender,
|
288
|
-
suffix: menuVisible ? /*#__PURE__*/
|
230
|
+
suffix: menuVisible ? /*#__PURE__*/React.createElement(icons.UpOutlined, null) : /*#__PURE__*/React.createElement(icons.DownOutlined, null),
|
289
231
|
focused: menuVisible,
|
290
232
|
value: value[value.length - 1],
|
291
233
|
onChange: function onChange() {
|
@@ -295,40 +237,35 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
295
237
|
invalid: invalid,
|
296
238
|
appearance: appearance
|
297
239
|
})
|
298
|
-
}), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/
|
240
|
+
}), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/React.createElement(CascaderMenuList.CascaderMenuList, null) : null));
|
299
241
|
});
|
300
|
-
|
301
242
|
if (env.__DEV__) {
|
302
243
|
Cascader.displayName = 'Cascader';
|
303
244
|
}
|
304
|
-
|
305
245
|
var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
|
306
246
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
307
247
|
var title = titleRender ? titleRender(option, keyword) : true;
|
308
248
|
if (title !== true) return title;
|
309
|
-
return /*#__PURE__*/
|
249
|
+
return /*#__PURE__*/React.createElement(Highlighter, {
|
310
250
|
key: option.id,
|
311
251
|
keyword: keyword
|
312
252
|
}, option.title);
|
313
253
|
};
|
314
|
-
|
315
254
|
var renderHighlightTitles = function renderHighlightTitles(keyword, option, titleRender) {
|
316
255
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
317
256
|
var title = titleRender ? titleRender(option, keyword) : true;
|
318
257
|
if (title !== true) return title;
|
319
|
-
|
320
258
|
if (typeof option.title !== 'string') {
|
321
259
|
console.info('WARNING: The `option.title` should be `string` when searchable is enabled.');
|
322
260
|
return option.title;
|
323
261
|
}
|
324
|
-
|
325
262
|
var found = false;
|
326
|
-
return /*#__PURE__*/
|
263
|
+
return /*#__PURE__*/React.createElement("span", {
|
327
264
|
className: classname.cx("title__text", "title__text--cols")
|
328
265
|
}, treeUtils.getNodeAncestorsWithMe(option).map(function (item) {
|
329
266
|
var title = item.title,
|
330
|
-
|
331
|
-
var raw = /*#__PURE__*/
|
267
|
+
id = item.id;
|
268
|
+
var raw = /*#__PURE__*/React.createElement("span", {
|
332
269
|
className: "title__text--col",
|
333
270
|
key: id
|
334
271
|
}, title);
|
@@ -339,13 +276,12 @@ var renderHighlightTitles = function renderHighlightTitles(keyword, option, titl
|
|
339
276
|
found = true;
|
340
277
|
var beforeStr = title.substr(0, index);
|
341
278
|
var afterStr = title.substr(index + keyword.length);
|
342
|
-
return /*#__PURE__*/
|
279
|
+
return /*#__PURE__*/React.createElement("span", {
|
343
280
|
key: id,
|
344
281
|
className: "title__text--col"
|
345
|
-
}, beforeStr, /*#__PURE__*/
|
282
|
+
}, beforeStr, /*#__PURE__*/React.createElement("span", {
|
346
283
|
className: "title__text--matched"
|
347
284
|
}, keyword), afterStr);
|
348
285
|
}).reverse());
|
349
286
|
};
|
350
|
-
|
351
287
|
exports.Cascader = Cascader;
|
@@ -9,107 +9,77 @@
|
|
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 index$1 = require('./icons/index.js');
|
27
|
-
|
28
17
|
var index = require('./utils/index.js');
|
29
|
-
|
30
18
|
var context = require('./context.js');
|
31
|
-
|
32
19
|
var treeUtils = require('@hi-ui/tree-utils');
|
33
|
-
|
34
20
|
var typeAssertion = require('@hi-ui/type-assertion');
|
35
|
-
|
36
|
-
function _interopDefaultLegacy(e) {
|
37
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
38
|
-
'default': e
|
39
|
-
};
|
40
|
-
}
|
41
|
-
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
43
|
-
|
44
21
|
var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
|
45
22
|
var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
46
23
|
var _a$prefixCls = _a.prefixCls,
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
24
|
+
prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
|
25
|
+
className = _a.className,
|
26
|
+
rest = tslib.__rest(_a, ["prefixCls", "className"]);
|
51
27
|
var _useCascaderContext = context.useCascaderContext(),
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
28
|
+
flatted = _useCascaderContext.flatted,
|
29
|
+
menuList = _useCascaderContext.menuList,
|
30
|
+
dropdownColumnRender = _useCascaderContext.dropdownColumnRender;
|
56
31
|
var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted");
|
57
|
-
return /*#__PURE__*/
|
32
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
58
33
|
ref: ref,
|
59
34
|
className: cls
|
60
35
|
}, rest), menuList.map(function (menu, menuIndex) {
|
61
|
-
return typeAssertion.isArrayNonEmpty(menu) ? typeAssertion.isFunction(dropdownColumnRender) ? dropdownColumnRender( /*#__PURE__*/
|
36
|
+
return typeAssertion.isArrayNonEmpty(menu) ? typeAssertion.isFunction(dropdownColumnRender) ? dropdownColumnRender( /*#__PURE__*/React.createElement(CascaderMenu, {
|
62
37
|
key: menuIndex,
|
63
38
|
data: menu
|
64
|
-
}), menuIndex) : /*#__PURE__*/
|
39
|
+
}), menuIndex) : /*#__PURE__*/React.createElement(CascaderMenu, {
|
65
40
|
key: menuIndex,
|
66
41
|
data: menu
|
67
42
|
}) : null;
|
68
43
|
}));
|
69
44
|
});
|
70
|
-
|
71
45
|
if (env.__DEV__) {
|
72
46
|
CascaderMenuList.displayName = 'CascaderMenuList';
|
73
47
|
}
|
74
|
-
|
75
48
|
var menuPrefix = classname.getPrefixCls('cascader-menu');
|
76
|
-
|
77
49
|
var CascaderMenu = function CascaderMenu(_ref) {
|
78
50
|
var _ref$prefixCls = _ref.prefixCls,
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
51
|
+
prefixCls = _ref$prefixCls === void 0 ? menuPrefix : _ref$prefixCls,
|
52
|
+
_ref$role = _ref.role,
|
53
|
+
role = _ref$role === void 0 ? 'menu' : _ref$role,
|
54
|
+
className = _ref.className,
|
55
|
+
style = _ref.style,
|
56
|
+
menu = _ref.data;
|
86
57
|
var _useCascaderContext2 = context.useCascaderContext(),
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
58
|
+
flatted = _useCascaderContext2.flatted,
|
59
|
+
disabledContext = _useCascaderContext2.disabled,
|
60
|
+
expandTrigger = _useCascaderContext2.expandTrigger,
|
61
|
+
onItemClick = _useCascaderContext2.onItemClick,
|
62
|
+
onItemHover = _useCascaderContext2.onItemHover,
|
63
|
+
titleRender = _useCascaderContext2.titleRender,
|
64
|
+
onLoadChildren = _useCascaderContext2.onLoadChildren,
|
65
|
+
getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
|
96
66
|
var cls = classname.cx(prefixCls, className);
|
97
|
-
return /*#__PURE__*/
|
67
|
+
return /*#__PURE__*/React.createElement("ul", {
|
98
68
|
className: cls,
|
99
69
|
style: style,
|
100
70
|
role: role
|
101
71
|
}, menu.map(function (option) {
|
102
72
|
var eventOption = index.getItemEventData(option, getItemRequiredProps(option));
|
103
73
|
var selected = eventOption.selected,
|
104
|
-
|
105
|
-
|
74
|
+
loading = eventOption.loading,
|
75
|
+
active = eventOption.active;
|
106
76
|
var disabled = disabledContext || option.disabled;
|
107
77
|
var optionCls = classname.cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
|
108
|
-
return /*#__PURE__*/
|
78
|
+
return /*#__PURE__*/React.createElement("li", {
|
109
79
|
key: option.id,
|
110
80
|
role: "menu-item",
|
111
81
|
className: prefixCls + "-item"
|
112
|
-
}, /*#__PURE__*/
|
82
|
+
}, /*#__PURE__*/React.createElement("div", {
|
113
83
|
className: optionCls,
|
114
84
|
onClick: function onClick() {
|
115
85
|
if (disabled) return;
|
@@ -117,61 +87,52 @@ var CascaderMenu = function CascaderMenu(_ref) {
|
|
117
87
|
},
|
118
88
|
onMouseEnter: function onMouseEnter() {
|
119
89
|
if (disabled) return;
|
120
|
-
|
121
90
|
if (expandTrigger === 'hover') {
|
122
91
|
onItemHover(eventOption);
|
123
92
|
}
|
124
93
|
}
|
125
|
-
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/
|
94
|
+
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
126
95
|
}));
|
127
96
|
};
|
128
97
|
/**
|
129
98
|
* 渲染菜单子项的展开提示图标
|
130
99
|
*/
|
131
|
-
|
132
|
-
|
133
100
|
var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
|
134
101
|
if (loading) {
|
135
|
-
return /*#__PURE__*/
|
102
|
+
return /*#__PURE__*/React.createElement("span", {
|
136
103
|
className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
|
137
104
|
}, index$1.defaultLoadingIcon);
|
138
105
|
}
|
139
|
-
|
140
106
|
var canLoadChildren = index.checkCanLoadChildren(item, onLoadChildren);
|
141
|
-
|
142
107
|
if (canLoadChildren) {
|
143
|
-
return /*#__PURE__*/
|
108
|
+
return /*#__PURE__*/React.createElement("span", {
|
144
109
|
className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
|
145
110
|
}, index$1.defaultSuffixIcon);
|
146
111
|
}
|
147
|
-
|
148
|
-
return /*#__PURE__*/React__default["default"].createElement("span", {
|
112
|
+
return /*#__PURE__*/React.createElement("span", {
|
149
113
|
className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
|
150
114
|
}, index$1.defaultLeafIcon);
|
151
115
|
};
|
152
|
-
|
153
116
|
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
154
117
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
155
118
|
var title = titleRender ? titleRender(option) : true;
|
156
119
|
if (title !== true) return title;
|
157
|
-
return /*#__PURE__*/
|
120
|
+
return /*#__PURE__*/React.createElement("span", {
|
158
121
|
className: "title__text title__text--cols"
|
159
122
|
}, treeUtils.getTopDownAncestors(option).map(function (item) {
|
160
|
-
return /*#__PURE__*/
|
123
|
+
return /*#__PURE__*/React.createElement("span", {
|
161
124
|
key: item.id,
|
162
125
|
className: "title__text--col"
|
163
126
|
}, item.title);
|
164
127
|
}));
|
165
128
|
};
|
166
|
-
|
167
129
|
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
168
130
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
169
131
|
var title = titleRender ? titleRender(option) : true;
|
170
132
|
if (title !== true) return title;
|
171
|
-
return /*#__PURE__*/
|
133
|
+
return /*#__PURE__*/React.createElement("span", {
|
172
134
|
className: "title__text"
|
173
135
|
}, option.title);
|
174
136
|
};
|
175
|
-
|
176
137
|
exports.CascaderMenu = CascaderMenu;
|
177
138
|
exports.CascaderMenuList = CascaderMenuList;
|