@hi-ui/cascader 4.0.0-beta.4 → 4.0.0-beta.42
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 +27 -148
- package/lib/cjs/CascaderMenuList.js +172 -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 +2 -2
- package/lib/cjs/utils/index.js +0 -1
- package/lib/esm/Cascader.js +17 -137
- package/lib/esm/CascaderMenuList.js +146 -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 +2 -2
- package/lib/esm/utils/index.js +0 -1
- package/lib/types/Cascader.d.ts +4 -14
- 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/index.d.ts +1 -0
- package/lib/types/types.d.ts +15 -18
- 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 {
|
19
|
-
import {
|
20
|
-
import { CascaderProvider, useCascaderContext } from './context.js';
|
18
|
+
import { flattenTreeData, getItemEventData } from './utils/index.js';
|
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,19 +56,22 @@ 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,
|
64
|
+
visible = props.visible,
|
62
65
|
onOpen = props.onOpen,
|
63
66
|
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"]);
|
67
|
+
rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "visible", "onOpen", "onClose"]);
|
65
68
|
|
66
69
|
var i18n = useLocaleContext();
|
67
70
|
var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
|
68
71
|
var flatted = type === 'flatted';
|
69
72
|
|
70
73
|
var _useUncontrolledToggl = useUncontrolledToggle({
|
74
|
+
visible: visible,
|
71
75
|
disabled: disabled,
|
72
76
|
onOpen: onOpen,
|
73
77
|
onClose: onClose
|
@@ -116,9 +120,12 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
116
120
|
data: cascaderData,
|
117
121
|
flattedData: flattedData,
|
118
122
|
enabled: searchableProp,
|
119
|
-
exclude: function exclude(
|
120
|
-
return
|
121
|
-
}
|
123
|
+
exclude: function exclude(node) {
|
124
|
+
return node.disabled;
|
125
|
+
} // exclude: (option: FlattedCascaderDataItem) => {
|
126
|
+
// return checkCanLoadChildren(option, onLoadChildren)
|
127
|
+
// },
|
128
|
+
|
122
129
|
});
|
123
130
|
|
124
131
|
var _useSearchMode = useSearchMode({
|
@@ -221,7 +228,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
221
228
|
onOpen: menuVisibleAction.on,
|
222
229
|
onClose: menuVisibleAction.off,
|
223
230
|
searchable: searchable,
|
224
|
-
onSearch: onSearch,
|
231
|
+
onSearch: callAllFuncs(onSearchProp, onSearch),
|
225
232
|
trigger: /*#__PURE__*/React.createElement(MockInput, {
|
226
233
|
clearable: clearable,
|
227
234
|
placeholder: placeholder,
|
@@ -243,132 +250,6 @@ if (__DEV__) {
|
|
243
250
|
Cascader.displayName = 'Cascader';
|
244
251
|
}
|
245
252
|
|
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
253
|
var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
|
373
254
|
// 如果 titleRender 返回 `true`,则使用默认 title
|
374
255
|
var title = titleRender ? titleRender(option, keyword) : true;
|
@@ -405,5 +286,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
|
|
405
286
|
}).reverse());
|
406
287
|
};
|
407
288
|
|
408
|
-
export { Cascader
|
409
|
-
//# sourceMappingURL=Cascader.js.map
|
289
|
+
export { Cascader };
|
@@ -0,0 +1,146 @@
|
|
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
|
+
active = eventOption.active;
|
76
|
+
var disabled = disabledContext || option.disabled;
|
77
|
+
var optionCls = cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
|
78
|
+
return /*#__PURE__*/React.createElement("li", {
|
79
|
+
key: option.id,
|
80
|
+
role: "menu-item",
|
81
|
+
className: prefixCls + "-item"
|
82
|
+
}, /*#__PURE__*/React.createElement("div", {
|
83
|
+
className: optionCls,
|
84
|
+
onClick: function onClick() {
|
85
|
+
if (disabled) return;
|
86
|
+
onItemClick(eventOption);
|
87
|
+
},
|
88
|
+
onMouseEnter: function onMouseEnter() {
|
89
|
+
if (disabled) return;
|
90
|
+
|
91
|
+
if (expandTrigger === 'hover') {
|
92
|
+
onItemHover(eventOption);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
96
|
+
}));
|
97
|
+
};
|
98
|
+
/**
|
99
|
+
* 渲染菜单子项的展开提示图标
|
100
|
+
*/
|
101
|
+
|
102
|
+
|
103
|
+
var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
|
104
|
+
if (loading) {
|
105
|
+
return /*#__PURE__*/React.createElement("span", {
|
106
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
|
107
|
+
}, defaultLoadingIcon);
|
108
|
+
}
|
109
|
+
|
110
|
+
var canLoadChildren = checkCanLoadChildren(item, onLoadChildren);
|
111
|
+
|
112
|
+
if (canLoadChildren) {
|
113
|
+
return /*#__PURE__*/React.createElement("span", {
|
114
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
|
115
|
+
}, defaultSuffixIcon);
|
116
|
+
}
|
117
|
+
|
118
|
+
return /*#__PURE__*/React.createElement("span", {
|
119
|
+
className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
|
120
|
+
}, defaultLeafIcon);
|
121
|
+
};
|
122
|
+
|
123
|
+
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
124
|
+
// 如果 titleRender 返回 `true`,则使用默认 title
|
125
|
+
var title = titleRender ? titleRender(option) : true;
|
126
|
+
if (title !== true) return title;
|
127
|
+
return /*#__PURE__*/React.createElement("span", {
|
128
|
+
className: "title__text title__text--cols"
|
129
|
+
}, getTopDownAncestors(option).map(function (item) {
|
130
|
+
return /*#__PURE__*/React.createElement("span", {
|
131
|
+
key: item.id,
|
132
|
+
className: "title__text--col"
|
133
|
+
}, item.title);
|
134
|
+
}));
|
135
|
+
};
|
136
|
+
|
137
|
+
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
138
|
+
// 如果 titleRender 返回 `true`,则使用默认 title
|
139
|
+
var title = titleRender ? titleRender(option) : true;
|
140
|
+
if (title !== true) return title;
|
141
|
+
return /*#__PURE__*/React.createElement("span", {
|
142
|
+
className: "title__text"
|
143
|
+
}, option.title);
|
144
|
+
};
|
145
|
+
|
146
|
+
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
@@ -92,12 +92,13 @@ var useCascader = function useCascader(_a) {
|
|
92
92
|
var id = _ref3.id,
|
93
93
|
depth = _ref3.depth;
|
94
94
|
return {
|
95
|
+
active: value[depth] === id,
|
95
96
|
selected: flatted ? selectedId === id : selectedIds[depth] === id,
|
96
97
|
loading: isLoadingId(id),
|
97
98
|
// TODO: 表示聚焦状态,添加快捷键时可以一起处理
|
98
99
|
focused: false
|
99
100
|
};
|
100
|
-
}, [flatted, selectedId, selectedIds, isLoadingId]);
|
101
|
+
}, [flatted, selectedId, selectedIds, isLoadingId, value]);
|
101
102
|
var reset = useCallback(function () {
|
102
103
|
setSelectedId(value[value.length - 1]);
|
103
104
|
}, [setSelectedId, value]);
|
@@ -119,4 +120,3 @@ var useCascader = function useCascader(_a) {
|
|
119
120
|
};
|
120
121
|
|
121
122
|
export { useCascader };
|
122
|
-
//# sourceMappingURL=use-cascader.js.map
|
package/lib/esm/utils/index.js
CHANGED
package/lib/types/Cascader.d.ts
CHANGED
@@ -1,15 +1,15 @@
|
|
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
|
9
9
|
* Trigger + MenuList + Search
|
10
10
|
*/
|
11
11
|
export declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<HTMLDivElement | null>>;
|
12
|
-
export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger'>, UseCascaderProps {
|
12
|
+
export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable'>, UseCascaderProps {
|
13
13
|
/**
|
14
14
|
* 将 check 子项拍平展示。暂不对外暴露
|
15
15
|
* @private
|
@@ -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/index.d.ts
CHANGED
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,17 +48,14 @@ 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
|
+
active: boolean;
|
57
58
|
}
|
58
|
-
export interface CascaderItemEventData extends
|
59
|
-
}
|
60
|
-
export declare type ExpandTrigger = 'click' | 'hover';
|
61
|
-
export interface NodeRoot<T> {
|
62
|
-
depth: -1;
|
63
|
-
children: T[];
|
59
|
+
export interface CascaderItemEventData extends FlattedCascaderDataItem, CascaderItemRequiredProps {
|
64
60
|
}
|
61
|
+
export declare type CascaderExpandTriggerEnum = 'click' | 'hover';
|