@hi-ui/check-tree-select 4.0.10 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hi-ui/check-tree-select
 
+## 4.1.0
+
+### Minor Changes
+
+- [#2516](https://github.com/XiaoMi/hiui/pull/2516) [`49aa47c02`](https://github.com/XiaoMi/hiui/commit/49aa47c02f7b4fc858f2ca9b55974853dfdbd59d) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加 showCheckAll API
+
 ## 4.0.10
 
 ### Patch Changes

package/lib/cjs/CheckTreeSelect.js

@@ -47,10 +47,14 @@ var core = require('@hi-ui/core');
 
 var funcUtils = require('@hi-ui/func-utils');
 
+var Checkbox = require('@hi-ui/checkbox');
+
 var useSearchMode = require('@hi-ui/use-search-mode');
 
 var useCheck = require('./hooks/use-check.js');
 
+var index = require('./utils/index.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -59,6 +63,8 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+
 var TREE_SELECT_PREFIX = classname.getPrefixCls('check-tree-select');
 var DEFAULT_DATA = [];
 var DEFAULT_VALUE = [];
@@ -108,7 +114,8 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       virtual = _a.virtual,
       itemHeight = _a.itemHeight,
       height = _a.height,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "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"]);
+      showCheckAll = _a.showCheckAll,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "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", "showCheckAll"]);
 
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
@@ -253,6 +260,54 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var nextData = checkedNodes.concat(flattedData);
     return arrayUtils.uniqBy(nextData, 'id');
   }, [checkedNodes, flattedData]);
+  var toggleCheckAll = React.useCallback(function () {
+    var _getAllCheckedStatus = index.getAllCheckedStatus(flattedData, parsedCheckedIds),
+        currentAllChecked = _getAllCheckedStatus[0],
+        hasCheckedAll = _getAllCheckedStatus[2];
+
+    var shouldChecked = !currentAllChecked; // 全选操作
+
+    if (!currentAllChecked && !hasCheckedAll) {
+      tryChangeValue(flattedData.filter(function (item) {
+        if (!item.disabled) {
+          // 根据 checkedMode 类型过滤出已选项，保证全选操作下 onChange 回调的值是符合 checkedMode 的规则
+          if (checkedMode === 'CHILD') {
+            return !item.children;
+          }
+
+          if (checkedMode === 'PARENT') {
+            return item.depth === 0;
+          }
+
+          return true;
+        }
+
+        return false;
+      }).map(function (_ref) {
+        var id = _ref.id;
+        return id;
+      }), null, shouldChecked, []);
+    } else {
+      tryChangeValue([], null, shouldChecked, []);
+    }
+  }, [checkedMode, flattedData, parsedCheckedIds, tryChangeValue]);
+
+  var _useMemo = React.useMemo(function () {
+    return index.getAllCheckedStatus(flattedData, parsedCheckedIds);
+  }, [flattedData, parsedCheckedIds]),
+      showAllChecked = _useMemo[0],
+      showIndeterminate = _useMemo[1];
+
+  var renderDefaultFooter = function renderDefaultFooter() {
+    if (showCheckAll) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+        indeterminate: showIndeterminate,
+        checked: showAllChecked,
+        onChange: toggleCheckAll
+      }, i18n.get('checkSelect.checkAll')));
+    }
+  };
+
   var cls = classname.cx(prefixCls, className); // 过滤掉未选中的数据
   // const tagList = useMemo(() => {
   //   // @ts-ignore
@@ -277,6 +332,7 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     // data={mergedData}
     searchable: searchable,
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
+    footer: renderDefaultFooter(),
     loading: rest.loading !== undefined ? rest.loading : loading,
     trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock // ref={targetElementRef}
     // onClick={openMenu}

package/lib/cjs/utils/index.js

@@ -158,5 +158,26 @@ function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck
   return Array.from(checkedIdsSet);
 }
 
+var getAllCheckedStatus = function getAllCheckedStatus(flattedData, values) {
+  var treeIds = flattedData.map(function (_ref) {
+    var id = _ref.id;
+    return id;
+  });
+  var treeIdsSet = new Set(treeIds);
+  var hasValue = false;
+  values.forEach(function (id) {
+    if (treeIdsSet.has(id)) {
+      hasValue = true;
+      treeIdsSet["delete"](id);
+    }
+  });
+  return [hasValue && treeIdsSet.size === 0, hasValue && treeIdsSet.size > 0, // 该值用来判断剩余未选中的节点是否都是 disabled 的
+  // 如果为 true 则表示可选值都已选中
+  treeIdsSet.size === flattedData.filter(function (item) {
+    return item.disabled;
+  }).length];
+};
+
+exports.getAllCheckedStatus = getAllCheckedStatus;
 exports.parseCheckDataDirty = parseCheckDataDirty;
 exports.processCheckedIds = processCheckedIds;

package/lib/esm/CheckTreeSelect.js

@@ -23,8 +23,10 @@ import { TagInputMock } from '@hi-ui/tag-input';
 import { UpOutlined, DownOutlined } from '@hi-ui/icons';
 import { useLocaleContext } from '@hi-ui/core';
 import { callAllFuncs } from '@hi-ui/func-utils';
+import Checkbox from '@hi-ui/checkbox';
 import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useHighlightSearch, useSearchMode } from '@hi-ui/use-search-mode';
 import { useCheck } from './hooks/use-check.js';
+import { getAllCheckedStatus } from './utils/index.js';
 var TREE_SELECT_PREFIX = getPrefixCls('check-tree-select');
 var DEFAULT_DATA = [];
 var DEFAULT_VALUE = [];
@@ -74,7 +76,8 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       virtual = _a.virtual,
       itemHeight = _a.itemHeight,
       height = _a.height,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "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"]);
+      showCheckAll = _a.showCheckAll,
+      rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "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", "showCheckAll"]);
 
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
@@ -219,6 +222,54 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     var nextData = checkedNodes.concat(flattedData);
     return uniqBy(nextData, 'id');
   }, [checkedNodes, flattedData]);
+  var toggleCheckAll = useCallback(function () {
+    var _getAllCheckedStatus = getAllCheckedStatus(flattedData, parsedCheckedIds),
+        currentAllChecked = _getAllCheckedStatus[0],
+        hasCheckedAll = _getAllCheckedStatus[2];
+
+    var shouldChecked = !currentAllChecked; // 全选操作
+
+    if (!currentAllChecked && !hasCheckedAll) {
+      tryChangeValue(flattedData.filter(function (item) {
+        if (!item.disabled) {
+          // 根据 checkedMode 类型过滤出已选项，保证全选操作下 onChange 回调的值是符合 checkedMode 的规则
+          if (checkedMode === 'CHILD') {
+            return !item.children;
+          }
+
+          if (checkedMode === 'PARENT') {
+            return item.depth === 0;
+          }
+
+          return true;
+        }
+
+        return false;
+      }).map(function (_ref) {
+        var id = _ref.id;
+        return id;
+      }), null, shouldChecked, []);
+    } else {
+      tryChangeValue([], null, shouldChecked, []);
+    }
+  }, [checkedMode, flattedData, parsedCheckedIds, tryChangeValue]);
+
+  var _useMemo = useMemo(function () {
+    return getAllCheckedStatus(flattedData, parsedCheckedIds);
+  }, [flattedData, parsedCheckedIds]),
+      showAllChecked = _useMemo[0],
+      showIndeterminate = _useMemo[1];
+
+  var renderDefaultFooter = function renderDefaultFooter() {
+    if (showCheckAll) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+        indeterminate: showIndeterminate,
+        checked: showAllChecked,
+        onChange: toggleCheckAll
+      }, i18n.get('checkSelect.checkAll')));
+    }
+  };
+
   var cls = cx(prefixCls, className); // 过滤掉未选中的数据
   // const tagList = useMemo(() => {
   //   // @ts-ignore
@@ -243,6 +294,7 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     // data={mergedData}
     searchable: searchable,
     onSearch: callAllFuncs(onSearchProp, onSearch),
+    footer: renderDefaultFooter(),
     loading: rest.loading !== undefined ? rest.loading : loading,
     trigger: /*#__PURE__*/React.createElement(TagInputMock // ref={targetElementRef}
     // onClick={openMenu}

package/lib/esm/utils/index.js

@@ -150,4 +150,24 @@ function fillCheck(checkedIds, depthEntities, nodeEntities, maxDepth, allowCheck
   return Array.from(checkedIdsSet);
 }
 
-export { parseCheckDataDirty, processCheckedIds };
+var getAllCheckedStatus = function getAllCheckedStatus(flattedData, values) {
+  var treeIds = flattedData.map(function (_ref) {
+    var id = _ref.id;
+    return id;
+  });
+  var treeIdsSet = new Set(treeIds);
+  var hasValue = false;
+  values.forEach(function (id) {
+    if (treeIdsSet.has(id)) {
+      hasValue = true;
+      treeIdsSet["delete"](id);
+    }
+  });
+  return [hasValue && treeIdsSet.size === 0, hasValue && treeIdsSet.size > 0, // 该值用来判断剩余未选中的节点是否都是 disabled 的
+  // 如果为 true 则表示可选值都已选中
+  treeIdsSet.size === flattedData.filter(function (item) {
+    return item.disabled;
+  }).length];
+};
+
+export { getAllCheckedStatus, parseCheckDataDirty, processCheckedIds };

package/lib/types/CheckTreeSelect.d.ts

@@ -131,6 +131,10 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
      * 	设置 `true` 开启虚拟滚动
      */
     virtual?: boolean;
+    /**
+     * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
+     */
+    showCheckAll?: boolean;
 }
 /**
  * 在 checkedIdsSet 为数据合法的情况下，查找所有的半选中态的节点 ids

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

@@ -11,3 +11,4 @@ export declare const processCheckedIds: (type: string, checkedIds: React.ReactTe
  * 根据传入的 checkedIds 解析全选/半选数据
  */
 export declare const parseCheckDataDirty: (type: string, checkedIds: React.ReactText[], flattenData: any, allowCheck?: ((node: any) => boolean) | undefined) => React.ReactText[];
+export declare const getAllCheckedStatus: (flattedData: any[], values: React.ReactText[]) => boolean[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-tree-select",
-  "version": "4.0.10",
+  "version": "4.1.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^4.0.1",
+    "@hi-ui/checkbox": "^4.0.5",
     "@hi-ui/classname": "^4.0.1",
     "@hi-ui/env": "^4.0.1",
     "@hi-ui/func-utils": "^4.0.1",