feat(tree): 新增 icon 支持自定义渲染函数(#2960) (#2964)

* feat(tree): 新增 icon 支持自定义渲染函数(#2960) * chore(tree): 生成变更记录文件 * feat(tree): 示例添加可编辑属性 --------- Co-authored-by: xiamiao <[email protected]>
XiaoMi · Aug 8, 2024 · 7bdd549 · 7bdd549
1 parent a90f1e9
commit 7bdd549
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 2 deletions.
diff --git a/.changeset/honest-tomatoes-work.md b/.changeset/honest-tomatoes-work.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tree": minor
+---
+
+feat: 新增 icon 支持自定义渲染函数
diff --git a/.changeset/nine-kings-behave.md b/.changeset/nine-kings-behave.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(tree): 新增 icon 支持自定义渲染函数
diff --git a/packages/ui/tree/src/Tree.tsx b/packages/ui/tree/src/Tree.tsx
@@ -81,6 +81,7 @@ export const Tree = forwardRef<HTMLUListElement | null, TreeProps>(
       // others
       showLine = false,
       render: titleRender,
+      iconRender,
       onContextMenu,
       flattedData: flattedDataProp,
       fieldNames,
@@ -184,6 +185,7 @@ export const Tree = forwardRef<HTMLUListElement | null, TreeProps>(
         expandedIcon,
         leafIcon,
         titleRender,
+        iconRender,
         onContextMenu,
         expandOnSelect,
       }),
@@ -206,6 +208,7 @@ export const Tree = forwardRef<HTMLUListElement | null, TreeProps>(
         expandedIcon,
         leafIcon,
         titleRender,
+        iconRender,
         onContextMenu,
         expandOnSelect,
       ]
@@ -435,6 +438,10 @@ export interface TreeProps {
    * 自定义渲染节点的 title 内容
    */
   render?: (node: TreeNodeEventData) => React.ReactNode
+  /**
+   * 自定义渲染节点的 icon
+   */
+  iconRender?: (node: TreeNodeEventData) => React.ReactNode
   /**
    * 自定义节点右键菜单
    */

diff --git a/packages/ui/tree/src/TreeNode.tsx b/packages/ui/tree/src/TreeNode.tsx
@@ -55,6 +55,7 @@ export const TreeNode = forwardRef<HTMLLIElement | null, TreeNodeProps>((props,
     onCheck,
     showLine,
     titleRender,
+    iconRender,
     collapsedIcon: collapseIconContext,
     expandedIcon: expandIconContext,
     leafIcon: leafIconContext,
@@ -284,7 +285,8 @@ export const TreeNode = forwardRef<HTMLLIElement | null, TreeNodeProps>((props,
           collapsedIcon,
           leafIcon,
           onNodeExpand,
-          onLoadChildren
+          onLoadChildren,
+          iconRender
         )}
 
         {renderCheckbox(
@@ -434,8 +436,19 @@ const renderSwitcher = (
   collapsedIcon: React.ReactNode,
   leafIcon: React.ReactNode,
   onNodeExpand: (evt: React.MouseEvent) => Promise<void>,
-  onLoadChildren?: (node: TreeNodeEventData) => void | Promise<any>
+  onLoadChildren?: (node: TreeNodeEventData) => void | Promise<any>,
+  iconRender?: (node: TreeNodeEventData) => React.ReactNode
 ) => {
+  if (iconRender) {
+    return (
+      <IconButton
+        tabIndex={-1}
+        className={cx(`${prefixCls}__switcher`, `${prefixCls}__switcher--noop`)}
+        icon={iconRender(node)}
+      />
+    )
+  }
+
   if (loading) {
     return (
       <IconButton

diff --git a/packages/ui/tree/src/context.ts b/packages/ui/tree/src/context.ts
@@ -33,6 +33,7 @@ interface TreeContext {
   checkable?: boolean
   onCheck?: (checkedNode: TreeNodeEventData, shouldChecked: boolean) => void
   titleRender?: (node: TreeNodeEventData) => React.ReactNode
+  iconRender?: (node: TreeNodeEventData) => React.ReactNode
   onFocus?: (node: TreeNodeEventData) => void
   showLine?: boolean
   collapsedIcon?: React.ReactNode

diff --git a/packages/ui/tree/stories/icon-render.stories.tsx b/packages/ui/tree/stories/icon-render.stories.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import Tree, { useTreeAction } from '../src'
+import { Modal } from '@hi-ui/modal'
+import { FileOutlined, FolderOpenOutlined, FolderOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 自定义 icon 渲染函数
+ */
+export const IconRender = () => {
+  const ActionTree = useTreeAction(Tree)
+
+  return (
+    <>
+      <h1>IconRender for Tree</h1>
+      <div className="tree-icon-render__wrap">
+        <ActionTree
+          expandOnSelect
+          editPlaceholder="请填写菜单"
+          menuOptions={[
+            {
+              type: 'addChildNode',
+              title: '新建子节点',
+            },
+            {
+              type: 'addSiblingNode',
+              title: '新建兄弟节点',
+            },
+            {
+              // type: 'deleteNode',
+              title: '删除当前菜单',
+              onClick(node, action) {
+                action.closeMenu()
+
+                Modal.confirm({
+                  title: '提示',
+                  content: '确定删除吗？',
+                  onConfirm: () => {
+                    action.deleteNode()
+                  },
+                })
+              },
+            },
+            {
+              type: 'editNode',
+              title: '编辑当前菜单',
+            },
+            {
+              title: 'Hello，自定义的菜单',
+              onClick(node, action) {
+                console.log(node)
+                action.closeMenu()
+              },
+            },
+          ]}
+          data={[
+            {
+              id: 1,
+              title: '小米',
+              children: [
+                {
+                  id: 2,
+                  title: '研发',
+                  children: [
+                    { id: 3, title: '后端' },
+                    { id: 4, title: '运维' },
+                    { id: 5, title: '前端' },
+                  ],
+                },
+                { id: 6, title: '产品' },
+              ],
+            },
+            {
+              id: 11,
+              title: '大米',
+              children: [
+                { id: 22, title: '可视化' },
+                { id: 66, title: 'HiUI' },
+              ],
+            },
+          ]}
+          iconRender={(node) => {
+            if (!node.children?.length) {
+              return <FileOutlined />
+            }
+
+            if (node.expanded) {
+              return <FolderOpenOutlined />
+            } else return <FolderOutlined />
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/tree/stories/index.stories.tsx b/packages/ui/tree/stories/index.stories.tsx
@@ -16,6 +16,7 @@ export * from './custom-icon.stories'
 export * from './expand-on-click.stories'
 export * from './size.stories'
 export * from './scroll-to.stories'
+export * from './icon-render.stories'
 
 export default {
   title: 'Data Display/Tree',