feat(MobileHeader): add export EVENT_NAMES and getMobileHeaderCustomE…

…vent (#243) * feat(MobileHeader): add export EVENT_NAMES and getMobileHeaderCustomEvent * feat(MobileHeader): review fixes --------- Co-authored-by: Angelina Gadzhieva <[email protected]>
gravity-ui · May 27, 2024 · 62e52ac · 62e52ac
1 parent 4f54626
commit 62e52ac
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 22 deletions.
diff --git 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<HTMLDivElement, MobileHeaderProps>(
                 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<HTMLDivElement, MobileHeaderProps>(
         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,26 +110,26 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
         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);
                 }
             },
             [onEvent],
         );
 
         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
@@ -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<MobileHeaderEventOptions>(eventName, {detail});
-}
-
 export function MobileHeaderShowcase() {
     const ref = React.useRef<HTMLDivElement>(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
@@ -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
@@ -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
@@ -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<MobileHeaderEventOptions>(eventName, {detail});
+};