fix(AsideHeader): change ref type (#128)

* fix(AsideHeader): change ref type * chore(CompositeBar): change popupProps
gravity-ui · Oct 9, 2023 · a3274e8 · a3274e8
1 parent 8232679
commit a3274e8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -28,7 +28,9 @@ body {
     }
 
     &__settings {
-        padding-right: 30px;
+        width: 200px;
+        height: 100%;
+        padding: 20px;
     }
 
     &__settings-ul {

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -129,7 +129,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 compact={compact}
                 multipleTooltip={multipleTooltip}
                 openModalSubscriber={openModalSubscriber}
-                renderFooter={({compact}) => (
+                renderFooter={({compact, asideRef}) => (
                     <React.Fragment>
                         <FooterItem
                             compact={compact}
@@ -151,12 +151,14 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                             }}
                             enableTooltip={false}
                             popupVisible={popupVisible}
-                            popupOffset={[0, 8]}
+                            popupAnchor={asideRef}
+                            popupPlacement={['right-end']}
+                            popupOffset={[-20, 10]}
                             onClosePopup={() => setPopupVisible(false)}
                             renderPopupContent={() => {
                                 return (
-                                    <div className={b('settings-ul')}>
-                                        <ul>
+                                    <div className={b('settings')}>
+                                        <ul className={b('settings-ul')}>
                                             <li>Set 1</li>
                                             <li>Set 2</li>
                                             <li>Set 3</li>

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -1,4 +1,6 @@
-import React, {useRef, useMemo} from 'react';
+import React, {useRef} from 'react';
+
+import {setRef} from '@gravity-ui/uikit';
 import {CompositeBar} from '../../CompositeBar/CompositeBar';
 import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../utils';
@@ -23,12 +25,14 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
 
     const asideRef = useRef<HTMLDivElement>(null);
 
-    const popupAnchorRef = useMemo(() => ref || asideRef, [ref, asideRef]);
+    React.useEffect(() => {
+        setRef<HTMLDivElement>(ref, asideRef.current);
+    }, [ref]);
 
     return (
         <>
             <div className={b('aside')} style={{width: size}}>
-                <div className={b('aside-popup-anchor')} ref={popupAnchorRef} />
+                <div className={b('aside-popup-anchor')} ref={asideRef} />
                 <div className={b('aside-content', {['with-decoration']: headerDecoration})}>
                     <Header />
                     {visibleMenuItems?.length ? (
@@ -46,7 +50,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
                         {renderFooter?.({
                             size,
                             compact: Boolean(compact),
-                            asideRef: popupAnchorRef,
+                            asideRef,
                         })}
                     </div>
                     <CollapseButton />

diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -14,7 +14,7 @@ export interface AsideHeaderGeneralProps {
     renderFooter?: (data: {
         size: number;
         compact: boolean;
-        asideRef: React.ForwardedRef<HTMLDivElement>;
+        asideRef: React.RefObject<HTMLDivElement>;
     }) => React.ReactNode;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -21,11 +21,11 @@ import './Item.scss';
 const b = block('composite-bar-item');
 
 interface ItemPopup {
-    popupVisible?: boolean;
-    popupAnchor?: React.RefObject<HTMLElement>;
-    popupPlacement?: PopupPlacement;
+    popupVisible?: PopupProps['open'];
+    popupAnchor?: PopupProps['anchorRef'];
+    popupPlacement?: PopupProps['placement'];
     popupOffset?: PopupProps['offset'];
-    popupKeepMounted?: boolean;
+    popupKeepMounted?: PopupProps['keepMounted'];
     renderPopupContent?: () => React.ReactNode;
     onClosePopup?: () => void;
 }