@hi-ui/check-select 4.0.0-beta.7 → 4.0.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/README.md +25 -25
- package/lib/cjs/CheckSelect.js +106 -93
- package/lib/cjs/context.js +1 -2
- package/lib/cjs/hooks/use-data.js +1 -2
- package/lib/cjs/hooks/use-flatten-data.js +1 -2
- package/lib/cjs/index.js +1 -2
- package/lib/cjs/styles/index.scss.js +3 -4
- package/lib/cjs/use-check-select.js +18 -17
- package/lib/cjs/utils/index.js +52 -0
- package/lib/esm/CheckSelect.js +91 -78
- package/lib/esm/context.js +1 -2
- package/lib/esm/hooks/use-data.js +1 -2
- package/lib/esm/hooks/use-flatten-data.js +1 -2
- package/lib/esm/index.js +1 -2
- package/lib/esm/styles/index.scss.js +4 -6
- package/lib/esm/use-check-select.js +19 -18
- package/lib/esm/utils/index.js +45 -0
- package/lib/types/CheckSelect.d.ts +8 -12
- package/lib/types/context.d.ts +4 -2
- package/lib/types/index.d.ts +1 -0
- package/lib/types/types.d.ts +9 -7
- package/lib/types/use-check-select.d.ts +7 -7
- package/lib/types/utils/index.d.ts +10 -0
- package/package.json +29 -29
- package/lib/cjs/CheckSelect.js.map +0 -1
- package/lib/cjs/context.js.map +0 -1
- package/lib/cjs/hooks/use-data.js.map +0 -1
- package/lib/cjs/hooks/use-flatten-data.js.map +0 -1
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/styles/index.scss.js.map +0 -1
- package/lib/cjs/use-check-select.js.map +0 -1
- package/lib/esm/CheckSelect.js.map +0 -1
- package/lib/esm/context.js.map +0 -1
- package/lib/esm/hooks/use-data.js.map +0 -1
- package/lib/esm/hooks/use-flatten-data.js.map +0 -1
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/styles/index.scss.js.map +0 -1
- package/lib/esm/use-check-select.js.map +0 -1
package/README.md
CHANGED
|
@@ -16,30 +16,30 @@
|
|
|
16
16
|
|
|
17
17
|
## Props
|
|
18
18
|
|
|
19
|
-
| 参数 | 说明 | 类型
|
|
20
|
-
| ----------------- | -------------------------------------------------------------------------------------------------------- |
|
|
21
|
-
| data | 下拉框选项数据源 | DataItem[] \| groupDataItem[]
|
|
22
|
-
| fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | object
|
|
23
|
-
| dataSource | 关键词搜索时，触发异步下拉框选项数据源 | DataSource (keyword: string) => (DataSource \| DataItem \| Promise)
|
|
24
|
-
| value | 被选中项的值 | ReactText[]
|
|
25
|
-
| defaultValue | 默认被选中项的值 | ReactText[]
|
|
26
|
-
| showCheckAll | 是否显示**全选**，只对多选生效 | boolean
|
|
27
|
-
| showJustSelected | 是否显示**仅看已选**，只对多选生效 (3.0 新增) | boolean
|
|
28
|
-
| searchable | 是否可以筛选 | boolean
|
|
29
|
-
| filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean
|
|
30
|
-
| clearable | 是否可以清空 | boolean
|
|
31
|
-
| disabled | 是否禁用 | boolean
|
|
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
|
-
| overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps
|
|
41
|
-
| render | 自定义渲染节点的 title 内容径 | (item:
|
|
42
|
-
| displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string
|
|
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
|
+
| overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps | - | - |
|
|
41
|
+
| render | 自定义渲染节点的 title 内容径 | (item: CheckSelectItemEventData, keyword: string) => React.ReactNode | - |
|
|
42
|
+
| displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string | - | - |
|
|
43
43
|
|
|
44
44
|
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 `overlay={ container: triggerNode.parentElement }` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
45
45
|
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
| title | 下拉选择项标题 | string | - | - |
|
|
68
68
|
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
69
69
|
|
|
70
|
-
###
|
|
70
|
+
### CheckSelectItemEventData
|
|
71
71
|
|
|
72
72
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
73
73
|
| -------- | -------------------------------- | ------- | ------------- | ------ |
|
package/lib/cjs/CheckSelect.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -37,7 +37,7 @@ var tagInput = require('@hi-ui/tag-input');
|
|
|
37
37
|
|
|
38
38
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
39
39
|
|
|
40
|
-
var VirtualList = require('
|
|
40
|
+
var VirtualList = require('@hi-ui/virtual-list');
|
|
41
41
|
|
|
42
42
|
var picker = require('@hi-ui/picker');
|
|
43
43
|
|
|
@@ -47,11 +47,9 @@ var highlighter = require('@hi-ui/highlighter');
|
|
|
47
47
|
|
|
48
48
|
var useToggle = require('@hi-ui/use-toggle');
|
|
49
49
|
|
|
50
|
-
var times = require('@hi-ui/times');
|
|
51
|
-
|
|
52
50
|
var funcUtils = require('@hi-ui/func-utils');
|
|
53
51
|
|
|
54
|
-
var
|
|
52
|
+
var core = require('@hi-ui/core');
|
|
55
53
|
|
|
56
54
|
var useSearchMode = require('@hi-ui/use-search-mode');
|
|
57
55
|
|
|
@@ -59,6 +57,8 @@ require('@hi-ui/use-children');
|
|
|
59
57
|
|
|
60
58
|
var useFlattenData = require('./hooks/use-flatten-data.js');
|
|
61
59
|
|
|
60
|
+
var index = require('./utils/index.js');
|
|
61
|
+
|
|
62
62
|
function _interopDefaultLegacy(e) {
|
|
63
63
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
64
64
|
'default': e
|
|
@@ -102,6 +102,9 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
102
102
|
itemHeight = _a$itemHeight === void 0 ? 40 : _a$itemHeight,
|
|
103
103
|
_a$virtual = _a.virtual,
|
|
104
104
|
virtual = _a$virtual === void 0 ? true : _a$virtual,
|
|
105
|
+
visible = _a.visible,
|
|
106
|
+
onOpen = _a.onOpen,
|
|
107
|
+
onClose = _a.onClose,
|
|
105
108
|
appearance = _a.appearance,
|
|
106
109
|
invalid = _a.invalid,
|
|
107
110
|
dataSource = _a.dataSource,
|
|
@@ -112,14 +115,19 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
112
115
|
onSearchProp = _a.onSearch,
|
|
113
116
|
_a$fieldNames = _a.fieldNames,
|
|
114
117
|
fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
|
|
115
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "
|
|
118
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
|
|
116
119
|
|
|
117
|
-
var i18n =
|
|
120
|
+
var i18n = core.useLocaleContext();
|
|
118
121
|
var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
|
|
119
122
|
|
|
120
|
-
var
|
|
121
|
-
|
|
122
|
-
|
|
123
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
124
|
+
visible: visible,
|
|
125
|
+
disabled: disabled,
|
|
126
|
+
onOpen: onOpen,
|
|
127
|
+
onClose: onClose
|
|
128
|
+
}),
|
|
129
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
130
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
|
123
131
|
|
|
124
132
|
var displayRender = React.useCallback(function (item) {
|
|
125
133
|
if (typeAssertion.isFunction(displayRenderProp)) {
|
|
@@ -127,34 +135,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
127
135
|
}
|
|
128
136
|
|
|
129
137
|
return item.title;
|
|
130
|
-
}, [displayRenderProp]);
|
|
131
|
-
|
|
132
|
-
var _useState = React.useState([]),
|
|
133
|
-
selectedItems = _useState[0],
|
|
134
|
-
setSelectedItems = _useState[1];
|
|
135
|
-
|
|
136
|
-
var onSelect = useLatest.useLatestCallback(function (value, item, shouldChecked) {
|
|
137
|
-
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
|
|
138
|
-
|
|
139
|
-
if (shouldChecked) {
|
|
140
|
-
// TODO：as useCheckList
|
|
141
|
-
setSelectedItems(function (prev) {
|
|
142
|
-
return [].concat(prev, [item]);
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
});
|
|
138
|
+
}, [displayRenderProp]);
|
|
146
139
|
|
|
147
140
|
var _b = useCheckSelect.useCheckSelect(Object.assign(Object.assign({}, rest), {
|
|
148
141
|
children: children,
|
|
149
142
|
fieldNames: fieldNames,
|
|
150
|
-
onSelect:
|
|
143
|
+
onSelect: onSelectProp
|
|
151
144
|
})),
|
|
152
145
|
rootProps = _b.rootProps,
|
|
153
146
|
context$1 = tslib.__rest(_b, ["rootProps"]);
|
|
154
147
|
|
|
155
148
|
var value = context$1.value,
|
|
156
149
|
tryChangeValue = context$1.tryChangeValue,
|
|
157
|
-
flattedData = context$1.flattedData
|
|
150
|
+
flattedData = context$1.flattedData,
|
|
151
|
+
checkedItems = context$1.checkedItems; // ************************** 搜索 ************************* //
|
|
158
152
|
|
|
159
153
|
var _c = useSearchMode.useAsyncSearch({
|
|
160
154
|
dataSource: dataSource,
|
|
@@ -199,10 +193,10 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
199
193
|
|
|
200
194
|
|
|
201
195
|
var highlight = !!searchValue && searchMode === 'filter';
|
|
202
|
-
var ret = highlight ? /*#__PURE__*/React__default[
|
|
196
|
+
var ret = highlight ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
203
197
|
checked: node.checked,
|
|
204
198
|
disabled: node.disabled
|
|
205
|
-
}, /*#__PURE__*/React__default[
|
|
199
|
+
}, /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
|
|
206
200
|
keyword: searchValue
|
|
207
201
|
}, node.title)) : true;
|
|
208
202
|
return ret;
|
|
@@ -210,67 +204,79 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
210
204
|
var shouldUseSearch = !!searchValue && !hasError;
|
|
211
205
|
var showData = React.useMemo(function () {
|
|
212
206
|
return shouldUseSearch ? stateInSearch.data : flattedData;
|
|
213
|
-
}, [shouldUseSearch, flattedData, stateInSearch.data]); //
|
|
207
|
+
}, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
|
|
214
208
|
|
|
215
209
|
var mergedData = React.useMemo(function () {
|
|
216
|
-
var nextData =
|
|
210
|
+
var nextData = checkedItems.concat(flattedData);
|
|
217
211
|
return arrayUtils.uniqBy(nextData, 'id');
|
|
218
|
-
}, [
|
|
212
|
+
}, [checkedItems, flattedData]);
|
|
219
213
|
|
|
220
|
-
var
|
|
221
|
-
filterItems =
|
|
222
|
-
setFilterItems =
|
|
214
|
+
var _useState = React.useState(null),
|
|
215
|
+
filterItems = _useState[0],
|
|
216
|
+
setFilterItems = _useState[1];
|
|
223
217
|
|
|
224
218
|
var dropdownItems = filterItems || showData;
|
|
219
|
+
var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
|
|
225
220
|
|
|
226
221
|
var _useMemo = React.useMemo(function () {
|
|
227
|
-
|
|
228
|
-
return !('groupTitle' in item);
|
|
229
|
-
}).map(function (_ref) {
|
|
230
|
-
var id = _ref.id;
|
|
231
|
-
return id;
|
|
232
|
-
});
|
|
233
|
-
var dropdownIdsSet = new Set(dropdownIds);
|
|
234
|
-
var hasValue = false;
|
|
235
|
-
value.forEach(function (id) {
|
|
236
|
-
if (dropdownIdsSet.has(id)) {
|
|
237
|
-
hasValue = true;
|
|
238
|
-
dropdownIdsSet["delete"](id);
|
|
239
|
-
}
|
|
240
|
-
});
|
|
241
|
-
return [hasValue && dropdownIdsSet.size === 0, hasValue && dropdownIdsSet.size > 0];
|
|
222
|
+
return index.getAllCheckedStatus(dropdownItems, value, index.isOption);
|
|
242
223
|
}, [dropdownItems, value]),
|
|
243
|
-
|
|
244
|
-
|
|
224
|
+
showAllChecked = _useMemo[0],
|
|
225
|
+
showIndeterminate = _useMemo[1];
|
|
245
226
|
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
var
|
|
251
|
-
|
|
227
|
+
var valueLatestRef = useLatest.useLatestRef(value);
|
|
228
|
+
var toggleCheckAll = React.useCallback(function () {
|
|
229
|
+
var value = valueLatestRef.current;
|
|
230
|
+
|
|
231
|
+
var _getAllCheckedStatus = index.getAllCheckedStatus(dropdownItems, value, index.isCheckableOption),
|
|
232
|
+
currentAllChecked = _getAllCheckedStatus[0];
|
|
233
|
+
|
|
234
|
+
var shouldChecked = !currentAllChecked; // 当前页的数据选项
|
|
235
|
+
|
|
236
|
+
var items = dropdownItems.filter(index.isCheckableOption);
|
|
237
|
+
var targetIds = items.map(function (_ref) {
|
|
238
|
+
var id = _ref.id;
|
|
239
|
+
return id;
|
|
252
240
|
});
|
|
241
|
+
var allData = arrayUtils.uniqBy(items.concat(mergedData), 'id');
|
|
253
242
|
|
|
254
|
-
if (
|
|
255
|
-
|
|
243
|
+
if (shouldChecked) {
|
|
244
|
+
var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
|
|
245
|
+
var changedIds = nextCheckedIds.filter(function (id) {
|
|
246
|
+
return !value.includes(id);
|
|
247
|
+
});
|
|
248
|
+
var changedItems = allData.filter(function (_ref2) {
|
|
256
249
|
var id = _ref2.id;
|
|
257
|
-
return id;
|
|
258
|
-
})
|
|
250
|
+
return changedIds.includes(id);
|
|
251
|
+
});
|
|
252
|
+
tryChangeValue(nextCheckedIds, changedItems, shouldChecked);
|
|
259
253
|
} else {
|
|
260
|
-
|
|
254
|
+
var _nextCheckedIds = value.filter(function (id) {
|
|
255
|
+
return !targetIds.includes(id);
|
|
256
|
+
});
|
|
257
|
+
|
|
258
|
+
var _changedIds = value.filter(function (id) {
|
|
259
|
+
return !_nextCheckedIds.includes(id);
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
var _changedItems = allData.filter(function (_ref3) {
|
|
263
|
+
var id = _ref3.id;
|
|
264
|
+
return _changedIds.includes(id);
|
|
265
|
+
}); // items
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
tryChangeValue(_nextCheckedIds, _changedItems, shouldChecked);
|
|
261
269
|
}
|
|
262
|
-
}, [dropdownItems, mergedData,
|
|
270
|
+
}, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
|
|
263
271
|
|
|
264
272
|
var renderDefaultFooter = function renderDefaultFooter() {
|
|
265
273
|
var extra = renderExtraFooter ? renderExtraFooter() : null;
|
|
266
274
|
|
|
267
275
|
if (showCheckAll) {
|
|
268
|
-
return /*#__PURE__*/React__default[
|
|
269
|
-
indeterminate:
|
|
270
|
-
checked:
|
|
271
|
-
onChange:
|
|
272
|
-
toggleCheckAll(evt.target.checked);
|
|
273
|
-
}
|
|
276
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
277
|
+
indeterminate: showIndeterminate,
|
|
278
|
+
checked: showAllChecked,
|
|
279
|
+
onChange: toggleCheckAll
|
|
274
280
|
}, i18n.get('checkSelect.checkAll')), extra);
|
|
275
281
|
}
|
|
276
282
|
|
|
@@ -278,10 +284,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
278
284
|
};
|
|
279
285
|
|
|
280
286
|
var expandedViewRef = React.useRef('normal');
|
|
287
|
+
var virtualListProps = {
|
|
288
|
+
height: height,
|
|
289
|
+
itemHeight: itemHeight,
|
|
290
|
+
virtual: virtual,
|
|
291
|
+
data: dropdownItems
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
var _useCheckInVirtual = VirtualList.useCheckInVirtual(virtualListProps),
|
|
295
|
+
inVirtual = _useCheckInVirtual.inVirtual;
|
|
296
|
+
|
|
281
297
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
282
|
-
return /*#__PURE__*/React__default[
|
|
298
|
+
return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
|
|
283
299
|
value: context$1
|
|
284
|
-
}, /*#__PURE__*/React__default[
|
|
300
|
+
}, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
|
|
285
301
|
ref: ref,
|
|
286
302
|
className: cls
|
|
287
303
|
}, rootProps, {
|
|
@@ -290,15 +306,16 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
290
306
|
onOpen: menuVisibleAction.on,
|
|
291
307
|
onClose: menuVisibleAction.off,
|
|
292
308
|
searchable: searchable,
|
|
309
|
+
scrollable: !inVirtual,
|
|
293
310
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
|
294
311
|
loading: loading,
|
|
295
312
|
footer: renderDefaultFooter(),
|
|
296
|
-
trigger: /*#__PURE__*/React__default[
|
|
313
|
+
trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, {
|
|
297
314
|
clearable: clearable,
|
|
298
315
|
placeholder: placeholder,
|
|
299
316
|
// @ts-ignore
|
|
300
317
|
displayRender: displayRender,
|
|
301
|
-
suffix: menuVisible ? /*#__PURE__*/React__default[
|
|
318
|
+
suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
|
|
302
319
|
focused: menuVisible,
|
|
303
320
|
appearance: appearance,
|
|
304
321
|
value: value,
|
|
@@ -327,6 +344,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
327
344
|
expandedViewRef.current = 'normal';
|
|
328
345
|
},
|
|
329
346
|
expandable: showOnlyShowChecked,
|
|
347
|
+
activeExpandable: activeExpandable,
|
|
330
348
|
onExpand: function onExpand(evt) {
|
|
331
349
|
if (!showOnlyShowChecked) return;
|
|
332
350
|
if (disabled) return; // 阻止冒泡触发外层 onClick
|
|
@@ -350,18 +368,14 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
350
368
|
expandedViewRef.current = 'onlyChecked';
|
|
351
369
|
}
|
|
352
370
|
})
|
|
353
|
-
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default[
|
|
371
|
+
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
|
|
354
372
|
itemKey: "id",
|
|
355
|
-
fullHeight: false
|
|
356
|
-
|
|
357
|
-
itemHeight: itemHeight,
|
|
358
|
-
virtual: virtual,
|
|
359
|
-
data: dropdownItems
|
|
360
|
-
}, function (node) {
|
|
373
|
+
fullHeight: false
|
|
374
|
+
}, virtualListProps), function (node) {
|
|
361
375
|
/* 反向 map，搜索删选数据时会对数据进行处理 */
|
|
362
|
-
return 'groupTitle' in node ? /*#__PURE__*/React__default[
|
|
376
|
+
return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
|
|
363
377
|
label: node.groupTitle
|
|
364
|
-
}) : /*#__PURE__*/React__default[
|
|
378
|
+
}) : /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
|
|
365
379
|
option: node,
|
|
366
380
|
depth: node.depth,
|
|
367
381
|
titleRender: proxyTitleRender
|
|
@@ -411,14 +425,14 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
411
425
|
var renderTitle = React.useCallback(function (node, titleRender) {
|
|
412
426
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
413
427
|
var title = titleRender ? titleRender(node) : true;
|
|
414
|
-
return /*#__PURE__*/React__default[
|
|
428
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
415
429
|
className: prefixCls + "__title"
|
|
416
|
-
}, title === true ? /*#__PURE__*/React__default[
|
|
430
|
+
}, title === true ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
417
431
|
checked: node.checked,
|
|
418
432
|
disabled: node.disabled
|
|
419
433
|
}, node.title) : title);
|
|
420
434
|
}, [prefixCls]);
|
|
421
|
-
return /*#__PURE__*/React__default[
|
|
435
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
422
436
|
ref: ref,
|
|
423
437
|
className: cls
|
|
424
438
|
}, rest, {
|
|
@@ -445,10 +459,10 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
445
459
|
rest = tslib.__rest(_a, ["prefixCls", "className", "label"]);
|
|
446
460
|
|
|
447
461
|
var cls = classname.cx(prefixCls, className);
|
|
448
|
-
return /*#__PURE__*/React__default[
|
|
462
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
449
463
|
ref: ref,
|
|
450
464
|
className: cls
|
|
451
|
-
}, rest), /*#__PURE__*/React__default[
|
|
465
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
|
|
452
466
|
}); // @ts-ignore
|
|
453
467
|
|
|
454
468
|
CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
|
|
@@ -462,13 +476,13 @@ if (env.__DEV__) {
|
|
|
462
476
|
|
|
463
477
|
|
|
464
478
|
var renderIndent = function renderIndent(prefixCls, depth) {
|
|
465
|
-
return
|
|
466
|
-
return /*#__PURE__*/React__default[
|
|
479
|
+
return arrayUtils.times(depth, function (index) {
|
|
480
|
+
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
467
481
|
key: index,
|
|
468
482
|
style: {
|
|
469
483
|
alignSelf: 'stretch'
|
|
470
484
|
}
|
|
471
|
-
}, /*#__PURE__*/React__default[
|
|
485
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
472
486
|
className: classname.cx(prefixCls + "__indent")
|
|
473
487
|
}));
|
|
474
488
|
});
|
|
@@ -477,4 +491,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
|
|
|
477
491
|
exports.CheckSelect = CheckSelect;
|
|
478
492
|
exports.CheckSelectOption = CheckSelectOption;
|
|
479
493
|
exports.CheckSelectOptionGroup = CheckSelectOptionGroup;
|
|
480
|
-
//# sourceMappingURL=CheckSelect.js.map
|
package/lib/cjs/context.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -30,4 +30,3 @@ var useCheckSelectContext = function useCheckSelectContext() {
|
|
|
30
30
|
|
|
31
31
|
exports.CheckSelectProvider = CheckSelectProvider;
|
|
32
32
|
exports.useCheckSelectContext = useCheckSelectContext;
|
|
33
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -101,4 +101,3 @@ var parseOptionGroup = function parseOptionGroup(node) {
|
|
|
101
101
|
|
|
102
102
|
exports.parseChildren = parseChildren;
|
|
103
103
|
exports.useData = useData;
|
|
104
|
-
//# sourceMappingURL=use-data.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -75,4 +75,3 @@ var flattenData = function flattenData(_ref2) {
|
|
|
75
75
|
|
|
76
76
|
exports.flattenData = flattenData;
|
|
77
77
|
exports.useFlattenData = useFlattenData;
|
|
78
|
-
//# sourceMappingURL=use-flatten-data.js.map
|
package/lib/cjs/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -21,4 +21,3 @@ exports.CheckSelect = CheckSelect.CheckSelect;
|
|
|
21
21
|
exports.CheckSelectOption = CheckSelect.CheckSelectOption;
|
|
22
22
|
exports.CheckSelectOptionGroup = CheckSelect.CheckSelectOptionGroup;
|
|
23
23
|
exports["default"] = CheckSelect.CheckSelect;
|
|
24
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = "
|
|
15
|
+
var css_248z = ".hi-v4-check-select-option {margin-top: var(--hi-v4-spacing-2, 4px);margin-bottom: var(--hi-v4-spacing-2, 4px);-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%; }.hi-v4-check-select-option__title {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px);font-size: inherit;font-weight: inherit;color: inherit;line-height: inherit; }.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px); }";
|
|
16
16
|
|
|
17
|
-
var __styleInject__ = require('
|
|
17
|
+
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
18
|
|
|
19
19
|
__styleInject__(css_248z);
|
|
20
20
|
|
|
21
21
|
exports["default"] = css_248z;
|
|
22
|
-
//# sourceMappingURL=index.scss.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/check-select
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -65,33 +65,34 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
|
65
65
|
tryChangeValue = _useUncontrolledState[1];
|
|
66
66
|
|
|
67
67
|
var onSelectLatest = useLatest.useLatestCallback(onSelect);
|
|
68
|
-
var
|
|
68
|
+
var usedItemsRef = React.useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
|
|
69
|
+
|
|
70
|
+
var _useState = React.useState([]),
|
|
71
|
+
checkedItems = _useState[0],
|
|
72
|
+
setCheckedItems = _useState[1];
|
|
73
|
+
|
|
69
74
|
var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
|
|
70
75
|
var changedItems = item;
|
|
71
76
|
|
|
72
77
|
if (!Array.isArray(item)) {
|
|
73
78
|
changedItems = [item];
|
|
74
|
-
|
|
75
|
-
if (shouldChecked) {
|
|
76
|
-
selectedItemsRef.current.push(item);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
79
|
onSelectLatest(value, item, shouldChecked);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
var
|
|
82
|
+
var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
|
|
83
|
+
usedItemsRef.current = usedItems; // 使用最新的value
|
|
83
84
|
|
|
84
|
-
var
|
|
85
|
-
.filter(function (item) {
|
|
85
|
+
var nextCheckedItems = usedItems.filter(function (item) {
|
|
86
86
|
return value.includes(item.id);
|
|
87
|
-
}).map(function (item) {
|
|
88
|
-
return 'raw' in item ? item.raw : item;
|
|
89
87
|
});
|
|
90
|
-
|
|
88
|
+
setCheckedItems(nextCheckedItems);
|
|
89
|
+
tryChangeValue(value, // 处理脏数据
|
|
91
90
|
changedItems.map(function (item) {
|
|
92
91
|
return 'raw' in item ? item.raw : item;
|
|
93
|
-
}),
|
|
94
|
-
|
|
92
|
+
}), nextCheckedItems.map(function (item) {
|
|
93
|
+
return 'raw' in item ? item.raw : item;
|
|
94
|
+
}));
|
|
95
|
+
}, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
|
|
95
96
|
|
|
96
97
|
var _useCheckDefault = useCheck.useCheck({
|
|
97
98
|
disabled: disabled,
|
|
@@ -109,7 +110,8 @@ var useCheckSelect = function useCheckSelect(_a) {
|
|
|
109
110
|
value: value,
|
|
110
111
|
tryChangeValue: proxyTryChangeValue,
|
|
111
112
|
onSelect: onOptionCheck,
|
|
112
|
-
isCheckedId: isCheckedId
|
|
113
|
+
isCheckedId: isCheckedId,
|
|
114
|
+
checkedItems: checkedItems
|
|
113
115
|
};
|
|
114
116
|
};
|
|
115
117
|
|
|
@@ -118,4 +120,3 @@ var allowCheck = function allowCheck(option) {
|
|
|
118
120
|
};
|
|
119
121
|
|
|
120
122
|
exports.useCheckSelect = useCheckSelect;
|
|
121
|
-
//# sourceMappingURL=use-check-select.js.map
|