@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 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 | - | { 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: CheckSelectEventData, keyword: string) => React.ReactNode | - |
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
- ### CheckSelectEventData
70
+ ### CheckSelectItemEventData
71
71
 
72
72
  | 参数 | 说明 | 类型 | 可选值 | 默认值 |
73
73
  | -------- | -------------------------------- | ------- | ------------- | ------ |
@@ -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('rc-virtual-list');
40
+ var VirtualList = require('@hi-ui/virtual-list');
41
41
 
42
42
  var picker = require('@hi-ui/picker');
43
43
 
44
- var lodash = require('lodash');
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", "wrap", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
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 _useToggle = useToggle.useToggle(),
121
- menuVisible = _useToggle[0],
122
- menuVisibleAction = _useToggle[1];
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: 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['default'].createElement(Checkbox__default['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['default'].createElement(highlighter.Highlighter, {
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 = selectedItems.concat(flattedData);
217
- return lodash.uniqBy(nextData, 'id');
218
- }, [selectedItems, flattedData]);
210
+ var nextData = checkedItems.concat(flattedData);
211
+ return arrayUtils.uniqBy(nextData, 'id');
212
+ }, [checkedItems, flattedData]);
219
213
 
220
- var _useState2 = React.useState(null),
221
- filterItems = _useState2[0],
222
- setFilterItems = _useState2[1];
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 checkedItems = mergedData.filter(function (item) {
248
- return value.includes(item.id);
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
- tryChangeValue(items.map(function (_ref2) {
256
- var id = _ref2.id;
257
- return id;
258
- }), checkedItems, showChecked);
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
- tryChangeValue([], checkedItems, showChecked);
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, value, tryChangeValue]);
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['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Checkbox__default['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['default'].createElement(context.CheckSelectProvider, {
311
+ return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
282
312
  value: context$1
283
- }, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
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['default'].createElement(tagInput.TagInputMock, {
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['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
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
- onExpand: function onExpand() {
317
- if (showOnlyShowChecked) {
318
- setFilterItems(function () {
319
- return mergedData.filter(function (item) {
320
- return value.includes(item.id);
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
- menuVisibleAction.on();
381
+ expandedViewRef.current = 'onlyChecked';
326
382
  }
327
383
  })
328
- }), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default['default'].createElement(VirtualList__default['default'], {
384
+ }), typeAssertion.isArrayNonEmpty(dropdownItems) ? /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
329
385
  itemKey: "id",
330
- fullHeight: false,
331
- height: height,
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['default'].createElement(CheckSelectOptionGroup, {
389
+ return 'groupTitle' in node ? /*#__PURE__*/React__default["default"].createElement(CheckSelectOptionGroup, {
338
390
  label: node.groupTitle
339
- }) : /*#__PURE__*/React__default['default'].createElement(CheckSelectOption, {
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['default'].createElement("div", {
441
+ return /*#__PURE__*/React__default["default"].createElement("div", {
390
442
  className: prefixCls + "__title"
391
- }, title === true ? /*#__PURE__*/React__default['default'].createElement(Checkbox__default['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['default'].createElement("div", Object.assign({
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['default'].createElement("div", Object.assign({
475
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
424
476
  ref: ref,
425
477
  className: cls
426
- }, rest), /*#__PURE__*/React__default['default'].createElement("span", null, label));
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['default'].createElement("span", {
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['default'].createElement("span", {
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,11 +12,10 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-check-select-option {\n margin-top: 4px;\n margin-top: var(--hi-v4-spacing-2, 4px);\n margin-bottom: 4px;\n margin-bottom: var(--hi-v4-spacing-2, 4px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n cursor: pointer;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n font-weight: 400;\n font-weight: var(--hi-v4-text-weight-normal, 400);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option__indent {\n display: inline-block;\n width: 16px;\n height: 100%; }\n.hi-v4-check-select-option__title {\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n padding: 6px;\n padding: var(--hi-v4-spacing-3, 6px);\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n line-height: inherit; }\n.hi-v4-check-select-option:hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--focused {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-check-select-option--disabled {\n cursor: not-allowed;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-check-select-option-group {\n display: inline-block;\n margin-top: 12px;\n margin-top: var(--hi-v4-spacing-6, 12px);\n margin-bottom: 4px;\n margin-bottom: var(--hi-v4-spacing-2, 4px);\n padding: 6px 0 6px 6px;\n padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n font-weight: 400;\n font-weight: var(--hi-v4-text-weight-normal, 400);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-check-select-option-group:first-child {\n margin-top: 4px;\n margin-top: var(--hi-v4-spacing-2, 4px); }\n";
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('style-inject/dist/style-inject.es.js')["default"];
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 lodash = require('lodash');
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 selectedItemsRef = React.useRef([]);
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 selectedItems = lodash.uniqBy([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
82
+ var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
83
+ usedItemsRef.current = usedItems; // 使用最新的value
83
84
 
84
- var checkedItems = selectedItems // 使用最新的value
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
- tryChangeValue(value, // TODO: 处理脏数据
88
+ setCheckedItems(nextCheckedItems);
89
+ tryChangeValue(value, // 处理脏数据
91
90
  changedItems.map(function (item) {
92
91
  return 'raw' in item ? item.raw : item;
93
- }), checkedItems);
94
- }, [tryChangeValue, onSelectLatest, flattedDataRef, selectedItemsRef]);
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