@hi-ui/check-select 4.0.6 → 4.0.8

package/lib/cjs/hooks/use-cache/lib/esm/index.js

@@ -0,0 +1,43 @@
+/** @LICENSE
+ * @hi-ui/check-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+/** @LICENSE
+ * @hi-ui/use-cache
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
+ */
+
+
+var useCache = function useCache(data) {
+  var _useState = React.useState(data),
+      internalData = _useState[0],
+      setInternalData = _useState[1];
+
+  React.useEffect(function () {
+    setInternalData(data);
+  }, [data]);
+  return [internalData, setInternalData];
+};
+
+exports.useCache = useCache;

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

@@ -25,6 +25,8 @@ var useCheck = require('@hi-ui/use-check');
 
 var useLatest = require('@hi-ui/use-latest');
 
+var index = require('./hooks/use-cache/lib/esm/index.js');
+
 var useData = require('./hooks/use-data.js');
 
 var useFlattenData = require('./hooks/use-flatten-data.js');
@@ -54,8 +56,13 @@ var useCheckSelect = function useCheckSelect(_a) {
     data: dataProp,
     children: children
   });
+
+  var _useCache = index.useCache(data),
+      cacheData = _useCache[0],
+      setCacheData = _useCache[1];
+
   var flattedData = useFlattenData.useFlattenData({
-    data: data,
+    data: cacheData,
     fieldNames: fieldNames
   });
   var flattedDataRef = useLatest.useLatestRef(flattedData);
@@ -70,7 +77,23 @@ var useCheckSelect = function useCheckSelect(_a) {
   var _useState = React.useState([]),
       checkedItems = _useState[0],
       setCheckedItems = _useState[1];
-
+  /**
+   * 更新缓存的 data 数据
+   * 兼容在搜索异步加载结果的场景时，将选中的项加入到 cacheData 数据中，这样再次打开下拉框时可以显示之前选中的值
+   */
+
+
+  var updateCacheData = React.useCallback(function (nextCheckedItems) {
+    var newData = [].concat(cacheData);
+    nextCheckedItems.forEach(function (item) {
+      if (!flattedData.find(function (dataItem) {
+        return dataItem.id === item.id;
+      })) {
+        newData.push('raw' in item ? item.raw : item);
+      }
+    });
+    setCacheData(newData);
+  }, [cacheData, flattedData, setCacheData]);
   var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
     var changedItems = item;
 
@@ -91,8 +114,10 @@ var useCheckSelect = function useCheckSelect(_a) {
       return 'raw' in item ? item.raw : item;
     }), nextCheckedItems.map(function (item) {
       return 'raw' in item ? item.raw : item;
-    }));
-  }, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
+    })); // 每次更新 value 时，同步更新下 cacheData
+
+    updateCacheData(nextCheckedItems);
+  }, [flattedDataRef, tryChangeValue, updateCacheData, onSelectLatest]);
 
   var _useCheckDefault = useCheck.useCheck({
     disabled: disabled,

package/lib/esm/hooks/use-cache/lib/esm/index.js

@@ -0,0 +1,36 @@
+/** @LICENSE
+ * @hi-ui/check-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-select#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useEffect } from 'react';
+/** @LICENSE
+ * @hi-ui/use-cache
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
+ */
+
+var useCache = function useCache(data) {
+  var _useState = useState(data),
+      internalData = _useState[0],
+      setInternalData = _useState[1];
+
+  useEffect(function () {
+    setInternalData(data);
+  }, [data]);
+  return [internalData, setInternalData];
+};
+
+export { useCache };

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

@@ -13,6 +13,7 @@ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { uniqBy } from '@hi-ui/array-utils';
 import { useCheck } from '@hi-ui/use-check';
 import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
+import { useCache } from './hooks/use-cache/lib/esm/index.js';
 import { useData } from './hooks/use-data.js';
 import { useFlattenData } from './hooks/use-flatten-data.js';
 import '@hi-ui/env';
@@ -38,8 +39,13 @@ var useCheckSelect = function useCheckSelect(_a) {
     data: dataProp,
     children: children
   });
+
+  var _useCache = useCache(data),
+      cacheData = _useCache[0],
+      setCacheData = _useCache[1];
+
   var flattedData = useFlattenData({
-    data: data,
+    data: cacheData,
     fieldNames: fieldNames
   });
   var flattedDataRef = useLatestRef(flattedData);
@@ -54,7 +60,23 @@ var useCheckSelect = function useCheckSelect(_a) {
   var _useState = useState([]),
       checkedItems = _useState[0],
       setCheckedItems = _useState[1];
+  /**
+   * 更新缓存的 data 数据
+   * 兼容在搜索异步加载结果的场景时，将选中的项加入到 cacheData 数据中，这样再次打开下拉框时可以显示之前选中的值
+   */
 
+
+  var updateCacheData = useCallback(function (nextCheckedItems) {
+    var newData = [].concat(cacheData);
+    nextCheckedItems.forEach(function (item) {
+      if (!flattedData.find(function (dataItem) {
+        return dataItem.id === item.id;
+      })) {
+        newData.push('raw' in item ? item.raw : item);
+      }
+    });
+    setCacheData(newData);
+  }, [cacheData, flattedData, setCacheData]);
   var proxyTryChangeValue = useCallback(function (value, item, shouldChecked) {
     var changedItems = item;
 
@@ -75,8 +97,10 @@ var useCheckSelect = function useCheckSelect(_a) {
       return 'raw' in item ? item.raw : item;
     }), nextCheckedItems.map(function (item) {
       return 'raw' in item ? item.raw : item;
-    }));
-  }, [tryChangeValue, onSelectLatest, flattedDataRef, usedItemsRef]);
+    })); // 每次更新 value 时，同步更新下 cacheData
+
+    updateCacheData(nextCheckedItems);
+  }, [flattedDataRef, tryChangeValue, updateCacheData, onSelectLatest]);
 
   var _useCheckDefault = useCheck({
     disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -50,10 +50,10 @@
     "@hi-ui/func-utils": "^4.0.1",
     "@hi-ui/highlighter": "^4.0.5",
     "@hi-ui/icons": "^4.0.4",
-    "@hi-ui/input": "^4.0.4",
-    "@hi-ui/picker": "^4.0.4",
+    "@hi-ui/input": "^4.0.5",
+    "@hi-ui/picker": "^4.0.5",
     "@hi-ui/popper": "^4.0.4",
-    "@hi-ui/tag-input": "^4.0.4",
+    "@hi-ui/tag-input": "^4.0.5",
     "@hi-ui/times": "^4.0.1",
     "@hi-ui/tree-utils": "^4.0.2",
     "@hi-ui/type-assertion": "^4.0.1",
@@ -78,5 +78,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "864630e4ef35b8a3c85e56dcb5e2948bf1f9728f"
+  "gitHead": "db81f4e6bffc562f26ab0655cb71ec160c5e2c22"
 }