@hi-ui/cascader 4.0.0-beta.3 → 4.0.0-beta.30
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/lib/cjs/Cascader.js +19 -145
- package/lib/cjs/CascaderMenuList.js +171 -0
- package/lib/cjs/context.js +0 -1
- package/lib/cjs/hooks/use-async-switch.js +4 -5
- package/lib/cjs/hooks/use-cache/lib/esm/index.js +0 -1
- package/lib/cjs/hooks/use-select.js +0 -1
- package/lib/cjs/icons/index.js +3 -4
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +2 -3
- package/lib/cjs/use-cascader.js +0 -1
- package/lib/cjs/utils/index.js +0 -1
- package/lib/esm/Cascader.js +8 -133
- package/lib/esm/CascaderMenuList.js +145 -0
- package/lib/esm/context.js +0 -1
- package/lib/esm/hooks/use-async-switch.js +0 -1
- package/lib/esm/hooks/use-cache/lib/esm/index.js +0 -1
- package/lib/esm/hooks/use-select.js +0 -1
- package/lib/esm/icons/index.js +0 -1
- package/lib/esm/index.js +1 -2
- package/lib/esm/styles/index.scss.js +3 -5
- package/lib/esm/use-cascader.js +0 -1
- package/lib/esm/utils/index.js +0 -1
- package/lib/types/Cascader.d.ts +3 -13
- package/lib/types/CascaderMenuList.d.ts +13 -0
- package/lib/types/context.d.ts +7 -7
- package/lib/types/hooks/use-select.d.ts +2 -2
- package/lib/types/types.d.ts +14 -14
- package/lib/types/use-cascader.d.ts +6 -7
- package/lib/types/utils/index.d.ts +7 -7
- package/package.json +21 -20
- package/lib/cjs/Cascader.js.map +0 -1
- package/lib/cjs/context.js.map +0 -1
- package/lib/cjs/hooks/use-async-switch.js.map +0 -1
- package/lib/cjs/hooks/use-cache/lib/esm/index.js.map +0 -1
- package/lib/cjs/hooks/use-select.js.map +0 -1
- package/lib/cjs/icons/index.js.map +0 -1
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/styles/index.scss.js.map +0 -1
- package/lib/cjs/use-cascader.js.map +0 -1
- package/lib/cjs/utils/index.js.map +0 -1
- package/lib/esm/Cascader.js.map +0 -1
- package/lib/esm/context.js.map +0 -1
- package/lib/esm/hooks/use-async-switch.js.map +0 -1
- package/lib/esm/hooks/use-cache/lib/esm/index.js.map +0 -1
- package/lib/esm/hooks/use-select.js.map +0 -1
- package/lib/esm/icons/index.js.map +0 -1
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/styles/index.scss.js.map +0 -1
- package/lib/esm/use-cascader.js.map +0 -1
- package/lib/esm/utils/index.js.map +0 -1
package/lib/esm/Cascader.js
CHANGED
@@ -15,16 +15,17 @@ import { useUncontrolledToggle } from '@hi-ui/use-toggle';
|
|
15
15
|
import { useCascader } from './use-cascader.js';
|
16
16
|
import { MockInput } from '@hi-ui/input';
|
17
17
|
import { UpOutlined, DownOutlined } from '@hi-ui/icons';
|
18
|
-
import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
|
19
18
|
import { flattenTreeData, checkCanLoadChildren, getItemEventData } from './utils/index.js';
|
20
|
-
import { CascaderProvider
|
19
|
+
import { CascaderProvider } from './context.js';
|
21
20
|
import { getTopDownAncestors, getNodeAncestorsWithMe } from '@hi-ui/tree-utils';
|
22
21
|
import { isUndef, isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
|
23
22
|
import { Picker } from '@hi-ui/picker';
|
24
23
|
import { useTreeCustomSearch, useTreeUpMatchSearch, useSearchMode } from '@hi-ui/use-search-mode';
|
25
|
-
import { uniqBy } from '
|
24
|
+
import { uniqBy } from '@hi-ui/array-utils';
|
26
25
|
import { useCache } from './hooks/use-cache/lib/esm/index.js';
|
27
26
|
import { useLocaleContext } from '@hi-ui/locale-context';
|
27
|
+
import { callAllFuncs } from '@hi-ui/func-utils';
|
28
|
+
import { CascaderMenuList } from './CascaderMenuList.js';
|
28
29
|
|
29
30
|
var _prefix = getPrefixCls('cascader');
|
30
31
|
|
@@ -55,13 +56,14 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
55
56
|
invalid = props.invalid,
|
56
57
|
filterOption = props.filterOption,
|
57
58
|
searchableProp = props.searchable,
|
59
|
+
onSearchProp = props.onSearch,
|
58
60
|
titleRender = props.render,
|
59
61
|
overlayClassName = props.overlayClassName,
|
60
62
|
_props$data = props.data,
|
61
63
|
data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
|
62
64
|
onOpen = props.onOpen,
|
63
65
|
onClose = props.onClose,
|
64
|
-
rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "render", "overlayClassName", "data", "onOpen", "onClose"]);
|
66
|
+
rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "onOpen", "onClose"]);
|
65
67
|
|
66
68
|
var i18n = useLocaleContext();
|
67
69
|
var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
|
@@ -221,7 +223,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
221
223
|
onOpen: menuVisibleAction.on,
|
222
224
|
onClose: menuVisibleAction.off,
|
223
225
|
searchable: searchable,
|
224
|
-
onSearch: onSearch,
|
226
|
+
onSearch: callAllFuncs(onSearchProp, onSearch),
|
225
227
|
trigger: /*#__PURE__*/React.createElement(MockInput, {
|
226
228
|
clearable: clearable,
|
227
229
|
placeholder: placeholder,
|
@@ -243,132 +245,6 @@ if (__DEV__) {
|
|
243
245
|
Cascader.displayName = 'Cascader';
|
244
246
|
}
|
245
247
|
|
246
|
-
var menuListPrefix = getPrefixCls('cascader-menu-list');
|
247
|
-
var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
|
248
|
-
var _a$prefixCls = _a.prefixCls,
|
249
|
-
prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
|
250
|
-
className = _a.className,
|
251
|
-
rest = __rest(_a, ["prefixCls", "className"]);
|
252
|
-
|
253
|
-
var _useCascaderContext = useCascaderContext(),
|
254
|
-
flatted = _useCascaderContext.flatted,
|
255
|
-
menuList = _useCascaderContext.menuList;
|
256
|
-
|
257
|
-
var cls = cx(prefixCls, className, flatted && prefixCls + "--flatted");
|
258
|
-
return /*#__PURE__*/React.createElement("div", Object.assign({
|
259
|
-
ref: ref,
|
260
|
-
className: cls
|
261
|
-
}, rest), menuList.map(function (menu, menuIndex) {
|
262
|
-
// @ts-ignore
|
263
|
-
return isArrayNonEmpty(menu) ? /*#__PURE__*/React.createElement(CascaderMenu, {
|
264
|
-
key: menuIndex,
|
265
|
-
data: menu
|
266
|
-
}) : null;
|
267
|
-
}));
|
268
|
-
});
|
269
|
-
|
270
|
-
if (__DEV__) {
|
271
|
-
CascaderMenuList.displayName = 'CascaderMenuList';
|
272
|
-
}
|
273
|
-
|
274
|
-
var menuPrefix = getPrefixCls('cascader-menu');
|
275
|
-
|
276
|
-
var CascaderMenu = function CascaderMenu(_ref2) {
|
277
|
-
var _ref2$prefixCls = _ref2.prefixCls,
|
278
|
-
prefixCls = _ref2$prefixCls === void 0 ? menuPrefix : _ref2$prefixCls,
|
279
|
-
_ref2$role = _ref2.role,
|
280
|
-
role = _ref2$role === void 0 ? 'menu' : _ref2$role,
|
281
|
-
className = _ref2.className,
|
282
|
-
menu = _ref2.data;
|
283
|
-
|
284
|
-
var _useCascaderContext2 = useCascaderContext(),
|
285
|
-
flatted = _useCascaderContext2.flatted,
|
286
|
-
disabledContext = _useCascaderContext2.disabled,
|
287
|
-
expandTrigger = _useCascaderContext2.expandTrigger,
|
288
|
-
onItemClick = _useCascaderContext2.onItemClick,
|
289
|
-
onItemHover = _useCascaderContext2.onItemHover,
|
290
|
-
titleRender = _useCascaderContext2.titleRender,
|
291
|
-
onLoadChildren = _useCascaderContext2.onLoadChildren,
|
292
|
-
getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
|
293
|
-
|
294
|
-
var cls = cx(prefixCls, className);
|
295
|
-
return /*#__PURE__*/React.createElement("ul", {
|
296
|
-
className: cls,
|
297
|
-
role: role
|
298
|
-
}, menu.map(function (option) {
|
299
|
-
var eventOption = getItemEventData(option, getItemRequiredProps(option));
|
300
|
-
var selected = eventOption.selected,
|
301
|
-
loading = eventOption.loading;
|
302
|
-
var disabled = disabledContext || option.disabled;
|
303
|
-
var optionCls = cx(prefixCls + "-option", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
|
304
|
-
return /*#__PURE__*/React.createElement("li", {
|
305
|
-
key: option.id,
|
306
|
-
role: "menu-item",
|
307
|
-
className: prefixCls + "-item"
|
308
|
-
}, /*#__PURE__*/React.createElement("div", {
|
309
|
-
className: optionCls,
|
310
|
-
onClick: function onClick() {
|
311
|
-
if (disabled) return;
|
312
|
-
onItemClick(eventOption);
|
313
|
-
},
|
314
|
-
onMouseEnter: function onMouseEnter() {
|
315
|
-
if (disabled) return;
|
316
|
-
|
317
|
-
if (expandTrigger === 'hover') {
|
318
|
-
onItemHover(eventOption);
|
319
|
-
}
|
320
|
-
}
|
321
|
-
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
322
|
-
}));
|
323
|
-
};
|
324
|
-
/**
|
325
|
-
* 渲染菜单子项的展开提示图标
|
326
|
-
*/
|
327
|
-
|
328
|
-
|
329
|
-
var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
|
330
|
-
if (loading) {
|
331
|
-
return /*#__PURE__*/React.createElement("span", {
|
332
|
-
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
|
333
|
-
}, defaultLoadingIcon);
|
334
|
-
}
|
335
|
-
|
336
|
-
var canLoadChildren = checkCanLoadChildren(item, onLoadChildren);
|
337
|
-
|
338
|
-
if (canLoadChildren) {
|
339
|
-
return /*#__PURE__*/React.createElement("span", {
|
340
|
-
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
|
341
|
-
}, defaultSuffixIcon);
|
342
|
-
}
|
343
|
-
|
344
|
-
return /*#__PURE__*/React.createElement("span", {
|
345
|
-
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
|
346
|
-
}, defaultLeafIcon);
|
347
|
-
};
|
348
|
-
|
349
|
-
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
350
|
-
// 如果 titleRender 返回 `true`,则使用默认 title
|
351
|
-
var title = titleRender ? titleRender(option) : true;
|
352
|
-
if (title !== true) return title;
|
353
|
-
return /*#__PURE__*/React.createElement("span", {
|
354
|
-
className: "title__text title__text--cols"
|
355
|
-
}, getTopDownAncestors(option).map(function (item) {
|
356
|
-
return /*#__PURE__*/React.createElement("span", {
|
357
|
-
key: item.id,
|
358
|
-
className: "title__text--col"
|
359
|
-
}, item.title);
|
360
|
-
}));
|
361
|
-
};
|
362
|
-
|
363
|
-
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
364
|
-
// 如果 titleRender 返回 `true`,则使用默认 title
|
365
|
-
var title = titleRender ? titleRender(option) : true;
|
366
|
-
if (title !== true) return title;
|
367
|
-
return /*#__PURE__*/React.createElement("span", {
|
368
|
-
className: "title__text"
|
369
|
-
}, option.title);
|
370
|
-
};
|
371
|
-
|
372
248
|
var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
|
373
249
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
374
250
|
var title = titleRender ? titleRender(option, keyword) : true;
|
@@ -405,5 +281,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
|
|
405
281
|
}).reverse());
|
406
282
|
};
|
407
283
|
|
408
|
-
export { Cascader
|
409
|
-
//# sourceMappingURL=Cascader.js.map
|
284
|
+
export { Cascader };
|
@@ -0,0 +1,145 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/cascader
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
|
4
|
+
*
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
6
|
+
*
|
7
|
+
* This source code is licensed under the MIT license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
import { __rest } from 'tslib';
|
11
|
+
import React, { forwardRef } from 'react';
|
12
|
+
import { getPrefixCls, cx } from '@hi-ui/classname';
|
13
|
+
import { __DEV__ } from '@hi-ui/env';
|
14
|
+
import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
|
15
|
+
import { getItemEventData, checkCanLoadChildren } from './utils/index.js';
|
16
|
+
import { useCascaderContext } from './context.js';
|
17
|
+
import { getTopDownAncestors } from '@hi-ui/tree-utils';
|
18
|
+
import { isArrayNonEmpty } from '@hi-ui/type-assertion';
|
19
|
+
var menuListPrefix = getPrefixCls('cascader-menu-list');
|
20
|
+
var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
|
21
|
+
var _a$prefixCls = _a.prefixCls,
|
22
|
+
prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
|
23
|
+
className = _a.className,
|
24
|
+
rest = __rest(_a, ["prefixCls", "className"]);
|
25
|
+
|
26
|
+
var _useCascaderContext = useCascaderContext(),
|
27
|
+
flatted = _useCascaderContext.flatted,
|
28
|
+
menuList = _useCascaderContext.menuList;
|
29
|
+
|
30
|
+
var cls = cx(prefixCls, className, flatted && prefixCls + "--flatted");
|
31
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
32
|
+
ref: ref,
|
33
|
+
className: cls
|
34
|
+
}, rest), menuList.map(function (menu, menuIndex) {
|
35
|
+
// @ts-ignore
|
36
|
+
return isArrayNonEmpty(menu) ? /*#__PURE__*/React.createElement(CascaderMenu, {
|
37
|
+
key: menuIndex,
|
38
|
+
data: menu
|
39
|
+
}) : null;
|
40
|
+
}));
|
41
|
+
});
|
42
|
+
|
43
|
+
if (__DEV__) {
|
44
|
+
CascaderMenuList.displayName = 'CascaderMenuList';
|
45
|
+
}
|
46
|
+
|
47
|
+
var menuPrefix = getPrefixCls('cascader-menu');
|
48
|
+
|
49
|
+
var CascaderMenu = function CascaderMenu(_ref) {
|
50
|
+
var _ref$prefixCls = _ref.prefixCls,
|
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
|
+
menu = _ref.data;
|
56
|
+
|
57
|
+
var _useCascaderContext2 = useCascaderContext(),
|
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;
|
66
|
+
|
67
|
+
var cls = cx(prefixCls, className);
|
68
|
+
return /*#__PURE__*/React.createElement("ul", {
|
69
|
+
className: cls,
|
70
|
+
role: role
|
71
|
+
}, menu.map(function (option) {
|
72
|
+
var eventOption = getItemEventData(option, getItemRequiredProps(option));
|
73
|
+
var selected = eventOption.selected,
|
74
|
+
loading = eventOption.loading;
|
75
|
+
var disabled = disabledContext || option.disabled;
|
76
|
+
var optionCls = cx(prefixCls + "-option", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
|
77
|
+
return /*#__PURE__*/React.createElement("li", {
|
78
|
+
key: option.id,
|
79
|
+
role: "menu-item",
|
80
|
+
className: prefixCls + "-item"
|
81
|
+
}, /*#__PURE__*/React.createElement("div", {
|
82
|
+
className: optionCls,
|
83
|
+
onClick: function onClick() {
|
84
|
+
if (disabled) return;
|
85
|
+
onItemClick(eventOption);
|
86
|
+
},
|
87
|
+
onMouseEnter: function onMouseEnter() {
|
88
|
+
if (disabled) return;
|
89
|
+
|
90
|
+
if (expandTrigger === 'hover') {
|
91
|
+
onItemHover(eventOption);
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
95
|
+
}));
|
96
|
+
};
|
97
|
+
/**
|
98
|
+
* 渲染菜单子项的展开提示图标
|
99
|
+
*/
|
100
|
+
|
101
|
+
|
102
|
+
var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
|
103
|
+
if (loading) {
|
104
|
+
return /*#__PURE__*/React.createElement("span", {
|
105
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
|
106
|
+
}, defaultLoadingIcon);
|
107
|
+
}
|
108
|
+
|
109
|
+
var canLoadChildren = checkCanLoadChildren(item, onLoadChildren);
|
110
|
+
|
111
|
+
if (canLoadChildren) {
|
112
|
+
return /*#__PURE__*/React.createElement("span", {
|
113
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
|
114
|
+
}, defaultSuffixIcon);
|
115
|
+
}
|
116
|
+
|
117
|
+
return /*#__PURE__*/React.createElement("span", {
|
118
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
|
119
|
+
}, defaultLeafIcon);
|
120
|
+
};
|
121
|
+
|
122
|
+
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
123
|
+
// 如果 titleRender 返回 `true`,则使用默认 title
|
124
|
+
var title = titleRender ? titleRender(option) : true;
|
125
|
+
if (title !== true) return title;
|
126
|
+
return /*#__PURE__*/React.createElement("span", {
|
127
|
+
className: "title__text title__text--cols"
|
128
|
+
}, getTopDownAncestors(option).map(function (item) {
|
129
|
+
return /*#__PURE__*/React.createElement("span", {
|
130
|
+
key: item.id,
|
131
|
+
className: "title__text--col"
|
132
|
+
}, item.title);
|
133
|
+
}));
|
134
|
+
};
|
135
|
+
|
136
|
+
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
137
|
+
// 如果 titleRender 返回 `true`,则使用默认 title
|
138
|
+
var title = titleRender ? titleRender(option) : true;
|
139
|
+
if (title !== true) return title;
|
140
|
+
return /*#__PURE__*/React.createElement("span", {
|
141
|
+
className: "title__text"
|
142
|
+
}, option.title);
|
143
|
+
};
|
144
|
+
|
145
|
+
export { CascaderMenu, CascaderMenuList };
|
package/lib/esm/context.js
CHANGED
package/lib/esm/icons/index.js
CHANGED
package/lib/esm/index.js
CHANGED
@@ -8,5 +8,4 @@
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
10
|
import './styles/index.scss.js';
|
11
|
-
export { Cascader,
|
12
|
-
//# sourceMappingURL=index.js.map
|
11
|
+
export { Cascader, Cascader as default } from './Cascader.js';
|
@@ -7,11 +7,9 @@
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
|
-
|
11
|
-
|
12
|
-
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
10
|
+
import __styleInject__ from 'inject-head-style';
|
11
|
+
var css_248z = ".hi-v4-cascader__popper .hi-v4-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden; }.hi-v4-cascader__popper .hi-v4-picker__loading, .hi-v4-cascader__popper .hi-v4-picker__empty {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px); }.hi-v4-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative; }.hi-v4-cascader-search .hi-v4-input__prefix {font-size: 16px;padding-left: 0; }.hi-v4-cascader-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px; }.hi-v4-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto; }.hi-v4-cascader-menu-list--flatted .hi-v4-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%; }.hi-v4-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 260px;overflow: auto;padding: 4px 8px;border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-cascader-menu:last-of-type {border: none; }.hi-v4-cascader-menu-item {width: 100%;padding: var(--hi-v4-spacing-2, 4px) 0;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-cascader-menu-option {padding: 0 var(--hi-v4-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 32px;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-cascader-menu-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-option--focused {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-cascader-menu-option--checked {font-weight: 700; }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background: transparent; }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1; }.hi-v4-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none; }.hi-v4-cascader-menu .title__text--col {display: inline-block; }.hi-v4-cascader-menu .title__text--col::after {content: '\\00a0/\\00a0'; }.hi-v4-cascader-menu .title__text--col:last-child::after {content: none; }.hi-v4-cascader-menu .title__text--matched {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-cascader-menu-switcher--loading {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-switcher--arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg); }.hi-v4-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor; }.hi-v4-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }";
|
13
12
|
|
14
13
|
__styleInject__(css_248z);
|
15
14
|
|
16
|
-
export default
|
17
|
-
//# sourceMappingURL=index.scss.js.map
|
15
|
+
export { css_248z as default };
|
package/lib/esm/use-cascader.js
CHANGED
package/lib/esm/utils/index.js
CHANGED
package/lib/types/Cascader.d.ts
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import type {
|
2
|
+
import type { HiBaseAppearanceEnum } from '@hi-ui/core';
|
3
3
|
import { UseCascaderProps } from './use-cascader';
|
4
4
|
import type { PopperOverlayProps } from '@hi-ui/popper';
|
5
|
-
import {
|
5
|
+
import { CascaderExpandTriggerEnum, CascaderItemEventData } from './types';
|
6
6
|
import { PickerProps } from '@hi-ui/picker';
|
7
7
|
/**
|
8
8
|
* TODO: What is Cascader
|
@@ -18,7 +18,7 @@ export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | '
|
|
18
18
|
/**
|
19
19
|
* 次级菜单的展开方式
|
20
20
|
*/
|
21
|
-
expandTrigger?:
|
21
|
+
expandTrigger?: CascaderExpandTriggerEnum;
|
22
22
|
/**
|
23
23
|
* 是否可搜索(仅在 title 为字符串时支持)
|
24
24
|
*/
|
@@ -62,13 +62,3 @@ export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | '
|
|
62
62
|
*/
|
63
63
|
appearance?: HiBaseAppearanceEnum;
|
64
64
|
}
|
65
|
-
export declare const CascaderMenuList: React.ForwardRefExoticComponent<Pick<CascaderMenuListProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
|
66
|
-
export interface CascaderMenuListProps extends HiBaseHTMLProps {
|
67
|
-
}
|
68
|
-
export declare const CascaderMenu: ({ prefixCls, role, className, data: menu, }: CascaderMenuProps) => JSX.Element;
|
69
|
-
export interface CascaderMenuProps extends HiBaseHTMLProps {
|
70
|
-
/**
|
71
|
-
* 设置选择项数据源
|
72
|
-
*/
|
73
|
-
data: FlattedCascaderItem[];
|
74
|
-
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { HiBaseHTMLProps } from '@hi-ui/core';
|
3
|
+
import { FlattedCascaderDataItem } from './types';
|
4
|
+
export declare const CascaderMenuList: React.ForwardRefExoticComponent<Pick<CascaderMenuListProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
|
5
|
+
export interface CascaderMenuListProps extends HiBaseHTMLProps {
|
6
|
+
}
|
7
|
+
export declare const CascaderMenu: ({ prefixCls, role, className, data: menu, }: CascaderMenuProps) => JSX.Element;
|
8
|
+
export interface CascaderMenuProps extends HiBaseHTMLProps {
|
9
|
+
/**
|
10
|
+
* 设置选择项数据源
|
11
|
+
*/
|
12
|
+
data: FlattedCascaderDataItem[];
|
13
|
+
}
|
package/lib/types/context.d.ts
CHANGED
@@ -1,21 +1,21 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { CascaderItemEventData,
|
2
|
+
import { CascaderItemEventData, CascaderExpandTriggerEnum } from './types';
|
3
3
|
export declare const CascaderProvider: React.Provider<(Omit<{
|
4
4
|
rootProps: {};
|
5
5
|
reset: () => void;
|
6
6
|
flattedData: any;
|
7
7
|
value: React.ReactText[];
|
8
8
|
tryChangeValue: (stateOrFunction: React.SetStateAction<React.ReactText[]>, ...args: any[]) => void;
|
9
|
-
getItemRequiredProps: ({ id, depth }: import("./types").
|
9
|
+
getItemRequiredProps: ({ id, depth }: import("./types").FlattedCascaderDataItem) => import("./types").CascaderItemRequiredProps;
|
10
10
|
flatted: boolean;
|
11
11
|
onItemClick: (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>;
|
12
12
|
onItemHover: (option: any) => void;
|
13
13
|
changeOnSelect: boolean;
|
14
14
|
onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void | Promise<void | import("./types").CascaderDataItem[]>) | undefined;
|
15
15
|
disabled: boolean;
|
16
|
-
menuList: import("./types").
|
16
|
+
menuList: import("./types").FlattedCascaderDataItem[][];
|
17
17
|
}, "rootProps"> & {
|
18
|
-
expandTrigger:
|
18
|
+
expandTrigger: CascaderExpandTriggerEnum;
|
19
19
|
titleRender: (item: CascaderItemEventData) => React.ReactNode;
|
20
20
|
}) | null>;
|
21
21
|
export declare const useCascaderContext: () => Omit<{
|
@@ -24,15 +24,15 @@ export declare const useCascaderContext: () => Omit<{
|
|
24
24
|
flattedData: any;
|
25
25
|
value: React.ReactText[];
|
26
26
|
tryChangeValue: (stateOrFunction: React.SetStateAction<React.ReactText[]>, ...args: any[]) => void;
|
27
|
-
getItemRequiredProps: ({ id, depth }: import("./types").
|
27
|
+
getItemRequiredProps: ({ id, depth }: import("./types").FlattedCascaderDataItem) => import("./types").CascaderItemRequiredProps;
|
28
28
|
flatted: boolean;
|
29
29
|
onItemClick: (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>;
|
30
30
|
onItemHover: (option: any) => void;
|
31
31
|
changeOnSelect: boolean;
|
32
32
|
onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void | Promise<void | import("./types").CascaderDataItem[]>) | undefined;
|
33
33
|
disabled: boolean;
|
34
|
-
menuList: import("./types").
|
34
|
+
menuList: import("./types").FlattedCascaderDataItem[][];
|
35
35
|
}, "rootProps"> & {
|
36
|
-
expandTrigger:
|
36
|
+
expandTrigger: CascaderExpandTriggerEnum;
|
37
37
|
titleRender: (item: CascaderItemEventData) => React.ReactNode;
|
38
38
|
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { CascaderItemEventData,
|
2
|
+
import { CascaderItemEventData, FlattedCascaderDataItem } from '../types';
|
3
3
|
/**
|
4
4
|
* 用于选中的 hook
|
5
5
|
*/
|
6
|
-
export declare const useSelect: (disabled: boolean, onSelect: (value: React.ReactText, item: CascaderItemEventData, itemPaths:
|
6
|
+
export declare const useSelect: (disabled: boolean, onSelect: (value: React.ReactText, item: CascaderItemEventData, itemPaths: FlattedCascaderDataItem[]) => void, changeOnSelect: boolean, onLoadChildren?: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void) | undefined) => readonly [React.ReactText, (targetItem: CascaderItemEventData, onlyExpand: boolean) => void, React.Dispatch<React.SetStateAction<React.ReactText>>];
|
package/lib/types/types.d.ts
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
export interface CascaderDataItem extends Record<string, any> {
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* 选择项值,唯一 id
|
5
5
|
*/
|
6
6
|
id?: React.ReactText;
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* 选项标题
|
9
9
|
*/
|
10
10
|
title?: React.ReactNode;
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* 下一级选项列表
|
13
13
|
*/
|
14
14
|
children?: CascaderDataItem[];
|
15
15
|
/**
|
@@ -21,24 +21,24 @@ export interface CascaderDataItem extends Record<string, any> {
|
|
21
21
|
*/
|
22
22
|
disabled?: boolean;
|
23
23
|
}
|
24
|
-
export interface
|
25
|
-
children:
|
24
|
+
export interface FlattedCascaderDataItemWithChildren extends FlattedCascaderDataItem {
|
25
|
+
children: FlattedCascaderDataItem[];
|
26
26
|
}
|
27
|
-
export interface
|
27
|
+
export interface FlattedCascaderDataItem extends Required<Omit<CascaderDataItem, 'children'>> {
|
28
28
|
/**
|
29
|
-
*
|
29
|
+
* 选择项值,唯一 id
|
30
30
|
*/
|
31
31
|
id: React.ReactText;
|
32
32
|
/**
|
33
|
-
*
|
33
|
+
* 选项标题
|
34
34
|
*/
|
35
35
|
title: React.ReactNode;
|
36
36
|
/**
|
37
|
-
*
|
37
|
+
* 下一级选项列表
|
38
38
|
*/
|
39
|
-
children?:
|
39
|
+
children?: FlattedCascaderDataItem[];
|
40
40
|
/**
|
41
|
-
*
|
41
|
+
* 关联用户传入的原始数据对象
|
42
42
|
*/
|
43
43
|
raw: CascaderDataItem;
|
44
44
|
/**
|
@@ -48,16 +48,16 @@ export interface FlattedCascaderItem extends Required<Omit<CascaderDataItem, 'ch
|
|
48
48
|
/**
|
49
49
|
* 该节点的父节点
|
50
50
|
*/
|
51
|
-
parent:
|
51
|
+
parent: FlattedCascaderDataItemWithChildren;
|
52
52
|
}
|
53
53
|
export interface CascaderItemRequiredProps {
|
54
54
|
selected: boolean;
|
55
55
|
loading: boolean;
|
56
56
|
focused: boolean;
|
57
57
|
}
|
58
|
-
export interface CascaderItemEventData extends
|
58
|
+
export interface CascaderItemEventData extends FlattedCascaderDataItem, CascaderItemRequiredProps {
|
59
59
|
}
|
60
|
-
export declare type
|
60
|
+
export declare type CascaderExpandTriggerEnum = 'click' | 'hover';
|
61
61
|
export interface NodeRoot<T> {
|
62
62
|
depth: -1;
|
63
63
|
children: T[];
|
@@ -1,30 +1,29 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import
|
3
|
-
import { FlattedCascaderItem, CascaderItemRequiredProps, CascaderItemEventData, CascaderDataItem } from './types';
|
2
|
+
import { FlattedCascaderDataItem, CascaderItemRequiredProps, CascaderItemEventData, CascaderDataItem } from './types';
|
4
3
|
export declare const useCascader: ({ defaultValue, value: valueProp, onChange: onChangeProp, data, disabled, changeOnSelect, flatted, onSelect: onSelectProp, onLoadChildren, cascaderData: cascaderDataProp, setCascaderData: setCascaderDataProp, flattedData: flattedDataProp, fieldNames, ...rest }: UseCascaderProps) => {
|
5
4
|
rootProps: {};
|
6
5
|
reset: () => void;
|
7
6
|
flattedData: any;
|
8
7
|
value: React.ReactText[];
|
9
8
|
tryChangeValue: (stateOrFunction: React.SetStateAction<React.ReactText[]>, ...args: any[]) => void;
|
10
|
-
getItemRequiredProps: ({ id, depth }:
|
9
|
+
getItemRequiredProps: ({ id, depth }: FlattedCascaderDataItem) => CascaderItemRequiredProps;
|
11
10
|
flatted: boolean;
|
12
11
|
onItemClick: (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>;
|
13
12
|
onItemHover: (option: any) => void;
|
14
13
|
changeOnSelect: boolean;
|
15
14
|
onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<CascaderDataItem[] | void> | void) | undefined;
|
16
15
|
disabled: boolean;
|
17
|
-
menuList:
|
16
|
+
menuList: FlattedCascaderDataItem[][];
|
18
17
|
};
|
19
18
|
export interface UseCascaderProps {
|
20
19
|
/**
|
21
20
|
* 设置 data 中 id, title, disabled, children 对应的 key
|
22
21
|
*/
|
23
|
-
fieldNames?:
|
22
|
+
fieldNames?: Record<string, string>;
|
24
23
|
/**
|
25
24
|
* 设置选择项数据源
|
26
25
|
*/
|
27
|
-
data
|
26
|
+
data?: CascaderDataItem[];
|
28
27
|
/**
|
29
28
|
* 设置当前选中值
|
30
29
|
*/
|
@@ -41,7 +40,7 @@ export interface UseCascaderProps {
|
|
41
40
|
* 选中选项时触发,仅供内部使用。暂不对外暴露
|
42
41
|
* @private
|
43
42
|
*/
|
44
|
-
onSelect?: (value: React.ReactText, targetOption: CascaderItemEventData, optionPaths:
|
43
|
+
onSelect?: (value: React.ReactText, targetOption: CascaderItemEventData, optionPaths: FlattedCascaderDataItem[]) => void;
|
45
44
|
/**
|
46
45
|
* 是否禁止使用
|
47
46
|
*/
|