From 694cd6d40852b6d3320fe16fae6090d0c1e79011 Mon Sep 17 00:00:00 2001 From: reffat Date: Wed, 26 Feb 2025 01:37:42 +0300 Subject: [PATCH 1/4] feat(mobileNavigation): added a parameter for the portal in mobile navigation --- src/models/navigation.ts | 1 + .../__stories__/Navigation.stories.tsx | 21 +++++++++++++++++-- .../MobileNavigation/MobileNavigation.tsx | 3 ++- .../components/Navigation/Navigation.tsx | 2 ++ src/navigation/models.ts | 1 + 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/models/navigation.ts b/src/models/navigation.ts index 0f1e8bc8b..df4107422 100644 --- a/src/models/navigation.ts +++ b/src/models/navigation.ts @@ -98,6 +98,7 @@ export interface HeaderData { * @type {NavigationItemModel[]} */ customMobileHeaderItems?: NavigationItemModel[]; + mobilePortalContainer?: React.RefObject; iconSize?: number; withBorder?: boolean; withBorderOnScroll?: boolean; diff --git a/src/navigation/__stories__/Navigation.stories.tsx b/src/navigation/__stories__/Navigation.stories.tsx index 20557f17c..509d1d742 100644 --- a/src/navigation/__stories__/Navigation.stories.tsx +++ b/src/navigation/__stories__/Navigation.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useRef} from 'react'; import {Meta, StoryFn} from '@storybook/react'; @@ -18,7 +18,24 @@ export default { const DefaultTemplate: StoryFn<{ navigation: NavigationData; custom?: CustomConfig; -}> = ({navigation, custom = {}}) => ; +}> = ({navigation, custom = {}}) => { + const container = useRef(null); + + return ( +
+ +
+ ); +}; export const DefaultNavigation = DefaultTemplate.bind({}); export const NavigationWithBorder = DefaultTemplate.bind({}); export const NavigationWithCustomItems = DefaultTemplate.bind({}); diff --git a/src/navigation/components/MobileNavigation/MobileNavigation.tsx b/src/navigation/components/MobileNavigation/MobileNavigation.tsx index 3052d9063..fa97ef902 100644 --- a/src/navigation/components/MobileNavigation/MobileNavigation.tsx +++ b/src/navigation/components/MobileNavigation/MobileNavigation.tsx @@ -16,6 +16,7 @@ export const MobileNavigation: React.FC = ({ isOpened, topItems, bottomItems, + portalContainer, ...props }) => { const [isMounted, setIsMounted] = React.useState(false); @@ -27,7 +28,7 @@ export const MobileNavigation: React.FC = ({ } return ( - +
{topItems && ( diff --git a/src/navigation/components/Navigation/Navigation.tsx b/src/navigation/components/Navigation/Navigation.tsx index 4cc528fa2..9e3dffdb5 100644 --- a/src/navigation/components/Navigation/Navigation.tsx +++ b/src/navigation/components/Navigation/Navigation.tsx @@ -25,6 +25,7 @@ export const Navigation: React.FC = ({data, logo, clas iconSize = 20, withBorder = false, withBorderOnScroll = true, + mobilePortalContainer, } = data; const [isSidebarOpened, setIsSidebarOpened] = useState(false); @@ -56,6 +57,7 @@ export const Navigation: React.FC = ({data, logo, clas isOpened={isSidebarOpened} activeItemId={activeItemId} onActiveItemChange={onActiveItemChange} + portalContainer={mobilePortalContainer} /> diff --git a/src/navigation/models.ts b/src/navigation/models.ts index 02ab8e9cb..52ccc2316 100644 --- a/src/navigation/models.ts +++ b/src/navigation/models.ts @@ -73,6 +73,7 @@ export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps { isOpened?: boolean; topItems?: NavigationItemModel[]; bottomItems?: NavigationItemModel[]; + portalContainer?: React.RefObject; } export interface NavigationProps extends MobileMenuButtonProps, ActiveItemProps { From 16052934e00c1c3b765b48a3d05aec09d69acd42 Mon Sep 17 00:00:00 2001 From: reffat Date: Wed, 26 Feb 2025 18:19:54 +0300 Subject: [PATCH 2/4] fix(stories): resolve conflicts --- .../__stories__/Navigation.stories.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/src/navigation/__stories__/Navigation.stories.tsx b/src/navigation/__stories__/Navigation.stories.tsx index 509d1d742..20557f17c 100644 --- a/src/navigation/__stories__/Navigation.stories.tsx +++ b/src/navigation/__stories__/Navigation.stories.tsx @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React from 'react'; import {Meta, StoryFn} from '@storybook/react'; @@ -18,24 +18,7 @@ export default { const DefaultTemplate: StoryFn<{ navigation: NavigationData; custom?: CustomConfig; -}> = ({navigation, custom = {}}) => { - const container = useRef(null); - - return ( -
- -
- ); -}; +}> = ({navigation, custom = {}}) => ; export const DefaultNavigation = DefaultTemplate.bind({}); export const NavigationWithBorder = DefaultTemplate.bind({}); export const NavigationWithCustomItems = DefaultTemplate.bind({}); From 2a5dc375f95906a5d19736ecd51b63373244d79e Mon Sep 17 00:00:00 2001 From: reffat Date: Mon, 3 Mar 2025 17:09:30 +0300 Subject: [PATCH 3/4] fix(mobile-navigation): fixed component logic --- src/models/navigation.ts | 1 - src/navigation/components/Navigation/Navigation.tsx | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/models/navigation.ts b/src/models/navigation.ts index df4107422..0f1e8bc8b 100644 --- a/src/models/navigation.ts +++ b/src/models/navigation.ts @@ -98,7 +98,6 @@ export interface HeaderData { * @type {NavigationItemModel[]} */ customMobileHeaderItems?: NavigationItemModel[]; - mobilePortalContainer?: React.RefObject; iconSize?: number; withBorder?: boolean; withBorderOnScroll?: boolean; diff --git a/src/navigation/components/Navigation/Navigation.tsx b/src/navigation/components/Navigation/Navigation.tsx index 9e3dffdb5..4d61152ba 100644 --- a/src/navigation/components/Navigation/Navigation.tsx +++ b/src/navigation/components/Navigation/Navigation.tsx @@ -14,7 +14,9 @@ const b = block('navigation'); export interface NavigationComponentProps extends ClassNameProps { logo: ThemedNavigationLogoData; - data: HeaderData; + data: HeaderData & { + mobilePortalContainer?: React.RefObject; + }; } export const Navigation: React.FC = ({data, logo, className}) => { From 6b73817fba61c90a0f37e5696b565b4ef4d91777 Mon Sep 17 00:00:00 2001 From: reffat Date: Wed, 5 Mar 2025 11:45:06 +0300 Subject: [PATCH 4/4] fix(navigation): updated props --- src/navigation/components/Navigation/Navigation.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/navigation/components/Navigation/Navigation.tsx b/src/navigation/components/Navigation/Navigation.tsx index 4d61152ba..f571b9599 100644 --- a/src/navigation/components/Navigation/Navigation.tsx +++ b/src/navigation/components/Navigation/Navigation.tsx @@ -14,12 +14,16 @@ const b = block('navigation'); export interface NavigationComponentProps extends ClassNameProps { logo: ThemedNavigationLogoData; - data: HeaderData & { - mobilePortalContainer?: React.RefObject; - }; + data: HeaderData; + mobilePortalContainer?: React.RefObject; } -export const Navigation: React.FC = ({data, logo, className}) => { +export const Navigation: React.FC = ({ + data, + logo, + className, + mobilePortalContainer, +}) => { const { leftItems, rightItems, @@ -27,7 +31,6 @@ export const Navigation: React.FC = ({data, logo, clas iconSize = 20, withBorder = false, withBorderOnScroll = true, - mobilePortalContainer, } = data; const [isSidebarOpened, setIsSidebarOpened] = useState(false);