feat: added AsideHeaderContext

src/components/AsideHeader/AsideHeader.tsx

@@ -17,6 +17,7 @@ import controlMenuButtonIcon from '../../../assets/icons/control-menu-button.svg
 import headerDividerCollapsedIcon from '../../../assets/icons/divider-collapsed.svg';
 
 import './AsideHeader.scss';
+import {AsideHeaderContextProvider} from './AsideHeaderContext';
 
 // TODO: remove temporary fix for expand button
 const NotIcon = fakeDisplayName('NotIcon', Icon);
@@ -68,18 +69,19 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
         const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
 
         return (
-            <div className={b({compact}, className)}>
-                <div className={b('pane-container')}>
-                    {this.renderFirstPane(size)}
-                    {this.renderSecondPane(size)}
+            <AsideHeaderContextProvider value={{compact, size}}>
+                <div className={b({compact}, className)}>
+                    <div className={b('pane-container')}>
+                        {this.renderFirstPane(size)}
+                        {this.renderSecondPane(size)}
+                    </div>
                 </div>
-            </div>
+            </AsideHeaderContextProvider>
         );
     }
 
     private renderFirstPane = (size: number) => {
-        const {dict, menuItems, panelItems, compact, headerDecoration, multipleTooltip} =
-            this.props;
+        const {dict, menuItems, panelItems, headerDecoration, multipleTooltip} = this.props;
 
         return (
             <React.Fragment>
@@ -90,7 +92,6 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
                         {menuItems?.length ? (
                             <CompositeBar
                                 items={menuItems}
-                                compact={compact}
                                 enableCollapsing={true}
                                 dict={dict}
                                 onItemClick={this.onItemClick}
@@ -119,17 +120,14 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
         );
     };
 
-    private renderLogo = () => (
-        <Logo {...this.props.logo} compact={this.props.compact} onClick={this.onLogoClick} />
-    );
+    private renderLogo = () => <Logo {...this.props.logo} onClick={this.onLogoClick} />;
 
     private renderHeader = () => (
         <div className={b('header', {['with-decoration']: this.props.headerDecoration})}>
             {this.renderLogo()}
 
             <CompositeBar
                 items={this.props.subheaderItems}
-                compact={this.props.compact}
                 enableCollapsing={false}
                 onItemClick={this.onItemClick}
             />
@@ -144,7 +142,7 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     );
 
     private renderFooter = (size: number) => {
-        const {compact, renderFooter} = this.props;
+        const {renderFooter, compact} = this.props;
 
         return (
             <div className={b('footer')}>
@@ -175,7 +173,7 @@ export class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     };
 
     private renderCollapseButton = () => {
-        const {compact, dict} = this.props;
+        const {dict, compact} = this.props;
         const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
 
         return (

src/components/AsideHeader/AsideHeaderContext.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import {ASIDE_HEADER_COMPACT_WIDTH} from '../constants';
+
+interface AsideHeaderContextType {
+    compact: boolean;
+    size: number;
+}
+
+export const AsideHeaderContext = React.createContext<AsideHeaderContextType>({
+    compact: false,
+    size: ASIDE_HEADER_COMPACT_WIDTH,
+});
+
+export const AsideHeaderContextProvider = AsideHeaderContext.Provider;
+
+export const useAsideHeaderContext = () => React.useContext(AsideHeaderContext);

src/components/CompositeBar/CompositeBar.tsx

@@ -18,12 +18,12 @@ import './CompositeBar.scss';
 import {MultipleTooltip, MultipleTooltipContext, MultipleTooltipProvider} from './MultipleTooltip';
 import {COLLAPSE_ITEM_ID} from './constants';
 import {ASIDE_HEADER_COMPACT_WIDTH} from '../constants';
+import {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';
 
 const b = block('composite-bar');
 
 interface CompositeBarBaseProps {
     items: MenuItem[];
-    compact: boolean;
     onItemClick?: (item: MenuItem, collapsed: boolean) => void;
     multipleTooltip?: boolean;
 }
@@ -39,7 +39,6 @@ export interface CompositeBarProps extends CompositeBarBaseProps {
 
 const CompositeBarView: FC<CompositeBarViewProps> = ({
     items,
-    compact,
     onItemClick,
     collapseItems,
     multipleTooltip = true,
@@ -52,6 +51,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
         activeIndex,
         lastClickedItemIndex,
     } = useContext(MultipleTooltipContext);
+    const {compact} = useAsideHeaderContext();
 
     const onTooltipMouseEnter = useCallback(
         (e) => {
@@ -156,7 +156,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                             onMouseEnter={onMouseEnterByIndex(itemIndex)}
                             onMouseLeave={onMouseLeave}
                             onItemClick={onItemClickByIndex(itemIndex)}
-                            compact={compact}
                             collapseItems={collapseItems}
                             enableTooltip={!multipleTooltip}
                         />
@@ -175,7 +174,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
 
 export const CompositeBar: FC<CompositeBarProps> = ({
     items,
-    compact,
     enableCollapsing,
     dict,
     onItemClick,
@@ -203,7 +201,6 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                                 <div style={{width, height}}>
                                     <CompositeBarView
                                         items={listItems}
-                                        compact={compact}
                                         onItemClick={onItemClick}
                                         collapseItems={collapseItems}
                                         multipleTooltip={multipleTooltip}
@@ -220,7 +217,6 @@ export const CompositeBar: FC<CompositeBarProps> = ({
             <div className={b()}>
                 <CompositeBarView
                     items={items}
-                    compact={compact}
                     onItemClick={onItemClick}
                     multipleTooltip={multipleTooltip}
                 />

src/components/CompositeBar/Item/Item.tsx

@@ -14,6 +14,7 @@ import {
 } from '../constants';
 
 import './Item.scss';
+import {useAsideHeaderContext} from '../../AsideHeader/AsideHeaderContext';
 
 const b = block('composite-bar-item');
 
@@ -38,7 +39,6 @@ export interface ItemProps extends ItemPopup {
 }
 
 interface ItemInnerProps extends ItemProps {
-    compact: boolean;
     className?: string;
     collapseItems?: MenuItem[];
     onMouseEnter?: () => void;
@@ -66,7 +66,6 @@ export const defaultPopupOffset: NonNullable<PopupProps['offset']> = [-20, 8];
 export const Item: React.FC<ItemInnerProps> = (props) => {
     const {
         item,
-        compact,
         className,
         collapseItems,
         onMouseLeave,
@@ -82,6 +81,8 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
         onItemClick,
     } = props;
 
+    const {compact} = useAsideHeaderContext();
+
     if (item.type === 'divider') {
         return <div className={b('menu-divider')} />;
     }
@@ -224,12 +225,12 @@ interface CollapsedPopupProps {
 }
 
 function CollapsedPopup({
-    compact,
     onItemClick,
     collapseItems,
     anchorRef,
     onClose,
 }: ItemInnerProps & CollapsedPopupProps) {
+    const {compact} = useAsideHeaderContext();
     return collapseItems?.length ? (
         <Popup placement={POPUP_PLACEMENT} open={true} anchorRef={anchorRef} onClose={onClose}>
             <div className={b('collapse-items-popup-content')}>

src/components/CompositeBar/__stories__/CompositeBar.stories.tsx

@@ -7,6 +7,7 @@ import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../con
 import {menuItemsShowcase} from './moc';
 
 import './CompositeBarShowcase.scss';
+import {AsideHeaderContextProvider} from '../../AsideHeader/AsideHeaderContext';
 
 export default {
     title: 'Components/AsideHeader/CompositeBar',
@@ -29,12 +30,13 @@ export default {
 
 const Template: StoryFn<CompositeBarProps> = (args) => (
     <div className="composite-bar-showcase">
-        <CompositeBar {...args} />
+        <AsideHeaderContextProvider value={{compact: false, size: ASIDE_HEADER_EXPANDED_WIDTH}}>
+            <CompositeBar {...args} />
+        </AsideHeaderContextProvider>
     </div>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-    compact: false,
     items: menuItemsShowcase,
 };

src/components/Content/Content.tsx

@@ -23,7 +23,7 @@ const RenderContent: React.FC<RenderContentProps> = React.memo(({renderContent,
 RenderContent.displayName = 'RenderContent';
 
 export const Content: React.FC<ContentProps> = ({
-    size,
+    size, // TODO: move to context when MobileHeader will support it
     className,
     cssSizeVariableName = '--aside-header-size',
     renderContent,

src/components/FooterItem/__stories__/FooterItem.stories.tsx

@@ -7,6 +7,7 @@ import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../con
 import settingsIcon from '../../../../.storybook/assets/settings.svg';
 
 import './FooterItemShowcase.scss';
+import {AsideHeaderContextProvider} from '../../AsideHeader/AsideHeaderContext';
 
 export default {
     title: 'Components/AsideHeader/FooterItem',
@@ -20,7 +21,9 @@ export default {
 
             return (
                 <div style={{width}} className="footer-item-showcase">
-                    <DecoratedStory />
+                    <AsideHeaderContextProvider value={{compact, size: width}}>
+                        <DecoratedStory />
+                    </AsideHeaderContextProvider>
                 </div>
             );
         },

src/components/Logo/Logo.tsx

@@ -4,16 +4,12 @@ import {LogoProps} from '../types';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import './Logo.scss';
+import {useAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';
 
 const b = block('logo');
 
-interface LogoInnerProps extends LogoProps {
-    compact: boolean;
-}
-
-export const Logo: React.FC<LogoInnerProps> = ({
+export const Logo: React.FC<LogoProps> = ({
     text,
-    compact,
     icon,
     iconSrc,
     iconClassName,
@@ -23,6 +19,7 @@ export const Logo: React.FC<LogoInnerProps> = ({
     wrapper,
     onClick,
 }) => {
+    const {compact} = useAsideHeaderContext();
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
 

src/components/index.ts

@@ -1,4 +1,5 @@
 export {AsideHeader, AsideHeaderProps} from './AsideHeader/AsideHeader';
+export {AsideHeaderContextProvider, useAsideHeaderContext} from './AsideHeader/AsideHeaderContext';
 export {Drawer, DrawerProps, DrawerItemProps, DrawerItem} from './Drawer/Drawer';
 export {FooterItem, FooterItemProps} from './FooterItem/FooterItem';
 export * from './ActionBar';