Крошки переработаны

src/components/LayoutPortal.tsx

@@ -1,7 +1,7 @@
 import { Breadcrumb, Layout, LayoutProps, Menu, SiderProps } from 'antd'
 import { Key, memo, ReactNode, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import { ItemType } from 'antd/lib/menu/hooks/useItems'
-import { Link, Outlet } from 'react-router-dom'
+import { Link, Outlet, useLocation } from 'react-router-dom'
 import {
     ApartmentOutlined,
     CodeOutlined,
@@ -31,7 +31,7 @@ export type LayoutPortalProps = Omit<LayoutProps, 'children'> & {
     siderProps?: SiderProps & { userMenuProps?: UserMenuProps }
     isAdmin?: boolean
     fallback?: JSX.Element
-    breadcrumb?: boolean | JSX.Element
+    breadcrumb?: boolean | ((path: string) => JSX.Element)
     topRightBlock?: JSX.Element
 }
 
@@ -49,6 +49,7 @@ const _LayoutPortal = memo(() => {
     const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
     const [currentWell, setCurrentWell] = useState<string>('')
     const [props, setProps] = useState<LayoutPortalProps>(defaultProps)
+    const location = useLocation()
 
     const { isAdmin, title, sheet, showSelector, selectorProps, sider, siderProps, fallback, breadcrumb, topRightBlock, ...other } = useMemo(() => props, [props])
 
@@ -66,6 +67,8 @@ const _LayoutPortal = memo(() => {
         makeItem('Профиль', 'profile', <UserOutlined/>, null, () => setUserMenuOpen((prev) => !prev)),
     ].filter(Boolean) as ItemType[], [isAdmin, currentWell])
 
+    const breadcrumbItems = useMemo(() => typeof breadcrumb === 'function' && breadcrumb(location.pathname), [breadcrumb, location.pathname])
+
     return (
         <Layout className={`page-layout ${isAdmin ? 'page-layout-admin' : ''}`}>
             {(sider || siderProps) && (
@@ -114,7 +117,7 @@ const _LayoutPortal = memo(() => {
                                             <a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
                                         </Breadcrumb.Item>
                                     )}
-                                    {breadcrumb !== true && breadcrumb}
+                                    {breadcrumbItems}
                                 </Breadcrumb>
                             )}
                             {topRightBlock}

src/components/MenuBreadcrumb.tsx

@@ -21,13 +21,12 @@ export const makeBreadcrumbItems = (items: PrivateMenuItem[], pathParts: string[
     return out
 }
 
-export const makeMenuBreadcrumbItems = (
+export const makeMenuBreadcrumbItemsRender = (
     menuItems: PrivateMenuItem[],
-    path: string,
     pathRoot: RegExp = /^\//,
     itemsProps?: FunctionalValue<(item: PrivateMenuItem) => BreadcrumbItemProps>,
     itemRender?: (item: PrivateMenuItem) => JSX.Element,
-) => {
+) => (path: string) => {
     const getItemProps = getFunctionalValue(itemsProps)
 
     const rootPart = pathRoot.exec(path)

src/pages/AdminPanel/index.jsx

@@ -1,9 +1,9 @@
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import { lazy, memo, useEffect, useMemo } from 'react'
 
 import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
-import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItemsRender } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 
 import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
@@ -21,21 +21,18 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
 const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
 const VisitLog = lazy(() => import('./VisitLog'))
 
-const AdminPanel = memo(() => {
+const layoutProps = {
-    const location = useLocation()
-    const root = useRootPath()
-    const rootPath = useMemo(() => `${root}/admin`, [root])
-
-    const setLayoutProps = useLayoutProps()
-
-    useEffect(() => {
-        setLayoutProps({
     sider: <AdminNavigationMenu />,
     title: 'Администраторская панель',
     isAdmin: true,
-            breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
+    breadcrumb: makeMenuBreadcrumbItemsRender(menuItems, /^\/admin\//),
-        })
+}
-    }, [location.pathname])
+
+const AdminPanel = memo(() => {
+    const root = useRootPath()
+    const rootPath = useMemo(() => `${root}/admin`, [root])
+
+    useLayoutProps(layoutProps)
 
     return (
         <RootPathContext.Provider value={rootPath}>

src/pages/Well/index.jsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-do
 import { WellContext, RootPathContext, useRootPath, useLayoutProps, TopRightBlockContext } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItemsRender } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 import { WellService } from '@api'
 
@@ -40,6 +40,8 @@ const DiagramReport = lazy(() => import('./Reports/DiagramReport'))
 const Statistics = lazy(() => import('./Analytics/Statistics'))
 const WellCompositeEditor = lazy(() => import('./Analytics/WellCompositeEditor'))
 
+const breadcrumb = makeMenuBreadcrumbItemsRender(menuItems, /^\/well\/[^\/#?]+\//)
+
 const Well = memo(() => {
     const { idWell } = useParams()
 
@@ -82,9 +84,9 @@ const Well = memo(() => {
 
     useEffect(() => setLayoutProps({
         sider: <WellNavigationMenu variables={{ idWell: well.id }} />,
-        breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//),
+        breadcrumb,
         topRightBlock: topRightBlock?.(well),
-    }), [well, location.pathname, setLayoutProps, topRightBlock])
+    }), [well, setLayoutProps, topRightBlock])
 
     return (
         <RootPathContext.Provider value={rootPath}>