8000 refactor(CSidebarNav): improve navigation · 8proCode/coreui-react@d85624f · GitHub
[go: up one dir, main page]
Skip to content

Commit d85624f

Browse files
mrholekmrholek
committed
refactor(CSidebarNav): improve navigation
1 parent 2652a91 commit d85624f

File tree

2 files changed

+12
-8
lines changed

2 files changed

+12
-8
lines changed

‎packages/coreui-react/src/components/sidebar/CSidebarNav.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, {
33
ElementType,
44
forwardRef,
55
HTMLAttributes,
6+
ReactElement,
67
ReactNode,
78
useState,
89
} from 'react'
@@ -31,31 +32,34 @@ interface ContextProps {
3132

3233
export const CNavContext = createContext({} as ContextProps)
3334

34-
const recursiveClone = (children: ReactNode, id?: string): ReactNode => {
35+
const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
3536
return React.Children.map(children, (child: ReactNode, index: number) => {
36-
const _id = id ? `${id}.${index}` : `${index}`
37-
3837
if (!React.isValidElement(child)) {
3938
return child
4039
}
4140

41+
const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
42+
4243
if (child.props && child.props.children) {
4344
child = React.cloneElement(child, {
4445
// @ts-expect-error the `displayName` exist in each component. TODO: resolve
4546
...((child.type.displayName === 'CNavGroup' || child.type.displayName === 'CNavLink') && {
4647
idx: _id,
47-
test: _id,
4848
}),
4949
// @ts-expect-error the `children` exist in each component. TODO: resolve
50-
children: recursiveClone(child.props.children, _id),
50+
children: recursiveClone(
51+
child.props.children,
52+
_id,
53+
// @ts-expect-error the `displayName` exist in each component. TODO: resolve
54+
child.type.displayName === 'CNavItem' ? false : true,
55+
),
5156
})
5257
}
5358

54-
return React.cloneElement(child as React.ReactElement<any>, {
59+
return React.cloneElement(child as ReactElement<any>, {
5560
// @ts-expect-error the `displayName` exist in each component. TODO: resolve
5661
...((child.type.displayName === 'CNavGroup' || child.type.displayName === 'CNavLink') && {
5762
idx: _id,
58-
test: _id,
5963
}),
6064
})
6165
})

‎packages/docs/src/components/SidebarNav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const SidebarNav = ({ items }: SidebarNavProps) => {
5050
const navGroup = (item: NavItem, index: number) => {
5151
const { name, icon, ...rest } = item
5252
return (
53-
<CNavGroup compact toggler={navLink(name, icon)} idx={String(index)} key={index} {...rest}>
53+
<CNavGroup compact toggler={navLink(name, icon)} key={index} {...rest}>
5454
{item.items?.map((item: NavItem, index: number) =>
5555
item.items ? navGroup(item, index) : navItem(item, index),
5656
)}

0 commit comments

Comments
 (0)
0