diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx index 2590b6d..cc6e680 100644 --- a/src/components/MobileHeader/MobileHeader.tsx +++ b/src/components/MobileHeader/MobileHeader.tsx @@ -11,8 +11,8 @@ import {Burger} from './Burger/Burger'; import {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu'; import { BURGER_PANEL_ITEM_ID, - EVENT_NAMES, MOBILE_HEADER_COMPACT_HEIGHT, + MOBILE_HEADER_EVENT_NAMES, MOBILE_HEADER_EXPANDED_HEIGHT, } from './constants'; import i18n from './i18n'; @@ -75,7 +75,12 @@ export const MobileHeader = React.forwardRef( setVisiblePanel((prev) => { const panelOpen = prev === name; - onEvent?.(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent); + onEvent?.( + name, + panelOpen + ? MOBILE_HEADER_EVENT_NAMES.closeEvent + : MOBILE_HEADER_EVENT_NAMES.openEvent, + ); return panelOpen ? null : name; }); @@ -95,7 +100,7 @@ export const MobileHeader = React.forwardRef( const onMobilePanelOpen = useCallback( ({detail}) => { if (typeof detail?.panelName === 'string') { - onEvent?.(detail?.panelName, EVENT_NAMES.openEvent); + onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent); setVisiblePanel(detail?.panelName); } }, @@ -105,7 +110,7 @@ export const MobileHeader = React.forwardRef( const onMobilePanelClose = useCallback( ({detail}) => { if (typeof detail?.panelName === 'string') { - onEvent?.(detail?.panelName, EVENT_NAMES.closeEvent); + onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent); setVisiblePanel(null); } }, @@ -113,18 +118,18 @@ export const MobileHeader = React.forwardRef( ); const onBurgerOpen = useCallback(() => { - onEvent?.(BURGER_PANEL_ITEM_ID, EVENT_NAMES.openEvent); + onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent); setVisiblePanel(BURGER_PANEL_ITEM_ID); }, [onEvent]); const onBurgerClose = useCallback(() => { - onEvent?.(BURGER_PANEL_ITEM_ID, EVENT_NAMES.closeEvent); + onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent); setVisiblePanel(null); }, [onEvent]); const onCloseDrawer = useCallback(() => { if (visiblePanel) { - onEvent?.(visiblePanel, EVENT_NAMES.closeEvent); + onEvent?.(visiblePanel, MOBILE_HEADER_EVENT_NAMES.closeEvent); } setVisiblePanel(null); }, [visiblePanel, onEvent]); diff --git a/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx b/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx index 06b4fab..b12fc1f 100644 --- a/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx +++ b/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx @@ -3,14 +3,10 @@ import React from 'react'; import {Gear} from '@gravity-ui/icons'; import {Button, Icon, MobileProvider, TextInput} from '@gravity-ui/uikit'; -import { - MobileHeader, - MobileHeaderEventOptions, - MobileHeaderFooterItem, - MobileHeaderProps, -} from '../'; +import {MobileHeader, MobileHeaderFooterItem, MobileHeaderProps} from '../'; import {SettingsMobileComponent} from '../../Settings/__stories__/SettingsMobileDemo'; import {cn} from '../../utils/cn'; +import {getMobileHeaderCustomEvent} from '../utils'; import {text as placeholderText} from './moc'; @@ -20,10 +16,6 @@ import './MobileHeaderShowcase.scss'; const b = cn('mobile-header-demo'); -function getCustomEvent(eventName: string, detail?: MobileHeaderEventOptions) { - return new CustomEvent(eventName, {detail}); -} - export function MobileHeaderShowcase() { const ref = React.useRef(null); @@ -96,7 +88,7 @@ export function MobileHeaderShowcase() { className={b('side-item')} onClick={() => { ref?.current?.dispatchEvent( - getCustomEvent('MOBILE_PANEL_TOGGLE', {panelName: 'settings'}), + getMobileHeaderCustomEvent('MOBILE_PANEL_TOGGLE', {panelName: 'settings'}), ); }} > @@ -193,7 +185,7 @@ export function MobileHeaderShowcase() { className={b('button')} onClick={() => { ref?.current?.dispatchEvent( - getCustomEvent('MOBILE_PANEL_OPEN', { + getMobileHeaderCustomEvent('MOBILE_PANEL_OPEN', { panelName: 'settings', }), ); @@ -206,7 +198,7 @@ export function MobileHeaderShowcase() { className={b('button')} onClick={() => { ref?.current?.dispatchEvent( - getCustomEvent('MOBILE_BURGER_OPEN'), + getMobileHeaderCustomEvent('MOBILE_BURGER_OPEN'), ); toggleSearchModal(); }} diff --git a/src/components/MobileHeader/constants.ts b/src/components/MobileHeader/constants.ts index 18dd688..07ff58d 100644 --- a/src/components/MobileHeader/constants.ts +++ b/src/components/MobileHeader/constants.ts @@ -5,7 +5,7 @@ export const MOBILE_HEADER_COMPACT_HEIGHT = 50; export const MOBILE_HEADER_EXPANDED_HEIGHT = 120; export const MOBILE_HEADER_ICON_SIZE = 20; -export const EVENT_NAMES: ItemEventsConfig = { +export const MOBILE_HEADER_EVENT_NAMES: ItemEventsConfig = { toggleEvent: 'MOBILE_PANEL_TOGGLE', closeEvent: 'MOBILE_PANEL_CLOSE', openEvent: 'MOBILE_PANEL_OPEN', diff --git a/src/components/MobileHeader/index.ts b/src/components/MobileHeader/index.ts index 38a6f68..52f32cd 100644 --- a/src/components/MobileHeader/index.ts +++ b/src/components/MobileHeader/index.ts @@ -4,4 +4,8 @@ export { FooterItemProps as MobileHeaderFooterItemProps, } from './FooterItem/FooterItem'; +export {getMobileHeaderCustomEvent} from './utils'; + +export {MOBILE_HEADER_EVENT_NAMES} from './constants'; + export type {MobileMenuItem, ModalItem, MobileHeaderEvent, MobileHeaderEventOptions} from './types'; diff --git a/src/components/MobileHeader/utils.ts b/src/components/MobileHeader/utils.ts index 377e54a..29ee42b 100644 --- a/src/components/MobileHeader/utils.ts +++ b/src/components/MobileHeader/utils.ts @@ -1,5 +1,5 @@ import {MOBILE_ITEM_HEIGHT} from './constants'; -import {MobileMenuItem} from './types'; +import {MobileHeaderEventOptions, MobileMenuItem} from './types'; export const getItemHeight = (item: MobileMenuItem) => { switch (item.type) { @@ -15,3 +15,10 @@ export const getSelectedItemIndex = (items: MobileMenuItem[]) => { return index === -1 ? undefined : index; }; + +export const getMobileHeaderCustomEvent = ( + eventName: string, + detail?: MobileHeaderEventOptions, +) => { + return new CustomEvent(eventName, {detail}); +};