Skip to content

Commit 99493a4

Browse files
author
berdysheva
committed
fix(navigation): refactoring
1 parent 99122a9 commit 99493a4

File tree

18 files changed

+290
-217
lines changed

18 files changed

+290
-217
lines changed

‎README.md‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -32,59 +32,81 @@ const Page: WithChildren<PageProps> = ({content}) => (
3232

3333
```typescript
3434
interface PageConstructorProps {
35-
content: PageContent; //Blocks data in JSON format.
36-
shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and lets you set conditions for its display.
37-
custom?: Custom; //Custom blocks (see `Customization`).
38-
renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
35+
content: PageContent; //Blocks data in JSON format.
36+
shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and lets you set conditions for its display.
37+
custom?: Custom; //Custom blocks (see `Customization`).
38+
renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
39+
navigation?: NavigationData; // Navigation data for using navigation component in JSON format
3940
}
4041

4142
interface PageConstructorProviderProps {
42-
isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
43-
locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
44-
location?: Location; //API of the browser or router history, the page URL.
45-
metrika?: Metrika; //Functions for sending analytics
46-
ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
47-
theme?: 'light' | 'dark'; //Theme to render the page with.
43+
isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
44+
locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
45+
location?: Location; //API of the browser or router history, the page URL.
46+
metrika?: Metrika; //Functions for sending analytics
47+
ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
48+
theme?: 'light' | 'dark'; //Theme to render the page with.
4849
}
4950

5051
export interface PageContent extends Animatable {
51-
blocks: Block[];
52-
menu?: Menu;
53-
background?: MediaProps;
54-
footnotes?: string[];
52+
blocks: Block[];
53+
menu?: Menu;
54+
background?: MediaProps;
55+
footnotes?: string[];
5556
}
5657

5758
interface Custom {
58-
blocks?: CustomItems;
59-
subBlocks?:CustomItems;
60-
headers?: CustomItems;
61-
loadable?: LoadableConfig;
59+
blocks?: CustomItems;
60+
subBlocks?: CustomItems;
61+
headers?: CustomItems;
62+
loadable?: LoadableConfig;
6263
}
6364

6465
type ShouldRenderBlock = (block: Block, blockKey: string) => Boolean;
6566

66-
interface Location = {
67-
history?: History;
68-
search?: string;
69-
hash?: string;
70-
pathname?: string;
71-
hostname?: string;
72-
};
73-
74-
interface Locale = {
75-
lang?: Lang;
76-
tld?: string;
77-
};
78-
79-
interface SSR = {
80-
isServer?: boolean;
67+
interface Location {
68+
history?: History;
69+
search?: string;
70+
hash?: string;
71+
pathname?: string;
72+
hostname?: string;
8173
}
8274

83-
interface Metrika = {
84-
metrika?: any;
85-
pixel?: any;
75+
interface Locale {
76+
lang?: Lang;
77+
tld?: string;
8678
}
8779

80+
interface SSR {
81+
isServer?: boolean;
82+
}
83+
84+
interface Metrika {
85+
metrika?: any;
86+
pixel?: any;
87+
}
88+
89+
interface NavigationData {
90+
logo: NavigationLogo;
91+
header: HeaderData;
92+
}
93+
94+
interface NavigationLogo {
95+
icon: ImageProps;
96+
text?: string;
97+
url?: string;
98+
}
99+
100+
interface HeaderData {
101+
leftItems: NavigationItem[];
102+
rightItems?: NavigationItem[];
103+
}
104+
105+
interface NavigationLogo {
106+
icon: ImageProps;
107+
text?: string;
108+
url?: string;
109+
}
88110
```
89111

90112
### Custom blocks

‎src/components/OverflowScroller/OverflowScroller.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@ $block: '.#{$ns}overflow-scroller';
1616
&__scroller {
1717
position: absolute;
1818
z-index: 10;
19+
top: 0;
1920

2021
display: flex;
2122
justify-content: flex-end;
2223
align-items: center;
2324

2425
width: 32px;
26+
height: calc(100% - 1px);
2527

2628
cursor: pointer;
2729

‎src/components/RouterLink/RouterLink.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import {WithChildren} from '../../models';
44

55
export interface RouterLinkProps {
66
href: string;
7-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
8-
[key: string]: any;
7+
[key: string]: unknown;
98
}
109

1110
const RouterLink = ({href, children}: WithChildren<RouterLinkProps>) => {

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,6 @@ export {default as Author} from './Author/Author';
3434
export {default as RouterLink} from './RouterLink/RouterLink';
3535
export {default as HTML} from './HTML/HTML';
3636
export {default as Header} from './navigation/components/Header/Header';
37+
export * as Navigation from './navigation/components/index';
3738

3839
export type {RouterLinkProps} from './RouterLink/RouterLink';

‎src/components/navigation/components/Header/Header.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
height: var(--header-height);
1616

1717
background-color: var(--yc-color-base-background);
18-
box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
18+
box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
1919

2020
&__wrapper {
2121
display: flex;

‎src/components/navigation/components/Header/Header.tsx‎

Lines changed: 64 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,30 @@ export interface HeaderProps {
2121
data: HeaderData;
2222
}
2323

24+
interface MobileMenuButtonProps {
25+
isSidebarOpened: boolean;
26+
onSidebarOpenedChange: (arg: boolean) => void;
27+
}
28+
29+
const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({
30+
isSidebarOpened,
31+
onSidebarOpenedChange,
32+
}) => {
33+
const iconProps = {icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36};
34+
35+
return (
36+
<Control
37+
className={b('mobile-menu-button')}
38+
onClick={(e: MouseEvent) => {
39+
e.stopPropagation();
40+
onSidebarOpenedChange(!isSidebarOpened);
41+
}}
42+
size="l"
43+
{...iconProps}
44+
/>
45+
);
46+
};
47+
2448
export const Header: React.FC<HeaderProps> = ({data, logo}) => {
2549
const {leftItems, rightItems} = data;
2650
const [isSidebarOpened, setIsSidebarOpened] = useState(false);
@@ -38,77 +62,51 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
3862
setIsSidebarOpened(false);
3963
}, []);
4064

41-
const renderLogo = (
42-
<div className={b('left')}>
43-
<Logo {...logo} className={b('logo')} />
44-
</div>
45-
);
46-
47-
const renderLeft = (
48-
<div className={b('navigation-container')}>
49-
<Navigation
50-
className={b('navigation')}
51-
links={leftItems}
52-
activeItemIndex={activeItemIndex}
53-
onActiveItemChange={onActiveItemChange}
54-
/>
55-
</div>
56-
);
57-
58-
const renderMobileMenuButton = () => {
59-
const iconProps = {icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36};
60-
61-
return (
62-
<Control
63-
className={b('mobile-menu-button')}
64-
onClick={(e: MouseEvent) => {
65-
e.stopPropagation();
66-
onSidebarOpenedChange(!isSidebarOpened);
67-
}}
68-
size="l"
69-
{...iconProps}
70-
/>
71-
);
72-
};
73-
74-
const renderRightItems = (
75-
<div className={b('buttons')}>
76-
{rightItems &&
77-
rightItems.map((button) => (
78-
<NavigationItem key={button.text} data={button} className={b('button')} />
79-
))}
80-
</div>
81-
);
82-
83-
const renderRight = (
84-
<div className={b('right')}>
85-
{renderMobileMenuButton()}
86-
{rightItems && renderRightItems}
87-
</div>
88-
);
89-
90-
const renderMobileNavigation = (
91-
<OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>
92-
<MobileNavigation
93-
topItems={leftItems}
94-
bottomItems={rightItems}
95-
isOpened={isSidebarOpened}
96-
activeItemIndex={activeItemIndex}
97-
onActiveItemChange={onActiveItemChange}
98-
onClose={hideSidebar}
99-
/>
100-
</OutsideClick>
101-
);
102-
10365
return (
10466
<Grid className={b()}>
10567
<Row>
10668
<Col>
10769
<header className={b('wrapper')}>
108-
{logo && renderLogo}
109-
{leftItems && renderLeft}
110-
{renderRight}
111-
{renderMobileNavigation}
70+
{logo && (
71+
<div className={b('left')}>
72+
<Logo {...logo} className={b('logo')} />
73+
</div>
74+
)}
75+
<div className={b('navigation-container')}>
76+
<Navigation
77+
className={b('navigation')}
78+
links={leftItems}
79+
activeItemIndex={activeItemIndex}
80+
onActiveItemChange={onActiveItemChange}
81+
/>
82+
</div>
83+
<div className={b('right')}>
84+
<MobileMenuButton
85+
isSidebarOpened={isSidebarOpened}
86+
onSidebarOpenedChange={onSidebarOpenedChange}
87+
/>
88+
{rightItems && (
89+
<div className={b('buttons')}>
90+
{rightItems.map((button) => (
91+
<NavigationItem
92+
key={button.text}
93+
data={button}
94+
className={b('button')}
95+
/>
96+
))}
97+
</div>
98+
)}
99+
</div>
100+
<OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>
101+
<MobileNavigation
102+
topItems={leftItems}
103+
bottomItems={rightItems}
104+
isOpened={isSidebarOpened}
105+
activeItemIndex={activeItemIndex}
106+
onActiveItemChange={onActiveItemChange}
107+
onClose={hideSidebar}
108+
/>
109+
</OutsideClick>
112110
</header>
113111
</Col>
114112
</Row>

‎src/components/navigation/components/MobileNavigation/MobileNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import block from 'bem-cn-lite';
22
import React, {MouseEventHandler, useRef, useCallback} from 'react';
3-
import Foldable from '../../../Foldable/Foldable';
43
import {Popup, Portal} from '@gravity-ui/uikit';
54

5+
import Foldable from '../../../Foldable/Foldable';
66
import {
77
NavigationItem as NavigationItemModel,
88
NavigationDropdownItem,

0 commit comments

Comments
 (0)