@hi-ui/cascader 4.0.0-alpha.26 → 4.0.0-alpha.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/README.md +42 -46
- package/lib/cjs/Cascader.js +103 -146
- package/lib/cjs/Cascader.js.map +1 -1
- package/lib/cjs/context.js.map +1 -1
- package/lib/cjs/hooks/use-async-switch.js +10 -34
- package/lib/cjs/hooks/use-async-switch.js.map +1 -1
- package/lib/cjs/hooks/use-select.js +3 -1
- package/lib/cjs/hooks/use-select.js.map +1 -1
- package/lib/cjs/index.js +0 -4
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-cascader.js +31 -72
- package/lib/cjs/use-cascader.js.map +1 -1
- package/lib/cjs/utils/index.js +35 -27
- package/lib/cjs/utils/index.js.map +1 -1
- package/lib/esm/Cascader.js +109 -147
- package/lib/esm/Cascader.js.map +1 -1
- package/lib/esm/context.js.map +1 -1
- package/lib/esm/hooks/use-async-switch.js +11 -36
- package/lib/esm/hooks/use-async-switch.js.map +1 -1
- package/lib/esm/hooks/use-select.js +2 -1
- package/lib/esm/hooks/use-select.js.map +1 -1
- package/lib/esm/index.js +1 -2
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-cascader.js +28 -68
- package/lib/esm/use-cascader.js.map +1 -1
- package/lib/esm/utils/index.js +33 -25
- package/lib/esm/utils/index.js.map +1 -1
- package/lib/types/Cascader.d.ts +13 -61
- package/lib/types/context.d.ts +27 -588
- package/lib/types/hooks/index.d.ts +0 -2
- package/lib/types/hooks/use-async-switch.d.ts +1 -1
- package/lib/types/hooks/use-select.d.ts +1 -1
- package/lib/types/index.d.ts +0 -1
- package/lib/types/types.d.ts +11 -7
- package/lib/types/use-cascader.d.ts +53 -295
- package/lib/types/utils/index.d.ts +3 -6
- package/package.json +16 -15
- package/lib/cjs/CascaderPanel.js +0 -81
- package/lib/cjs/CascaderPanel.js.map +0 -1
- package/lib/cjs/hooks/use-cache.js +0 -37
- package/lib/cjs/hooks/use-cache.js.map +0 -1
- package/lib/cjs/hooks/use-search.js +0 -116
- package/lib/cjs/hooks/use-search.js.map +0 -1
- package/lib/esm/CascaderPanel.js +0 -58
- package/lib/esm/CascaderPanel.js.map +0 -1
- package/lib/esm/hooks/use-cache.js +0 -30
- package/lib/esm/hooks/use-cache.js.map +0 -1
- package/lib/esm/hooks/use-search.js +0 -107
- package/lib/esm/hooks/use-search.js.map +0 -1
- package/lib/types/CascaderPanel.d.ts +0 -142
- package/lib/types/hooks/use-cache.d.ts +0 -8
- package/lib/types/hooks/use-search.d.ts +0 -9
package/README.md
CHANGED
|
@@ -16,31 +16,30 @@
|
|
|
16
16
|
|
|
17
17
|
## Props
|
|
18
18
|
|
|
19
|
-
| 参数 | 说明 | 类型
|
|
20
|
-
| ----------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
-
| disabled | 是否禁止使用 | boolean
|
|
22
|
-
| placeholder | 输入框占位 | string
|
|
23
|
-
| searchPlaceholder | 搜索输入框占位 | string
|
|
24
|
-
| emptyContent | 设置选项为空时展示的内容 | ReactNode
|
|
25
|
-
| loadingContent | 设置加载中时展示的内容 | ReactNode
|
|
26
|
-
| overlayClassName | 下拉根元素的类名称 | string
|
|
27
|
-
| searchable | 是否可搜索 | boolean
|
|
28
|
-
| clearable | 是否可清空 | boolean
|
|
29
|
-
|
|
|
30
|
-
| fieldNames | 设置 data 中 label, value, children 对应的 key | object
|
|
31
|
-
| data | 设置选择项数据源 | CascaderDataItem[]
|
|
32
|
-
| value | 设置当前选中值 | ReactText[]
|
|
33
|
-
| defaultValue | 设置当前选中值默认值 | ReactText[]
|
|
34
|
-
| displayRender | 自定义选择后展示的内容 | (value: string[]) => string
|
|
35
|
-
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string
|
|
36
|
-
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean
|
|
37
|
-
| changeOnSelect | 是否启用选择即改变功能 | boolean
|
|
38
|
-
| flatted | 将选项拍平展示，不支持 `onLoadChildren` 异步加载交互 | true \| false
|
|
39
|
-
| upMatch | 开启全量搜索，默认只对开启对可选的选项进行搜索，不向上查找路径 | true \| false
|
|
40
|
-
|
|
|
41
|
-
| filterOption | 自定义搜索过滤器，仅在 searchable 为 true 时有效。第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项 | (keyword: string, item: CascaderItemEventData) => boolean
|
|
42
|
-
|
|
|
43
|
-
| appearance | 设置展现形式 | 'outline' \| 'unset' \| 'filled' | 'outline' |
|
|
19
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
20
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------ | ------------------------------------------------------- |
|
|
21
|
+
| disabled | 是否禁止使用 | boolean | true \| false | false |
|
|
22
|
+
| placeholder | 输入框占位 | string | - | '请选择' |
|
|
23
|
+
| searchPlaceholder | 搜索输入框占位 | string | - | '搜索' |
|
|
24
|
+
| emptyContent | 设置选项为空时展示的内容 | ReactNode | - | '无匹配数据' |
|
|
25
|
+
| loadingContent | 设置加载中时展示的内容 | ReactNode | - | '数据加载中...' |
|
|
26
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | - |
|
|
27
|
+
| searchable | 是否可搜索 | boolean | true \| false | false |
|
|
28
|
+
| clearable | 是否可清空 | boolean | true \| false | true |
|
|
29
|
+
| overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps | - | - |
|
|
30
|
+
| fieldNames | 设置 data 中 label, value, children 对应的 key | object | - | { label: 'label', value: 'value', children: 'children'} |
|
|
31
|
+
| data | 设置选择项数据源 | CascaderDataItem[] | - | - |
|
|
32
|
+
| value | 设置当前选中值 | ReactText[] | - | [] |
|
|
33
|
+
| defaultValue | 设置当前选中值默认值 | ReactText[] | - | [] |
|
|
34
|
+
| displayRender | 自定义选择后展示的内容 | (value: string[]) => string | - | - |
|
|
35
|
+
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' \| 'hover' | 'click' |
|
|
36
|
+
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | - | - |
|
|
37
|
+
| changeOnSelect | 是否启用选择即改变功能 | boolean | true \| false | false |
|
|
38
|
+
| flatted | 将选项拍平展示，不支持 `onLoadChildren` 异步加载交互 | true \| false | false |
|
|
39
|
+
| upMatch | 开启全量搜索，默认只对开启对可选的选项进行搜索，不向上查找路径 | true \| false | false |
|
|
40
|
+
| render | 自定义渲染节点的 title 内容径 | (item: CascaderItemEventData) => React.ReactNode | - |
|
|
41
|
+
| filterOption | 自定义搜索过滤器，仅在 searchable 为 true 时有效。第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项 | (keyword: string, item: CascaderItemEventData) => boolean | - |
|
|
42
|
+
| appearance | 设置展现形式 | 'line' \| 'unset' \| 'filled' | 'line' |
|
|
44
43
|
|
|
45
44
|
## Events
|
|
46
45
|
|
|
@@ -75,7 +74,6 @@
|
|
|
75
74
|
| children | 选项的孩子节点列表数据 | object[] | - | - |
|
|
76
75
|
| selected | 节点是否被选中 | boolean | true \| false | - |
|
|
77
76
|
| loading | 节点是否在异步加载子项数据中 | boolean | true \| false | - |
|
|
78
|
-
| focused | 节点是否被聚焦 | boolean | true \| false | - |
|
|
79
77
|
|
|
80
78
|
### DataSource
|
|
81
79
|
|
|
@@ -94,23 +92,21 @@
|
|
|
94
92
|
|
|
95
93
|
## CHANGELOG
|
|
96
94
|
|
|
97
|
-
| 参数 | 变更类型 | 变更内容
|
|
98
|
-
| ------------------ | ------------------------------- |
|
|
99
|
-
| propName | feature \| deprecated \| update | 变更了什么
|
|
100
|
-
| ---- | ---- | ----
|
|
101
|
-
| value | update | 类型 string[] => string[] \| number[]
|
|
102
|
-
| defaultValue | update | 类型 string[] => string[] \| number[]
|
|
103
|
-
| id | update | 类型 string => string \| number
|
|
104
|
-
| bordered | deprecated | 字段 `bordered` => `appearance`
|
|
105
|
-
| content | deprecated | 字段 `content` => `title`
|
|
106
|
-
| searchPlaceholder | feature | -
|
|
107
|
-
| loadingContent | feature | -
|
|
108
|
-
|
|
|
109
|
-
| onLoadChildren | feature | -
|
|
110
|
-
| onActiveItemChange | deprecated | -
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
| dataSource | feature | - | 统一支持异步数据加载 |
|
|
116
|
-
| appearance | feature | - | 统一支持：线性\面性\无边框 |
|
|
95
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
96
|
+
| ------------------ | ------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
97
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
98
|
+
| ---- | ---- | ---- | ---- |
|
|
99
|
+
| value | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
100
|
+
| defaultValue | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
101
|
+
| id | update | 类型 string => string \| number | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
102
|
+
| bordered | deprecated | 字段 `bordered` => `appearance` | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值 |
|
|
103
|
+
| content | deprecated | 字段 `content` => `title` | 对于 DataItem 模型数据，统一使用 title |
|
|
104
|
+
| searchPlaceholder | feature | - | Picker 类型组件统一支持 |
|
|
105
|
+
| loadingContent | feature | - | Picker 类型组件统一支持，适配新 UI |
|
|
106
|
+
| overlay | feature | - | Picker 类型组件统一支持，聚合管理。比如： placement，之前有的加了有的没加 |
|
|
107
|
+
| onLoadChildren | feature | - | 树形数据懒加载统一方案，并强化返回值 Promise 功能，保持一致，替代 onActiveItemChange |
|
|
108
|
+
| onActiveItemChange | deprecated | - | 使用 onLoadChildren 替代 |
|
|
109
|
+
| render | feature | (item: CascaderItemEventData) => React.ReactNode | 统一支持自定义渲染每一项 |
|
|
110
|
+
| filterOption | feature | (keyword: string, item: CascaderItemEventData) => boolean | 统一支持自定义过滤 |
|
|
111
|
+
| appearance | feature | 'line' \| 'unset' \| 'filled' | 统一支持：线性\面性\无边框 |
|
|
112
|
+
| displayRender | feature | (value: string[]) => string -> (item: CascaderItemEventData, items: CascaderItemEventData[]) => React.ReactNode | 支持自定义节点渲染 |
|
package/lib/cjs/Cascader.js
CHANGED
|
@@ -27,7 +27,7 @@ var useToggle = require('@hi-ui/use-toggle');
|
|
|
27
27
|
|
|
28
28
|
var useCascader = require('./use-cascader.js');
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var input = require('@hi-ui/input');
|
|
31
31
|
|
|
32
32
|
var icons = require('@hi-ui/icons');
|
|
33
33
|
|
|
@@ -37,8 +37,6 @@ var index$1 = require('./utils/index.js');
|
|
|
37
37
|
|
|
38
38
|
var context = require('./context.js');
|
|
39
39
|
|
|
40
|
-
var useLatest = require('@hi-ui/use-latest');
|
|
41
|
-
|
|
42
40
|
var treeUtils = require('@hi-ui/tree-utils');
|
|
43
41
|
|
|
44
42
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
@@ -59,11 +57,7 @@ function _interopDefaultLegacy(e) {
|
|
|
59
57
|
|
|
60
58
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
61
59
|
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
var _role = 'cascader';
|
|
65
|
-
|
|
66
|
-
var _prefix = classname.getPrefixCls(_role);
|
|
60
|
+
var _prefix = classname.getPrefixCls('cascader');
|
|
67
61
|
|
|
68
62
|
var NOOP_ARRAY = [];
|
|
69
63
|
/**
|
|
@@ -76,42 +70,50 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
76
70
|
prefixCls = _props$prefixCls === void 0 ? _prefix : _props$prefixCls,
|
|
77
71
|
className = props.className,
|
|
78
72
|
placeholder = props.placeholder,
|
|
73
|
+
_props$disabled = props.disabled,
|
|
74
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
79
75
|
_props$clearable = props.clearable,
|
|
80
76
|
clearable = _props$clearable === void 0 ? true : _props$clearable,
|
|
81
77
|
_props$flatted = props.flatted,
|
|
82
78
|
flatted = _props$flatted === void 0 ? false : _props$flatted,
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
fieldNames = props.fieldNames,
|
|
80
|
+
_props$expandTrigger = props.expandTrigger,
|
|
81
|
+
expandTrigger = _props$expandTrigger === void 0 ? 'click' : _props$expandTrigger,
|
|
85
82
|
displayRenderProp = props.displayRender,
|
|
86
83
|
onSelectProp = props.onSelect,
|
|
87
84
|
onLoadChildren = props.onLoadChildren,
|
|
88
85
|
appearance = props.appearance,
|
|
89
86
|
invalid = props.invalid,
|
|
90
|
-
dataSource = props.dataSource,
|
|
91
87
|
filterOption = props.filterOption,
|
|
92
88
|
searchableProp = props.searchable,
|
|
93
|
-
titleRender = props.
|
|
89
|
+
titleRender = props.render,
|
|
94
90
|
overlayClassName = props.overlayClassName,
|
|
95
91
|
_props$data = props.data,
|
|
96
92
|
data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
|
|
97
|
-
|
|
93
|
+
onOpen = props.onOpen,
|
|
94
|
+
onClose = props.onClose,
|
|
95
|
+
rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "flatted", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "render", "overlayClassName", "data", "onOpen", "onClose"]);
|
|
98
96
|
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
98
|
+
disabled: disabled,
|
|
99
|
+
onOpen: onOpen,
|
|
100
|
+
onClose: onClose
|
|
101
|
+
}),
|
|
102
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
103
|
+
menuVisibleAction = _useUncontrolledToggl[1]; // 搜索时临时选中缓存数据
|
|
102
104
|
|
|
103
105
|
|
|
104
106
|
var _useState = React.useState(null),
|
|
105
107
|
selectedItem = _useState[0],
|
|
106
108
|
setSelectedItem = _useState[1];
|
|
107
109
|
|
|
108
|
-
var
|
|
109
|
-
|
|
110
|
-
onSelectLatest(value, item, itemPaths);
|
|
110
|
+
var onSelect = function onSelect(value, item, itemPaths) {
|
|
111
|
+
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
|
111
112
|
setSelectedItem(item); // 关闭弹窗
|
|
112
113
|
|
|
113
114
|
menuVisibleAction.off();
|
|
114
|
-
}
|
|
115
|
+
}; // 拦截 titleRender，自定义高亮展示
|
|
116
|
+
|
|
115
117
|
|
|
116
118
|
var proxyTitleRender = function proxyTitleRender(node) {
|
|
117
119
|
// 本地搜索执行默认高亮规则
|
|
@@ -121,7 +123,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
121
123
|
return renderHighlightTitle(searchValue, node, titleRender);
|
|
122
124
|
}
|
|
123
125
|
|
|
124
|
-
return true;
|
|
126
|
+
return typeAssertion.isFunction(titleRender) ? titleRender(node) : true;
|
|
125
127
|
};
|
|
126
128
|
|
|
127
129
|
var _useCache = index.useCache(data),
|
|
@@ -129,32 +131,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
129
131
|
setCascaderData = _useCache[1];
|
|
130
132
|
|
|
131
133
|
var flattedData = React.useMemo(function () {
|
|
132
|
-
return index$1.flattenTreeData(cascaderData);
|
|
133
|
-
}, [cascaderData]); // ************************** 异步搜索 ************************* //
|
|
134
|
+
return index$1.flattenTreeData(cascaderData, fieldNames);
|
|
135
|
+
}, [cascaderData, fieldNames]); // ************************** 异步搜索 ************************* //
|
|
134
136
|
// TODO: 支持对 Item 传入 状态
|
|
135
137
|
|
|
136
|
-
var _a = useSearchMode.useAsyncSearch({
|
|
137
|
-
dataSource: dataSource
|
|
138
|
-
}),
|
|
139
|
-
loading = _a.loading,
|
|
140
|
-
hasError = _a.hasError,
|
|
141
|
-
dataSourceStrategy = tslib.__rest(_a, ["loading", "hasError"]);
|
|
142
|
-
|
|
143
138
|
var customSearchStrategy = useSearchMode.useTreeCustomSearch({
|
|
144
139
|
data: flattedData,
|
|
145
140
|
filterOption: filterOption
|
|
146
141
|
});
|
|
147
|
-
var filterSearchStrategy = useSearchMode.useNormalFilterSearch({
|
|
148
|
-
flattedData: flattedData,
|
|
149
|
-
searchMode: searchableProp && !upMatch ? 'filter' : undefined,
|
|
150
|
-
exclude: function exclude(option) {
|
|
151
|
-
return index$1.checkCanLoadChildren(option, onLoadChildren);
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
142
|
var upMatchSearchStrategy = useSearchMode.useTreeUpMatchSearch({
|
|
155
143
|
data: cascaderData,
|
|
156
144
|
flattedData: flattedData,
|
|
157
|
-
enabled:
|
|
145
|
+
enabled: searchableProp,
|
|
158
146
|
exclude: function exclude(option) {
|
|
159
147
|
return index$1.checkCanLoadChildren(option, onLoadChildren);
|
|
160
148
|
}
|
|
@@ -162,7 +150,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
162
150
|
|
|
163
151
|
var _useSearchMode = useSearchMode.useSearchMode({
|
|
164
152
|
searchable: searchableProp,
|
|
165
|
-
strategies: [
|
|
153
|
+
strategies: [customSearchStrategy, upMatchSearchStrategy]
|
|
166
154
|
}),
|
|
167
155
|
stateInSearch = _useSearchMode.state,
|
|
168
156
|
searchable = _useSearchMode.searchable,
|
|
@@ -170,17 +158,21 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
170
158
|
onSearch = _useSearchMode.onSearch,
|
|
171
159
|
searchValue = _useSearchMode.keyword;
|
|
172
160
|
|
|
173
|
-
var displayRender =
|
|
174
|
-
var itemPaths =
|
|
161
|
+
var displayRender = function displayRender(item) {
|
|
162
|
+
var itemPaths = treeUtils.getTopDownAncestors(item);
|
|
175
163
|
|
|
176
164
|
if (displayRenderProp) {
|
|
177
|
-
|
|
165
|
+
var eventOption = index$1.getItemEventData(item, getItemRequiredProps(item));
|
|
166
|
+
return displayRenderProp(eventOption, itemPaths.map(function (item) {
|
|
167
|
+
return index$1.getItemEventData(item, getItemRequiredProps(item));
|
|
168
|
+
}));
|
|
178
169
|
}
|
|
179
170
|
|
|
180
|
-
var mergedTitle = itemPaths.reduce(function (acc, item, index) {
|
|
171
|
+
var mergedTitle = itemPaths.reduce(function (acc, item, index, _ref) {
|
|
172
|
+
var length = _ref.length;
|
|
181
173
|
acc.push(item.title);
|
|
182
174
|
|
|
183
|
-
if (
|
|
175
|
+
if (length - 1 !== index) {
|
|
184
176
|
acc.push('/');
|
|
185
177
|
}
|
|
186
178
|
|
|
@@ -188,36 +180,40 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
188
180
|
}, []);
|
|
189
181
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
190
182
|
className: "title__text"
|
|
191
|
-
}, mergedTitle);
|
|
192
|
-
}, [displayRenderProp]);
|
|
193
|
-
var shouldUseSearch = !!searchValue && !hasError;
|
|
194
|
-
var selectProps = {
|
|
195
|
-
data: shouldUseSearch ? stateInSearch.data : flattedData,
|
|
196
|
-
titleRender: proxyTitleRender
|
|
183
|
+
}, mergedTitle);
|
|
197
184
|
};
|
|
198
185
|
|
|
199
|
-
var
|
|
186
|
+
var _a = useCascader.useCascader(Object.assign(Object.assign({}, rest), {
|
|
187
|
+
disabled: disabled,
|
|
188
|
+
fieldNames: fieldNames,
|
|
189
|
+
// 搜索的结果列表也采用 flatted 模式进行展示
|
|
190
|
+
flatted: flatted || !!searchValue,
|
|
200
191
|
onSelect: onSelect,
|
|
201
|
-
|
|
192
|
+
onLoadChildren: onLoadChildren,
|
|
193
|
+
data: data,
|
|
202
194
|
// @ts-ignore
|
|
203
195
|
cascaderData: cascaderData,
|
|
204
196
|
setCascaderData: setCascaderData,
|
|
205
|
-
flattedData: flattedData
|
|
206
|
-
matchedItems: selectProps.data,
|
|
207
|
-
inSearch: !!searchValue,
|
|
208
|
-
flatted: flatted || !!searchValue,
|
|
209
|
-
onLoadChildren: onLoadChildren,
|
|
210
|
-
data: data
|
|
197
|
+
flattedData: flattedData
|
|
211
198
|
})),
|
|
212
|
-
rootProps =
|
|
213
|
-
context$1 = tslib.__rest(
|
|
199
|
+
rootProps = _a.rootProps,
|
|
200
|
+
context$1 = tslib.__rest(_a, ["rootProps"]);
|
|
214
201
|
|
|
215
|
-
var
|
|
216
|
-
value = context$1.value,
|
|
202
|
+
var value = context$1.value,
|
|
217
203
|
tryChangeValue = context$1.tryChangeValue,
|
|
218
|
-
reset = context$1.reset
|
|
204
|
+
reset = context$1.reset,
|
|
205
|
+
menuList = context$1.menuList,
|
|
206
|
+
getItemRequiredProps = context$1.getItemRequiredProps;
|
|
207
|
+
var shouldUseSearch = !!searchValue;
|
|
208
|
+
var showData = React.useMemo(function () {
|
|
209
|
+
if (shouldUseSearch) {
|
|
210
|
+
return typeAssertion.isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
return menuList;
|
|
214
|
+
}, [shouldUseSearch, stateInSearch.data, menuList]);
|
|
219
215
|
React.useEffect(function () {
|
|
220
|
-
//
|
|
216
|
+
// 关闭展示后，重置展开要高亮的选项
|
|
221
217
|
if (!menuVisible) {
|
|
222
218
|
reset();
|
|
223
219
|
}
|
|
@@ -233,96 +229,59 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
233
229
|
}, [selectedItem, flattedData]);
|
|
234
230
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
235
231
|
return /*#__PURE__*/React__default['default'].createElement(context.CascaderProvider, {
|
|
236
|
-
value: context$1
|
|
232
|
+
value: Object.assign(Object.assign({}, context$1), {
|
|
233
|
+
expandTrigger: expandTrigger,
|
|
234
|
+
titleRender: proxyTitleRender,
|
|
235
|
+
menuList: showData
|
|
236
|
+
})
|
|
237
237
|
}, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
|
|
238
238
|
ref: ref,
|
|
239
239
|
className: cls,
|
|
240
240
|
overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName)
|
|
241
241
|
}, rootProps, {
|
|
242
242
|
// 这种展现形式宽度是不固定的，关掉宽度匹配策略
|
|
243
|
-
|
|
243
|
+
overlay: Object.assign({
|
|
244
244
|
matchWidth: false
|
|
245
|
-
}, rest.
|
|
245
|
+
}, rest.overlay),
|
|
246
246
|
visible: menuVisible,
|
|
247
247
|
disabled: disabled,
|
|
248
248
|
onOpen: menuVisibleAction.on,
|
|
249
249
|
onClose: menuVisibleAction.off,
|
|
250
|
-
// value={value}
|
|
251
|
-
// onChange={tryChangeValue}
|
|
252
|
-
// data={mergedData}
|
|
253
250
|
searchable: searchable,
|
|
254
251
|
onSearch: onSearch,
|
|
255
|
-
|
|
256
|
-
trigger: /*#__PURE__*/React__default['default'].createElement(Input.MockInput // ref={targetElementRef}
|
|
257
|
-
// onClick={openMenu}
|
|
258
|
-
// disabled={disabled}
|
|
259
|
-
, {
|
|
260
|
-
// ref={targetElementRef}
|
|
261
|
-
// onClick={openMenu}
|
|
262
|
-
// disabled={disabled}
|
|
252
|
+
trigger: /*#__PURE__*/React__default['default'].createElement(input.MockInput, {
|
|
263
253
|
clearable: clearable,
|
|
264
254
|
placeholder: placeholder,
|
|
265
|
-
// @ts-ignore
|
|
266
255
|
displayRender: displayRender,
|
|
267
256
|
suffix: menuVisible ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
|
|
268
257
|
focused: menuVisible,
|
|
269
|
-
value: value,
|
|
270
|
-
onChange:
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}),
|
|
275
|
-
// @ts-ignore
|
|
258
|
+
value: value[value.length - 1],
|
|
259
|
+
onChange: function onChange() {
|
|
260
|
+
tryChangeValue([]);
|
|
261
|
+
},
|
|
262
|
+
data: mergedData,
|
|
276
263
|
invalid: invalid,
|
|
277
264
|
appearance: appearance
|
|
278
265
|
})
|
|
279
|
-
}), typeAssertion.isArrayNonEmpty(
|
|
266
|
+
}), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/React__default['default'].createElement(CascaderMenuList, null) : null));
|
|
280
267
|
});
|
|
281
268
|
|
|
282
269
|
if (env.__DEV__) {
|
|
283
270
|
Cascader.displayName = 'Cascader';
|
|
284
271
|
}
|
|
285
272
|
|
|
286
|
-
var searchPrefix = classname.getPrefixCls('cascader-search');
|
|
287
|
-
var CascaderSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
288
|
-
var _a$prefixCls = _a.prefixCls,
|
|
289
|
-
prefixCls = _a$prefixCls === void 0 ? searchPrefix : _a$prefixCls,
|
|
290
|
-
className = _a.className,
|
|
291
|
-
rest = tslib.__rest(_a, ["prefixCls", "className"]);
|
|
292
|
-
|
|
293
|
-
var _useCascaderContext = context.useCascaderContext(),
|
|
294
|
-
isEmpty = _useCascaderContext.isEmpty,
|
|
295
|
-
emptyContent = _useCascaderContext.emptyContent,
|
|
296
|
-
getSearchInputProps = _useCascaderContext.getSearchInputProps;
|
|
297
|
-
|
|
298
|
-
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
299
|
-
ref: ref,
|
|
300
|
-
className: classname.cx(prefixCls, className)
|
|
301
|
-
}, rest), /*#__PURE__*/React__default['default'].createElement(Input__default['default'], Object.assign({
|
|
302
|
-
appearance: "underline",
|
|
303
|
-
prefix: /*#__PURE__*/React__default['default'].createElement(icons.SearchOutlined, null)
|
|
304
|
-
}, getSearchInputProps())), isEmpty ? /*#__PURE__*/React__default['default'].createElement("span", {
|
|
305
|
-
className: prefixCls + "__empty"
|
|
306
|
-
}, emptyContent) : null);
|
|
307
|
-
});
|
|
308
|
-
|
|
309
|
-
if (env.__DEV__) {
|
|
310
|
-
CascaderSearch.displayName = 'CascaderSearch';
|
|
311
|
-
}
|
|
312
|
-
|
|
313
273
|
var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
|
|
314
274
|
var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
315
|
-
var _a$
|
|
316
|
-
prefixCls = _a$
|
|
275
|
+
var _a$prefixCls = _a.prefixCls,
|
|
276
|
+
prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
|
|
317
277
|
className = _a.className,
|
|
318
278
|
rest = tslib.__rest(_a, ["prefixCls", "className"]);
|
|
319
279
|
|
|
320
|
-
var
|
|
321
|
-
flatted =
|
|
322
|
-
menuList =
|
|
323
|
-
changeOnSelect = _useCascaderContext2.changeOnSelect;
|
|
280
|
+
var _useCascaderContext = context.useCascaderContext(),
|
|
281
|
+
flatted = _useCascaderContext.flatted,
|
|
282
|
+
menuList = _useCascaderContext.menuList;
|
|
324
283
|
|
|
325
|
-
var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted"
|
|
284
|
+
var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted");
|
|
326
285
|
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
327
286
|
ref: ref,
|
|
328
287
|
className: cls
|
|
@@ -341,31 +300,30 @@ if (env.__DEV__) {
|
|
|
341
300
|
|
|
342
301
|
var menuPrefix = classname.getPrefixCls('cascader-menu');
|
|
343
302
|
|
|
344
|
-
var CascaderMenu = function CascaderMenu(
|
|
345
|
-
var
|
|
346
|
-
prefixCls =
|
|
347
|
-
|
|
348
|
-
role =
|
|
349
|
-
className =
|
|
350
|
-
menu =
|
|
351
|
-
|
|
352
|
-
var
|
|
353
|
-
flatted =
|
|
354
|
-
disabledContext =
|
|
355
|
-
expandTrigger =
|
|
356
|
-
onItemClick =
|
|
357
|
-
onItemHover =
|
|
358
|
-
titleRender =
|
|
359
|
-
onLoadChildren =
|
|
360
|
-
|
|
361
|
-
keyword = _useCascaderContext3.keyword;
|
|
303
|
+
var CascaderMenu = function CascaderMenu(_ref2) {
|
|
304
|
+
var _ref2$prefixCls = _ref2.prefixCls,
|
|
305
|
+
prefixCls = _ref2$prefixCls === void 0 ? menuPrefix : _ref2$prefixCls,
|
|
306
|
+
_ref2$role = _ref2.role,
|
|
307
|
+
role = _ref2$role === void 0 ? 'menu' : _ref2$role,
|
|
308
|
+
className = _ref2.className,
|
|
309
|
+
menu = _ref2.data;
|
|
310
|
+
|
|
311
|
+
var _useCascaderContext2 = context.useCascaderContext(),
|
|
312
|
+
flatted = _useCascaderContext2.flatted,
|
|
313
|
+
disabledContext = _useCascaderContext2.disabled,
|
|
314
|
+
expandTrigger = _useCascaderContext2.expandTrigger,
|
|
315
|
+
onItemClick = _useCascaderContext2.onItemClick,
|
|
316
|
+
onItemHover = _useCascaderContext2.onItemHover,
|
|
317
|
+
titleRender = _useCascaderContext2.titleRender,
|
|
318
|
+
onLoadChildren = _useCascaderContext2.onLoadChildren,
|
|
319
|
+
getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
|
|
362
320
|
|
|
363
321
|
var cls = classname.cx(prefixCls, className);
|
|
364
322
|
return /*#__PURE__*/React__default['default'].createElement("ul", {
|
|
365
323
|
className: cls,
|
|
366
324
|
role: role
|
|
367
325
|
}, menu.map(function (option) {
|
|
368
|
-
var eventOption = index$1.
|
|
326
|
+
var eventOption = index$1.getItemEventData(option, getItemRequiredProps(option));
|
|
369
327
|
var selected = eventOption.selected,
|
|
370
328
|
loading = eventOption.loading;
|
|
371
329
|
var disabled = disabledContext || option.disabled;
|
|
@@ -387,7 +345,7 @@ var CascaderMenu = function CascaderMenu(_ref) {
|
|
|
387
345
|
onItemHover(eventOption);
|
|
388
346
|
}
|
|
389
347
|
}
|
|
390
|
-
},
|
|
348
|
+
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
|
391
349
|
}));
|
|
392
350
|
};
|
|
393
351
|
/**
|
|
@@ -417,11 +375,11 @@ var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildre
|
|
|
417
375
|
|
|
418
376
|
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
|
419
377
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
420
|
-
var title = titleRender ? titleRender(option
|
|
378
|
+
var title = titleRender ? titleRender(option) : true;
|
|
421
379
|
if (title !== true) return title;
|
|
422
380
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
423
381
|
className: "title__text title__text--cols"
|
|
424
|
-
},
|
|
382
|
+
}, treeUtils.getTopDownAncestors(option).map(function (item) {
|
|
425
383
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
426
384
|
key: item.id,
|
|
427
385
|
className: "title__text--col"
|
|
@@ -431,7 +389,7 @@ var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
|
|
431
389
|
|
|
432
390
|
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
|
433
391
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
434
|
-
var title = titleRender ? titleRender(option
|
|
392
|
+
var title = titleRender ? titleRender(option) : true;
|
|
435
393
|
if (title !== true) return title;
|
|
436
394
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
437
395
|
className: "title__text"
|
|
@@ -440,7 +398,7 @@ var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
|
|
440
398
|
|
|
441
399
|
var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
|
|
442
400
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
443
|
-
var title = titleRender ? titleRender(option,
|
|
401
|
+
var title = titleRender ? titleRender(option, keyword) : true;
|
|
444
402
|
if (title !== true) return title;
|
|
445
403
|
|
|
446
404
|
if (typeof option.title !== 'string') {
|
|
@@ -477,5 +435,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
|
|
|
477
435
|
exports.Cascader = Cascader;
|
|
478
436
|
exports.CascaderMenu = CascaderMenu;
|
|
479
437
|
exports.CascaderMenuList = CascaderMenuList;
|
|
480
|
-
exports.CascaderSearch = CascaderSearch;
|
|
481
438
|
//# sourceMappingURL=Cascader.js.map
|