@hi-ui/cascader 4.1.6 → 4.3.0
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 +14 -0
- package/lib/cjs/Cascader.js +15 -6
- package/lib/esm/Cascader.js +15 -6
- package/lib/types/Cascader.d.ts +12 -0
- package/lib/types/context.d.ts +6 -2
- package/lib/types/use-cascader.d.ts +12 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,19 @@
|
|
1
1
|
# @hi-ui/cascader
|
2
2
|
|
3
|
+
## 4.3.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- [#2921](https://github.com/XiaoMi/hiui/pull/2921) [`c6d9225c5`](https://github.com/XiaoMi/hiui/commit/c6d9225c5f09484344159e31af93f7ae147566bb) Thanks [@yang-x20](https://github.com/yang-x20)! - feat: 新增自定义触发器
|
8
|
+
|
9
|
+
- [#2824](https://github.com/XiaoMi/hiui/pull/2824) [`912c60b7b`](https://github.com/XiaoMi/hiui/commit/912c60b7b0f19a8386ec1de30fe6440e3963f288) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 支持前置后置内容
|
10
|
+
|
11
|
+
## 4.2.0
|
12
|
+
|
13
|
+
### Minor Changes
|
14
|
+
|
15
|
+
- [#2805](https://github.com/XiaoMi/hiui/pull/2805) [`9146d5ef2`](https://github.com/XiaoMi/hiui/commit/9146d5ef207201a6ff8f42fb3ca66e7929335c1a) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: add closeOnSelect api
|
16
|
+
|
3
17
|
## 4.1.6
|
4
18
|
|
5
19
|
### Patch Changes
|
package/lib/cjs/Cascader.js
CHANGED
@@ -77,11 +77,16 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
77
77
|
visible = props.visible,
|
78
78
|
_props$size = props.size,
|
79
79
|
size = _props$size === void 0 ? 'md' : _props$size,
|
80
|
+
prefix = props.prefix,
|
81
|
+
suffix = props.suffix,
|
80
82
|
onOpen = props.onOpen,
|
81
83
|
onClose = props.onClose,
|
82
84
|
renderExtraFooter = props.renderExtraFooter,
|
83
85
|
dropdownColumnRender = props.dropdownColumnRender,
|
84
|
-
|
86
|
+
_props$closeOnSelect = props.closeOnSelect,
|
87
|
+
closeOnSelect = _props$closeOnSelect === void 0 ? true : _props$closeOnSelect,
|
88
|
+
customRender = props.customRender,
|
89
|
+
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", "prefix", "suffix", "onOpen", "onClose", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender"]);
|
85
90
|
var i18n = core.useLocaleContext();
|
86
91
|
var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
|
87
92
|
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
@@ -99,8 +104,11 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
99
104
|
var onSelect = function onSelect(value, item, itemPaths) {
|
100
105
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
101
106
|
setSelectedItem(item);
|
102
|
-
//
|
103
|
-
|
107
|
+
// 选中子节点时一定关闭弹窗,或者点击父节点并且 closeOnSelect 为 true 时也可以关闭弹窗
|
108
|
+
if (!item.children || item.children.length > 0 && closeOnSelect) {
|
109
|
+
// 关闭弹窗
|
110
|
+
menuVisibleAction.off();
|
111
|
+
}
|
104
112
|
};
|
105
113
|
// 拦截 titleRender,自定义高亮展示
|
106
114
|
var proxyTitleRender = function proxyTitleRender(node) {
|
@@ -233,12 +241,13 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
233
241
|
scrollable: false,
|
234
242
|
footer: typeAssertion.isFunction(renderExtraFooter) && renderExtraFooter(),
|
235
243
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
236
|
-
trigger: /*#__PURE__*/React__default["default"].createElement(input.MockInput, {
|
244
|
+
trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput, {
|
237
245
|
size: size,
|
238
246
|
clearable: clearable,
|
239
247
|
placeholder: placeholder,
|
240
248
|
displayRender: displayRender,
|
241
|
-
|
249
|
+
prefix: prefix,
|
250
|
+
suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
|
242
251
|
focused: menuVisible,
|
243
252
|
value: value[value.length - 1],
|
244
253
|
onChange: function onChange() {
|
@@ -247,7 +256,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
247
256
|
data: mergedData,
|
248
257
|
invalid: invalid,
|
249
258
|
appearance: appearance
|
250
|
-
})
|
259
|
+
}))
|
251
260
|
}), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/React__default["default"].createElement(CascaderMenuList.CascaderMenuList, null) : null));
|
252
261
|
});
|
253
262
|
if (env.__DEV__) {
|
package/lib/esm/Cascader.js
CHANGED
@@ -64,11 +64,16 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
64
64
|
visible = props.visible,
|
65
65
|
_props$size = props.size,
|
66
66
|
size = _props$size === void 0 ? 'md' : _props$size,
|
67
|
+
prefix = props.prefix,
|
68
|
+
suffix = props.suffix,
|
67
69
|
onOpen = props.onOpen,
|
68
70
|
onClose = props.onClose,
|
69
71
|
renderExtraFooter = props.renderExtraFooter,
|
70
72
|
dropdownColumnRender = props.dropdownColumnRender,
|
71
|
-
|
73
|
+
_props$closeOnSelect = props.closeOnSelect,
|
74
|
+
closeOnSelect = _props$closeOnSelect === void 0 ? true : _props$closeOnSelect,
|
75
|
+
customRender = props.customRender,
|
76
|
+
rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "prefix", "suffix", "onOpen", "onClose", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender"]);
|
72
77
|
var i18n = useLocaleContext();
|
73
78
|
var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
|
74
79
|
var _useUncontrolledToggl = useUncontrolledToggle({
|
@@ -86,8 +91,11 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
86
91
|
var onSelect = function onSelect(value, item, itemPaths) {
|
87
92
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
88
93
|
setSelectedItem(item);
|
89
|
-
//
|
90
|
-
|
94
|
+
// 选中子节点时一定关闭弹窗,或者点击父节点并且 closeOnSelect 为 true 时也可以关闭弹窗
|
95
|
+
if (!item.children || item.children.length > 0 && closeOnSelect) {
|
96
|
+
// 关闭弹窗
|
97
|
+
menuVisibleAction.off();
|
98
|
+
}
|
91
99
|
};
|
92
100
|
// 拦截 titleRender,自定义高亮展示
|
93
101
|
var proxyTitleRender = function proxyTitleRender(node) {
|
@@ -220,12 +228,13 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
220
228
|
scrollable: false,
|
221
229
|
footer: isFunction(renderExtraFooter) && renderExtraFooter(),
|
222
230
|
onSearch: callAllFuncs(onSearchProp, onSearch),
|
223
|
-
trigger: /*#__PURE__*/React.createElement(MockInput, {
|
231
|
+
trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React.createElement(MockInput, {
|
224
232
|
size: size,
|
225
233
|
clearable: clearable,
|
226
234
|
placeholder: placeholder,
|
227
235
|
displayRender: displayRender,
|
228
|
-
|
236
|
+
prefix: prefix,
|
237
|
+
suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
|
229
238
|
focused: menuVisible,
|
230
239
|
value: value[value.length - 1],
|
231
240
|
onChange: function onChange() {
|
@@ -234,7 +243,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
234
243
|
data: mergedData,
|
235
244
|
invalid: invalid,
|
236
245
|
appearance: appearance
|
237
|
-
})
|
246
|
+
}))
|
238
247
|
}), isArrayNonEmpty(showData) ? /*#__PURE__*/React.createElement(CascaderMenuList, null) : null));
|
239
248
|
});
|
240
249
|
if (__DEV__) {
|
package/lib/types/Cascader.d.ts
CHANGED
@@ -77,4 +77,16 @@ export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | '
|
|
77
77
|
* 设置尺寸
|
78
78
|
*/
|
79
79
|
size?: HiBaseSizeEnum;
|
80
|
+
/**
|
81
|
+
* 选择框前置内容
|
82
|
+
*/
|
83
|
+
prefix?: React.ReactNode;
|
84
|
+
/**
|
85
|
+
* 选择框后置内容
|
86
|
+
*/
|
87
|
+
suffix?: React.ReactNode;
|
88
|
+
/**
|
89
|
+
* 自定义触发器
|
90
|
+
*/
|
91
|
+
customRender?: React.ReactNode | ((selectedItem: CascaderItemEventData | null) => React.ReactNode);
|
80
92
|
}
|
package/lib/types/context.d.ts
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { CascaderItemEventData, CascaderExpandTriggerEnum } from './types';
|
3
3
|
export declare const CascaderProvider: React.Provider<(Omit<{
|
4
|
-
rootProps: {
|
4
|
+
rootProps: {
|
5
|
+
closeOnSelect?: boolean | undefined;
|
6
|
+
};
|
5
7
|
reset: () => void;
|
6
8
|
flattedData: any;
|
7
9
|
value: React.ReactText[];
|
@@ -20,7 +22,9 @@ export declare const CascaderProvider: React.Provider<(Omit<{
|
|
20
22
|
dropdownColumnRender?: ((menu: React.ReactElement, level: number) => React.ReactNode) | undefined;
|
21
23
|
}) | null>;
|
22
24
|
export declare const useCascaderContext: () => Omit<{
|
23
|
-
rootProps: {
|
25
|
+
rootProps: {
|
26
|
+
closeOnSelect?: boolean | undefined;
|
27
|
+
};
|
24
28
|
reset: () => void;
|
25
29
|
flattedData: any;
|
26
30
|
value: React.ReactText[];
|
@@ -1,7 +1,13 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { FlattedCascaderDataItem, CascaderItemRequiredProps, CascaderItemEventData, CascaderDataItem } from './types';
|
3
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) => {
|
4
|
-
rootProps: {
|
4
|
+
rootProps: {
|
5
|
+
/**
|
6
|
+
* 是否启用选择即关闭(用于 changeOnSelect 模式下控制父节点点击交互)
|
7
|
+
* @default true
|
8
|
+
*/
|
9
|
+
closeOnSelect?: boolean | undefined;
|
10
|
+
};
|
5
11
|
reset: () => void;
|
6
12
|
flattedData: any;
|
7
13
|
value: React.ReactText[];
|
@@ -49,6 +55,11 @@ export interface UseCascaderProps {
|
|
49
55
|
* 是否启用选择即改变功能
|
50
56
|
*/
|
51
57
|
changeOnSelect?: boolean;
|
58
|
+
/**
|
59
|
+
* 是否启用选择即关闭(用于 changeOnSelect 模式下控制父节点点击交互)
|
60
|
+
* @default true
|
61
|
+
*/
|
62
|
+
closeOnSelect?: boolean;
|
52
63
|
/**
|
53
64
|
* 将选项拍平展示,不支持 `onLoadChildren` 异步加载交互。暂不对外暴露
|
54
65
|
* @private
|