@hi-ui/cascader 4.0.0-alpha.27 → 4.0.0-alpha.31
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 +108 -149
- 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 +114 -150
- 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 +15 -58
- 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,52 +70,62 @@ 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
|
-
_props$
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
77
|
+
_props$type = props.type,
|
|
78
|
+
type = _props$type === void 0 ? 'tree' : _props$type,
|
|
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", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "render", "overlayClassName", "data", "onOpen", "onClose"]);
|
|
98
96
|
|
|
99
|
-
var
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
var flatted = type === 'flatted';
|
|
98
|
+
|
|
99
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
100
|
+
disabled: disabled,
|
|
101
|
+
onOpen: onOpen,
|
|
102
|
+
onClose: onClose
|
|
103
|
+
}),
|
|
104
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
105
|
+
menuVisibleAction = _useUncontrolledToggl[1]; // 搜索时临时选中缓存数据
|
|
102
106
|
|
|
103
107
|
|
|
104
108
|
var _useState = React.useState(null),
|
|
105
109
|
selectedItem = _useState[0],
|
|
106
110
|
setSelectedItem = _useState[1];
|
|
107
111
|
|
|
108
|
-
var
|
|
109
|
-
|
|
110
|
-
onSelectLatest(value, item, itemPaths);
|
|
112
|
+
var onSelect = function onSelect(value, item, itemPaths) {
|
|
113
|
+
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
|
|
111
114
|
setSelectedItem(item); // 关闭弹窗
|
|
112
115
|
|
|
113
116
|
menuVisibleAction.off();
|
|
114
|
-
}
|
|
117
|
+
}; // 拦截 titleRender，自定义高亮展示
|
|
118
|
+
|
|
115
119
|
|
|
116
120
|
var proxyTitleRender = function proxyTitleRender(node) {
|
|
117
121
|
// 本地搜索执行默认高亮规则
|
|
118
|
-
var highlight = !!searchValue &&
|
|
122
|
+
var highlight = !!searchValue && searchMode === 'upMatch';
|
|
119
123
|
|
|
120
124
|
if (highlight) {
|
|
121
125
|
return renderHighlightTitle(searchValue, node, titleRender);
|
|
122
126
|
}
|
|
123
127
|
|
|
124
|
-
return true;
|
|
128
|
+
return typeAssertion.isFunction(titleRender) ? titleRender(node) : true;
|
|
125
129
|
};
|
|
126
130
|
|
|
127
131
|
var _useCache = index.useCache(data),
|
|
@@ -129,32 +133,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
129
133
|
setCascaderData = _useCache[1];
|
|
130
134
|
|
|
131
135
|
var flattedData = React.useMemo(function () {
|
|
132
|
-
return index$1.flattenTreeData(cascaderData);
|
|
133
|
-
}, [cascaderData]); // ************************** 异步搜索 ************************* //
|
|
136
|
+
return index$1.flattenTreeData(cascaderData, fieldNames);
|
|
137
|
+
}, [cascaderData, fieldNames]); // ************************** 异步搜索 ************************* //
|
|
134
138
|
// TODO: 支持对 Item 传入 状态
|
|
135
139
|
|
|
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
140
|
var customSearchStrategy = useSearchMode.useTreeCustomSearch({
|
|
144
141
|
data: flattedData,
|
|
145
142
|
filterOption: filterOption
|
|
146
143
|
});
|
|
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
144
|
var upMatchSearchStrategy = useSearchMode.useTreeUpMatchSearch({
|
|
155
145
|
data: cascaderData,
|
|
156
146
|
flattedData: flattedData,
|
|
157
|
-
enabled:
|
|
147
|
+
enabled: searchableProp,
|
|
158
148
|
exclude: function exclude(option) {
|
|
159
149
|
return index$1.checkCanLoadChildren(option, onLoadChildren);
|
|
160
150
|
}
|
|
@@ -162,7 +152,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
162
152
|
|
|
163
153
|
var _useSearchMode = useSearchMode.useSearchMode({
|
|
164
154
|
searchable: searchableProp,
|
|
165
|
-
strategies: [
|
|
155
|
+
strategies: [customSearchStrategy, upMatchSearchStrategy]
|
|
166
156
|
}),
|
|
167
157
|
stateInSearch = _useSearchMode.state,
|
|
168
158
|
searchable = _useSearchMode.searchable,
|
|
@@ -170,17 +160,21 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
170
160
|
onSearch = _useSearchMode.onSearch,
|
|
171
161
|
searchValue = _useSearchMode.keyword;
|
|
172
162
|
|
|
173
|
-
var displayRender =
|
|
174
|
-
var itemPaths =
|
|
163
|
+
var displayRender = function displayRender(item) {
|
|
164
|
+
var itemPaths = treeUtils.getTopDownAncestors(item);
|
|
175
165
|
|
|
176
166
|
if (displayRenderProp) {
|
|
177
|
-
|
|
167
|
+
var eventOption = index$1.getItemEventData(item, getItemRequiredProps(item));
|
|
168
|
+
return displayRenderProp(eventOption, itemPaths.map(function (item) {
|
|
169
|
+
return index$1.getItemEventData(item, getItemRequiredProps(item));
|
|
170
|
+
}));
|
|
178
171
|
}
|
|
179
172
|
|
|
180
|
-
var mergedTitle = itemPaths.reduce(function (acc, item, index) {
|
|
173
|
+
var mergedTitle = itemPaths.reduce(function (acc, item, index, _ref) {
|
|
174
|
+
var length = _ref.length;
|
|
181
175
|
acc.push(item.title);
|
|
182
176
|
|
|
183
|
-
if (
|
|
177
|
+
if (length - 1 !== index) {
|
|
184
178
|
acc.push('/');
|
|
185
179
|
}
|
|
186
180
|
|
|
@@ -188,36 +182,40 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
188
182
|
}, []);
|
|
189
183
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
190
184
|
className: "title__text"
|
|
191
|
-
}, mergedTitle);
|
|
192
|
-
}, [displayRenderProp]);
|
|
193
|
-
var shouldUseSearch = !!searchValue && !hasError;
|
|
194
|
-
var selectProps = {
|
|
195
|
-
data: shouldUseSearch ? stateInSearch.data : flattedData,
|
|
196
|
-
titleRender: proxyTitleRender
|
|
185
|
+
}, mergedTitle);
|
|
197
186
|
};
|
|
198
187
|
|
|
199
|
-
var
|
|
188
|
+
var _a = useCascader.useCascader(Object.assign(Object.assign({}, rest), {
|
|
189
|
+
disabled: disabled,
|
|
190
|
+
fieldNames: fieldNames,
|
|
191
|
+
// 搜索的结果列表也采用 flatted 模式进行展示
|
|
192
|
+
flatted: flatted || !!searchValue,
|
|
200
193
|
onSelect: onSelect,
|
|
201
|
-
|
|
194
|
+
onLoadChildren: onLoadChildren,
|
|
195
|
+
data: data,
|
|
202
196
|
// @ts-ignore
|
|
203
197
|
cascaderData: cascaderData,
|
|
204
198
|
setCascaderData: setCascaderData,
|
|
205
|
-
flattedData: flattedData
|
|
206
|
-
matchedItems: selectProps.data,
|
|
207
|
-
inSearch: !!searchValue,
|
|
208
|
-
flatted: flatted || !!searchValue,
|
|
209
|
-
onLoadChildren: onLoadChildren,
|
|
210
|
-
data: data
|
|
199
|
+
flattedData: flattedData
|
|
211
200
|
})),
|
|
212
|
-
rootProps =
|
|
213
|
-
context$1 = tslib.__rest(
|
|
201
|
+
rootProps = _a.rootProps,
|
|
202
|
+
context$1 = tslib.__rest(_a, ["rootProps"]);
|
|
214
203
|
|
|
215
|
-
var
|
|
216
|
-
value = context$1.value,
|
|
204
|
+
var value = context$1.value,
|
|
217
205
|
tryChangeValue = context$1.tryChangeValue,
|
|
218
|
-
reset = context$1.reset
|
|
206
|
+
reset = context$1.reset,
|
|
207
|
+
menuList = context$1.menuList,
|
|
208
|
+
getItemRequiredProps = context$1.getItemRequiredProps;
|
|
209
|
+
var shouldUseSearch = !!searchValue;
|
|
210
|
+
var showData = React.useMemo(function () {
|
|
211
|
+
if (shouldUseSearch) {
|
|
212
|
+
return typeAssertion.isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
return menuList;
|
|
216
|
+
}, [shouldUseSearch, stateInSearch.data, menuList]);
|
|
219
217
|
React.useEffect(function () {
|
|
220
|
-
//
|
|
218
|
+
// 关闭展示后，重置展开要高亮的选项
|
|
221
219
|
if (!menuVisible) {
|
|
222
220
|
reset();
|
|
223
221
|
}
|
|
@@ -233,96 +231,59 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
233
231
|
}, [selectedItem, flattedData]);
|
|
234
232
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
235
233
|
return /*#__PURE__*/React__default['default'].createElement(context.CascaderProvider, {
|
|
236
|
-
value: context$1
|
|
234
|
+
value: Object.assign(Object.assign({}, context$1), {
|
|
235
|
+
expandTrigger: expandTrigger,
|
|
236
|
+
titleRender: proxyTitleRender,
|
|
237
|
+
menuList: showData
|
|
238
|
+
})
|
|
237
239
|
}, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
|
|
238
240
|
ref: ref,
|
|
239
241
|
className: cls,
|
|
240
242
|
overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName)
|
|
241
243
|
}, rootProps, {
|
|
242
244
|
// 这种展现形式宽度是不固定的，关掉宽度匹配策略
|
|
243
|
-
|
|
245
|
+
overlay: Object.assign({
|
|
244
246
|
matchWidth: false
|
|
245
|
-
}, rest.
|
|
247
|
+
}, rest.overlay),
|
|
246
248
|
visible: menuVisible,
|
|
247
249
|
disabled: disabled,
|
|
248
250
|
onOpen: menuVisibleAction.on,
|
|
249
251
|
onClose: menuVisibleAction.off,
|
|
250
|
-
// value={value}
|
|
251
|
-
// onChange={tryChangeValue}
|
|
252
|
-
// data={mergedData}
|
|
253
252
|
searchable: searchable,
|
|
254
253
|
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}
|
|
254
|
+
trigger: /*#__PURE__*/React__default['default'].createElement(input.MockInput, {
|
|
263
255
|
clearable: clearable,
|
|
264
256
|
placeholder: placeholder,
|
|
265
|
-
// @ts-ignore
|
|
266
257
|
displayRender: displayRender,
|
|
267
258
|
suffix: menuVisible ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
|
|
268
259
|
focused: menuVisible,
|
|
269
|
-
value: value,
|
|
270
|
-
onChange:
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}),
|
|
275
|
-
// @ts-ignore
|
|
260
|
+
value: value[value.length - 1],
|
|
261
|
+
onChange: function onChange() {
|
|
262
|
+
tryChangeValue([]);
|
|
263
|
+
},
|
|
264
|
+
data: mergedData,
|
|
276
265
|
invalid: invalid,
|
|
277
266
|
appearance: appearance
|
|
278
267
|
})
|
|
279
|
-
}), typeAssertion.isArrayNonEmpty(
|
|
268
|
+
}), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/React__default['default'].createElement(CascaderMenuList, null) : null));
|
|
280
269
|
});
|
|
281
270
|
|
|
282
271
|
if (env.__DEV__) {
|
|
283
272
|
Cascader.displayName = 'Cascader';
|
|
284
273
|
}
|
|
285
274
|
|
|
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
275
|
var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
|
|
314
276
|
var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
315
|
-
var _a$
|
|
316
|
-
prefixCls = _a$
|
|
277
|
+
var _a$prefixCls = _a.prefixCls,
|
|
278
|
+
prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
|
|
317
279
|
className = _a.className,
|
|
318
280
|
rest = tslib.__rest(_a, ["prefixCls", "className"]);
|
|
319
281
|
|
|
320
|
-
var
|
|
321
|
-
flatted =
|
|
322
|
-
menuList =
|
|
323
|
-
changeOnSelect = _useCascaderContext2.changeOnSelect;
|
|
282
|
+
var _useCascaderContext = context.useCascaderContext(),
|
|
283
|
+
flatted = _useCascaderContext.flatted,
|
|
284
|
+
menuList = _useCascaderContext.menuList;
|
|
324
285
|
|
|
325
|
-
var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted"
|
|
286
|
+
var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted");
|
|
326
287
|
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
327
288
|
ref: ref,
|
|
328
289
|
className: cls
|
|
@@ -341,31 +302,30 @@ if (env.__DEV__) {
|
|
|
341
302
|
|
|
342
303
|
var menuPrefix = classname.getPrefixCls('cascader-menu');
|
|
343
304
|
|
|
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;
|
|
305
|
+
var CascaderMenu = function CascaderMenu(_ref2) {
|
|
306
|
+
var _ref2$prefixCls = _ref2.prefixCls,
|
|
307
|
+
prefixCls = _ref2$prefixCls === void 0 ? menuPrefix : _ref2$prefixCls,
|
|
308
|
+
_ref2$role = _ref2.role,
|
|
309
|
+
role = _ref2$role === void 0 ? 'menu' : _ref2$role,
|
|
310
|
+
className = _ref2.className,
|
|
311
|
+
menu = _ref2.data;
|
|
312
|
+
|
|
313
|
+
var _useCascaderContext2 = context.useCascaderContext(),
|
|
314
|
+
flatted = _useCascaderContext2.flatted,
|
|
315
|
+
disabledContext = _useCascaderContext2.disabled,
|
|
316
|
+
expandTrigger = _useCascaderContext2.expandTrigger,
|
|
317
|
+
onItemClick = _useCascaderContext2.onItemClick,
|
|
318
|
+
onItemHover = _useCascaderContext2.onItemHover,
|
|
319
|
+
titleRender = _useCascaderContext2.titleRender,
|
|
320
|
+
onLoadChildren = _useCascaderContext2.onLoadChildren,
|
|
321
|
+
getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
|
|
362
322
|
|
|
363
323
|
var cls = classname.cx(prefixCls, className);
|
|
364
324
|
return /*#__PURE__*/React__default['default'].createElement("ul", {
|
|
365
325
|
className: cls,
|
|
366
326
|
role: role
|
|
367
327
|
}, menu.map(function (option) {
|
|
368
|
-
var eventOption = index$1.
|
|
328
|
+
var eventOption = index$1.getItemEventData(option, getItemRequiredProps(option));
|
|
369
329
|
var selected = eventOption.selected,
|
|
370
330
|
loading = eventOption.loading;
|
|
371
331
|
var disabled = disabledContext || option.disabled;
|
|
@@ -387,7 +347,7 @@ var CascaderMenu = function CascaderMenu(_ref) {
|
|
|
387
347
|
onItemHover(eventOption);
|
|
388
348
|
}
|
|
389
349
|
}
|
|
390
|
-
},
|
|
350
|
+
}, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
|
|
391
351
|
}));
|
|
392
352
|
};
|
|
393
353
|
/**
|
|
@@ -417,11 +377,11 @@ var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildre
|
|
|
417
377
|
|
|
418
378
|
var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
|
419
379
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
420
|
-
var title = titleRender ? titleRender(option
|
|
380
|
+
var title = titleRender ? titleRender(option) : true;
|
|
421
381
|
if (title !== true) return title;
|
|
422
382
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
423
383
|
className: "title__text title__text--cols"
|
|
424
|
-
},
|
|
384
|
+
}, treeUtils.getTopDownAncestors(option).map(function (item) {
|
|
425
385
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
426
386
|
key: item.id,
|
|
427
387
|
className: "title__text--col"
|
|
@@ -431,7 +391,7 @@ var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
|
|
|
431
391
|
|
|
432
392
|
var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
|
433
393
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
434
|
-
var title = titleRender ? titleRender(option
|
|
394
|
+
var title = titleRender ? titleRender(option) : true;
|
|
435
395
|
if (title !== true) return title;
|
|
436
396
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
437
397
|
className: "title__text"
|
|
@@ -440,7 +400,7 @@ var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
|
|
|
440
400
|
|
|
441
401
|
var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
|
|
442
402
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
443
|
-
var title = titleRender ? titleRender(option,
|
|
403
|
+
var title = titleRender ? titleRender(option, keyword) : true;
|
|
444
404
|
if (title !== true) return title;
|
|
445
405
|
|
|
446
406
|
if (typeof option.title !== 'string') {
|
|
@@ -477,5 +437,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
|
|
|
477
437
|
exports.Cascader = Cascader;
|
|
478
438
|
exports.CascaderMenu = CascaderMenu;
|
|
479
439
|
exports.CascaderMenuList = CascaderMenuList;
|
|
480
|
-
exports.CascaderSearch = CascaderSearch;
|
|
481
440
|
//# sourceMappingURL=Cascader.js.map
|