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

package/lib/cjs/CheckTreeSelect.js

@@ -49,6 +49,8 @@ var funcUtils = require('@hi-ui/func-utils');
 
 var useSearchMode = require('@hi-ui/use-search-mode');
 
+var useCheck = require('./hooks/use-check.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -79,7 +81,8 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onClose = _a.onClose,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      checkedMode = _a.checkedMode,
+      _a$checkedMode = _a.checkedMode,
+      checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
       _a$defaultExpandAll = _a.defaultExpandAll,
       defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
       expandedIdsProp = _a.expandedIds,
@@ -101,7 +104,10 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       displayRender = _a.displayRender,
       placeholderProp = _a.placeholder,
       appearance = _a.appearance,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "onOpen", "onClose", "fieldNames", "checkedMode", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance"]);
+      virtual = _a.virtual,
+      itemHeight = _a.itemHeight,
+      height = _a.height,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "onOpen", "onClose", "fieldNames", "checkedMode", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height"]);
 
   var i18n = localeContext.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
@@ -112,8 +118,7 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClose: onClose
   }),
       menuVisible = _useUncontrolledToggl[0],
-      menuVisibleAction = _useUncontrolledToggl[1]; // const [viewSelected, setViewSelected] = useState(false)
-
+      menuVisibleAction = _useUncontrolledToggl[1];
   /**
    * 转换对象
    */
@@ -123,11 +128,22 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     return node[fieldNames[key] || key];
   }, [fieldNames]);
   var flattedData = React.useMemo(function () {
-    return treeUtils.flattenTree(data, function (node) {
-      node.id = getKeyFields(node.raw, 'id'); // @ts-ignore
-
-      node.title = getKeyFields(node.raw, 'title');
-      return node;
+    return treeUtils.baseFlattenTree({
+      tree: data,
+      childrenFieldName: function childrenFieldName(node) {
+        return getKeyFields(node, 'children');
+      },
+      transform: function transform(node) {
+        var _a, _b;
+
+        var flattedNode = node;
+        var raw = node.raw;
+        flattedNode.id = getKeyFields(raw, 'id');
+        flattedNode.title = getKeyFields(raw, 'title');
+        flattedNode.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
+        flattedNode.isLeaf = (_b = getKeyFields(raw, 'isLeaf')) !== null && _b !== void 0 ? _b : false;
+        return flattedNode;
+      }
     });
   }, [data, getKeyFields]); // TODO: 抽离展开hook
   // TODO: onLoadChildren 和 defaultExpandAll 共存时
@@ -145,34 +161,27 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       expandedIds = _useUncontrolledState[0],
       tryChangeExpandedIds = _useUncontrolledState[1];
 
-  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
-      value = _useUncontrolledState2[0],
-      tryChangeValue = _useUncontrolledState2[1]; // 搜索时临时选中缓存数据
-
-
-  var _useState = React.useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = React.useCallback(function (checkedIds, option) {
-    tryChangeValue(checkedIds, option); // 存取异步选中数据
-
-    setSelectedItems(function (prev) {
-      var next = [].concat(prev);
-      var targetNode = option.targetNode,
-          checked = option.checked;
-
-      if (checked) {
-        next.push(targetNode);
-      } else {
-        next.filter(function (item) {
-          return item.id !== targetNode.id;
-        });
-      }
-
-      return next;
-    });
-  }, [tryChangeValue]); // ************************** 异步搜索 ************************* //
+  var _useCheck = useCheck.useCheck(checkedMode, disabled, flattedData, defaultValue, valueProp, onChange),
+      value = _useCheck[0],
+      tryChangeValue = _useCheck[1],
+      onNodeCheck = _useCheck[2],
+      checkedNodes = _useCheck[3],
+      parsedCheckedIds = _useCheck[4];
+
+  var onCheck = React.useCallback(function (checkedIds, option) {
+    var targetNode = option.targetNode,
+        checked = option.checked;
+    onNodeCheck(targetNode, checked);
+  }, [onNodeCheck]);
+  var onValueChange = React.useCallback(function (values, targetItem, shouldChecked) {
+    // 清空
+    if (values.length === 0) {
+      tryChangeValue([], null, shouldChecked, []);
+    } else {
+      // 操作单个
+      onNodeCheck(targetItem[0], shouldChecked);
+    }
+  }, [tryChangeValue, onNodeCheck]); // ************************** 异步搜索 ************************* //
   // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
 
   var _b = useSearchMode.useAsyncSearch({
@@ -238,9 +247,9 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }; // 下拉菜单不能合并（因为树形数据，不知道是第几级）
 
   var mergedData = React.useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
+    var nextData = checkedNodes.concat(flattedData);
     return arrayUtils.uniqBy(nextData, 'id');
-  }, [selectedItems, flattedData]);
+  }, [checkedNodes, flattedData]);
   var cls = classname.cx(prefixCls, className); // 过滤掉未选中的数据
   // const tagList = useMemo(() => {
   //   // @ts-ignore
@@ -281,22 +290,29 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       focused: menuVisible,
       appearance: appearance,
       value: value,
-      onChange: tryChangeValue,
+      onChange: onValueChange,
       data: mergedData,
       // @ts-ignore
       invalid: invalid
     })
-  }), typeAssertion.isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
+  }), typeAssertion.isArrayNonEmpty(treeProps.data) ?
+  /*#__PURE__*/
+  // 只做渲染，不做逻辑处理（比如搜索过滤后，check操作的是对过滤后的data操作，这是不符合预期的）
+  React__default["default"].createElement(tree.Tree, Object.assign({
     className: prefixCls + "__tree",
     selectable: false,
     checkable: true,
     checkOnSelect: true,
-    checkedMode: checkedMode,
-    checkedIds: value,
-    onCheck: onSelect,
+    checkedMode: checkedMode === 'SEPARATE' ? 'SEPARATE' : 'ALL',
+    checkedIds: parsedCheckedIds,
+    onCheck: onCheck,
     // TODO: 支持 fieldNames
-    // 禁用时被选中的样式处理
-    onLoadChildren: onLoadChildren
+    // @ts-ignore
+    onLoadChildren: onLoadChildren,
+    fieldNames: fieldNames,
+    virtual: virtual,
+    itemHeight: itemHeight,
+    height: height
   }, treeProps)) : null);
 });
 

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

@@ -0,0 +1,92 @@
+/** @LICENSE
+ * @hi-ui/check-tree-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-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');
+
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+
+var useCheck$1 = require('@hi-ui/use-check');
+
+var index = require('../utils/index.js');
+/**
+ * 用于 tree 组件复选的 hook
+ */
+
+
+var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultCheckedIds, checkedIdsProp, onCheck) {
+  // 搜索时临时选中缓存数据
+  var _useState = React.useState([]),
+      checkedNodes = _useState[0],
+      setCheckedNodes = _useState[1];
+
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultCheckedIds, checkedIdsProp, function (checkedIds, checkedNode, checked, semiCheckedIds) {
+    var nextCheckedNodes = flattedData.filter(function (item) {
+      return checkedIds.includes(item.id);
+    });
+    setCheckedNodes(nextCheckedNodes);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(checkedIds, {
+      checkedNodes: nextCheckedNodes.map(function (item) {
+        return item.raw;
+      }),
+      targetNode: checkedNode,
+      semiCheckedIds: semiCheckedIds,
+      checked: checked
+    });
+  }),
+      checkedIds = _useUncontrolledState[0],
+      trySetCheckedIds = _useUncontrolledState[1]; // 入口数据处理
+
+
+  var parsedCheckedIds = React.useMemo(function () {
+    return index.parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
+  }, [checkedMode, checkedIds, flattedData]);
+  var cascaded = checkedMode !== 'SEPARATE';
+
+  var _useCascadeCheck = useCheck$1.useCascadeCheck({
+    cascaded: cascaded,
+    disabled: disabled,
+    flattedData: flattedData,
+    checkedIds: parsedCheckedIds,
+    onCheck: function onCheck(checkedIds, checkedNode, checked, semiCheckedIds) {
+      // 出口数据处理
+      var processedIds = index.processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
+      trySetCheckedIds(processedIds, checkedNode, checked, semiCheckedIds);
+    },
+    allowCheck: allowCheck
+  }),
+      onNodeCheck = _useCascadeCheck[0];
+
+  var proxyOnNodeCheck = React.useCallback(function (target, shouldChecked) {
+    // 保证 target 来源于原数据自身，而不是tree内部
+    var targetNode = flattedData.find(function (item) {
+      return item.id === target.id;
+    });
+
+    if (targetNode) {
+      onNodeCheck(targetNode, shouldChecked);
+    }
+  }, [onNodeCheck, flattedData]);
+  return [checkedIds, trySetCheckedIds, proxyOnNodeCheck, checkedNodes, parsedCheckedIds];
+};
+
+var allowCheck = function allowCheck(targetItem) {
+  if (targetItem.disabled) {
+    return false;
+  }
+
+  return true;
+};
+
+exports.useCheck = useCheck;

package/lib/cjs/utils/index.js

@@ -0,0 +1,162 @@
+/** @LICENSE
+ * @hi-ui/check-tree-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-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 treeUtils = require('@hi-ui/tree-utils');
+
+var typeAssertion = require('@hi-ui/type-assertion');
+/**
+ * 处理选中的回显数据
+ *
+ * @param checkedIds 当前所有被选中的节点 ID 集合
+ * @param nodeEntries 所有数据的Map 集合
+ * @param type 数据回显方式
+ */
+
+
+var processCheckedIds = function processCheckedIds(type, checkedIds, flattenData, allowCheck) {
+  var keySet = new Set(checkedIds);
+
+  switch (type) {
+    case 'CHILD':
+      return checkedIds.filter(function (id) {
+        var node = treeUtils.fFindNodeById(flattenData, id);
+
+        if (node) {
+          var children = node.children;
+
+          if (typeAssertion.isArrayNonEmpty(children)) {
+            if (children.filter(allowCheck).every(function (node) {
+              return keySet.has(node.id);
+            })) {
+              return false;
+            }
+          }
+        } // 没有孩子节点，保留
+
+
+        return true;
+      });
+
+    case 'PARENT':
+      return checkedIds.filter(function (id) {
+        var node = treeUtils.fFindNodeById(flattenData, id);
+
+        if (node) {
+          // 向上递归遍历是否被勾选
+          var ancestors = treeUtils.getNodeAncestors(node);
+
+          if (ancestors.some(function (parent) {
+            return keySet.has(parent.id);
+          })) {
+            return false;
+          }
+        }
+
+        return true;
+      });
+  }
+
+  return checkedIds;
+};
+/**
+ * 根据传入的 checkedIds 解析全选/半选数据
+ */
+
+
+var parseCheckDataDirty = function parseCheckDataDirty(type, checkedIds, flattenData, allowCheck) {
+  switch (type) {
+    case 'CHILD':
+    case 'PARENT':
+      return dirtyCheck(checkedIds, flattenData, allowCheck);
+  }
+
+  return checkedIds;
+};
+
+function dirtyCheck(checkedIds, flattenData, allowCheck) {
+  var nodeEntities = flattenData.reduce(function (prev, cur) {
+    prev[cur.id] = cur;
+    return prev;
+  }, {});
+  var checkedIdsSet = new Set(checkedIds.filter(function (id) {
+    return !!nodeEntities[id];
+  }));
+  var depthEntities = new Map();
+  var maxDepth = 0; // Convert entities by depth for calculation
+
+  Object.keys(nodeEntities).forEach(function (id) {
+    var entity = nodeEntities[id];
+    var depth = entity.depth;
+    var depthSet = depthEntities.get(depth);
+
+    if (!depthSet) {
+      depthSet = new Set();
+      depthEntities.set(depth, depthSet);
+    }
+
+    depthSet.add(entity);
+    maxDepth = Math.max(maxDepth, depth);
+  });
+  return fillCheck(checkedIdsSet, depthEntities, nodeEntities, maxDepth, allowCheck);
+}
+/**
+ *  对 checkedIds 级联遗漏选项 id 填充
+ *
+ *  1. 把所有嵌套孩子节点 allowCheck 的都标记为 checked
+ *  2. 祖先节点从下至上维护 checked 状态
+ */
+
+
+function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck) {
+  var checkedIdsSet = new Set(checkedIds);
+  checkedIdsSet.forEach(function (id) {
+    var checkedNode = nodeEntities[id];
+    var nestedChildren = treeUtils.findNestedChildren(checkedNode, allowCheck);
+    nestedChildren.forEach(function (child) {
+      checkedIdsSet.add(child.id);
+    });
+  }); // 缓存中间结果，优化查询
+
+  var visitedIds = new Map();
+
+  for (var depth = maxDepth - 1; depth >= 0; --depth) {
+    var entities = depthEntities.get(depth);
+    entities === null || entities === void 0 ? void 0 : entities.forEach(function (entity) {
+      var id = entity.id,
+          children = entity.children;
+      if (visitedIds.has(id)) return;
+
+      if (typeAssertion.isArrayNonEmpty(children)) {
+        var shouldChecked = !children.some(function (child) {
+          if (visitedIds.has(child.id)) {
+            return !visitedIds.get(child.id);
+          }
+
+          return !checkedIdsSet.has(child.id);
+        });
+        visitedIds.set(id, shouldChecked);
+
+        if (shouldChecked && allowCheck(entity)) {
+          checkedIdsSet.add(id);
+        }
+      }
+    });
+  }
+
+  return Array.from(checkedIdsSet);
+}
+
+exports.parseCheckDataDirty = parseCheckDataDirty;
+exports.processCheckedIds = processCheckedIds;

package/lib/esm/CheckTreeSelect.js

@@ -8,14 +8,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { Tree } from '@hi-ui/tree';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { Picker } from '@hi-ui/picker';
-import { flattenTree } from '@hi-ui/tree-utils';
+import { baseFlattenTree } from '@hi-ui/tree-utils';
 import { isUndef, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import { uniqBy } from '@hi-ui/array-utils';
 import { Highlighter } from '@hi-ui/highlighter';
@@ -24,6 +24,7 @@ import { UpOutlined, DownOutlined } from '@hi-ui/icons';
 import { useLocaleContext } from '@hi-ui/locale-context';
 import { callAllFuncs } from '@hi-ui/func-utils';
 import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useHighlightSearch, useSearchMode } from '@hi-ui/use-search-mode';
+import { useCheck } from './hooks/use-check.js';
 var TREE_SELECT_PREFIX = getPrefixCls('check-tree-select');
 var DEFAULT_DATA = [];
 var DEFAULT_VALUE = [];
@@ -46,7 +47,8 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       onClose = _a.onClose,
       _a$fieldNames = _a.fieldNames,
       fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
-      checkedMode = _a.checkedMode,
+      _a$checkedMode = _a.checkedMode,
+      checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
       _a$defaultExpandAll = _a.defaultExpandAll,
       defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
       expandedIdsProp = _a.expandedIds,
@@ -68,7 +70,10 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       displayRender = _a.displayRender,
       placeholderProp = _a.placeholder,
       appearance = _a.appearance,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "onOpen", "onClose", "fieldNames", "checkedMode", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance"]);
+      virtual = _a.virtual,
+      itemHeight = _a.itemHeight,
+      height = _a.height,
+      rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "onOpen", "onClose", "fieldNames", "checkedMode", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "onSearch", "clearable", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height"]);
 
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
@@ -79,8 +84,7 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose: onClose
   }),
       menuVisible = _useUncontrolledToggl[0],
-      menuVisibleAction = _useUncontrolledToggl[1]; // const [viewSelected, setViewSelected] = useState(false)
-
+      menuVisibleAction = _useUncontrolledToggl[1];
   /**
    * 转换对象
    */
@@ -90,11 +94,22 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     return node[fieldNames[key] || key];
   }, [fieldNames]);
   var flattedData = useMemo(function () {
-    return flattenTree(data, function (node) {
-      node.id = getKeyFields(node.raw, 'id'); // @ts-ignore
-
-      node.title = getKeyFields(node.raw, 'title');
-      return node;
+    return baseFlattenTree({
+      tree: data,
+      childrenFieldName: function childrenFieldName(node) {
+        return getKeyFields(node, 'children');
+      },
+      transform: function transform(node) {
+        var _a, _b;
+
+        var flattedNode = node;
+        var raw = node.raw;
+        flattedNode.id = getKeyFields(raw, 'id');
+        flattedNode.title = getKeyFields(raw, 'title');
+        flattedNode.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
+        flattedNode.isLeaf = (_b = getKeyFields(raw, 'isLeaf')) !== null && _b !== void 0 ? _b : false;
+        return flattedNode;
+      }
     });
   }, [data, getKeyFields]); // TODO: 抽离展开hook
   // TODO: onLoadChildren 和 defaultExpandAll 共存时
@@ -112,34 +127,27 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       expandedIds = _useUncontrolledState[0],
       tryChangeExpandedIds = _useUncontrolledState[1];
 
-  var _useUncontrolledState2 = useUncontrolledState(defaultValue, valueProp, onChange),
-      value = _useUncontrolledState2[0],
-      tryChangeValue = _useUncontrolledState2[1]; // 搜索时临时选中缓存数据
-
-
-  var _useState = useState([]),
-      selectedItems = _useState[0],
-      setSelectedItems = _useState[1];
-
-  var onSelect = useCallback(function (checkedIds, option) {
-    tryChangeValue(checkedIds, option); // 存取异步选中数据
-
-    setSelectedItems(function (prev) {
-      var next = [].concat(prev);
-      var targetNode = option.targetNode,
-          checked = option.checked;
-
-      if (checked) {
-        next.push(targetNode);
-      } else {
-        next.filter(function (item) {
-          return item.id !== targetNode.id;
-        });
-      }
-
-      return next;
-    });
-  }, [tryChangeValue]); // ************************** 异步搜索 ************************* //
+  var _useCheck = useCheck(checkedMode, disabled, flattedData, defaultValue, valueProp, onChange),
+      value = _useCheck[0],
+      tryChangeValue = _useCheck[1],
+      onNodeCheck = _useCheck[2],
+      checkedNodes = _useCheck[3],
+      parsedCheckedIds = _useCheck[4];
+
+  var onCheck = useCallback(function (checkedIds, option) {
+    var targetNode = option.targetNode,
+        checked = option.checked;
+    onNodeCheck(targetNode, checked);
+  }, [onNodeCheck]);
+  var onValueChange = useCallback(function (values, targetItem, shouldChecked) {
+    // 清空
+    if (values.length === 0) {
+      tryChangeValue([], null, shouldChecked, []);
+    } else {
+      // 操作单个
+      onNodeCheck(targetItem[0], shouldChecked);
+    }
+  }, [tryChangeValue, onNodeCheck]); // ************************** 异步搜索 ************************* //
   // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
 
   var _b = useAsyncSearch({
@@ -205,9 +213,9 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   }; // 下拉菜单不能合并（因为树形数据，不知道是第几级）
 
   var mergedData = useMemo(function () {
-    var nextData = selectedItems.concat(flattedData);
+    var nextData = checkedNodes.concat(flattedData);
     return uniqBy(nextData, 'id');
-  }, [selectedItems, flattedData]);
+  }, [checkedNodes, flattedData]);
   var cls = cx(prefixCls, className); // 过滤掉未选中的数据
   // const tagList = useMemo(() => {
   //   // @ts-ignore
@@ -248,22 +256,29 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       focused: menuVisible,
       appearance: appearance,
       value: value,
-      onChange: tryChangeValue,
+      onChange: onValueChange,
       data: mergedData,
       // @ts-ignore
       invalid: invalid
     })
-  }), isArrayNonEmpty(treeProps.data) ? /*#__PURE__*/React.createElement(Tree, Object.assign({
+  }), isArrayNonEmpty(treeProps.data) ?
+  /*#__PURE__*/
+  // 只做渲染，不做逻辑处理（比如搜索过滤后，check操作的是对过滤后的data操作，这是不符合预期的）
+  React.createElement(Tree, Object.assign({
     className: prefixCls + "__tree",
     selectable: false,
     checkable: true,
     checkOnSelect: true,
-    checkedMode: checkedMode,
-    checkedIds: value,
-    onCheck: onSelect,
+    checkedMode: checkedMode === 'SEPARATE' ? 'SEPARATE' : 'ALL',
+    checkedIds: parsedCheckedIds,
+    onCheck: onCheck,
     // TODO: 支持 fieldNames
-    // 禁用时被选中的样式处理
-    onLoadChildren: onLoadChildren
+    // @ts-ignore
+    onLoadChildren: onLoadChildren,
+    fieldNames: fieldNames,
+    virtual: virtual,
+    itemHeight: itemHeight,
+    height: height
   }, treeProps)) : null);
 });
 

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

@@ -0,0 +1,82 @@
+/** @LICENSE
+ * @hi-ui/check-tree-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-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, useMemo, useCallback } from 'react';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useCascadeCheck } from '@hi-ui/use-check';
+import { parseCheckDataDirty, processCheckedIds } from '../utils/index.js';
+/**
+ * 用于 tree 组件复选的 hook
+ */
+
+var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultCheckedIds, checkedIdsProp, onCheck) {
+  // 搜索时临时选中缓存数据
+  var _useState = useState([]),
+      checkedNodes = _useState[0],
+      setCheckedNodes = _useState[1];
+
+  var _useUncontrolledState = useUncontrolledState(defaultCheckedIds, checkedIdsProp, function (checkedIds, checkedNode, checked, semiCheckedIds) {
+    var nextCheckedNodes = flattedData.filter(function (item) {
+      return checkedIds.includes(item.id);
+    });
+    setCheckedNodes(nextCheckedNodes);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(checkedIds, {
+      checkedNodes: nextCheckedNodes.map(function (item) {
+        return item.raw;
+      }),
+      targetNode: checkedNode,
+      semiCheckedIds: semiCheckedIds,
+      checked: checked
+    });
+  }),
+      checkedIds = _useUncontrolledState[0],
+      trySetCheckedIds = _useUncontrolledState[1]; // 入口数据处理
+
+
+  var parsedCheckedIds = useMemo(function () {
+    return parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
+  }, [checkedMode, checkedIds, flattedData]);
+  var cascaded = checkedMode !== 'SEPARATE';
+
+  var _useCascadeCheck = useCascadeCheck({
+    cascaded: cascaded,
+    disabled: disabled,
+    flattedData: flattedData,
+    checkedIds: parsedCheckedIds,
+    onCheck: function onCheck(checkedIds, checkedNode, checked, semiCheckedIds) {
+      // 出口数据处理
+      var processedIds = processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
+      trySetCheckedIds(processedIds, checkedNode, checked, semiCheckedIds);
+    },
+    allowCheck: allowCheck
+  }),
+      onNodeCheck = _useCascadeCheck[0];
+
+  var proxyOnNodeCheck = useCallback(function (target, shouldChecked) {
+    // 保证 target 来源于原数据自身，而不是tree内部
+    var targetNode = flattedData.find(function (item) {
+      return item.id === target.id;
+    });
+
+    if (targetNode) {
+      onNodeCheck(targetNode, shouldChecked);
+    }
+  }, [onNodeCheck, flattedData]);
+  return [checkedIds, trySetCheckedIds, proxyOnNodeCheck, checkedNodes, parsedCheckedIds];
+};
+
+var allowCheck = function allowCheck(targetItem) {
+  if (targetItem.disabled) {
+    return false;
+  }
+
+  return true;
+};
+
+export { useCheck };

package/lib/esm/utils/index.js

@@ -0,0 +1,153 @@
+/** @LICENSE
+ * @hi-ui/check-tree-select
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/check-tree-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 { fFindNodeById, getNodeAncestors, findNestedChildren } from '@hi-ui/tree-utils';
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+/**
+ * 处理选中的回显数据
+ *
+ * @param checkedIds 当前所有被选中的节点 ID 集合
+ * @param nodeEntries 所有数据的Map 集合
+ * @param type 数据回显方式
+ */
+
+var processCheckedIds = function processCheckedIds(type, checkedIds, flattenData, allowCheck) {
+  var keySet = new Set(checkedIds);
+
+  switch (type) {
+    case 'CHILD':
+      return checkedIds.filter(function (id) {
+        var node = fFindNodeById(flattenData, id);
+
+        if (node) {
+          var children = node.children;
+
+          if (isArrayNonEmpty(children)) {
+            if (children.filter(allowCheck).every(function (node) {
+              return keySet.has(node.id);
+            })) {
+              return false;
+            }
+          }
+        } // 没有孩子节点，保留
+
+
+        return true;
+      });
+
+    case 'PARENT':
+      return checkedIds.filter(function (id) {
+        var node = fFindNodeById(flattenData, id);
+
+        if (node) {
+          // 向上递归遍历是否被勾选
+          var ancestors = getNodeAncestors(node);
+
+          if (ancestors.some(function (parent) {
+            return keySet.has(parent.id);
+          })) {
+            return false;
+          }
+        }
+
+        return true;
+      });
+  }
+
+  return checkedIds;
+};
+/**
+ * 根据传入的 checkedIds 解析全选/半选数据
+ */
+
+
+var parseCheckDataDirty = function parseCheckDataDirty(type, checkedIds, flattenData, allowCheck) {
+  switch (type) {
+    case 'CHILD':
+    case 'PARENT':
+      return dirtyCheck(checkedIds, flattenData, allowCheck);
+  }
+
+  return checkedIds;
+};
+
+function dirtyCheck(checkedIds, flattenData, allowCheck) {
+  var nodeEntities = flattenData.reduce(function (prev, cur) {
+    prev[cur.id] = cur;
+    return prev;
+  }, {});
+  var checkedIdsSet = new Set(checkedIds.filter(function (id) {
+    return !!nodeEntities[id];
+  }));
+  var depthEntities = new Map();
+  var maxDepth = 0; // Convert entities by depth for calculation
+
+  Object.keys(nodeEntities).forEach(function (id) {
+    var entity = nodeEntities[id];
+    var depth = entity.depth;
+    var depthSet = depthEntities.get(depth);
+
+    if (!depthSet) {
+      depthSet = new Set();
+      depthEntities.set(depth, depthSet);
+    }
+
+    depthSet.add(entity);
+    maxDepth = Math.max(maxDepth, depth);
+  });
+  return fillCheck(checkedIdsSet, depthEntities, nodeEntities, maxDepth, allowCheck);
+}
+/**
+ *  对 checkedIds 级联遗漏选项 id 填充
+ *
+ *  1. 把所有嵌套孩子节点 allowCheck 的都标记为 checked
+ *  2. 祖先节点从下至上维护 checked 状态
+ */
+
+
+function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck) {
+  var checkedIdsSet = new Set(checkedIds);
+  checkedIdsSet.forEach(function (id) {
+    var checkedNode = nodeEntities[id];
+    var nestedChildren = findNestedChildren(checkedNode, allowCheck);
+    nestedChildren.forEach(function (child) {
+      checkedIdsSet.add(child.id);
+    });
+  }); // 缓存中间结果，优化查询
+
+  var visitedIds = new Map();
+
+  for (var depth = maxDepth - 1; depth >= 0; --depth) {
+    var entities = depthEntities.get(depth);
+    entities === null || entities === void 0 ? void 0 : entities.forEach(function (entity) {
+      var id = entity.id,
+          children = entity.children;
+      if (visitedIds.has(id)) return;
+
+      if (isArrayNonEmpty(children)) {
+        var shouldChecked = !children.some(function (child) {
+          if (visitedIds.has(child.id)) {
+            return !visitedIds.get(child.id);
+          }
+
+          return !checkedIdsSet.has(child.id);
+        });
+        visitedIds.set(id, shouldChecked);
+
+        if (shouldChecked && allowCheck(entity)) {
+          checkedIdsSet.add(id);
+        }
+      }
+    });
+  }
+
+  return Array.from(checkedIdsSet);
+}
+
+export { parseCheckDataDirty, processCheckedIds };

package/lib/types/CheckTreeSelect.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { FieldNames, CheckTreeSelectDataItem } from './types';
-import { FlattedTreeNodeData, TreeNodeEventData } from '@hi-ui/tree';
+import { CheckTreeSelectDataItem, CheckTreeSelectItemEventData, CheckTreeSelectAppearanceEnum } from './types';
+import { FlattedTreeNodeData } from '@hi-ui/tree';
 import { PickerProps } from '@hi-ui/picker';
-import { HiBaseAppearanceEnum } from '@hi-ui/core';
-import { UseDataSource } from '@hi-ui/use-data-source';
 /**
  * TODO: What is CheckTreeSelect
  */
@@ -16,7 +14,7 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
     /**
      * 设置 data 中 id, title, disabled, children 对应的 key (3.0 新增)	object	-	{ title: 'title', id: 'id',disabled:'disabled', children: 'children'}
      */
-    fieldNames?: FieldNames;
+    fieldNames?: Record<string, string>;
     /**
      * 多选数据交互时回填、回显模式
      * PARENT: 当所有子节点被选中时将只保留父节点
@@ -25,10 +23,6 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
      * SEPARATE：父子完全独立受控
      */
     checkedMode?: 'ALL' | 'PARENT' | 'CHILD' | 'SEPARATE';
-    /**
-     * 数据选择类型
-     */
-    type?: 'single' | 'multiple';
     /**
      * 是否有边框
      */
@@ -82,19 +76,14 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
     /**
      * 自定义渲染节点的 title 内容
      */
-    render?: (node: TreeNodeEventData) => React.ReactNode;
+    render?: (node: CheckTreeSelectItemEventData) => React.ReactNode;
     /**
      * 点击异步加载子项
      */
-    onLoadChildren?: (node: TreeNodeEventData) => void | Promise<CheckTreeSelectDataItem[] | void>;
+    onLoadChildren?: (node: CheckTreeSelectItemEventData) => void | Promise<CheckTreeSelectDataItem[] | void>;
     /**
-     * 从远端获取数据，初始时是否自动加载
+     * 异步加载数据。暂不对外暴露
      */
-    autoload?: boolean;
-    /**
-     * 异步加载数据
-     */
-    dataSource?: UseDataSource<CheckTreeSelectDataItem[]>;
     /**
      * 没有选项时的提示
      */
@@ -111,13 +100,13 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
      * 选中时触发
      * checkedIds: 选中项 ID 集合
      * checkedNodes: 选中项数据项集合
-     * targetNode: 当前操作节点
+     * targetNode: 当前操作节点，清空时为 null
      * checked: 当前操作是否为选中操作
      */
     onChange?: (checkedIds: React.ReactText[], options: {
         checkedNodes: CheckTreeSelectDataItem[];
         semiCheckedIds: React.ReactText[];
-        targetNode: TreeNodeEventData;
+        targetNode: CheckTreeSelectItemEventData | null;
         checked: boolean;
     }) => void;
     /**
@@ -127,7 +116,21 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
     /**
      * 设置展现形式
      */
-    appearance?: HiBaseAppearanceEnum;
+    appearance?: CheckTreeSelectAppearanceEnum;
+    /**
+     * 设置虚拟滚动容器的可视高度。暂不对外暴露
+     * @private
+     */
+    height?: number;
+    /**
+     * 设置虚拟列表每项的固定高度。暂不对外暴露
+     * @private
+     */
+    itemHeight?: number;
+    /**
+     * 	设置 `true` 开启虚拟滚动
+     */
+    virtual?: boolean;
 }
 /**
  * 在 checkedIdsSet 为数据合法的情况下，查找所有的半选中态的节点 ids

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FlattedCheckTreeSelectDataItem, CheckTreeSelectItemEventData, CheckTreeSelectDataItem } from '../types';
+/**
+ * 用于 tree 组件复选的 hook
+ */
+export declare const useCheck: (checkedMode: string, disabled: boolean, flattedData: FlattedCheckTreeSelectDataItem[], defaultCheckedIds: React.ReactText[], checkedIdsProp?: React.ReactText[] | undefined, onCheck?: ((checkedIds: React.ReactText[], options: {
+    checkedNodes: CheckTreeSelectDataItem[];
+    semiCheckedIds: React.ReactText[];
+    targetNode: CheckTreeSelectItemEventData;
+    checked: boolean;
+}) => void) | undefined) => readonly [React.ReactText[], (stateOrFunction: React.SetStateAction<React.ReactText[]>, ...args: any[]) => void, (target: FlattedCheckTreeSelectDataItem, shouldChecked: boolean) => void, FlattedCheckTreeSelectDataItem[], React.ReactText[]];

package/lib/types/types.d.ts

@@ -1,21 +1,49 @@
+import type { HiBaseAppearanceEnum, HiBaseDataItem } from '@hi-ui/core';
 import React from 'react';
-export interface CheckTreeSelectDataItem {
+import { TreeNodeEventData } from '@hi-ui/tree';
+export interface CheckTreeSelectDataItem extends HiBaseDataItem {
     /**
      * 节点唯一 id
      */
-    id: React.ReactText;
+    id?: React.ReactText;
     /**
      * 节点标题
      */
-    title: React.ReactNode;
+    title?: React.ReactNode;
     /**
-     * 子级数据
+     * 子级数据列表
      */
     children?: CheckTreeSelectDataItem[];
     /**
-     * 是否禁用
+     * 是否禁用该节点
      */
     disabled?: boolean;
+    /**
+     * 是否为叶子节点，当 children 为空数组也表示为叶子结点
+     */
+    isLeaf?: boolean;
+}
+export interface FlattedCheckTreeSelectDataItem extends CheckTreeSelectDataItem {
+    /**
+     * 节点唯一 id
+     */
+    id: React.ReactText;
+    /**
+     * 该节点的子节点列表
+     */
+    children?: FlattedCheckTreeSelectDataItem[];
+    /**
+     * 关联用户传入的原始数据对象
+     */
+    raw: CheckTreeSelectDataItem;
+    /**
+     * 该节点的层级，从 0（顶层）开始
+     */
+    depth: number;
+    /**
+     * 该节点的父节点
+     */
+    parent?: FlattedCheckTreeSelectDataItem;
 }
 export interface CheckTreeSelectDataSource<T = any> {
     /**
@@ -49,9 +77,6 @@ export interface CheckTreeSelectDataSource<T = any> {
 }
 export declare type FilterOptionFunc = (keyword: string, item: CheckTreeSelectDataItem) => boolean;
 export declare type DataSourceFunc = (keyword: string) => CheckTreeSelectDataSource;
-export declare type FieldNames = {
-    id?: string;
-    title?: string;
-    disabled?: string;
-    children?: string;
-};
+export interface CheckTreeSelectItemEventData extends TreeNodeEventData {
+}
+export declare type CheckTreeSelectAppearanceEnum = HiBaseAppearanceEnum | undefined;

package/lib/types/utils/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * 处理选中的回显数据
+ *
+ * @param checkedIds 当前所有被选中的节点 ID 集合
+ * @param nodeEntries 所有数据的Map 集合
+ * @param type 数据回显方式
+ */
+export declare const processCheckedIds: (type: string, checkedIds: React.ReactText[], flattenData: any, allowCheck: (node: any) => boolean) => React.ReactText[];
+/**
+ * 根据传入的 checkedIds 解析全选/半选数据
+ */
+export declare const parseCheckDataDirty: (type: string, checkedIds: React.ReactText[], flattenData: any, allowCheck?: ((node: any) => boolean) | undefined) => React.ReactText[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-tree-select",
-  "version": "4.0.0-beta.30",
+  "version": "4.0.0-beta.33",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -48,18 +48,19 @@
     "@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/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/tree": "^4.0.0-beta.28",
+    "@hi-ui/locale-context": "^4.0.0-beta.18",
+    "@hi-ui/picker": "^4.0.0-beta.24",
+    "@hi-ui/popper": "^4.0.0-beta.14",
+    "@hi-ui/tag-input": "^4.0.0-beta.18",
+    "@hi-ui/tree": "^4.0.0-beta.31",
     "@hi-ui/tree-utils": "^4.0.0-beta.4",
     "@hi-ui/type-assertion": "^4.0.0-beta.4",
+    "@hi-ui/use-check": "^4.0.0-beta.4",
     "@hi-ui/use-data-source": "^4.0.0-beta.5",
-    "@hi-ui/use-search-mode": "^4.0.0-beta.17",
+    "@hi-ui/use-search-mode": "^4.0.0-beta.19",
     "@hi-ui/use-toggle": "^4.0.0-beta.4",
     "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4"
   },
@@ -72,5 +73,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "798e91b8086b524e9ef1df8fef404bbf284198f5"
+  "gitHead": "64cc3305632f0d88f852f4a95cba7c27ff388a2d"
 }