feat(check-tree-select): 新增支持过滤已选择项(#2951)

.changeset/four-cameras-float.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-tree-select": minor
+---
+
+feat: 新增支持过滤已选择项

.changeset/healthy-suits-drop.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(check-tree-select): 新增支持过滤已选择项

packages/ui/check-tree-select/src/CheckTreeSelect.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo, useState, useRef } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import {
@@ -11,7 +11,7 @@ import { useUncontrolledToggle } from '@hi-ui/use-toggle'
 import { FlattedTreeNodeData, Tree } from '@hi-ui/tree'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { Picker, PickerProps } from '@hi-ui/picker'
-import { baseFlattenTree } from '@hi-ui/tree-utils'
+import { baseFlattenTree, filterTree } from '@hi-ui/tree-utils'
 import { isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
 import { uniqBy } from '@hi-ui/array-utils'
 import { Highlighter } from '@hi-ui/highlighter'
@@ -30,6 +30,7 @@ import {
 } from '@hi-ui/use-search-mode'
 import { useCheck } from './hooks/use-check'
 import { getAllCheckedStatus } from './utils'
+import { BaseTreeNodeData } from 'packages/utils/tree-utils/lib/types/types'
 
 const TREE_SELECT_PREFIX = getPrefixCls('check-tree-select')
 const DEFAULT_DATA = [] as []
@@ -88,6 +89,7 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
       itemHeight,
       height,
       showCheckAll,
+      showOnlyShowChecked = false,
       tagInputProps,
       size = 'md',
       customRender,
@@ -110,6 +112,10 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
       onClose,
     })
 
+    const [filterItems, setFilterItems] = useState<any[] | null>(null)
+    const expandedViewRef = useRef<'normal' | 'onlyChecked'>('normal')
+    const activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible
+
     /**
      * 转换对象
      */
@@ -244,9 +250,9 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
     )
 
     const shouldUseSearch = !!searchValue && !hasError
-
+    const showData = shouldUseSearch ? stateInSearch.data : data
     const treeProps = {
-      data: shouldUseSearch ? stateInSearch.data : data,
+      data: filterItems ?? showData,
       expandedIds: shouldUseSearch ? stateInSearch.expandedIds : expandedIds,
       onExpand: shouldUseSearch
         ? (ids: any) => setStateInSearch((prev: any) => ({ ...prev, expandedIds: ids }))
@@ -377,6 +383,63 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
               //   // setViewSelected(true)
               //   menuVisibleAction.on()
               // }}
+              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={(evt) => {
+                if (!showOnlyShowChecked) return
+
+                // 阻止冒泡触发外层 onClick
+                evt.preventDefault()
+                evt.stopPropagation()
+
+                // 选中数据
+                setFilterItems(() => {
+                  const filterFunc = (node: BaseTreeNodeData): boolean => {
+                    if (parsedCheckedIds.includes(node.id)) {
+                      return true
+                    }
+
+                    if (node.children && node.children?.length > 0) {
+                      return node.children.some((child) => filterFunc(child))
+                    }
+
+                    return false
+                  }
+                  // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
+                  // 返回过滤后的树结构
+                  const treeData = filterTree(data as BaseTreeNodeData[], filterFunc)
+
+                  return treeData
+                })
+                // 展开/关闭操作
+                if (menuVisible) {
+                  if (expandedViewRef.current !== 'normal') {
+                    menuVisibleAction.off()
+                  }
+                } else {
+                  menuVisibleAction.on()
+                }
+
+                expandedViewRef.current = 'onlyChecked'
+              }}
             />
           )
         }
@@ -542,6 +605,10 @@ export interface CheckTreeSelectProps
    * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
    */
   showCheckAll?: boolean
+  /**
+   * 是否开启查看仅已选功能
+   */
+  showOnlyShowChecked?: boolean
   /**
    * TagInput 参数设置
    */

packages/ui/check-tree-select/stories/index.stories.tsx

@@ -16,6 +16,7 @@ export * from './check-all.stories'
 export * from './virtual-list.stories'
 export * from './custom-render.stories'
 export * from './addon.stories'
+export * from './only-checked.stories'
 
 export default {
   title: 'Data Input/CheckTreeSelect',

packages/ui/check-tree-select/stories/only-checked.stories.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import CheckTreeSelect from '../src'
+
+/**
+ * @title 仅过滤已选用法
+ */
+export const OnlyChecked = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          disabled: true,
+          children: [
+            {
+              id: '0-0-1',
+              title: 'Redmi K30',
+            },
+            {
+              id: '0-0-2',
+              title: 'Redmi K30 Pro',
+            },
+            {
+              id: '0-0-3',
+              title: 'Redmi 10X 5G',
+            },
+            {
+              id: '0-0-4',
+              title: 'Redmi Note 8',
+            },
+            {
+              id: '0-0-5',
+              title: 'Redmi 9',
+            },
+            {
+              id: '0-0-6',
+              title: 'Redmi 9A',
+            },
+          ],
+        },
+        {
+          title: '小米手机',
+          id: '0-1',
+          children: [
+            {
+              id: '0-1-1',
+              title: '小米10 Pro',
+            },
+            {
+              id: '0-1-2',
+              title: '小米10',
+            },
+            {
+              id: '0-1-3',
+              title: '小米10 青春版 5G',
+            },
+            {
+              id: '0-1-4',
+              title: '小米MIX Alpha',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '电视',
+      id: '1',
+      children: [
+        {
+          title: '小米电视 大师 65英寸OLED',
+          id: '1-0',
+        },
+        {
+          title: 'Redmi 智能电视 MAX 98',
+          id: '1-1',
+        },
+        {
+          title: '小米电视4A 60英寸',
+          id: '1-2',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>Only Checked</h1>
+      <div className="check-tree-select-only-checked__wrap">
+        <CheckTreeSelect
+          style={{ width: 240 }}
+          data={data}
+          checkedMode="PARENT"
+          onChange={console.log}
+          showOnlyShowChecked
+        />
+      </div>
+    </>
+  )
+}