From ac96bec2d020da8de41d988f79adbbe09e10bd8e Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 12 Jun 2024 17:21:22 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(menu):=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/menu/src/Menu.tsx | 11 ++++++++++- packages/ui/menu/src/util.ts | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx index 586790d15..8c1517779 100644 --- a/packages/ui/menu/src/Menu.tsx +++ b/packages/ui/menu/src/Menu.tsx @@ -21,7 +21,7 @@ import { uuid } from '@hi-ui/use-id' import { MenuDataItem, MenuFooterRenderProps } from './types' import { MenuItem } from './MenuItem' import MenuContext from './context' -import { getAncestorIds } from './util' +import { getAncestorIds, transformTreeData } from './util' const MENU_PREFIX = getPrefixCls('menu') @@ -41,6 +41,7 @@ export const Menu = forwardRef( role = 'menu', className, data = NOOP_ARRAY, + fieldNames, placement = 'vertical', showCollapse = false, // 仅对垂直模式有效 @@ -70,6 +71,10 @@ export const Menu = forwardRef( const [activeParents, updateActiveParents] = useState(() => getAncestorIds(activeId, data)) + data = useMemo(() => { + return transformTreeData(data, fieldNames) + }, [data, fieldNames]) + useEffect(() => { updateActiveParents(getAncestorIds(activeId, data)) }, [activeId, data]) @@ -303,6 +308,10 @@ export interface MenuProps extends Omit, 'onClick'> { * 菜单项数据列表 */ data: MenuDataItem[] + /** + * 设置 data 中 id, title, disabled, children 对应的 key + */ + fieldNames?: Record /** * 默认激活的菜单项 id */ diff --git a/packages/ui/menu/src/util.ts b/packages/ui/menu/src/util.ts index 03907e7e8..d56ef9585 100644 --- a/packages/ui/menu/src/util.ts +++ b/packages/ui/menu/src/util.ts @@ -55,3 +55,36 @@ export const filterTreeData = ( }) ?? [] ) } + +export const transformTreeData = ( + data: MenuDataItem[], + fieldNames: Record | undefined +) => { + /** + * 转换对象 + */ + const getKeyFields = (node: any, key: any) => { + if (fieldNames) { + return node[(fieldNames as any)[key] || key] + } + return node[key] + } + + /** + * 递归处理树形数组 + */ + const traverseNode = (node: MenuDataItem): MenuDataItem => { + const newNode: MenuDataItem = { ...node } + newNode.id = getKeyFields(newNode, 'id') + newNode.title = getKeyFields(newNode, 'title') + newNode.icon = getKeyFields(newNode, 'icon') + newNode.disabled = getKeyFields(newNode, 'disabled') ?? false + newNode.children = getKeyFields(newNode, 'children') + if (newNode.children) { + newNode.children = newNode.children.map(traverseNode) + } + return newNode + } + + return data.map(traverseNode) +} From 1b46f791f99c20a946250c2921f3362304e86371 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 12 Jun 2024 17:28:03 +0800 Subject: [PATCH 2/4] =?UTF-8?q?chore(menu):=20=E7=94=9F=E6=88=90=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6(#2872)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/afraid-impalas-remain.md | 5 +++++ .changeset/fifty-teachers-admire.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/afraid-impalas-remain.md create mode 100644 .changeset/fifty-teachers-admire.md diff --git a/.changeset/afraid-impalas-remain.md b/.changeset/afraid-impalas-remain.md new file mode 100644 index 000000000..6bb1e6928 --- /dev/null +++ b/.changeset/afraid-impalas-remain.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/menu": minor +--- + +feat: 新增支持配置字段别名 diff --git a/.changeset/fifty-teachers-admire.md b/.changeset/fifty-teachers-admire.md new file mode 100644 index 000000000..fc6cab7af --- /dev/null +++ b/.changeset/fifty-teachers-admire.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(menu): 新增支持配置字段别名 From 1aba7381f0e22df8f1c4462c15a64b15e2ade2fc Mon Sep 17 00:00:00 2001 From: xiamiao Date: Tue, 25 Jun 2024 11:43:55 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat(menu):=20=E4=BF=AE=E6=94=B9fieldNames?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/menu/src/Menu.tsx | 4 ++-- packages/ui/menu/src/util.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx index 8c1517779..b0de0115c 100644 --- a/packages/ui/menu/src/Menu.tsx +++ b/packages/ui/menu/src/Menu.tsx @@ -10,7 +10,7 @@ import { cx, getPrefixCls } from '@hi-ui/classname' import { MenuFoldOutlined, MenuUnfoldOutlined } from '@hi-ui/icons' import { __DEV__ } from '@hi-ui/env' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' -import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' +import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' import Tooltip from '@hi-ui/tooltip' import { useUncontrolledToggle } from '@hi-ui/use-toggle' import { getTreeNodesWithChildren } from '@hi-ui/tree-utils' @@ -311,7 +311,7 @@ export interface MenuProps extends Omit, 'onClick'> { /** * 设置 data 中 id, title, disabled, children 对应的 key */ - fieldNames?: Record + fieldNames?: HiBaseFieldNames /** * 默认激活的菜单项 id */ diff --git a/packages/ui/menu/src/util.ts b/packages/ui/menu/src/util.ts index d56ef9585..7ebcda63b 100644 --- a/packages/ui/menu/src/util.ts +++ b/packages/ui/menu/src/util.ts @@ -1,5 +1,6 @@ import { filterTree, cloneTree, getTreeNodesWithChildren } from '@hi-ui/tree-utils' import { MenuDataItem } from './types' +import { HiBaseFieldNames } from '@hi-ui/core' // 寻找某一节点的父节点 export const getParentId = (id: string | number, data: Record[]): string | number => { @@ -58,7 +59,7 @@ export const filterTreeData = ( export const transformTreeData = ( data: MenuDataItem[], - fieldNames: Record | undefined + fieldNames?: HiBaseFieldNames, ) => { /** * 转换对象 From 5f664df5cda7be4b04159a2c08c150bbef7e3822 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 27 Jun 2024 10:50:49 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat(menu):=20=E4=BB=A3=E7=A0=81=E8=A7=84?= =?UTF-8?q?=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/menu/src/Menu.tsx | 20 ++++++++++---------- packages/ui/menu/src/util.ts | 26 ++++++++++++-------------- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx index b0de0115c..c091e273e 100644 --- a/packages/ui/menu/src/Menu.tsx +++ b/packages/ui/menu/src/Menu.tsx @@ -71,18 +71,18 @@ export const Menu = forwardRef( const [activeParents, updateActiveParents] = useState(() => getAncestorIds(activeId, data)) - data = useMemo(() => { + const transformedData = useMemo(() => { return transformTreeData(data, fieldNames) }, [data, fieldNames]) useEffect(() => { - updateActiveParents(getAncestorIds(activeId, data)) - }, [activeId, data]) + updateActiveParents(getAncestorIds(activeId, transformedData)) + }, [activeId, transformedData]) const [expandedIds, updateExpandedIds] = useUncontrolledState( () => { return defaultExpandAll - ? getTreeNodesWithChildren(data).map((node) => node.id) + ? getTreeNodesWithChildren(transformedData).map((node) => node.id) : defaultExpandedIds }, expandedIdsProp, @@ -148,15 +148,15 @@ export const Menu = forwardRef( const [tagMaxCount, setTagMaxCount] = useState(0) const mergedTagList = useMemo(() => { - if (showVertical) return data - if (containerWidth < MIN_WIDTH) return data - return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH)) - }, [showVertical, data, containerWidth]) + if (showVertical) return transformedData + if (containerWidth < MIN_WIDTH) return transformedData + return transformedData.slice(0, Math.min(transformedData.length, containerWidth / MIN_WIDTH)) + }, [showVertical, transformedData, containerWidth]) const restTagList = useMemo(() => { - if (tagMaxCount > 0) return data.slice(tagMaxCount) + if (tagMaxCount > 0) return transformedData.slice(tagMaxCount) return [] - }, [data, tagMaxCount]) + }, [transformedData, tagMaxCount]) const getTagWidth = useCallback( (index: number) => { diff --git a/packages/ui/menu/src/util.ts b/packages/ui/menu/src/util.ts index 7ebcda63b..6ae78efef 100644 --- a/packages/ui/menu/src/util.ts +++ b/packages/ui/menu/src/util.ts @@ -1,6 +1,7 @@ import { filterTree, cloneTree, getTreeNodesWithChildren } from '@hi-ui/tree-utils' import { MenuDataItem } from './types' -import { HiBaseFieldNames } from '@hi-ui/core' +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import React from 'react' // 寻找某一节点的父节点 export const getParentId = (id: string | number, data: Record[]): string | number => { @@ -57,16 +58,13 @@ export const filterTreeData = ( ) } -export const transformTreeData = ( - data: MenuDataItem[], - fieldNames?: HiBaseFieldNames, -) => { +export const transformTreeData = (data: MenuDataItem[], fieldNames?: HiBaseFieldNames) => { /** * 转换对象 */ - const getKeyFields = (node: any, key: any) => { + const getKeyFields = (node: MenuDataItem, key: HiBaseFieldNameKeys) => { if (fieldNames) { - return node[(fieldNames as any)[key] || key] + return node[(fieldNames[key] || key) as keyof MenuDataItem] } return node[key] } @@ -74,18 +72,18 @@ export const transformTreeData = ( /** * 递归处理树形数组 */ - const traverseNode = (node: MenuDataItem): MenuDataItem => { + const traverseTreeNode = (node: MenuDataItem): MenuDataItem => { const newNode: MenuDataItem = { ...node } - newNode.id = getKeyFields(newNode, 'id') + newNode.id = getKeyFields(newNode, 'id') as React.ReactText newNode.title = getKeyFields(newNode, 'title') - newNode.icon = getKeyFields(newNode, 'icon') - newNode.disabled = getKeyFields(newNode, 'disabled') ?? false - newNode.children = getKeyFields(newNode, 'children') + newNode.icon = getKeyFields(newNode, 'icon' as HiBaseFieldNameKeys) + newNode.disabled = (getKeyFields(newNode, 'disabled') ?? false) as boolean + newNode.children = getKeyFields(newNode, 'children') as MenuDataItem[] if (newNode.children) { - newNode.children = newNode.children.map(traverseNode) + newNode.children = newNode.children.map(traverseTreeNode) } return newNode } - return data.map(traverseNode) + return data.map(traverseTreeNode) }