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',