From ba3499fd953809b6b64908ced7e9cfea08ec4eaa Mon Sep 17 00:00:00 2001 From: Georgy Malkov Date: Mon, 2 Oct 2023 16:01:21 +0300 Subject: [PATCH] fix: fix top aside header logic for use static alert --- src/components/AsideHeader/AsideHeader.tsx | 6 +++--- .../AsideHeader/__stories__/AsideHeader.stories.tsx | 11 +++-------- .../AsideHeader/__stories__/AsideHeaderShowcase.tsx | 8 ++++---- src/components/AsideHeader/components/TopPanel.tsx | 12 +++++++++--- src/components/AsideHeader/types.tsx | 10 ++++++++-- src/components/types.ts | 8 +++++++- 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx index 5dd7c46..a0f2f2f 100644 --- a/src/components/AsideHeader/AsideHeader.tsx +++ b/src/components/AsideHeader/AsideHeader.tsx @@ -14,7 +14,7 @@ import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../consta import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue'; export const AsideHeader = (props: AsideHeaderProps) => { - const {className, compact, renderTop} = props; + const {className, compact, topAlert} = props; const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size}); @@ -34,12 +34,12 @@ export const AsideHeader = (props: AsideHeaderProps) => { 200, {leading: true}, ); - if (renderTop) { + if (topAlert) { window.addEventListener('resize', updateTopSize); updateTopSize(); } return () => window.removeEventListener('resize', updateTopSize); - }, [renderTop, topRef, topHeight]); + }, [topAlert, topRef, topHeight]); return ( diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index d39d6fe..81550b2 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type {Meta, StoryFn} from '@storybook/react'; -import {Alert} from '@gravity-ui/uikit'; import {AsideHeader} from '../AsideHeader'; import {AsideHeaderShowcase} from './AsideHeaderShowcase'; @@ -30,11 +29,7 @@ MultipleTooltip.args = { const TopAlertTemplate: StoryFn = (args) => ; export const HeaderAlert = TopAlertTemplate.bind({}); HeaderAlert.args = { - renderTop: () => ( - - ), + topAlert: { + message: 'Scheduled maintenance is being performed', + }, }; diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 0e851d6..249d824 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -3,7 +3,7 @@ import React, {FC} from 'react'; import {RadioButton, Radio, Modal, Button, eventBroker, EventBrokerData} from '@gravity-ui/uikit'; import {Gear, Magnifier} from '@gravity-ui/icons'; -import {AsideHeader, FooterItem} from '../..'; +import {AsideHeader, FooterItem, AsideHeaderTopAlertProps} from '../..'; import {cn} from '../../utils/cn'; import {menuItemsShowcase, text as placeholderText} from './moc'; import {MenuItem, OpenModalSubscriber} from '../../types'; @@ -29,13 +29,13 @@ enum Panel { interface AsideHeaderShowcaseProps { multipleTooltip?: boolean; initialCompact?: boolean; - renderTop?: () => React.ReactNode; + topAlert?: AsideHeaderTopAlertProps; } export const AsideHeaderShowcase: FC = ({ multipleTooltip = false, initialCompact = false, - renderTop, + topAlert, }) => { const [popupVisible, setPopupVisible] = React.useState(false); const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false); @@ -126,7 +126,7 @@ export const AsideHeaderShowcase: FC = ({ compact={compact} multipleTooltip={multipleTooltip} openModalSubscriber={openModalSubscriber} - renderTop={renderTop} + topAlert={topAlert} renderFooter={({compact}) => ( ((_, ref) => { - const {renderTop} = useAsideHeaderInnerContext(); + const {topAlert} = useAsideHeaderInnerContext(); - if (!renderTop) { + if (!topAlert) { return null; } return (
- {renderTop()} +
); }); diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx index fc92045..5aac2bc 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -1,6 +1,12 @@ import {RenderContentType} from '../Content'; import {DrawerItemProps} from '../Drawer/Drawer'; -import {LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber} from '../types'; +import { + LogoProps, + MenuItem, + SubheaderMenuItem, + OpenModalSubscriber, + AsideHeaderTopAlertProps, +} from '../types'; export interface AsideHeaderGeneralProps { logo: LogoProps; @@ -10,13 +16,13 @@ export interface AsideHeaderGeneralProps { collapseTitle?: string; expandTitle?: string; menuMoreTitle?: string; + topAlert?: AsideHeaderTopAlertProps; renderContent?: RenderContentType; renderFooter?: (data: { size: number; compact: boolean; asideRef: React.RefObject; }) => React.ReactNode; - renderTop?: () => React.ReactNode; onClosePanel?: () => void; onChangeCompact?: (compact: boolean) => void; openModalSubscriber?: (subscriber: OpenModalSubscriber) => void; diff --git a/src/components/types.ts b/src/components/types.ts index dead9cf..ffd13d6 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -1,5 +1,5 @@ import React from 'react'; -import {IconProps} from '@gravity-ui/uikit'; +import {IconProps, AlertProps} from '@gravity-ui/uikit'; import {ItemProps} from 'src/components/CompositeBar/Item/Item'; @@ -67,3 +67,9 @@ export interface LogoProps { wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode; onClick?: (event: React.MouseEvent) => void; } + +export type AsideHeaderTopAlertProps = { + message: AlertProps['message']; + icon?: AlertProps['icon']; + theme?: AlertProps['theme']; +};