@hi-ui/check-tree-select 4.5.0 → 4.6.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hi-ui/check-tree-select
 
+## 4.6.0
+
+### Minor Changes
+
+- [#2952](https://github.com/XiaoMi/hiui/pull/2952) [`f7137e3db`](https://github.com/XiaoMi/hiui/commit/f7137e3dbff8a3a2735f9e7d8a09fc942c8a8a86) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 新增支持过滤已选择项
+
+### Patch Changes
+
+- Updated dependencies [[`bc306526c`](https://github.com/XiaoMi/hiui/commit/bc306526c948cb2b1ecd73b63e903d941c78dd9a), [`7bdd549d0`](https://github.com/XiaoMi/hiui/commit/7bdd549d0fcb6a6b903742333e352e184723aa3b)]:
+  - @hi-ui/tree@4.6.0
+
 ## 4.5.0
 
 ### Minor Changes

package/lib/cjs/CheckTreeSelect.js

@@ -89,13 +89,16 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     itemHeight = _a.itemHeight,
     height = _a.height,
     showCheckAll = _a.showCheckAll,
+    _a$showOnlyShowChecke = _a.showOnlyShowChecked,
+    showOnlyShowChecked = _a$showOnlyShowChecke === void 0 ? false : _a$showOnlyShowChecke,
     tagInputProps = _a.tagInputProps,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
     customRender = _a.customRender,
     prefix = _a.prefix,
     suffix = _a.suffix,
-    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", "tagInputProps", "size", "customRender", "prefix", "suffix"]);
+    keywordProp = _a.keyword,
+    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", "showOnlyShowChecked", "tagInputProps", "size", "customRender", "prefix", "suffix", "keyword"]);
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
@@ -106,6 +109,11 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }),
     menuVisible = _useUncontrolledToggl[0],
     menuVisibleAction = _useUncontrolledToggl[1];
+  var _useState = React.useState(null),
+    filterItems = _useState[0],
+    setFilterItems = _useState[1];
+  var expandedViewRef = React.useRef('normal');
+  var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
   /**
    * 转换对象
    */
@@ -188,6 +196,7 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
   var _useSearchMode = useSearchMode.useSearchMode({
       searchable: searchableProp,
+      keyword: keywordProp,
       strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy, highlightSearchStrategy]
     }),
     stateInSearch = _useSearchMode.state,
@@ -210,8 +219,9 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     return ret;
   }, [titleRender, searchValue, searchMode]);
   var shouldUseSearch = !!searchValue && !hasError;
+  var showData = shouldUseSearch ? stateInSearch.data : data;
   var treeProps = {
-    data: shouldUseSearch ? stateInSearch.data : data,
+    data: filterItems !== null && filterItems !== void 0 ? filterItems : showData,
     expandedIds: shouldUseSearch ? stateInSearch.expandedIds : expandedIds,
     onExpand: shouldUseSearch ? function (ids) {
       return setStateInSearch(function (prev) {
@@ -291,6 +301,7 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     // onChange={tryChangeValue}
     // data={mergedData}
     searchable: searchable,
+    keyword: keywordProp,
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
     footer: renderDefaultFooter(),
     loading: rest.loading !== undefined ? rest.loading : loading,
@@ -311,7 +322,62 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onChange: onValueChange,
       data: mergedData,
       // @ts-ignore
-      invalid: invalid
+      invalid: invalid,
+      // onExpand={() => {
+      //   // setViewSelected(true)
+      //   menuVisibleAction.on()
+      // }}
+      onClick: function onClick(evt) {
+        if (!showOnlyShowChecked) return;
+        evt.preventDefault();
+        if (filterItems) {
+          setFilterItems(null);
+        }
+        if (menuVisible) {
+          if (expandedViewRef.current === 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'normal';
+      },
+      expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
+      onExpand: function onExpand(evt) {
+        if (!showOnlyShowChecked) return;
+        // 阻止冒泡触发外层 onClick
+        evt.preventDefault();
+        evt.stopPropagation();
+        // 选中数据
+        setFilterItems(function () {
+          var filterFunc = function filterFunc(node) {
+            var _a;
+            if (parsedCheckedIds.includes(node.id)) {
+              return true;
+            }
+            if (node.children && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+              return node.children.some(function (child) {
+                return filterFunc(child);
+              });
+            }
+            return false;
+          };
+          // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
+          // 返回过滤后的树结构
+          var treeData = treeUtils.filterTree(data, filterFunc);
+          return treeData;
+        });
+        // 展开/关闭操作
+        if (menuVisible) {
+          if (expandedViewRef.current !== 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'onlyChecked';
+      }
     })))
   }), typeAssertion.isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/
   // 只做渲染，不做逻辑处理（比如搜索过滤后，check操作的是对过滤后的data操作，这是不符合预期的）

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 } from 'react';
+import React, { forwardRef, useState, useRef, 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 { baseFlattenTree } from '@hi-ui/tree-utils';
+import { baseFlattenTree, filterTree } 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';
@@ -76,13 +76,16 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     itemHeight = _a.itemHeight,
     height = _a.height,
     showCheckAll = _a.showCheckAll,
+    _a$showOnlyShowChecke = _a.showOnlyShowChecked,
+    showOnlyShowChecked = _a$showOnlyShowChecke === void 0 ? false : _a$showOnlyShowChecke,
     tagInputProps = _a.tagInputProps,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
     customRender = _a.customRender,
     prefix = _a.prefix,
     suffix = _a.suffix,
-    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", "tagInputProps", "size", "customRender", "prefix", "suffix"]);
+    keywordProp = _a.keyword,
+    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", "showOnlyShowChecked", "tagInputProps", "size", "customRender", "prefix", "suffix", "keyword"]);
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useUncontrolledToggle({
@@ -93,6 +96,11 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }),
     menuVisible = _useUncontrolledToggl[0],
     menuVisibleAction = _useUncontrolledToggl[1];
+  var _useState = useState(null),
+    filterItems = _useState[0],
+    setFilterItems = _useState[1];
+  var expandedViewRef = useRef('normal');
+  var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
   /**
    * 转换对象
    */
@@ -175,6 +183,7 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
   var _useSearchMode = useSearchMode({
       searchable: searchableProp,
+      keyword: keywordProp,
       strategies: [dataSourceStrategy, customSearchStrategy, filterSearchStrategy, highlightSearchStrategy]
     }),
     stateInSearch = _useSearchMode.state,
@@ -197,8 +206,9 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     return ret;
   }, [titleRender, searchValue, searchMode]);
   var shouldUseSearch = !!searchValue && !hasError;
+  var showData = shouldUseSearch ? stateInSearch.data : data;
   var treeProps = {
-    data: shouldUseSearch ? stateInSearch.data : data,
+    data: filterItems !== null && filterItems !== void 0 ? filterItems : showData,
     expandedIds: shouldUseSearch ? stateInSearch.expandedIds : expandedIds,
     onExpand: shouldUseSearch ? function (ids) {
       return setStateInSearch(function (prev) {
@@ -278,6 +288,7 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     // onChange={tryChangeValue}
     // data={mergedData}
     searchable: searchable,
+    keyword: keywordProp,
     onSearch: callAllFuncs(onSearchProp, onSearch),
     footer: renderDefaultFooter(),
     loading: rest.loading !== undefined ? rest.loading : loading,
@@ -298,7 +309,62 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       onChange: onValueChange,
       data: mergedData,
       // @ts-ignore
-      invalid: invalid
+      invalid: invalid,
+      // onExpand={() => {
+      //   // setViewSelected(true)
+      //   menuVisibleAction.on()
+      // }}
+      onClick: function onClick(evt) {
+        if (!showOnlyShowChecked) return;
+        evt.preventDefault();
+        if (filterItems) {
+          setFilterItems(null);
+        }
+        if (menuVisible) {
+          if (expandedViewRef.current === 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'normal';
+      },
+      expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
+      onExpand: function onExpand(evt) {
+        if (!showOnlyShowChecked) return;
+        // 阻止冒泡触发外层 onClick
+        evt.preventDefault();
+        evt.stopPropagation();
+        // 选中数据
+        setFilterItems(function () {
+          var filterFunc = function filterFunc(node) {
+            var _a;
+            if (parsedCheckedIds.includes(node.id)) {
+              return true;
+            }
+            if (node.children && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+              return node.children.some(function (child) {
+                return filterFunc(child);
+              });
+            }
+            return false;
+          };
+          // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
+          // 返回过滤后的树结构
+          var treeData = filterTree(data, filterFunc);
+          return treeData;
+        });
+        // 展开/关闭操作
+        if (menuVisible) {
+          if (expandedViewRef.current !== 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'onlyChecked';
+      }
     })))
   }), isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/
   // 只做渲染，不做逻辑处理（比如搜索过滤后，check操作的是对过滤后的data操作，这是不符合预期的）

package/lib/types/CheckTreeSelect.d.ts

@@ -137,6 +137,10 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
      * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
      */
     showCheckAll?: boolean;
+    /**
+     * 是否开启查看仅已选功能
+     */
+    showOnlyShowChecked?: boolean;
     /**
      * TagInput 参数设置
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-tree-select",
-  "version": "4.5.0",
+  "version": "4.6.1-alpha.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -53,7 +53,7 @@
     "@hi-ui/picker": "^4.1.6",
     "@hi-ui/popper": "^4.1.5",
     "@hi-ui/tag-input": "^4.1.1",
-    "@hi-ui/tree": "^4.5.10",
+    "@hi-ui/tree": "^4.6.0",
     "@hi-ui/tree-utils": "^4.1.6",
     "@hi-ui/type-assertion": "^4.0.4",
     "@hi-ui/use-check": "^4.0.5",