fix(Header): use react-hook

Author: berdysheva

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

@@ -3,10 +3,7 @@
 
 .header {
     $root: &;
-    $searchHeight: 36px;
-    $searchWidth: 122px;
-    $searchButtonWidth: 36px;
-    $searchBreakpoint: 1120px;
+
     position: sticky;
     z-index: 98;
     top: 0;
@@ -46,11 +43,11 @@
 
     &__navigation {
         position: relative;
+        margin-right: $normalOffset;
 
         flex: 1 0 0;
         justify-content: flex-start;
 
-        margin-right: $normalOffset;
         @include desktop-only();
     }
 

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

@@ -1,15 +1,14 @@
-import React, {createRef, MouseEvent} from 'react';
+import React, {MouseEvent, useCallback, useState} from 'react';
 import block from 'bem-cn-lite';
+
+import {HeaderData, NavigationLogo} from '../../../../models';
 import {Col, Grid, Row} from '../../../../grid';
 import OutsideClick from '../../../OutsideClick/OutsideClick';
 import Control from '../../../Control/Control';
-
-import Logo from '../Logo/Logo';
-
-import {HeaderData, NavigationLogo} from '../../../../models';
 import Navigation from '../Navigation/Navigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import NavigationItem from '../NavigationItem/NavigationItem';
+import Logo from '../Logo/Logo';
 
 import {NavigationClose, NavigationOpen} from '../../../../icons';
 
@@ -22,136 +21,99 @@ export interface HeaderProps {
     data: HeaderData;
 }
 
-interface HeaderState {
-    isSidebarOpened: boolean;
-    activeItemIndex: number;
-}
-
-class Header extends React.Component<HeaderProps, HeaderState> {
-    ref = createRef();
-    state = {
-        isSidebarOpened: false,
-        activeItemIndex: -1,
-    };
-
-    render() {
-        return (
-            <Grid className={b()}>
-                <Row>
-                    <Col>
-                        <header className={b('wrapper')}>
-                            {this.renderLogo()}
-                            {this.renderLeft()}
-                            {this.renderRight()}
-                            {this.renderMobileNavigation()}
-                        </header>
-                    </Col>
-                </Row>
-            </Grid>
-        );
-    }
-
-    private renderLeft() {
-        const {activeItemIndex} = this.state;
-        const {leftItems} = this.props.data;
-
-        return (
-            leftItems && (
-                <div className={b('navigation-container')}>
-                    <Navigation
-                        className={b('navigation')}
-                        links={leftItems}
-                        activeItemIndex={activeItemIndex}
-                        onActiveItemChange={this.onActiveItemChange}
-                    />
-                </div>
-            )
-        );
-    }
-
-    private renderLogo() {
-        const {logo} = this.props;
-
-        if (!logo) {
-            return null;
-        }
-
-        return (
-            <div className={b('left')}>
-                <Logo {...logo} className={b('logo')} />
-            </div>
-        );
-    }
-
-    private renderRight() {
-        return (
-            <div className={b('right')}>
-                {this.renderMobileMenuButton()}
-                {this.renderRightItems()}
-            </div>
-        );
-    }
-
-    private renderRightItems() {
-        const {rightItems} = this.props.data;
-
-        return (
-            rightItems && (
-                <div className={b('buttons')}>
-                    {rightItems.map((button) => (
-                        <NavigationItem key={button.text} data={button} className={b('button')} />
-                    ))}
-                </div>
-            )
-        );
-    }
+export const Header: React.FC<HeaderProps> = ({data, logo}) => {
+    const {leftItems, rightItems} = data;
+    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
+    const [activeItemIndex, setActiveItemIndex] = useState(-1);
+
+    const onActiveItemChange = useCallback((index) => {
+        setActiveItemIndex(index);
+    }, []);
+
+    const onSidebarOpenedChange = useCallback((isOpen: boolean) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+
+    const hideSidebar = useCallback(() => {
+        setIsSidebarOpened(false);
+    }, []);
+
+    const renderLogo = (
+        <div className={b('left')}>
+            <Logo {...logo} className={b('logo')} />
+        </div>
+    );
+
+    const renderLeft = (
+        <div className={b('navigation-container')}>
+            <Navigation
+                className={b('navigation')}
+                links={leftItems}
+                activeItemIndex={activeItemIndex}
+                onActiveItemChange={onActiveItemChange}
+            />
+        </div>
+    );
 
-    private renderMobileMenuButton() {
-        const {isSidebarOpened} = this.state;
+    const renderMobileMenuButton = () => {
         const iconProps = {icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36};
 
         return (
             <Control
                 className={b('mobile-menu-button')}
                 onClick={(e: MouseEvent) => {
                     e.stopPropagation();
-                    this.onSidebarOpenedChange(!isSidebarOpened);
+                    onSidebarOpenedChange(!isSidebarOpened);
                 }}
                 size="l"
                 {...iconProps}
             />
         );
-    }
-
-    private renderMobileNavigation() {
-        const {leftItems, rightItems} = this.props.data;
-        const {isSidebarOpened, activeItemIndex} = this.state;
-
-        return (
-            <OutsideClick onOutsideClick={() => this.onSidebarOpenedChange(false)}>
-                <MobileNavigation
-                    topItems={leftItems}
-                    bottomItems={rightItems}
-                    isOpened={isSidebarOpened}
-                    activeItemIndex={activeItemIndex}
-                    onActiveItemChange={this.onActiveItemChange}
-                    onClose={this.hideSidebar}
-                />
-            </OutsideClick>
-        );
-    }
-
-    private onActiveItemChange = (index: number) => {
-        this.setState({activeItemIndex: index});
     };
 
-    private onSidebarOpenedChange = (isSidebarOpened: boolean) => {
-        this.setState({isSidebarOpened});
-    };
-
-    private hideSidebar = () => {
-        this.setState({isSidebarOpened: false});
-    };
-}
+    const renderRightItems = (
+        <div className={b('buttons')}>
+            {rightItems &&
+                rightItems.map((button) => (
+                    <NavigationItem key={button.text} data={button} className={b('button')} />
+                ))}
+        </div>
+    );
+
+    const renderRight = (
+        <div className={b('right')}>
+            {renderMobileMenuButton()}
+            {rightItems && renderRightItems}
+        </div>
+    );
+
+    const renderMobileNavigation = (
+        <OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>
+            <MobileNavigation
+                topItems={leftItems}
+                bottomItems={rightItems}
+                isOpened={isSidebarOpened}
+                activeItemIndex={activeItemIndex}
+                onActiveItemChange={onActiveItemChange}
+                onClose={hideSidebar}
+            />
+        </OutsideClick>
+    );
+
+    return (
+        <Grid className={b()}>
+            <Row>
+                <Col>
+                    <header className={b('wrapper')}>
+                        {logo && renderLogo}
+                        {leftItems && renderLeft}
+                        {renderRight}
+                        {renderMobileNavigation}
+                    </header>
+                </Col>
+            </Row>
+        </Grid>
+    );
+};
 
 export default Header;

src/components/navigation/components/MobileNavigation/MobileNavigation.scss

@@ -12,7 +12,8 @@
     border-bottom-right-radius: $borderRadius;
     border-bottom-left-radius: $borderRadius;
     background-color: var(--yc-color-base-background);
-    box-shadow: 0px 3px 10px var(--yc-color-sfx-shadow);
+    box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+
     @include text-size(body-2);
     @include mobile-tablet-only();
 

src/components/navigation/components/NavigationItem/NavigationItem.tsx

@@ -70,27 +70,30 @@ const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 
 const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
-    const {hostname} = useContext(LocationContext);
+    const {hostname, Link} = useContext(LocationContext);
     const {url, text, icon, arrow, target, ...rest} = props;
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
-
     const content = (
         <Fragment>
             <Content text={text} icon={iconData} />
             {arrow && <NavigationArrow className={b('arrow')} />}
         </Fragment>
     );
 
-    return linkExtraProps?.target ? (
-        <a href={url} title={text} {...rest} {...linkExtraProps}>
-            {content}
-        </a>
-    ) : (
-        <RouterLink href={url} passHref>
-            <a {...rest}>{content}</a>
-        </RouterLink>
-    );
+    if (linkExtraProps?.target || !Link) {
+        return (
+            <a href={url} title={text} {...rest} {...linkExtraProps}>
+                {content}
+            </a>
+        );
+    } else {
+        return (
+            <RouterLink href={url} passHref>
+                <a {...rest}>{content}</a>
+            </RouterLink>
+        );
+    }
 };
 
 const NavigationButton: React.FC<ButtonProps> = (props) => {

src/containers/PageConstructor/__stories__/data.json

@@ -126,10 +126,14 @@
     }
   },
   "navigation": {
+    "logo": {
+      "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+      "text": "Logo"
+    },
     "header": {
       "leftItems": [
         {
-          "text": "Lorem",
+          "text": "Dropdown 1",
           "type": "dropdown",
           "items": [
             {
@@ -151,7 +155,7 @@
           ]
         },
         {
-          "text": "Ipsum",
+          "text": "Dropdown 2",
           "type": "dropdown",
           "items": [
             {
@@ -173,37 +177,24 @@
           ]
         },
         {
-          "text": "Dolor",
-          "type": "dropdown",
-          "items": [
-            {
-              "text": "Lorem ipsum ",
-              "url": "https://example.com"
-            },
-            {
-              "text": "Dolor sit amet",
-              "url": "https://example.com"
-            },
-            {
-              "text": "Consectetur adipiscing",
-              "url": "https://example.com"
-            },
-            {
-              "text": "Ut enim ad minim ",
-              "url": "https://example.com"
-            }
-          ]
+          "text": "Link 1",
+          "url": "http://localhost:7009/downloads",
+          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
+        },
+        {
+          "text": "Link 2",
+          "url": "/../en/downloads"
         }
       ],
       "rightItems": [
         {
-          "text": "Lorem",
+          "text": "Link",
           "url": "https://example.com",
-          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
+          "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"
         },
         {
           "type": "button",
-          "text": "Ipsum",
+          "text": "Button",
           "url": "https://example.com",
           "theme": "pseudo"
         }