fix(AllPages): fix stuck i18n (#121)

gravity-ui · Oct 4, 2023 · f7879b3 · f7879b3
1 parent 2abc163
commit f7879b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/components/AllPagesPanel/constants.ts b/src/components/AllPagesPanel/constants.ts
@@ -5,9 +5,11 @@ import {MenuItem} from '../types';
 
 export const ALL_PAGES_ID = 'all-pages' as const;
 
-export const ALL_PAGES_MENU_ITEM: MenuItem = {
-    id: ALL_PAGES_ID,
-    title: i18n('menu-item.all-pages.title'),
-    tooltipText: i18n('menu-item.all-pages.title'),
-    icon: Ellipsis,
-};
+export function getAllPagesMenuItem(): MenuItem {
+    return {
+        id: ALL_PAGES_ID,
+        title: i18n('menu-item.all-pages.title'),
+        tooltipText: i18n('menu-item.all-pages.title'),
+        icon: Ellipsis,
+    };
+}
diff --git a/src/components/AllPagesPanel/index.ts b/src/components/AllPagesPanel/index.ts
@@ -1,3 +1,3 @@
 export {AllPagesPanel} from './AllPagesPanel';
-export {ALL_PAGES_MENU_ITEM, ALL_PAGES_ID} from './constants';
+export {getAllPagesMenuItem, ALL_PAGES_ID} from './constants';
 export {useVisibleMenuItems} from './useVisibleMenuItems';
diff --git a/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx b/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {AsideHeaderInnerContextType} from './AsideHeaderContext';
 import {AsideHeaderProps, InnerPanels} from './types';
 import {MenuItem} from '../types';
-import {ALL_PAGES_MENU_ITEM, AllPagesPanel} from '../AllPagesPanel';
+import {getAllPagesMenuItem, AllPagesPanel} from '../AllPagesPanel';
 
 const EMPTY_MENU_ITEMS: MenuItem[] = [];
 
@@ -11,6 +11,9 @@ export const useAsideHeaderInnerContextValue = (
 ): AsideHeaderInnerContextType => {
     const {size, onClosePanel, menuItems, panelItems, onMenuItemsChanged} = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = useState<InnerPanels | undefined>();
+    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {
+        return getAllPagesMenuItem();
+    }, []);
 
     const allPagesIsAvailable =
         Boolean(onMenuItemsChanged) && (!menuItems || menuItems?.length > 0);
@@ -42,7 +45,7 @@ export const useAsideHeaderInnerContextValue = (
             }
             item.onItemClick?.(item, collapsed, event);
         },
-        [innerOnClosePanel],
+        [innerOnClosePanel, ALL_PAGES_MENU_ITEM],
     );
 
     const innerMenuItems = useMemo(
@@ -56,7 +59,7 @@ export const useAsideHeaderInnerContextValue = (
                       },
                   ]
                 : menuItems || EMPTY_MENU_ITEMS,
-        [allPagesIsAvailable, menuItems, innerVisiblePanel],
+        [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM],
     );
 
     const innerPanelItems = useMemo(() => {