@hi-ui/check-select 4.0.0-beta.4 → 4.0.0-beta.42
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 +131 -80
- package/lib/cjs/context.js +0 -1
- package/lib/cjs/hooks/use-data.js +0 -1
- package/lib/cjs/hooks/use-flatten-data.js +0 -1
- package/lib/cjs/index.js +0 -1
- package/lib/cjs/styles/index.scss.js +2 -3
- package/lib/cjs/use-check-select.js +18 -17
- package/lib/esm/CheckSelect.js +117 -66
- package/lib/esm/context.js +0 -1
- package/lib/esm/hooks/use-data.js +0 -1
- package/lib/esm/hooks/use-flatten-data.js +0 -1
- package/lib/esm/index.js +0 -1
- package/lib/esm/styles/index.scss.js +3 -5
- package/lib/esm/use-check-select.js +19 -18
- package/lib/types/CheckSelect.d.ts +6 -10
- 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/package.json +27 -27
- 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
|
@@ -37,11 +37,11 @@ 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
|
|
|
44
|
-
var
|
|
44
|
+
var arrayUtils = require('@hi-ui/array-utils');
|
|
45
45
|
|
|
46
46
|
var highlighter = require('@hi-ui/highlighter');
|
|
47
47
|
|
|
@@ -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
120
|
var i18n = localeContext.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,18 +204,19 @@ 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 =
|
|
217
|
-
return
|
|
218
|
-
}, [
|
|
210
|
+
var nextData = checkedItems.concat(flattedData);
|
|
211
|
+
return arrayUtils.uniqBy(nextData, 'id');
|
|
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
222
|
var dropdownIds = dropdownItems.filter(function (item) {
|
|
@@ -243,29 +238,53 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
243
238
|
allChecked = _useMemo[0],
|
|
244
239
|
indeterminate = _useMemo[1];
|
|
245
240
|
|
|
241
|
+
var valueLatestRef = useLatest.useLatestRef(value);
|
|
246
242
|
var toggleCheckAll = React.useCallback(function (showChecked) {
|
|
247
|
-
var
|
|
248
|
-
|
|
249
|
-
});
|
|
243
|
+
var value = valueLatestRef.current; // 当前页的数据选项
|
|
244
|
+
|
|
250
245
|
var items = dropdownItems.filter(function (item) {
|
|
251
246
|
return !('groupTitle' in item);
|
|
252
247
|
});
|
|
248
|
+
var targetIds = items.map(function (_ref2) {
|
|
249
|
+
var id = _ref2.id;
|
|
250
|
+
return id;
|
|
251
|
+
});
|
|
252
|
+
var allData = arrayUtils.uniqBy(items.concat(mergedData), 'id');
|
|
253
253
|
|
|
254
254
|
if (showChecked) {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
return id;
|
|
258
|
-
})
|
|
255
|
+
var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
|
|
256
|
+
var changedIds = nextCheckedIds.filter(function (id) {
|
|
257
|
+
return !value.includes(id);
|
|
258
|
+
});
|
|
259
|
+
var changedItems = allData.filter(function (_ref3) {
|
|
260
|
+
var id = _ref3.id;
|
|
261
|
+
return changedIds.includes(id);
|
|
262
|
+
});
|
|
263
|
+
tryChangeValue(nextCheckedIds, changedItems, showChecked);
|
|
259
264
|
} else {
|
|
260
|
-
|
|
265
|
+
var _nextCheckedIds = value.filter(function (id) {
|
|
266
|
+
return !targetIds.includes(id);
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
var _changedIds = value.filter(function (id) {
|
|
270
|
+
return !_nextCheckedIds.includes(id);
|
|
271
|
+
});
|
|
272
|
+
|
|
273
|
+
var _changedItems = allData.filter(function (_ref4) {
|
|
274
|
+
var id = _ref4.id;
|
|
275
|
+
return _changedIds.includes(id);
|
|
276
|
+
}); // items
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
tryChangeValue(_nextCheckedIds, _changedItems, showChecked);
|
|
261
280
|
}
|
|
262
|
-
}, [dropdownItems, mergedData,
|
|
281
|
+
}, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
|
|
263
282
|
|
|
264
283
|
var renderDefaultFooter = function renderDefaultFooter() {
|
|
265
284
|
var extra = renderExtraFooter ? renderExtraFooter() : null;
|
|
266
285
|
|
|
267
286
|
if (showCheckAll) {
|
|
268
|
-
return /*#__PURE__*/React__default[
|
|
287
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
269
288
|
indeterminate: indeterminate,
|
|
270
289
|
checked: allChecked,
|
|
271
290
|
onChange: function onChange(evt) {
|
|
@@ -277,35 +296,39 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
277
296
|
return extra;
|
|
278
297
|
};
|
|
279
298
|
|
|
299
|
+
var expandedViewRef = React.useRef('normal');
|
|
300
|
+
var virtualListProps = {
|
|
301
|
+
height: height,
|
|
302
|
+
itemHeight: itemHeight,
|
|
303
|
+
virtual: virtual,
|
|
304
|
+
data: dropdownItems
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
var _useCheckInVirtual = VirtualList.useCheckInVirtual(virtualListProps),
|
|
308
|
+
inVirtual = _useCheckInVirtual.inVirtual;
|
|
309
|
+
|
|
280
310
|
var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
|
|
281
|
-
return /*#__PURE__*/React__default[
|
|
311
|
+
return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
|
|
282
312
|
value: context$1
|
|
283
|
-
}, /*#__PURE__*/React__default[
|
|
313
|
+
}, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
|
|
284
314
|
ref: ref,
|
|
285
315
|
className: cls
|
|
286
316
|
}, rootProps, {
|
|
287
317
|
visible: menuVisible,
|
|
288
|
-
onOpen: function onOpen() {
|
|
289
|
-
if (showOnlyShowChecked) {
|
|
290
|
-
if (filterItems) {
|
|
291
|
-
setFilterItems(null);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
menuVisibleAction.on();
|
|
296
|
-
},
|
|
297
318
|
disabled: disabled,
|
|
319
|
+
onOpen: menuVisibleAction.on,
|
|
298
320
|
onClose: menuVisibleAction.off,
|
|
299
321
|
searchable: searchable,
|
|
322
|
+
scrollable: !inVirtual,
|
|
300
323
|
onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
|
|
301
324
|
loading: loading,
|
|
302
325
|
footer: renderDefaultFooter(),
|
|
303
|
-
trigger: /*#__PURE__*/React__default[
|
|
326
|
+
trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, {
|
|
304
327
|
clearable: clearable,
|
|
305
328
|
placeholder: placeholder,
|
|
306
329
|
// @ts-ignore
|
|
307
330
|
displayRender: displayRender,
|
|
308
|
-
suffix: menuVisible ? /*#__PURE__*/React__default[
|
|
331
|
+
suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
|
|
309
332
|
focused: menuVisible,
|
|
310
333
|
appearance: appearance,
|
|
311
334
|
value: value,
|
|
@@ -313,30 +336,59 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
313
336
|
onChange: tryChangeValue,
|
|
314
337
|
data: mergedData,
|
|
315
338
|
invalid: invalid,
|
|
316
|
-
|
|
317
|
-
if (showOnlyShowChecked)
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
339
|
+
onClick: function onClick(evt) {
|
|
340
|
+
if (!showOnlyShowChecked) return;
|
|
341
|
+
if (disabled) return; // 阻止 Picker 调用 onOpen/onClose
|
|
342
|
+
|
|
343
|
+
evt.preventDefault();
|
|
344
|
+
|
|
345
|
+
if (filterItems) {
|
|
346
|
+
setFilterItems(null);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
if (menuVisible) {
|
|
350
|
+
if (expandedViewRef.current === 'normal') {
|
|
351
|
+
menuVisibleAction.off();
|
|
352
|
+
}
|
|
353
|
+
} else {
|
|
354
|
+
menuVisibleAction.on();
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
expandedViewRef.current = 'normal';
|
|
358
|
+
},
|
|
359
|
+
expandable: showOnlyShowChecked,
|
|
360
|
+
activeExpandable: activeExpandable,
|
|
361
|
+
onExpand: function onExpand(evt) {
|
|
362
|
+
if (!showOnlyShowChecked) return;
|
|
363
|
+
if (disabled) return; // 阻止冒泡触发外层 onClick
|
|
364
|
+
|
|
365
|
+
evt.stopPropagation();
|
|
366
|
+
evt.preventDefault();
|
|
367
|
+
setFilterItems(function () {
|
|
368
|
+
return mergedData.filter(function (item) {
|
|
369
|
+
return value.includes(item.id);
|
|
322
370
|
});
|
|
371
|
+
});
|
|
372
|
+
|
|
373
|
+
if (menuVisible) {
|
|
374
|
+
if (expandedViewRef.current !== 'normal') {
|
|
375
|
+
menuVisibleAction.off();
|
|
376
|
+
}
|
|
377
|
+
} else {
|
|
378
|
+
menuVisibleAction.on();
|
|
323
379
|
}
|
|
324
380
|
|
|
325
|
-
|
|
381
|
+
expandedViewRef.current = 'onlyChecked';
|
|
326
382
|
}
|
|
327
383
|
})
|
|
328
|
-
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default[
|
|
384
|
+
}), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
|
|
329
385
|
itemKey: "id",
|
|
330
|
-
fullHeight: false
|
|
331
|
-
|
|
332
|
-
itemHeight: itemHeight,
|
|
333
|
-
virtual: virtual,
|
|
334
|
-
data: dropdownItems
|
|
335
|
-
}, function (node) {
|
|
386
|
+
fullHeight: false
|
|
387
|
+
}, virtualListProps), function (node) {
|
|
336
388
|
/* 反向 map，搜索删选数据时会对数据进行处理 */
|
|
337
|
-
return 'groupTitle' in node ? /*#__PURE__*/React__default[
|
|
389
|
+
return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
|
|
338
390
|
label: node.groupTitle
|
|
339
|
-
}) : /*#__PURE__*/React__default[
|
|
391
|
+
}) : /*#__PURE__*/React__default["default"].createElement(CheckSelectOption, {
|
|
340
392
|
option: node,
|
|
341
393
|
depth: node.depth,
|
|
342
394
|
titleRender: proxyTitleRender
|
|
@@ -386,14 +438,14 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
386
438
|
var renderTitle = React.useCallback(function (node, titleRender) {
|
|
387
439
|
// 如果 titleRender 返回 `true`，则使用默认 title
|
|
388
440
|
var title = titleRender ? titleRender(node) : true;
|
|
389
|
-
return /*#__PURE__*/React__default[
|
|
441
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
390
442
|
className: prefixCls + "__title"
|
|
391
|
-
}, title === true ? /*#__PURE__*/React__default[
|
|
443
|
+
}, title === true ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
|
|
392
444
|
checked: node.checked,
|
|
393
445
|
disabled: node.disabled
|
|
394
446
|
}, node.title) : title);
|
|
395
447
|
}, [prefixCls]);
|
|
396
|
-
return /*#__PURE__*/React__default[
|
|
448
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
397
449
|
ref: ref,
|
|
398
450
|
className: cls
|
|
399
451
|
}, rest, {
|
|
@@ -420,10 +472,10 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
420
472
|
rest = tslib.__rest(_a, ["prefixCls", "className", "label"]);
|
|
421
473
|
|
|
422
474
|
var cls = classname.cx(prefixCls, className);
|
|
423
|
-
return /*#__PURE__*/React__default[
|
|
475
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
424
476
|
ref: ref,
|
|
425
477
|
className: cls
|
|
426
|
-
}, rest), /*#__PURE__*/React__default[
|
|
478
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label));
|
|
427
479
|
}); // @ts-ignore
|
|
428
480
|
|
|
429
481
|
CheckSelectOptionGroup.HiName = 'CheckSelectOptionGroup';
|
|
@@ -438,12 +490,12 @@ if (env.__DEV__) {
|
|
|
438
490
|
|
|
439
491
|
var renderIndent = function renderIndent(prefixCls, depth) {
|
|
440
492
|
return times.times(depth, function (index) {
|
|
441
|
-
return /*#__PURE__*/React__default[
|
|
493
|
+
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
442
494
|
key: index,
|
|
443
495
|
style: {
|
|
444
496
|
alignSelf: 'stretch'
|
|
445
497
|
}
|
|
446
|
-
}, /*#__PURE__*/React__default[
|
|
498
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
447
499
|
className: classname.cx(prefixCls + "__indent")
|
|
448
500
|
}));
|
|
449
501
|
});
|
|
@@ -452,4 +504,3 @@ var renderIndent = function renderIndent(prefixCls, depth) {
|
|
|
452
504
|
exports.CheckSelect = CheckSelect;
|
|
453
505
|
exports.CheckSelectOption = CheckSelectOption;
|
|
454
506
|
exports.CheckSelectOptionGroup = CheckSelectOptionGroup;
|
|
455
|
-
//# sourceMappingURL=CheckSelect.js.map
|
package/lib/cjs/context.js
CHANGED
package/lib/cjs/index.js
CHANGED
|
@@ -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
|
|
@@ -19,7 +19,7 @@ var React = require('react');
|
|
|
19
19
|
|
|
20
20
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var arrayUtils = require('@hi-ui/array-utils');
|
|
23
23
|
|
|
24
24
|
var useCheck = require('@hi-ui/use-check');
|
|
25
25
|
|
|
@@ -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
|