diff --git a/packages/components/src/Skeleton/components/SidebarMenuItem.tsx b/packages/components/src/Skeleton/components/SidebarMenuItem.tsx index 37e02221..c7b93263 100644 --- a/packages/components/src/Skeleton/components/SidebarMenuItem.tsx +++ b/packages/components/src/Skeleton/components/SidebarMenuItem.tsx @@ -6,15 +6,17 @@ import ChevronDownIcon from '@treejs/components/Icons/ChevronDown'; import ChevronUpIcon from '@treejs/components/Icons/ChevronUp'; import { isNilOrEmpty } from '@treejs/utils'; -import { IMenuItem } from '../types'; +import { MenuItem } from '../types'; type IProps = { isChild: boolean; - onClick: (href: string, external: boolean) => () => void; -} & IMenuItem; + item: MenuItem; + onClick: (menuItem: MenuItem) => void; +}; export const SidebarMenuItem = (props: IProps) => { - const { defaultOpen, href, onClick, isChild, label, external, subMenu } = props; + const { onClick, isChild, item } = props; + const { defaultOpen, href, label, subMenu } = item; const [open, setOpen] = useState(defaultOpen); @@ -24,16 +26,16 @@ export const SidebarMenuItem = (props: IProps) => { const handleOnClick = useCallback(() => { if (!isNilOrEmpty(href)) { - onClick(href, external)(); + onClick(item); } else { setOpen(!open); } - }, [open, href, external]); + }, [open, item]); const items = useMemo(() => { if (open && !isNilOrEmpty(subMenu)) { - return subMenu.map((menuItem, i) => ( - + return subMenu.map((subMenuItem, i) => ( + )); } else { return null; diff --git a/packages/components/src/Skeleton/components/Skeleton.tsx b/packages/components/src/Skeleton/components/Skeleton.tsx index 4ad53e87..92ca691d 100644 --- a/packages/components/src/Skeleton/components/Skeleton.tsx +++ b/packages/components/src/Skeleton/components/Skeleton.tsx @@ -1,4 +1,5 @@ import React, { useCallback, useMemo, useState } from 'react'; +import { isNil } from 'ramda'; import cx from 'classnames'; import { History } from 'history'; @@ -9,7 +10,7 @@ import { isNilOrEmpty } from '@treejs/utils'; import Modals from '../../Modal/components/Modals'; import Toasters from '../../Toaster/components/Toasters'; -import { IMenuItem } from '../types'; +import { MenuItem } from '../types'; import SidebarMenuItem from './SidebarMenuItem'; import UserMenu from './UserMenu'; @@ -27,9 +28,9 @@ type IProps = { }; history: History; menuItems?: { - navigation?: IMenuItem[]; - sidebar?: IMenuItem[]; - user?: IMenuItem[]; + navigation?: MenuItem[]; + sidebar?: MenuItem[]; + user?: MenuItem[]; }; }; @@ -61,11 +62,15 @@ const Skeleton: React.FC = (props) => { }, [sidebarOpened]); const openLink = useCallback( - (link: string, external: boolean) => () => { - if (external) { - window.open(link, '_blank'); + ({ href, external, onClick }: MenuItem) => { + if (!isNil(onClick)) { + onClick(); } else { - history.push(link); + if (external) { + window.open(href, '_blank'); + } else { + history.push(href); + } } setSidebarOpened(false); }, @@ -75,7 +80,7 @@ const Skeleton: React.FC = (props) => { const sidebarItems = useMemo(() => { if (!isNilOrEmpty(menuItems.sidebar)) { return menuItems.sidebar.map((menuItem, i) => ( - + )); } else { return null; @@ -84,9 +89,10 @@ const Skeleton: React.FC = (props) => { const navigationItems = useMemo(() => { if (!isNilOrEmpty(menuItems.navigation)) { - return menuItems.navigation.map(({ label, href, external }, i) => ( -
- {label} + return menuItems.navigation.map((menuItem, i) => ( + // eslint-disable-next-line react/jsx-no-bind +
openLink(menuItem)}> + {menuItem.label}
)); } else { diff --git a/packages/components/src/Skeleton/components/UserMenu.tsx b/packages/components/src/Skeleton/components/UserMenu.tsx index 4bc746d8..a6e6b14f 100644 --- a/packages/components/src/Skeleton/components/UserMenu.tsx +++ b/packages/components/src/Skeleton/components/UserMenu.tsx @@ -2,24 +2,22 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { isNilOrEmpty } from '@treejs/utils'; -import { IMenuItem } from '../types'; +import { MenuItem } from '../types'; type IProps = { children: React.ReactElement; - items: IMenuItem[]; - onClick: (href: string, external: boolean) => () => void; + items: MenuItem[]; + onClick: (menuItem: MenuItem) => void; }; -export const UserMenu = (props: IProps) => { - const { items, onClick, children } = props; - +export const UserMenu: React.FC = ({ items, onClick, children }) => { const divRef = useRef(); const [open, setOpen] = useState(false); const handleClick = useCallback( - (href: string, external: boolean) => () => { - onClick(href, external)(); + (item: MenuItem) => () => { + onClick(item); setOpen(false); }, [onClick] @@ -37,9 +35,9 @@ export const UserMenu = (props: IProps) => { const userItems = useMemo(() => { if (!isNilOrEmpty(items)) { - return items.map(({ label, href, external }, i) => ( -
- {label} + return items.map((menuItem, i) => ( +
+ {menuItem.label}
)); } else { diff --git a/packages/components/src/Skeleton/types/index.ts b/packages/components/src/Skeleton/types/index.ts index 0f2c55b4..014e8bbb 100644 --- a/packages/components/src/Skeleton/types/index.ts +++ b/packages/components/src/Skeleton/types/index.ts @@ -1,7 +1,8 @@ -export interface IMenuItem { +export type MenuItem = { defaultOpen?: boolean; external?: boolean; href?: string; label: string; - subMenu?: IMenuItem[]; -} + onClick?: () => void; + subMenu?: MenuItem[]; +}; diff --git a/stories/components/Skeleton.stories.mdx b/stories/components/Skeleton.stories.mdx index 8b95384e..05362e60 100644 --- a/stories/components/Skeleton.stories.mdx +++ b/stories/components/Skeleton.stories.mdx @@ -41,10 +41,11 @@ export const Template = (args) => ( { label: 'Menu External', href: 'https://treejs.romanjaros.dev', external: true }, ], sidebar: [{ label: 'Menu 1' }, { label: 'Menu 2' }], - user: [{ label: 'Menu 1' }, { label: 'Menu 2', href: '/r3' }], + user: [{ label: 'Menu 1', href: '/ru1' }, { label: 'Menu 2', href: '/ru2' }], }, enabledMenu: { user: true, + navigation: true, sidebar: true, }, }} diff --git a/stories/components/Skeleton/Router.tsx b/stories/components/Skeleton/Router.tsx index c6c1cbb5..5482b61a 100644 --- a/stories/components/Skeleton/Router.tsx +++ b/stories/components/Skeleton/Router.tsx @@ -7,7 +7,8 @@ const Router = () => ( Main
} /> Conten 1
} /> Conten 2} /> - User content 2} /> + User content 1} /> + User content 2} /> ); diff --git a/stories/components/Skeleton/redux.tsx b/stories/components/Skeleton/redux.tsx index a1ecd71f..e72b9e11 100644 --- a/stories/components/Skeleton/redux.tsx +++ b/stories/components/Skeleton/redux.tsx @@ -24,6 +24,6 @@ const composeSetup = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ const store = createStore(mainReducer, composeSetup(applyMiddleware(thunk))); // eslint-disable-next-line react/display-name -const StoreProvider: React.FC = ({ children }) => {children}; +const StoreProvider: React.FC = ({ children }: any) => {children}; export default StoreProvider;