chore: fixed review comments

gravity-ui · Sep 19, 2023 · 23c7b19 · 23c7b19
1 parent a753771
commit 23c7b19
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 26 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -1,12 +1,12 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 
 import {MenuItem} from '../types';
 
 import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants';
 
 import {Content} from '../Content';
 
-import {AsideHeaderContextProvider} from './AsideHeaderContext';
+import {AsideHeaderContextProvider, AsideHeaderInnerContextProvider} from './AsideHeaderContext';
 import {
     AsideHeaderGeneralProps,
     AsideHeaderDefaultProps,
@@ -38,20 +38,24 @@ export const AsideHeader = (props: AsideHeaderInnerProps) => {
         [onClosePanel],
     );
 
+    const asideHeaderContextValue = useMemo(() => ({size, compact: Boolean(compact)}), []);
+
     return (
-        <AsideHeaderContextProvider value={{...props, size, onItemClick}}>
-            <div className={b({compact}, className)}>
-                <div className={b('pane-container')}>
-                    {/* First Panel */}
-                    <FirstPanel />
-                    {/* Second Panel */}
-                    <Content
-                        size={size}
-                        renderContent={props.renderContent}
-                        className={b('content')}
-                    />
+        <AsideHeaderContextProvider value={asideHeaderContextValue}>
+            <AsideHeaderInnerContextProvider value={{...props, size, onItemClick}}>
+                <div className={b({compact}, className)}>
+                    <div className={b('pane-container')}>
+                        {/* First Panel */}
+                        <FirstPanel />
+                        {/* Second Panel */}
+                        <Content
+                            size={size}
+                            renderContent={props.renderContent}
+                            className={b('content')}
+                        />
+                    </div>
                 </div>
-            </div>
+            </AsideHeaderInnerContextProvider>
         </AsideHeaderContextProvider>
     );
 };
diff --git a/src/components/AsideHeader/AsideHeaderContext.ts b/src/components/AsideHeader/AsideHeaderContext.ts
@@ -2,7 +2,7 @@ import React from 'react';
 import {MenuItem} from '../types';
 import {AsideHeaderInnerProps} from './asideHeaderTypes';
 
-export interface AsideHeaderContextType extends AsideHeaderInnerProps {
+export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     size: number;
     onItemClick: (
         item: MenuItem,
@@ -11,6 +11,26 @@ export interface AsideHeaderContextType extends AsideHeaderInnerProps {
     ) => void;
 }
 
+export const AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(
+    undefined,
+);
+
+export const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;
+
+export const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {
+    const contextValue = React.useContext(AsideHeaderInnerContext);
+    if (contextValue === undefined) {
+        throw new Error(`AsideHeaderInnerContext is not initialized.
+        Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);
+    }
+    return contextValue;
+};
+
+export interface AsideHeaderContextType {
+    compact?: boolean;
+    size: number;
+}
+
 export const AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>(
     undefined,
 );
@@ -21,7 +41,8 @@ export const useAsideHeaderContext = (): AsideHeaderContextType => {
     const contextValue = React.useContext(AsideHeaderContext);
     if (contextValue === undefined) {
         throw new Error(`AsideHeaderContext is not initialized.
-        Please check if you wrapped your component with AsideHeaderContext.Provider`);
+        Please check if you wrapped your component with AsideHeader
+        Context.Provider`);
     }
     return contextValue;
 };
diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx
@@ -10,8 +10,6 @@ function renderTag(tag: string) {
 }
 
 export const EMPTY_CONTEXT_VALUE: AsideHeaderContextType = {
-    onItemClick: () => {},
-    logo: {text: () => null},
     size: ASIDE_HEADER_EXPANDED_WIDTH,
 };
 

diff --git a/src/components/AsideHeader/components/CollapseButton.tsx b/src/components/AsideHeader/components/CollapseButton.tsx
@@ -5,15 +5,15 @@ import {fakeDisplayName} from '../../helpers';
 import i18n from '../i18n';
 
 import {b} from '../asideHeaderUtils';
-import {useAsideHeaderContext} from '../AsideHeaderContext';
+import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 
 import controlMenuButtonIcon from '../../../../assets/icons/control-menu-button.svg';
 
 // TODO: remove temporary fix for expand button
 const NotIcon = fakeDisplayName('NotIcon', Icon);
 
 export const CollapseButton = () => {
-    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderContext();
+    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderInnerContext();
 
     const onCollapseButtonClick = useCallback(() => {
         onChangeCompact?.(!compact);

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -1,6 +1,6 @@
 import React, {useRef} from 'react';
 import {CompositeBar} from '../../CompositeBar/CompositeBar';
-import {useAsideHeaderContext} from '../AsideHeaderContext';
+import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../asideHeaderUtils';
 
 import i18n from '../i18n';
@@ -18,7 +18,7 @@ export const FirstPanel = () => {
         menuMoreTitle,
         renderFooter,
         compact,
-    } = useAsideHeaderContext();
+    } = useAsideHeaderInnerContext();
 
     const asideRef = useRef<HTMLDivElement>(null);
 

diff --git a/src/components/AsideHeader/components/Header.tsx b/src/components/AsideHeader/components/Header.tsx
@@ -9,14 +9,14 @@ import {CompositeBar} from '../../CompositeBar/CompositeBar';
 
 import headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';
 
-import {useAsideHeaderContext} from '../AsideHeaderContext';
+import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../asideHeaderUtils';
 
 const DEFAULT_SUBHEADER_ITEMS: SubheaderMenuItem[] = [];
 
 export const Header = () => {
     const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =
-        useAsideHeaderContext();
+        useAsideHeaderInnerContext();
 
     const onLogoClick = useCallback(
         (event: React.MouseEvent<HTMLElement, MouseEvent>) => {

diff --git a/src/components/AsideHeader/components/Panels.tsx b/src/components/AsideHeader/components/Panels.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import {Drawer, DrawerItem} from '../../Drawer/Drawer';
 
-import {useAsideHeaderContext} from '../AsideHeaderContext';
+import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import {b} from '../asideHeaderUtils';
 
 export const Panels = () => {
-    const {panelItems, onClosePanel, size} = useAsideHeaderContext();
+    const {panelItems, onClosePanel, size} = useAsideHeaderInnerContext();
 
     return panelItems ? (
         <Drawer