@hi-ui/check-select 4.0.0-alpha.2 → 4.0.0-alpha.23
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 +117 -7
- package/lib/cjs/CheckSelect.js +263 -112
- package/lib/cjs/CheckSelect.js.map +1 -1
- package/lib/cjs/context.js +7 -7
- package/lib/cjs/context.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-check-select.js +93 -49
- package/lib/cjs/use-check-select.js.map +1 -1
- package/lib/esm/CheckSelect.js +256 -108
- package/lib/esm/CheckSelect.js.map +1 -1
- package/lib/esm/context.js +6 -6
- package/lib/esm/context.js.map +1 -1
- package/lib/esm/index.js +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-check-select.js +92 -48
- package/lib/esm/use-check-select.js.map +1 -1
- package/lib/types/CheckSelect.d.ts +62 -27
- package/lib/types/context.d.ts +10 -546
- package/lib/types/hooks/index.d.ts +0 -1
- package/lib/types/hooks/use-search.d.ts +1 -1
- package/lib/types/types.d.ts +40 -5
- package/lib/types/use-check-select.d.ts +65 -276
- package/package.json +26 -17
- package/lib/cjs/hooks/use-search.js +0 -81
- package/lib/cjs/hooks/use-search.js.map +0 -1
- package/lib/esm/hooks/use-search.js +0 -72
- package/lib/esm/hooks/use-search.js.map +0 -1
- package/lib/types/hooks/use-cache.d.ts +0 -8
package/README.md
CHANGED
|
@@ -1,11 +1,121 @@
|
|
|
1
|
-
#
|
|
1
|
+
# CheckSelect 多项选择器
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
选择器是一种接收数据的容器，为用户提供选择一部分数据的能力。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 何时使用
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
const CheckSelect = require('@hi-ui/check-select');
|
|
7
|
+
需要从大量的离散型数据中选择一部分时使用
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
备选项数量 5 个以上时
|
|
10
|
+
|
|
11
|
+
不需要将全部备选项都展示给用户时
|
|
12
|
+
|
|
13
|
+
## 使用示例
|
|
14
|
+
|
|
15
|
+
<!-- Inject Stories -->
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
20
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
|
|
21
|
+
| data | 下拉框选项数据源 | DataItem[] \| groupDataItem[] | - | - |
|
|
22
|
+
| fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | object | - | { title: 'title', id: 'id',disabled:'disabled', children: 'children'} |
|
|
23
|
+
| dataSource | 关键词搜索时，触发异步下拉框选项数据源 | DataSource (keyword: string) => (DataSource \| DataItem \| Promise) | - | - |
|
|
24
|
+
| value | 被选中项的值 | ReactText[] | - | - |
|
|
25
|
+
| defaultValue | 默认被选中项的值 | ReactText[] | - | - |
|
|
26
|
+
| showCheckAll | 是否显示**全选**，只对多选生效 | boolean | true \| false | false |
|
|
27
|
+
| showJustSelected | 是否显示**仅看已选**，只对多选生效 (3.0 新增) | boolean | true \| false | false |
|
|
28
|
+
| searchable | 是否可以筛选 | boolean | true \| false | false |
|
|
29
|
+
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | (keyword: string, item: DataItem) => boolean | - |
|
|
30
|
+
| clearable | 是否可以清空 | boolean | true \| false | true |
|
|
31
|
+
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
32
|
+
| placeholder | 输入框占位 | string | - | '请选择' |
|
|
33
|
+
| searchPlaceholder | 搜索输入框占位 | string | - | '搜索' |
|
|
34
|
+
| emptyContent | 设置选项为空时展示的内容 | ReactNode | - | '无匹配数据' |
|
|
35
|
+
| loadingContent | 设置加载中时展示的内容 | ReactNode | - | '数据加载中...' |
|
|
36
|
+
| optionWidth | 自定义下拉选项宽度 | number | - | |
|
|
37
|
+
| renderExtraFooter | 自定义下拉菜单底部渲染 | () => ReactNode | - | 无内容 |
|
|
38
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | - |
|
|
39
|
+
| onOverlayScroll | 下拉列表滚动时的回调 | function | - | - |
|
|
40
|
+
| popper | 自定义控制弹出层 popper 行为 | Omit<PopperProps, 'visible' \| 'attachEl'> | - | - |
|
|
41
|
+
| titleRender | 自定义渲染节点的 title 内容径 | (item: CheckSelectEventData, keyword: string) => React.ReactNode | - |
|
|
42
|
+
| displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string | - | - |
|
|
43
|
+
|
|
44
|
+
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 `popper={ container: triggerNode.parentElement }` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
45
|
+
|
|
46
|
+
## Events
|
|
47
|
+
|
|
48
|
+
| 名称 | 说明 | 类型 | 参数 | 返回值 |
|
|
49
|
+
| -------- | ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------ | ---------------------------------------------------------------- |
|
|
50
|
+
| onChange | 改变选项时触发函数 | (selectedIds: string[], changedItems: DataItem[] | DataItem, afterChangedItems: DataItem[], shouldChecked: boolean) => void | selectedIds: 所有选中项的 id 集合 <br /> changedItem: 变更的选项 | - |
|
|
51
|
+
|
|
52
|
+
## Type
|
|
53
|
+
|
|
54
|
+
### groupDataItem
|
|
55
|
+
|
|
56
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
57
|
+
| ---------- | ----------------- | ---------------- | ------ | ------ |
|
|
58
|
+
| groupId | 下拉选项组唯一 id | string \| number | - | - |
|
|
59
|
+
| groupTitle | 下拉选项组标题 | string | - | - |
|
|
60
|
+
| children | 分组的时候使用 | DataItem[] | - | - |
|
|
61
|
+
|
|
62
|
+
### DataItem
|
|
63
|
+
|
|
64
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
65
|
+
| -------- | ---------------- | --------- | ------------- | ------ |
|
|
66
|
+
| id | 下拉选择项唯一值 | ReactText | - | - |
|
|
67
|
+
| title | 下拉选择项标题 | string | - | - |
|
|
68
|
+
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
69
|
+
|
|
70
|
+
### CheckSelectEventData
|
|
71
|
+
|
|
72
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
73
|
+
| -------- | -------------------------------- | ------- | ------------- | ------ |
|
|
74
|
+
| id | 选择项值 | string | - | - |
|
|
75
|
+
| title | 选择项 | string | - | - |
|
|
76
|
+
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
77
|
+
| raw | 原始数据，包括约定模型之外的数据 | object | - | - |
|
|
78
|
+
| checked | 节点是否被选中 | boolean | true \| false | - |
|
|
79
|
+
| focused | 节点是否被聚焦 | boolean | true \| false | - |
|
|
80
|
+
|
|
81
|
+
### DataSource
|
|
82
|
+
|
|
83
|
+
> 继承 [Axios](https://www.kancloud.cn/yunye/axios/234845) 的 api
|
|
84
|
+
|
|
85
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
86
|
+
| ----------------- | ---------------------------------- | -------------------------------- | ------------- | ------ |
|
|
87
|
+
| url | 请求的 url | string | - | - |
|
|
88
|
+
| method | 请求方法 | string | get \| post | get |
|
|
89
|
+
| data | post 请求时请求体参数 | object | - | - |
|
|
90
|
+
| params | url 查询参数 | object | - | - |
|
|
91
|
+
| headers | 请求头 | object | - | - |
|
|
92
|
+
| withCredentials | 上传请求时是否携带 cookie | boolean | true \| false | false |
|
|
93
|
+
| transformResponse | 成功时的回调，用于对数据进行预处理 | (response: object) => DataItem[] | - | - |
|
|
94
|
+
| error | 请求发生异常的回调方法 | (error: object) => void | - | - |
|
|
95
|
+
|
|
96
|
+
## CHANGELOG
|
|
97
|
+
|
|
98
|
+
> 从 Select 组件抽离多选模式出来，作为为单独 CheckSelect 组件。
|
|
99
|
+
|
|
100
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
101
|
+
| ------------------- | ------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
102
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
103
|
+
| ---- | ---- | ---- | ---- |
|
|
104
|
+
| value | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
105
|
+
| defaultValue | update | 类型 string[] => string[] \| number[] | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
106
|
+
| id | update | 类型 string => string \| number | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持） |
|
|
107
|
+
| bordered | deprecated | 字段 `bordered` => `appearance` | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值 |
|
|
108
|
+
| searchPlaceholder | feature | - | Picker 类型组件统一支持 |
|
|
109
|
+
| loadingContent | feature | - | Picker 类型组件统一支持，适配新 UI |
|
|
110
|
+
| popper | feature | - | Picker 类型组件统一支持，聚合管理。比如： placement setOverlayContainer 等，之前有的加了有的没加 |
|
|
111
|
+
| titleRender | feature | 字段 render => titleRender | 统一支持自定义渲染每一项 |
|
|
112
|
+
| virtual | feature | - | 支持虚拟列表 |
|
|
113
|
+
| height | feature | - | 支持虚拟列表 |
|
|
114
|
+
| itemHeight | feature | - | 支持虚拟列表 |
|
|
115
|
+
| type | deprecated | - | 拆分单选多选组件单独维护 |
|
|
116
|
+
| autoload | deprecated | - | 页面级首次渲染执行数据加载操作，取消内置 |
|
|
117
|
+
| onSearch | deprecated | - | 使用 dataSource 替代，功能重合 |
|
|
118
|
+
| appearance | feature | - | 统一支持：线性\面性\无边框 |
|
|
119
|
+
| displayRender | feature | - | 统一支持选择后内容自定义渲染 |
|
|
120
|
+
| setOverlayContainer | deprecated | - | 使用 popper.container 替代，功能重合 |
|
|
121
|
+
| onChange | update | 添加 shouldChecked 第四个参数 | 方便用户获取，执行相应拦截之类的操作 |
|
package/lib/cjs/CheckSelect.js
CHANGED
|
@@ -23,14 +23,8 @@ var classname = require('@hi-ui/classname');
|
|
|
23
23
|
|
|
24
24
|
var env = require('@hi-ui/env');
|
|
25
25
|
|
|
26
|
-
var Input = require('@hi-ui/input');
|
|
27
|
-
|
|
28
|
-
var useToggle = require('@hi-ui/use-toggle');
|
|
29
|
-
|
|
30
26
|
var useCheckSelect = require('./use-check-select.js');
|
|
31
27
|
|
|
32
|
-
var Popper = require('@hi-ui/popper');
|
|
33
|
-
|
|
34
28
|
var icons = require('@hi-ui/icons');
|
|
35
29
|
|
|
36
30
|
var context = require('./context.js');
|
|
@@ -41,6 +35,22 @@ var Checkbox = require('@hi-ui/checkbox');
|
|
|
41
35
|
|
|
42
36
|
var tagInput = require('@hi-ui/tag-input');
|
|
43
37
|
|
|
38
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
39
|
+
|
|
40
|
+
var VirtualList = require('rc-virtual-list');
|
|
41
|
+
|
|
42
|
+
var picker = require('@hi-ui/picker');
|
|
43
|
+
|
|
44
|
+
var lodash = require('lodash');
|
|
45
|
+
|
|
46
|
+
var highlighter = require('@hi-ui/highlighter');
|
|
47
|
+
|
|
48
|
+
var useToggle = require('@hi-ui/use-toggle');
|
|
49
|
+
|
|
50
|
+
var times = require('@hi-ui/times');
|
|
51
|
+
|
|
52
|
+
var useSearchMode = require('@hi-ui/use-search-mode');
|
|
53
|
+
|
|
44
54
|
function _interopDefaultLegacy(e) {
|
|
45
55
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
46
56
|
'default': e
|
|
@@ -49,12 +59,10 @@ function _interopDefaultLegacy(e) {
|
|
|
49
59
|
|
|
50
60
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
51
61
|
|
|
52
|
-
var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
|
|
53
|
-
|
|
54
|
-
var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
|
|
55
|
-
|
|
56
62
|
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
|
|
57
63
|
|
|
64
|
+
var VirtualList__default = /*#__PURE__*/_interopDefaultLegacy(VirtualList);
|
|
65
|
+
|
|
58
66
|
var _role = 'check-select';
|
|
59
67
|
|
|
60
68
|
var _prefix = classname.getPrefixCls(_role);
|
|
@@ -66,83 +74,200 @@ var _prefix = classname.getPrefixCls(_role);
|
|
|
66
74
|
var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
67
75
|
var _a$prefixCls = _a.prefixCls,
|
|
68
76
|
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
69
|
-
_a$role = _a.role,
|
|
70
|
-
role = _a$role === void 0 ? _role : _a$role,
|
|
71
77
|
className = _a.className,
|
|
72
78
|
children = _a.children,
|
|
73
79
|
_a$disabled = _a.disabled,
|
|
74
80
|
disabled = _a$disabled === void 0 ? false : _a$disabled,
|
|
75
81
|
_a$clearable = _a.clearable,
|
|
76
|
-
clearable = _a$clearable === void 0 ?
|
|
77
|
-
_a$
|
|
78
|
-
|
|
79
|
-
placeholder = _a.placeholder,
|
|
82
|
+
clearable = _a$clearable === void 0 ? true : _a$clearable,
|
|
83
|
+
_a$placeholder = _a.placeholder,
|
|
84
|
+
placeholder = _a$placeholder === void 0 ? '请选择' : _a$placeholder,
|
|
80
85
|
displayRenderProp = _a.displayRender,
|
|
81
86
|
onSelectProp = _a.onSelect,
|
|
82
|
-
|
|
83
|
-
|
|
87
|
+
height = _a.height,
|
|
88
|
+
_a$itemHeight = _a.itemHeight,
|
|
89
|
+
itemHeight = _a$itemHeight === void 0 ? 40 : _a$itemHeight,
|
|
90
|
+
_a$virtual = _a.virtual,
|
|
91
|
+
virtual = _a$virtual === void 0 ? true : _a$virtual,
|
|
92
|
+
appearance = _a.appearance,
|
|
93
|
+
invalid = _a.invalid,
|
|
94
|
+
dataSource = _a.dataSource,
|
|
95
|
+
filterOption = _a.filterOption,
|
|
96
|
+
searchableProp = _a.searchable,
|
|
97
|
+
titleRender = _a.titleRender,
|
|
98
|
+
renderExtraFooter = _a.renderExtraFooter,
|
|
99
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "wrap", "placeholder", "displayRender", "onSelect", "popper", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "titleRender", "renderExtraFooter"]);
|
|
84
100
|
|
|
85
101
|
var _useToggle = useToggle.useToggle(),
|
|
86
102
|
menuVisible = _useToggle[0],
|
|
87
103
|
menuVisibleAction = _useToggle[1];
|
|
88
104
|
|
|
89
|
-
var _useState = React.useState(null),
|
|
90
|
-
targetElRef = _useState[0],
|
|
91
|
-
setTargetElRef = _useState[1];
|
|
92
|
-
|
|
93
|
-
var openMenu = React.useCallback(function () {
|
|
94
|
-
if (disabled) return;
|
|
95
|
-
menuVisibleAction.on();
|
|
96
|
-
}, [disabled, menuVisibleAction]);
|
|
97
|
-
var onSelectLatest = useLatest.useLatestCallback(onSelectProp);
|
|
98
105
|
var displayRender = React.useCallback(function (item) {
|
|
99
|
-
if (displayRenderProp) {
|
|
106
|
+
if (typeAssertion.isFunction(displayRenderProp)) {
|
|
100
107
|
return displayRenderProp(item);
|
|
101
108
|
}
|
|
102
109
|
|
|
103
110
|
return item.title;
|
|
104
|
-
}, [displayRenderProp]);
|
|
111
|
+
}, [displayRenderProp]);
|
|
112
|
+
var onSelect = useLatest.useLatestCallback(function (value, item, shouldChecked) {
|
|
113
|
+
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
|
|
114
|
+
|
|
115
|
+
if (shouldChecked) {
|
|
116
|
+
// TODO：as useCheckList
|
|
117
|
+
setSelectedItems(function (prev) {
|
|
118
|
+
return [].concat(prev, [item]);
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
});
|
|
105
122
|
|
|
106
123
|
var _b = useCheckSelect.useCheckSelect(Object.assign(Object.assign({}, rest), {
|
|
107
|
-
|
|
108
|
-
|
|
124
|
+
children: children,
|
|
125
|
+
onSelect: onSelect
|
|
109
126
|
})),
|
|
110
|
-
rootProps = _b.rootProps,
|
|
111
127
|
context$1 = tslib.__rest(_b, ["rootProps"]);
|
|
112
128
|
|
|
113
129
|
var value = context$1.value,
|
|
114
130
|
tryChangeValue = context$1.tryChangeValue,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
131
|
+
flattedData = context$1.flattedData; // ************************** 异步搜索 ************************* //
|
|
132
|
+
// TODO: 支持对 Item 传入 状态
|
|
133
|
+
|
|
134
|
+
var _c = useSearchMode.useAsyncSearch({
|
|
135
|
+
dataSource: dataSource
|
|
136
|
+
}),
|
|
137
|
+
loading = _c.loading,
|
|
138
|
+
hasError = _c.hasError,
|
|
139
|
+
dataSourceStrategy = tslib.__rest(_c, ["loading", "hasError"]);
|
|
140
|
+
|
|
141
|
+
var customSearchStrategy = useSearchMode.useTreeCustomSearch({
|
|
142
|
+
data: flattedData,
|
|
143
|
+
filterOption: filterOption
|
|
144
|
+
});
|
|
145
|
+
var filterSearchStrategy = useSearchMode.useFilterSearch({
|
|
146
|
+
data: flattedData,
|
|
147
|
+
flattedData: flattedData,
|
|
148
|
+
searchMode: searchableProp ? 'filter' : undefined
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
var _useSearchMode = useSearchMode.useSearchMode({
|
|
152
|
+
searchable: searchableProp,
|
|
153
|
+
strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy]
|
|
154
|
+
}),
|
|
155
|
+
stateInSearch = _useSearchMode.state,
|
|
156
|
+
searchable = _useSearchMode.searchable,
|
|
157
|
+
searchMode = _useSearchMode.searchMode,
|
|
158
|
+
onSearch = _useSearchMode.onSearch,
|
|
159
|
+
searchValue = _useSearchMode.keyword; // 拦截 titleRender，自定义高亮展示
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
var proxyTitleRender = React.useCallback(function (node) {
|
|
163
|
+
if (titleRender) {
|
|
164
|
+
var _ret = titleRender(node);
|
|
165
|
+
|
|
166
|
+
if (_ret && _ret !== true) return _ret;
|
|
167
|
+
} // 本地搜索执行默认高亮规则
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
|
|
171
|
+
var ret = highlight ? /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
|
|
172
|
+
checked: node.checked,
|
|
173
|
+
disabled: node.disabled
|
|
174
|
+
}, /*#__PURE__*/React__default['default'].createElement(highlighter.Highlighter, {
|
|
175
|
+
keyword: searchValue
|
|
176
|
+
}, node.title)) : true;
|
|
177
|
+
return ret;
|
|
178
|
+
}, [titleRender, searchValue, searchMode]);
|
|
179
|
+
var shouldUseSearch = !!searchValue && !hasError;
|
|
180
|
+
var selectProps = {
|
|
181
|
+
data: shouldUseSearch ? stateInSearch.data : flattedData,
|
|
182
|
+
titleRender: proxyTitleRender
|
|
183
|
+
}; // 搜索时临时选中缓存数据
|
|
184
|
+
|
|
185
|
+
var _useState = React.useState([]),
|
|
186
|
+
selectedItems = _useState[0],
|
|
187
|
+
setSelectedItems = _useState[1]; // 下拉菜单不能合并（因为树形数据，不知道是第几级）
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
var mergedData = React.useMemo(function () {
|
|
191
|
+
var nextData = selectedItems.concat(flattedData);
|
|
192
|
+
return lodash.uniqBy(nextData, 'id');
|
|
193
|
+
}, [selectedItems, flattedData]);
|
|
194
|
+
var virtualData = React.useMemo(function () {
|
|
195
|
+
return selectProps.data.reduce(function (acc, cur, index) {
|
|
196
|
+
if ('groupTitle' in cur) {
|
|
197
|
+
acc.push({
|
|
198
|
+
id: "group-" + index,
|
|
199
|
+
groupTitle: cur.groupTitle,
|
|
200
|
+
rootProps: cur.rootProps
|
|
201
|
+
});
|
|
202
|
+
return acc.concat(cur.children);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
acc.push(cur);
|
|
206
|
+
return acc;
|
|
207
|
+
}, []);
|
|
208
|
+
}, [selectProps.data]);
|
|
209
|
+
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
210
|
+
return /*#__PURE__*/React__default['default'].createElement(context.CheckSelectProvider, {
|
|
118
211
|
value: context$1
|
|
119
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
212
|
+
}, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
|
|
120
213
|
ref: ref,
|
|
121
|
-
role: role,
|
|
122
214
|
className: cls
|
|
123
|
-
},
|
|
124
|
-
ref: setTargetElRef,
|
|
125
|
-
onClick: openMenu,
|
|
126
|
-
disabled: disabled,
|
|
127
|
-
clearable: clearable,
|
|
128
|
-
placeholder: placeholder,
|
|
129
|
-
data: selectData,
|
|
130
|
-
value: value,
|
|
131
|
-
onChange: tryChangeValue,
|
|
132
|
-
displayRender: displayRender,
|
|
133
|
-
suffix: /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)
|
|
134
|
-
}), /*#__PURE__*/React__default['default'].createElement(Popper__default['default'], Object.assign({}, popper, {
|
|
135
|
-
attachEl: targetElRef,
|
|
215
|
+
}, rest, {
|
|
136
216
|
visible: menuVisible,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
217
|
+
onOpen: function onOpen() {
|
|
218
|
+
// setViewSelected(false)
|
|
219
|
+
menuVisibleAction.on();
|
|
220
|
+
},
|
|
221
|
+
disabled: disabled,
|
|
222
|
+
onClose: menuVisibleAction.off,
|
|
223
|
+
// value={value}
|
|
224
|
+
// onChange={tryChangeValue}
|
|
225
|
+
// data={mergedData}
|
|
226
|
+
searchable: searchable,
|
|
227
|
+
onSearch: onSearch,
|
|
228
|
+
loading: loading,
|
|
229
|
+
footer: renderExtraFooter ? renderExtraFooter() : null,
|
|
230
|
+
trigger: /*#__PURE__*/React__default['default'].createElement(tagInput.TagInputMock // ref={targetElementRef}
|
|
231
|
+
// onClick={openMenu}
|
|
232
|
+
// disabled={disabled}
|
|
233
|
+
, {
|
|
234
|
+
// ref={targetElementRef}
|
|
235
|
+
// onClick={openMenu}
|
|
236
|
+
// disabled={disabled}
|
|
237
|
+
clearable: clearable,
|
|
238
|
+
placeholder: placeholder,
|
|
239
|
+
// @ts-ignore
|
|
240
|
+
displayRender: displayRender,
|
|
241
|
+
suffix: menuVisible ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
|
|
242
|
+
focused: menuVisible,
|
|
243
|
+
appearance: appearance,
|
|
244
|
+
value: value,
|
|
245
|
+
onChange: tryChangeValue,
|
|
246
|
+
data: mergedData,
|
|
247
|
+
// @ts-ignore
|
|
248
|
+
invalid: invalid,
|
|
249
|
+
onExpand: function onExpand() {
|
|
250
|
+
// setViewSelected(true)
|
|
251
|
+
menuVisibleAction.on();
|
|
252
|
+
}
|
|
253
|
+
})
|
|
254
|
+
}), typeAssertion.isArrayNonEmpty(virtualData) ? /*#__PURE__*/React__default['default'].createElement(VirtualList__default['default'], {
|
|
255
|
+
itemKey: "id",
|
|
256
|
+
fullHeight: false,
|
|
257
|
+
height: height,
|
|
258
|
+
itemHeight: itemHeight,
|
|
259
|
+
virtual: virtual,
|
|
260
|
+
data: virtualData
|
|
261
|
+
}, function (node) {
|
|
262
|
+
/* 反向 map，搜索删选数据时会对数据进行处理 */
|
|
263
|
+
return 'groupTitle' in node ? /*#__PURE__*/React__default['default'].createElement(CheckSelectOptionGroup, {
|
|
264
|
+
label: node.groupTitle
|
|
265
|
+
}) : /*#__PURE__*/React__default['default'].createElement(CheckSelectOption, {
|
|
266
|
+
option: node,
|
|
267
|
+
depth: node.depth,
|
|
268
|
+
titleRender: proxyTitleRender
|
|
144
269
|
});
|
|
145
|
-
})))
|
|
270
|
+
}) : null));
|
|
146
271
|
}); // @ts-ignore
|
|
147
272
|
|
|
148
273
|
CheckSelect.HiName = 'CheckSelect';
|
|
@@ -151,80 +276,106 @@ if (env.__DEV__) {
|
|
|
151
276
|
CheckSelect.displayName = 'CheckSelect';
|
|
152
277
|
}
|
|
153
278
|
|
|
154
|
-
var
|
|
155
|
-
|
|
279
|
+
var optionPrefix = classname.getPrefixCls('check-select-option');
|
|
280
|
+
/**
|
|
281
|
+
* TODO: What is CheckSelectOption
|
|
282
|
+
*/
|
|
283
|
+
|
|
284
|
+
var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
156
285
|
var _a$prefixCls2 = _a.prefixCls,
|
|
157
|
-
prefixCls = _a$prefixCls2 === void 0 ?
|
|
286
|
+
prefixCls = _a$prefixCls2 === void 0 ? optionPrefix : _a$prefixCls2,
|
|
158
287
|
className = _a.className,
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
288
|
+
_a$option = _a.option,
|
|
289
|
+
option = _a$option === void 0 ? {} : _a$option,
|
|
290
|
+
onClick = _a.onClick,
|
|
291
|
+
titleRender = _a.titleRender,
|
|
292
|
+
depth = _a.depth,
|
|
293
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth"]);
|
|
294
|
+
|
|
295
|
+
var _useCheckSelectContex = context.useCheckSelectContext(),
|
|
296
|
+
isSelectedId = _useCheckSelectContex.isSelectedId,
|
|
297
|
+
onSelect = _useCheckSelectContex.onSelect;
|
|
298
|
+
|
|
299
|
+
var id = option.id,
|
|
300
|
+
_option$disabled = option.disabled,
|
|
301
|
+
disabled = _option$disabled === void 0 ? false : _option$disabled;
|
|
302
|
+
var selected = isSelectedId(id);
|
|
303
|
+
var eventNodeRef = useLatest.useLatestRef(Object.assign({}, option, {
|
|
304
|
+
disabled: disabled,
|
|
305
|
+
checked: selected
|
|
306
|
+
}));
|
|
307
|
+
var cls = classname.cx(prefixCls, className, selected && prefixCls + "--selected", disabled && prefixCls + "--disabled");
|
|
308
|
+
var handleOptionCheck = React.useCallback(function (evt) {
|
|
309
|
+
onSelect(option, !selected);
|
|
310
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(evt);
|
|
311
|
+
}, [onSelect, option, selected, onClick]);
|
|
312
|
+
var renderTitle = React.useCallback(function (node, titleRender) {
|
|
313
|
+
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
314
|
+
var title = titleRender ? titleRender(node) : true;
|
|
315
|
+
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
316
|
+
className: prefixCls + "__title"
|
|
317
|
+
}, title === true ? /*#__PURE__*/React__default['default'].createElement(Checkbox__default['default'], {
|
|
318
|
+
checked: node.checked,
|
|
319
|
+
disabled: node.disabled
|
|
320
|
+
}, node.title) : title);
|
|
321
|
+
}, [prefixCls]);
|
|
166
322
|
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
167
323
|
ref: ref,
|
|
168
|
-
className:
|
|
169
|
-
}, rest
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
});
|
|
324
|
+
className: cls
|
|
325
|
+
}, rest, {
|
|
326
|
+
onClick: handleOptionCheck
|
|
327
|
+
}), renderIndent(prefixCls, depth), renderTitle(eventNodeRef.current, titleRender));
|
|
328
|
+
}); // @ts-ignore
|
|
329
|
+
|
|
330
|
+
CheckSelectOption.HiName = 'CheckSelectOption';
|
|
176
331
|
|
|
177
332
|
if (env.__DEV__) {
|
|
178
|
-
|
|
333
|
+
CheckSelectOption.displayName = 'CheckSelectOption';
|
|
179
334
|
}
|
|
180
335
|
|
|
181
|
-
var
|
|
182
|
-
|
|
336
|
+
var optionGroupPrefix = classname.getPrefixCls('select-option-group');
|
|
337
|
+
/**
|
|
338
|
+
* TODO: What is CheckSelectOptionGroup
|
|
339
|
+
*/
|
|
340
|
+
|
|
341
|
+
var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
183
342
|
var _a$prefixCls3 = _a.prefixCls,
|
|
184
|
-
prefixCls = _a$prefixCls3 === void 0 ?
|
|
343
|
+
prefixCls = _a$prefixCls3 === void 0 ? optionGroupPrefix : _a$prefixCls3,
|
|
185
344
|
className = _a.className,
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option"]);
|
|
189
|
-
|
|
190
|
-
var _useSelectContext2 = context.useSelectContext(),
|
|
191
|
-
isSelectedId = _useSelectContext2.isSelectedId,
|
|
192
|
-
onSelect = _useSelectContext2.onSelect,
|
|
193
|
-
titleRender = _useSelectContext2.titleRender;
|
|
194
|
-
|
|
195
|
-
var checked = !!isSelectedId(option.id);
|
|
196
|
-
var cls = classname.cx(prefixCls, className, checked && prefixCls + "--selected");
|
|
197
|
-
var handleOptionCheck = React.useCallback(function (evt) {
|
|
198
|
-
onSelect(option, !checked);
|
|
199
|
-
}, [onSelect, option, checked]); // 如果 titleRender 返回 `true`，则使用默认 title
|
|
200
|
-
|
|
201
|
-
var title = titleRender ? titleRender(Object.assign(Object.assign({}, option), {
|
|
202
|
-
checked: checked
|
|
203
|
-
})) : true;
|
|
204
|
-
|
|
205
|
-
if (title !== true) {
|
|
206
|
-
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
207
|
-
ref: ref,
|
|
208
|
-
className: cls
|
|
209
|
-
}, rest), title);
|
|
210
|
-
}
|
|
345
|
+
label = _a.label,
|
|
346
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "children", "label", "onClick"]);
|
|
211
347
|
|
|
348
|
+
var cls = classname.cx(prefixCls, className);
|
|
212
349
|
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
213
350
|
ref: ref,
|
|
214
351
|
className: cls
|
|
215
|
-
}, rest), /*#__PURE__*/React__default['default'].createElement(
|
|
216
|
-
checked: checked,
|
|
217
|
-
onChange: handleOptionCheck
|
|
218
|
-
}, option.title));
|
|
352
|
+
}, rest), /*#__PURE__*/React__default['default'].createElement("span", null, label));
|
|
219
353
|
}); // @ts-ignore
|
|
220
354
|
|
|
221
|
-
|
|
355
|
+
CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
|
|
222
356
|
|
|
223
357
|
if (env.__DEV__) {
|
|
224
|
-
|
|
358
|
+
CheckSelectOptionGroup.displayName = 'CheckSelectOptionGroup';
|
|
225
359
|
}
|
|
360
|
+
/**
|
|
361
|
+
* 渲染空白占位
|
|
362
|
+
*/
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
var renderIndent = function renderIndent(prefixCls, depth) {
|
|
366
|
+
return times.times(depth, function (index) {
|
|
367
|
+
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
368
|
+
key: index,
|
|
369
|
+
style: {
|
|
370
|
+
alignSelf: 'stretch'
|
|
371
|
+
}
|
|
372
|
+
}, /*#__PURE__*/React__default['default'].createElement("span", {
|
|
373
|
+
className: classname.cx(prefixCls + "__indent")
|
|
374
|
+
}));
|
|
375
|
+
});
|
|
376
|
+
};
|
|
226
377
|
|
|
227
378
|
exports.CheckSelect = CheckSelect;
|
|
228
379
|
exports.CheckSelectOption = CheckSelectOption;
|
|
229
|
-
exports.
|
|
380
|
+
exports.CheckSelectOptionGroup = CheckSelectOptionGroup;
|
|
230
381
|
//# sourceMappingURL=CheckSelect.js.map
|