wip

src/components/BookmarkButton/BookmarkButton.tsx

@@ -12,24 +12,21 @@ const b = block('dc-bookmark-button');
 
 export interface BookmarkButtonProps {
     className?: string;
-    bookmarkedPage: boolean;
-    onChangeBookmarkPage: (value: boolean) => void;
+    isBookmarked: boolean;
+    onBookmark: (value: boolean) => void;
 }
 
-export const BookmarkButton: React.FC<BookmarkButtonProps> = ({
-    bookmarkedPage,
-    onChangeBookmarkPage,
-}) => {
+export const BookmarkButton: React.FC<BookmarkButtonProps> = ({isBookmarked, onBookmark}) => {
     return (
         <Button
-            className={b({active: bookmarkedPage})}
+            className={b({active: isBookmarked})}
             onClick={() => {
-                onChangeBookmarkPage(!bookmarkedPage);
+                onBookmark(!isBookmarked);
             }}
             view="flat-secondary"
         >
             <Button.Icon className={b('icon')}>
-                <Icon data={bookmarkedPage ? StarActive : StarInactive} size={24} />
+                <Icon data={isBookmarked ? StarActive : StarInactive} size={24} />
             </Button.Icon>
         </Button>
     );

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,6 +12,7 @@ export interface BreadcrumbsProps {
     items: BreadcrumbItem[];
     className?: string;
 }
+
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({items, className}) => {
     if (!items || !items.length) {
         return null;

src/components/Contributors/Contributors.tsx

@@ -1,35 +1,25 @@
-import React, {useEffect} from 'react';
+import React from 'react';
+
 import block from 'bem-cn-lite';
-import {useTranslation} from 'react-i18next';
 
+import {useTranslation} from '../../hooks';
+import {Contributor} from '../../models';
 import {ContributorAvatars} from '../ContributorAvatars';
-import {Lang, Contributor} from '../../models';
 
 import './Contributors.scss';
 
 const b = block('contributors');
 
 export interface ContributorsProps {
-    lang: Lang;
     users: Contributor[];
     onlyAuthor?: boolean;
     isAuthor?: boolean;
     translationName?: string;
 }
 
 const Contributors: React.FC<ContributorsProps> = (props) => {
-    const {
-        users,
-        lang,
-        onlyAuthor = false,
-        isAuthor = false,
-        translationName = 'contributors',
-    } = props;
-    const {t, i18n} = useTranslation(translationName);
-
-    useEffect(() => {
-        i18n.changeLanguage(lang);
-    }, [i18n, lang]);
+    const {users, onlyAuthor = false, isAuthor = false, translationName = 'contributors'} = props;
+    const {t} = useTranslation(translationName);
 
     return (
         <div className={b()}>

src/components/Control/Control.tsx

@@ -1,9 +1,10 @@
-import React, {useCallback, useState, useRef} from 'react';
+import React, {forwardRef, useCallback, useImperativeHandle, useRef} from 'react';
+
+import {Button, Popup} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
-import {Popup, Button} from '@gravity-ui/uikit';
 
+import {PopperPosition, usePopupState} from '../../hooks';
 import {ControlSizes} from '../../models';
-import {PopperPosition} from '../../hooks';
 
 import './Control.scss';
 
@@ -30,40 +31,30 @@ const ICONS_SIZES = {
     [ControlSizes.L]: 20,
 };
 
-const Control = (props: ControlProps) => {
+const Control = forwardRef((props: ControlProps, ref) => {
     const {
         onClick,
         className,
         tooltipText,
         isVerticalView,
-        setRef,
         size = ControlSizes.M,
         icon,
         popupPosition,
     } = props;
 
     const controlRef = useRef<HTMLButtonElement | null>(null);
-    const [isVisibleTooltip, setIsVisibleTooltip] = useState(false);
 
-    const showTooltip = () => setIsVisibleTooltip(true);
-    const hideTooltip = () => setIsVisibleTooltip(false);
+    const popupState = usePopupState({autoclose: 3000});
+
     const getTooltipAlign = useCallback(() => {
         if (popupPosition) {
             return popupPosition;
         }
 
         return isVerticalView ? PopperPosition.LEFT_START : PopperPosition.BOTTOM_END;
     }, [isVerticalView, popupPosition]);
-    const _setRef = useCallback(
-        (ref: HTMLButtonElement) => {
-            controlRef.current = ref;
-
-            if (setRef) {
-                setRef(ref);
-            }
-        },
-        [setRef],
-    );
+
+    useImperativeHandle(ref, () => controlRef.current, [controlRef]);
 
     const position = getTooltipAlign();
     const Icon = icon;
@@ -74,28 +65,30 @@ const Control = (props: ControlProps) => {
             <Button
                 view="flat-secondary"
                 onClick={onClick}
-                ref={_setRef}
-                onMouseEnter={showTooltip}
-                onMouseLeave={hideTooltip}
+                ref={controlRef}
+                onMouseEnter={popupState.open}
+                onMouseLeave={popupState.close}
                 className={b(null, className)}
                 size={size}
             >
                 <Button.Icon>
                     <Icon width={iconSize} height={iconSize} />
                 </Button.Icon>
             </Button>
-            <Popup
-                anchorRef={controlRef}
-                open={isVisibleTooltip}
-                onOutsideClick={hideTooltip}
-                contentClassName={b('tooltip')}
-                placement={position}
-            >
-                <span className={b('tooltip-text')}>{tooltipText}</span>
-            </Popup>
+            {controlRef.current && (
+                <Popup
+                    anchorRef={controlRef}
+                    open={popupState.visible}
+                    onOutsideClick={popupState.close}
+                    contentClassName={b('tooltip')}
+                    placement={position}
+                >
+                    <span className={b('tooltip-text')}>{tooltipText}</span>
+                </Popup>
+            )}
         </React.Fragment>
     );
-};
+});
 
 Control.displayName = 'DCControl';