refactor(Navigation): use Popup from UIKit to reduce custom logic (#268)

DC-RomanKarpov · web-flow · commit f0189a7f4437 · 2023-04-11T12:27:59.000+02:00
* refactor(Navigation): use Popup from UIKit to reduce custom logic

* fix(NavigationItem): lint error
diff --git a/src/navigation/components/Header/Header.scss b/src/navigation/components/Header/Header.scss
@@ -89,11 +89,6 @@ $block: '.#{$ns}header';
     &__buttons-item {
         position: relative;
 
-        height: var(--header-height);
-
-        line-height: var(--header-height);
-        @include navigation-link();
-
         &:not(:last-child) {
             margin-right: $indentS;
         }
diff --git a/src/navigation/components/Navigation/Navigation.scss b/src/navigation/components/Navigation/Navigation.scss
@@ -17,11 +17,6 @@ $block: '.#{$ns}navigation';
     &__links-item {
         position: relative;
 
-        height: var(--header-height);
-
-        line-height: var(--header-height);
-        @include navigation-link();
-
         &:not(:last-child) {
             margin-right: $indentS;
         }
diff --git a/src/navigation/components/Navigation/Navigation.tsx b/src/navigation/components/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect} from 'react';
 
 import _ from 'lodash';
 
@@ -12,7 +12,6 @@ import {NavigationListItem} from '../NavigationListItem/NavigationListItem';
 import './Navigation.scss';
 
 const b = block('navigation');
-const EVENT_HANDLE_DELAY = 100;
 
 export interface NavigationProps {
     links: NavigationItemModel[];
@@ -27,77 +26,29 @@ const Navigation: React.FC<NavigationProps> = ({
     onActiveItemChange,
     links,
     activeItemId,
-    highlightActiveItem,
 }) => {
     const {asPath, pathname} = useContext(LocationContext);
-    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
-    const [itemPositions, setItemPosition] = useState<number[]>([]);
-
-    const [lastLeftScroll, setLastLeftScroll] = useState(0);
 
     const hidePopup = useCallback(() => {
         onActiveItemChange();
     }, [onActiveItemChange]);
 
-    const calculateItemPositions = useCallback(() => {
-        if (itemRefs.current.length) {
-            const currentItemPositions = itemRefs.current.map(
-                (itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0,
-            );
-
-            setItemPosition(currentItemPositions);
-        }
-    }, []);
-
-    useEffect(() => {
-        const debouncedCalculateItemPositions = _.debounce(
-            calculateItemPositions,
-            EVENT_HANDLE_DELAY,
-        );
-        const debouncedCalculateOnScroll = _.debounce(() => {
-            const curLeftScroll = window.pageXOffset;
-
-            if (curLeftScroll !== lastLeftScroll) {
-                setLastLeftScroll(window.pageXOffset);
-                calculateItemPositions();
-            }
-        }, EVENT_HANDLE_DELAY);
-
-        calculateItemPositions();
-        setLastLeftScroll(window.pageXOffset);
-
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', debouncedCalculateOnScroll);
-
-        return () => {
-            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
-            window.removeEventListener('scroll', debouncedCalculateOnScroll);
-        };
-    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
-
     useEffect(() => {
         hidePopup();
     }, [hidePopup, asPath, pathname]);
 
     return (
-        <OverflowScroller
-            className={b(null, className)}
-            onScrollStart={hidePopup}
-            onScrollEnd={calculateItemPositions}
-        >
+        <OverflowScroller className={b(null, className)} onScrollStart={hidePopup}>
             <nav>
                 <ul className={b('links')}>
                     {links.map((link, index) => (
                         <NavigationListItem
                             key={index}
                             className={b('links-item')}
                             item={link}
-                            itemRefs={itemRefs}
                             index={index}
                             activeItemId={activeItemId}
-                            highlightActiveItem={highlightActiveItem}
                             hidePopup={hidePopup}
-                            itemPositions={itemPositions}
                             column={ItemColumnName.Left}
                             onActiveItemChange={onActiveItemChange}
                         />
diff --git a/src/navigation/components/NavigationDropdownItem/NavigationDropdownItem.tsx b/src/navigation/components/NavigationDropdownItem/NavigationDropdownItem.tsx
@@ -1,41 +1,43 @@
-import React, {Fragment, MouseEventHandler} from 'react';
+import React, {Fragment, MouseEventHandler, useRef} from 'react';
 
 import {NavigationDropdownItem, NavigationItemType} from '../../../models';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
 
 export interface NavigationDropdownProps {
+    className?: string;
     data: NavigationDropdownItem;
     onClick: MouseEventHandler;
     isActive: boolean;
-    position: number;
     hidePopup: () => void;
 }
 
 const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
+    className,
     data,
     isActive,
-    position,
     hidePopup,
     onClick,
 }) => {
+    const anchorRef = useRef<HTMLElement>(null);
     const {text, icon, items, ...popupProps} = data;
 
     return (
         <Fragment>
             <NavigationItem
+                className={className}
+                ref={anchorRef}
                 onClick={onClick}
                 isOpened={isActive}
                 data={{text, type: NavigationItemType.Dropdown, icon}}
             />
-            {isActive && (
-                <NavigationPopup
-                    left={position}
-                    onClose={hidePopup}
-                    items={items}
-                    {...popupProps}
-                />
-            )}
+            <NavigationPopup
+                open={isActive}
+                onClose={hidePopup}
+                items={items}
+                anchorRef={anchorRef}
+                {...popupProps}
+            />
         </Fragment>
     );
 };
diff --git a/src/navigation/components/NavigationItem/NavigationItem.tsx b/src/navigation/components/NavigationItem/NavigationItem.tsx
@@ -27,23 +27,27 @@ const NavigationItemsMap: Record<NavigationItemType, React.ComponentType<any>> =
     [NavigationItemType.GithubButton]: GithubButton,
 };
 
-const NavigationItem: React.FC<NavigationItemProps> = ({data, className, ...props}) => {
-    const {type = NavigationItemType.Link} = data;
-    const Component = NavigationItemsMap[type];
-    const componentProps = useMemo(
-        () => ({
-            className,
-            ...data,
-            ...props,
-        }),
-        [className, data, props],
-    );
+const NavigationItem = React.forwardRef<HTMLElement, NavigationItemProps>(
+    ({data, className, ...props}, ref) => {
+        const {type = NavigationItemType.Link} = data;
+        const Component = NavigationItemsMap[type];
+        const componentProps = useMemo(
+            () => ({
+                className,
+                ...data,
+                ...props,
+                ref,
+            }),
+            [className, data, props, ref],
+        );
 
-    return (
-        <BlockIdContext.Provider value={ANALYTICS_ID}>
-            <Component {...componentProps} />
-        </BlockIdContext.Provider>
-    );
-};
+        return (
+            <BlockIdContext.Provider value={ANALYTICS_ID}>
+                <Component {...componentProps} />
+            </BlockIdContext.Provider>
+        );
+    },
+);
+NavigationItem.displayName = 'NavigationItem';
 
 export default NavigationItem;
diff --git a/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx b/src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx
@@ -15,25 +15,22 @@ const TOGGLE_ARROW_SIZE = 12;
 
 type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
 
-export const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
-    text,
-    icon,
-    isOpened,
-    className,
-    ...props
-}) => {
-    const iconData = icon && getMediaImage(icon);
+export const NavigationDropdown = React.forwardRef<HTMLElement, NavigationDropdownProps>(
+    ({text, icon, isOpened, className, ...props}, ref) => {
+        const iconData = icon && getMediaImage(icon);
 
-    return (
-        <span {...props} className={b(null, className)}>
-            <ContentWrapper text={text} icon={iconData} />
-            <ToggleArrow
-                className={b('arrow')}
-                size={TOGGLE_ARROW_SIZE}
-                type={'vertical'}
-                iconType="navigation"
-                open={isOpened}
-            />
-        </span>
-    );
-};
+        return (
+            <span ref={ref} {...props} className={b(null, className)}>
+                <ContentWrapper text={text} icon={iconData} />
+                <ToggleArrow
+                    className={b('arrow')}
+                    size={TOGGLE_ARROW_SIZE}
+                    type={'vertical'}
+                    iconType="navigation"
+                    open={isOpened}
+                />
+            </span>
+        );
+    },
+);
+NavigationDropdown.displayName = 'NavigationDropdown';
diff --git a/src/navigation/components/NavigationListItem/NavigationListItem.scss b/src/navigation/components/NavigationListItem/NavigationListItem.scss
@@ -1,8 +1,23 @@
 @import '../../../../styles/variables';
+@import '../../../../styles/mixins';
 
 $block: '.#{$ns}navigation-list-item';
 
 #{$block} {
+    height: var(--header-height);
+    line-height: var(--header-height);
+    cursor: pointer;
+
+    @include islands-focus();
+    @include reset-link-style();
+
+    &__content {
+        &:hover,
+        &:active {
+            color: var(--yc-color-text-link);
+        }
+    }
+
     &__slider-container {
         position: absolute;
         right: 0;
diff --git a/src/navigation/components/NavigationListItem/NavigationListItem.tsx b/src/navigation/components/NavigationListItem/NavigationListItem.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React from 'react';
 
 import {ClassNameProps, NavigationItemModel, NavigationItemType} from '../../../models';
 import {block} from '../../../utils';
@@ -9,33 +9,28 @@ import NavigationItem from '../NavigationItem/NavigationItem';
 
 import './NavigationListItem.scss';
 
-const b = block('navigation');
+const b = block('navigation-list-item');
 
 type NavigationListItemProps = {
     item: NavigationItemModel;
     index: number;
     column: ItemColumnName;
     activeItemId?: string;
-    itemPositions?: number[];
-    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
     highlightActiveItem?: boolean;
     hidePopup: () => void;
     onActiveItemChange: (id?: string) => void;
 } & ClassNameProps;
 
 export const NavigationListItem = ({
     item,
-    itemRefs,
     className,
     index,
     activeItemId,
     highlightActiveItem,
     hidePopup,
-    itemPositions,
     column,
     onActiveItemChange,
 }: NavigationListItemProps) => {
-    const ref = useRef<HTMLLIElement | null>(null);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = getItemClickHandler({
@@ -46,19 +41,17 @@ export const NavigationListItem = ({
     });
 
     return (
-        <li ref={itemRefs ? (el) => itemRefs.current.push(el) : ref} className={className}>
+        <li className={b(null, className)}>
             {item.type === NavigationItemType.Dropdown ? (
                 <NavigationDropdownItem
+                    className={b('content')}
                     data={item}
                     onClick={onClick}
                     isActive={isActive}
-                    position={
-                        itemPositions?.[index] || ref.current?.getBoundingClientRect().left || 0
-                    }
                     hidePopup={hidePopup}
                 />
             ) : (
-                <NavigationItem data={item} onClick={onClick} />
+                <NavigationItem className={b('content')} data={item} onClick={onClick} />
             )}
             {highlightActiveItem && isActive && (
                 <div className={b('slider-container')}>
diff --git a/src/navigation/components/NavigationPopup/NavigationPopup.scss b/src/navigation/components/NavigationPopup/NavigationPopup.scss
@@ -4,15 +4,11 @@
 $block: '.#{$ns}navigation-popup';
 
 #{$block} {
-    $offset: calc(#{$gridGutter} * 2);
+    $offset: calc($gridGutter * 2 * -1);
 
-    position: fixed;
-    top: calc(var(--header-height) - #{$indentXS});
+    margin-left: $offset;
+    margin-top: -#{$indentXS};
 
-    padding-right: 4px;
-    padding-left: 4px;
-
-    transform: translateX(calc(#{$offset} * -1));
     @include desktop-only();
     @include navigation-popup();
 
diff --git a/src/navigation/components/NavigationPopup/NavigationPopup.tsx b/src/navigation/components/NavigationPopup/NavigationPopup.tsx
diff --git a/styles/mixins.scss b/styles/mixins.scss
