@hi-ui/check-tree-select 4.4.1 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- [#2878](https://github.com/XiaoMi/hiui/pull/2878) [`179fd7fef`](https://github.com/XiaoMi/hiui/commit/179fd7fef9d906ecec2c5f02de01b7fa16721c79) Thanks [@yang-x20](https://github.com/yang-x20)! - feat: 新增前置后置内容扩展功能
+
 ## 4.4.1
 
 ### Patch Changes

package/lib/cjs/CheckTreeSelect.js

@@ -89,11 +89,15 @@ 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,
-    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 = _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", "showOnlyShowChecked", "tagInputProps", "size", "customRender", "prefix", "suffix"]);
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
@@ -104,6 +108,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;
   /**
    * 转换对象
    */
@@ -208,8 +217,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) {
@@ -301,14 +311,70 @@ var CheckTreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
-      suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
+      prefix: prefix,
+      suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
       value: value,
       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,11 +76,15 @@ 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,
-    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 = _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", "showOnlyShowChecked", "tagInputProps", "size", "customRender", "prefix", "suffix"]);
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkTreeSelect.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useUncontrolledToggle({
@@ -91,6 +95,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;
   /**
    * 转换对象
    */
@@ -195,8 +204,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) {
@@ -288,14 +298,70 @@ var CheckTreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
-      suffix: menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null),
+      prefix: prefix,
+      suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
       value: value,
       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 参数设置
      */
@@ -149,6 +153,14 @@ export interface CheckTreeSelectProps extends Omit<PickerProps, 'data' | 'onChan
      * 自定义触发器
      */
     customRender?: React.ReactNode | ((option: CheckTreeSelectDataItem[]) => React.ReactNode);
+    /**
+     * 选择框前置内容
+     */
+    prefix?: React.ReactNode;
+    /**
+     * 选择框后置内容
+     */
+    suffix?: React.ReactNode;
 }
 /**
  * 在 checkedIdsSet 为数据合法的情况下，查找所有的半选中态的节点 ids

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-tree-select",
-  "version": "4.4.1",
+  "version": "4.6.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",