From 7bdd549d0fcb6a6b903742333e352e184723aa3b Mon Sep 17 00:00:00 2001 From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com> Date: Thu, 8 Aug 2024 15:12:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(tree):=20=E6=96=B0=E5=A2=9E=20icon=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E5=87=BD=E6=95=B0(#2960)=20(#2964)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(tree): 新增 icon 支持自定义渲染函数(#2960) * chore(tree): 生成变更记录文件 * feat(tree): 示例添加可编辑属性 --------- Co-authored-by: xiamiao --- .changeset/honest-tomatoes-work.md | 5 + .changeset/nine-kings-behave.md | 5 + packages/ui/tree/src/Tree.tsx | 7 ++ packages/ui/tree/src/TreeNode.tsx | 17 +++- packages/ui/tree/src/context.ts | 1 + .../ui/tree/stories/icon-render.stories.tsx | 94 +++++++++++++++++++ packages/ui/tree/stories/index.stories.tsx | 1 + 7 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 .changeset/honest-tomatoes-work.md create mode 100644 .changeset/nine-kings-behave.md create mode 100644 packages/ui/tree/stories/icon-render.stories.tsx diff --git a/.changeset/honest-tomatoes-work.md b/.changeset/honest-tomatoes-work.md new file mode 100644 index 000000000..18a4cfe6b --- /dev/null +++ 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 new file mode 100644 index 000000000..b7acaf23a --- /dev/null +++ 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 index 31fac6d26..6ca6d157a 100644 --- a/packages/ui/tree/src/Tree.tsx +++ b/packages/ui/tree/src/Tree.tsx @@ -81,6 +81,7 @@ export const Tree = forwardRef( // others showLine = false, render: titleRender, + iconRender, onContextMenu, flattedData: flattedDataProp, fieldNames, @@ -184,6 +185,7 @@ export const Tree = forwardRef( expandedIcon, leafIcon, titleRender, + iconRender, onContextMenu, expandOnSelect, }), @@ -206,6 +208,7 @@ export const Tree = forwardRef( 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 index ec3810735..8fccab564 100644 --- a/packages/ui/tree/src/TreeNode.tsx +++ b/packages/ui/tree/src/TreeNode.tsx @@ -55,6 +55,7 @@ export const TreeNode = forwardRef((props, onCheck, showLine, titleRender, + iconRender, collapsedIcon: collapseIconContext, expandedIcon: expandIconContext, leafIcon: leafIconContext, @@ -284,7 +285,8 @@ export const TreeNode = forwardRef((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, - onLoadChildren?: (node: TreeNodeEventData) => void | Promise + onLoadChildren?: (node: TreeNodeEventData) => void | Promise, + iconRender?: (node: TreeNodeEventData) => React.ReactNode ) => { + if (iconRender) { + return ( + + ) + } + if (loading) { return ( 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 new file mode 100644 index 000000000..96781588c --- /dev/null +++ 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 ( + <> +

IconRender for Tree

+
+ { + 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 + } + + if (node.expanded) { + return + } else return + }} + /> +
+ + ) +} diff --git a/packages/ui/tree/stories/index.stories.tsx b/packages/ui/tree/stories/index.stories.tsx index d9781f46e..d687b6ab1 100644 --- 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',