@hi-ui/check-select 4.0.0-beta.28 → 4.0.0-beta.30

package/lib/cjs/CheckSelect.js

@@ -114,7 +114,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onSearchProp = _a.onSearch,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      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"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
 
   var i18n = localeContext.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
@@ -133,34 +133,20 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
 
     return item.title;
-  }, [displayRenderProp]); // 搜索时临时选中缓存数据
-
-  var _useState = React.useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = useLatest.useLatestCallback(function (value, item, shouldChecked) {
-    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
-
-    if (shouldChecked) {
-      // TODO：as useCheckList
-      setSelectedItems(function (prev) {
-        return [].concat(prev, [item]);
-      });
-    }
-  });
+  }, [displayRenderProp]);
 
   var _b = useCheckSelect.useCheckSelect(Object.assign(Object.assign({}, rest), {
     children: children,
     fieldNames: fieldNames,
-    onSelect: onSelect
+    onSelect: onSelectProp
   })),
       rootProps = _b.rootProps,
       context$1 = tslib.__rest(_b, ["rootProps"]);
 
   var value = context$1.value,
       tryChangeValue = context$1.tryChangeValue,
-      flattedData = context$1.flattedData; // ************************** 搜索 ************************* //
+      flattedData = context$1.flattedData,
+      checkedItems = context$1.checkedItems; // ************************** 搜索 ************************* //
 
   var _c = useSearchMode.useAsyncSearch({
     dataSource: dataSource,
@@ -216,16 +202,16 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var shouldUseSearch = !!searchValue && !hasError;
   var showData = React.useMemo(function () {
     return shouldUseSearch ? stateInSearch.data : flattedData;
-  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 下拉菜单不能合并（因为树形数据，不知道是第几级）
+  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
 
   var mergedData = React.useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
+    var nextData = checkedItems.concat(flattedData);
     return arrayUtils.uniqBy(nextData, 'id');
-  }, [selectedItems, flattedData]);
+  }, [checkedItems, flattedData]);
 
-  var _useState2 = React.useState(null),
-      filterItems = _useState2[0],
-      setFilterItems = _useState2[1];
+  var _useState = React.useState(null),
+      filterItems = _useState[0],
+      setFilterItems = _useState[1];
 
   var dropdownItems = filterItems || showData;
   var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
@@ -250,23 +236,47 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       allChecked = _useMemo[0],
       indeterminate = _useMemo[1];
 
+  var valueLatestRef = useLatest.useLatestRef(value);
   var toggleCheckAll = React.useCallback(function (showChecked) {
-    var checkedItems = mergedData.filter(function (item) {
-      return value.includes(item.id);
-    });
+    var value = valueLatestRef.current; // 当前页的数据选项
+
     var items = dropdownItems.filter(function (item) {
       return !('groupTitle' in item);
     });
+    var targetIds = items.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    });
+    var allData = arrayUtils.uniqBy(items.concat(mergedData), 'id');
 
     if (showChecked) {
-      tryChangeValue(items.map(function (_ref2) {
-        var id = _ref2.id;
-        return id;
-      }), checkedItems, showChecked);
+      var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
+      var changedIds = nextCheckedIds.filter(function (id) {
+        return !value.includes(id);
+      });
+      var changedItems = allData.filter(function (_ref3) {
+        var id = _ref3.id;
+        return changedIds.includes(id);
+      });
+      tryChangeValue(nextCheckedIds, changedItems, showChecked);
     } else {
-      tryChangeValue([], checkedItems, showChecked);
+      var _nextCheckedIds = value.filter(function (id) {
+        return !targetIds.includes(id);
+      });
+
+      var _changedIds = value.filter(function (id) {
+        return !_nextCheckedIds.includes(id);
+      });
+
+      var _changedItems = allData.filter(function (_ref4) {
+        var id = _ref4.id;
+        return _changedIds.includes(id);
+      }); // items
+
+
+      tryChangeValue(_nextCheckedIds, _changedItems, showChecked);
     }
-  }, [dropdownItems, mergedData, value, tryChangeValue]);
+  }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
 
   var renderDefaultFooter = function renderDefaultFooter() {
     var extra = renderExtraFooter ? renderExtraFooter() : null;

package/lib/cjs/use-check-select.js

@@ -65,33 +65,34 @@ var useCheckSelect = function useCheckSelect(_a) {
       tryChangeValue = _useUncontrolledState[1];
 
   var onSelectLatest = useLatest.useLatestCallback(onSelect);
-  var selectedItemsRef = React.useRef([]);
+  var usedItemsRef = React.useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
+
+  var _useState = React.useState([]),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
+
   var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
     var changedItems = item;
 
     if (!Array.isArray(item)) {
       changedItems = [item];
-
-      if (shouldChecked) {
-        selectedItemsRef.current.push(item);
-      }
-
       onSelectLatest(value, item, shouldChecked);
     }
 
-    var selectedItems = arrayUtils.uniqBy([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
+    var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
+    usedItemsRef.current = usedItems; // 使用最新的value
 
-    var checkedItems = selectedItems // 使用最新的value
-    .filter(function (item) {
+    var nextCheckedItems = usedItems.filter(function (item) {
       return value.includes(item.id);
-    }).map(function (item) {
-      return 'raw' in item ? item.raw : item;
     });
-    tryChangeValue(value, // TODO: 处理脏数据
+    setCheckedItems(nextCheckedItems);
+    tryChangeValue(value, // 处理脏数据
     changedItems.map(function (item) {
       return 'raw' in item ? item.raw : item;
-    }), checkedItems);
-  }, [tryChangeValue, onSelectLatest, flattedDataRef, selectedItemsRef]);
+    }), nextCheckedItems.map(function (item) {
+      return 'raw' in item ? item.raw : item;
+    }));
+  }, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
 
   var _useCheckDefault = useCheck.useCheck({
     disabled: disabled,
@@ -109,7 +110,8 @@ var useCheckSelect = function useCheckSelect(_a) {
     value: value,
     tryChangeValue: proxyTryChangeValue,
     onSelect: onOptionCheck,
-    isCheckedId: isCheckedId
+    isCheckedId: isCheckedId,
+    checkedItems: checkedItems
   };
 };
 

package/lib/esm/CheckSelect.js

@@ -8,13 +8,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useState, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState, useRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useCheckSelect } from './use-check-select.js';
 import { UpOutlined, DownOutlined } from '@hi-ui/icons';
 import { CheckSelectProvider, useCheckSelectContext } from './context.js';
-import { useLatestCallback, useLatestRef } from '@hi-ui/use-latest';
+import { useLatestRef } from '@hi-ui/use-latest';
 import Checkbox from '@hi-ui/checkbox';
 import { TagInputMock } from '@hi-ui/tag-input';
 import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
@@ -72,7 +72,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       onSearchProp = _a.onSearch,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      rest = __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"]);
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "onOpen", "onClose", "appearance", "invalid", "dataSource", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames"]);
 
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp; // ************************** Picker ************************* //
@@ -91,34 +91,20 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
 
     return item.title;
-  }, [displayRenderProp]); // 搜索时临时选中缓存数据
-
-  var _useState = useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = useLatestCallback(function (value, item, shouldChecked) {
-    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, shouldChecked);
-
-    if (shouldChecked) {
-      // TODO：as useCheckList
-      setSelectedItems(function (prev) {
-        return [].concat(prev, [item]);
-      });
-    }
-  });
+  }, [displayRenderProp]);
 
   var _b = useCheckSelect(Object.assign(Object.assign({}, rest), {
     children: children,
     fieldNames: fieldNames,
-    onSelect: onSelect
+    onSelect: onSelectProp
   })),
       rootProps = _b.rootProps,
       context = __rest(_b, ["rootProps"]);
 
   var value = context.value,
       tryChangeValue = context.tryChangeValue,
-      flattedData = context.flattedData; // ************************** 搜索 ************************* //
+      flattedData = context.flattedData,
+      checkedItems = context.checkedItems; // ************************** 搜索 ************************* //
 
   var _c = useAsyncSearch({
     dataSource: dataSource,
@@ -174,16 +160,16 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var shouldUseSearch = !!searchValue && !hasError;
   var showData = useMemo(function () {
     return shouldUseSearch ? stateInSearch.data : flattedData;
-  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 下拉菜单不能合并（因为树形数据，不知道是第几级）
+  }, [shouldUseSearch, flattedData, stateInSearch.data]); // 根据 id 进行合并，注意必须是扁平数据
 
   var mergedData = useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
+    var nextData = checkedItems.concat(flattedData);
     return uniqBy(nextData, 'id');
-  }, [selectedItems, flattedData]);
+  }, [checkedItems, flattedData]);
 
-  var _useState2 = useState(null),
-      filterItems = _useState2[0],
-      setFilterItems = _useState2[1];
+  var _useState = useState(null),
+      filterItems = _useState[0],
+      setFilterItems = _useState[1];
 
   var dropdownItems = filterItems || showData;
   var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
@@ -208,23 +194,47 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       allChecked = _useMemo[0],
       indeterminate = _useMemo[1];
 
+  var valueLatestRef = useLatestRef(value);
   var toggleCheckAll = useCallback(function (showChecked) {
-    var checkedItems = mergedData.filter(function (item) {
-      return value.includes(item.id);
-    });
+    var value = valueLatestRef.current; // 当前页的数据选项
+
     var items = dropdownItems.filter(function (item) {
       return !('groupTitle' in item);
     });
+    var targetIds = items.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    });
+    var allData = uniqBy(items.concat(mergedData), 'id');
 
     if (showChecked) {
-      tryChangeValue(items.map(function (_ref2) {
-        var id = _ref2.id;
-        return id;
-      }), checkedItems, showChecked);
+      var nextCheckedIds = Array.from(new Set(value.concat(targetIds)));
+      var changedIds = nextCheckedIds.filter(function (id) {
+        return !value.includes(id);
+      });
+      var changedItems = allData.filter(function (_ref3) {
+        var id = _ref3.id;
+        return changedIds.includes(id);
+      });
+      tryChangeValue(nextCheckedIds, changedItems, showChecked);
     } else {
-      tryChangeValue([], checkedItems, showChecked);
+      var _nextCheckedIds = value.filter(function (id) {
+        return !targetIds.includes(id);
+      });
+
+      var _changedIds = value.filter(function (id) {
+        return !_nextCheckedIds.includes(id);
+      });
+
+      var _changedItems = allData.filter(function (_ref4) {
+        var id = _ref4.id;
+        return _changedIds.includes(id);
+      }); // items
+
+
+      tryChangeValue(_nextCheckedIds, _changedItems, showChecked);
     }
-  }, [dropdownItems, mergedData, value, tryChangeValue]);
+  }, [dropdownItems, mergedData, valueLatestRef, tryChangeValue]);
 
   var renderDefaultFooter = function renderDefaultFooter() {
     var extra = renderExtraFooter ? renderExtraFooter() : null;

package/lib/esm/use-check-select.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import { useRef, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { uniqBy } from '@hi-ui/array-utils';
 import { useCheck } from '@hi-ui/use-check';
@@ -49,33 +49,34 @@ var useCheckSelect = function useCheckSelect(_a) {
       tryChangeValue = _useUncontrolledState[1];
 
   var onSelectLatest = useLatestCallback(onSelect);
-  var selectedItemsRef = useRef([]);
+  var usedItemsRef = useRef([]); // 扁平化的选中数据，可能包括异步临时选中缓存数据
+
+  var _useState = useState([]),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
+
   var proxyTryChangeValue = useCallback(function (value, item, shouldChecked) {
     var changedItems = item;
 
     if (!Array.isArray(item)) {
       changedItems = [item];
-
-      if (shouldChecked) {
-        selectedItemsRef.current.push(item);
-      }
-
       onSelectLatest(value, item, shouldChecked);
     }
 
-    var selectedItems = uniqBy([].concat(changedItems, selectedItemsRef.current, flattedDataRef.current), 'id'); // 调用用户的select
+    var usedItems = uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
+    usedItemsRef.current = usedItems; // 使用最新的value
 
-    var checkedItems = selectedItems // 使用最新的value
-    .filter(function (item) {
+    var nextCheckedItems = usedItems.filter(function (item) {
       return value.includes(item.id);
-    }).map(function (item) {
-      return 'raw' in item ? item.raw : item;
     });
-    tryChangeValue(value, // TODO: 处理脏数据
+    setCheckedItems(nextCheckedItems);
+    tryChangeValue(value, // 处理脏数据
     changedItems.map(function (item) {
       return 'raw' in item ? item.raw : item;
-    }), checkedItems);
-  }, [tryChangeValue, onSelectLatest, flattedDataRef, selectedItemsRef]);
+    }), nextCheckedItems.map(function (item) {
+      return 'raw' in item ? item.raw : item;
+    }));
+  }, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
 
   var _useCheckDefault = useCheck({
     disabled: disabled,
@@ -93,7 +94,8 @@ var useCheckSelect = function useCheckSelect(_a) {
     value: value,
     tryChangeValue: proxyTryChangeValue,
     onSelect: onOptionCheck,
-    isCheckedId: isCheckedId
+    isCheckedId: isCheckedId,
+    checkedItems: checkedItems
   };
 };
 

package/lib/types/CheckSelect.d.ts

@@ -31,10 +31,6 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger'>, UseCheck
      * 是否可清空
      */
     clearable?: boolean;
-    /**
-     * 是否开启换行全展示
-     */
-    wrap?: boolean;
     /**
      * 是否点击清理 tags
      */

package/lib/types/context.d.ts

@@ -7,6 +7,7 @@ export declare const CheckSelectProvider: import("react").Provider<Omit<{
     tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: import("react").ReactText) => boolean;
+    checkedItems: import("./types").CheckSelectEventData[];
 }, "rootProps"> | null>;
 export declare const useCheckSelectContext: () => Omit<{
     rootProps: {};
@@ -16,4 +17,5 @@ export declare const useCheckSelectContext: () => Omit<{
     tryChangeValue: (value: import("react").ReactText[], item: import("./types").CheckSelectEventData | import("./types").CheckSelectEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: import("react").ReactText) => boolean;
+    checkedItems: import("./types").CheckSelectEventData[];
 }, "rootProps">;

package/lib/types/use-check-select.d.ts

@@ -9,6 +9,7 @@ export declare const useCheckSelect: ({ data: dataProp, children, disabled, valu
     tryChangeValue: (value: React.ReactText[], item: CheckSelectEventData | CheckSelectEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("@hi-ui/use-check").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: React.ReactText) => boolean;
+    checkedItems: CheckSelectEventData[];
 };
 export interface UseCheckSelectProps {
     /**
@@ -25,7 +26,7 @@ export interface UseCheckSelectProps {
      * changedItems: 变更的选项集合
      * checkedItems：所有选中项的选项集合
      */
-    onChange?: (value: React.ReactText[], changedItems?: CheckSelectDataItem[], checkedItems?: CheckSelectDataItem[]) => void;
+    onChange?: (value: React.ReactText[], changedItems: CheckSelectDataItem[], checkedItems: CheckSelectDataItem[]) => void;
     /**
      * 选中值时回调。暂不对外暴露
      * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "4.0.0-beta.28",
+  "version": "4.0.0-beta.30",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,19 +44,19 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^4.0.0-beta.7",
-    "@hi-ui/checkbox": "^4.0.0-beta.10",
+    "@hi-ui/checkbox": "^4.0.0-beta.11",
     "@hi-ui/classname": "^4.0.0-beta.0",
     "@hi-ui/core": "^4.0.0-beta.8",
     "@hi-ui/core-css": "^4.0.0-beta.5",
     "@hi-ui/env": "^4.0.0-beta.0",
-    "@hi-ui/func-utils": "^4.0.0-beta.11",
-    "@hi-ui/highlighter": "^4.0.0-beta.8",
+    "@hi-ui/func-utils": "^4.0.0-beta.12",
+    "@hi-ui/highlighter": "^4.0.0-beta.9",
     "@hi-ui/icons": "^4.0.0-beta.10",
-    "@hi-ui/input": "^4.0.0-beta.13",
-    "@hi-ui/locale-context": "^4.0.0-beta.17",
-    "@hi-ui/picker": "^4.0.0-beta.22",
-    "@hi-ui/popper": "^4.0.0-beta.12",
-    "@hi-ui/tag-input": "^4.0.0-beta.17",
+    "@hi-ui/input": "^4.0.0-beta.14",
+    "@hi-ui/locale-context": "^4.0.0-beta.18",
+    "@hi-ui/picker": "^4.0.0-beta.23",
+    "@hi-ui/popper": "^4.0.0-beta.13",
+    "@hi-ui/tag-input": "^4.0.0-beta.18",
     "@hi-ui/times": "^4.0.0-beta.5",
     "@hi-ui/tree-utils": "^4.0.0-beta.4",
     "@hi-ui/type-assertion": "^4.0.0-beta.4",
@@ -64,10 +64,10 @@
     "@hi-ui/use-children": "^4.0.0-beta.4",
     "@hi-ui/use-data-source": "^4.0.0-beta.5",
     "@hi-ui/use-latest": "^4.0.0-beta.4",
-    "@hi-ui/use-search-mode": "^4.0.0-beta.17",
+    "@hi-ui/use-search-mode": "^4.0.0-beta.18",
     "@hi-ui/use-toggle": "^4.0.0-beta.4",
     "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4",
-    "rc-virtual-list": "^3.4.1"
+    "rc-virtual-list": "^3.4.7"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
@@ -78,5 +78,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "798e91b8086b524e9ef1df8fef404bbf284198f5"
+  "gitHead": "1639653e72981dcce445765c8b80866adcffcad0"
 }