diff --git a/src/components/LayoutPortal.tsx b/src/components/LayoutPortal.tsx index c8c3f0b..c81daf3 100644 --- a/src/components/LayoutPortal.tsx +++ b/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 & { 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(false) const [currentWell, setCurrentWell] = useState('') const [props, setProps] = useState(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', , null, () => setUserMenuOpen((prev) => !prev)), ].filter(Boolean) as ItemType[], [isAdmin, currentWell]) + const breadcrumbItems = useMemo(() => typeof breadcrumb === 'function' && breadcrumb(location.pathname), [breadcrumb, location.pathname]) + return ( {(sider || siderProps) && ( @@ -114,7 +117,7 @@ const _LayoutPortal = memo(() => { setWellsTreeOpen((prev) => !prev)}>{currentWell} )} - {breadcrumb !== true && breadcrumb} + {breadcrumbItems} )} {topRightBlock} diff --git a/src/components/MenuBreadcrumb.tsx b/src/components/MenuBreadcrumb.tsx index 3623f68..ccbda20 100644 --- a/src/components/MenuBreadcrumb.tsx +++ b/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) diff --git a/src/pages/AdminPanel/index.jsx b/src/pages/AdminPanel/index.jsx index e4c11b8..98c8e65 100755 --- a/src/pages/AdminPanel/index.jsx +++ b/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 layoutProps = { + sider: , + title: 'Администраторская панель', + isAdmin: true, + breadcrumb: makeMenuBreadcrumbItemsRender(menuItems, /^\/admin\//), +} + const AdminPanel = memo(() => { - const location = useLocation() const root = useRootPath() const rootPath = useMemo(() => `${root}/admin`, [root]) - const setLayoutProps = useLayoutProps() - - useEffect(() => { - setLayoutProps({ - sider: , - title: 'Администраторская панель', - isAdmin: true, - breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//), - }) - }, [location.pathname]) + useLayoutProps(layoutProps) return ( diff --git a/src/pages/Well/index.jsx b/src/pages/Well/index.jsx index ca1cd2e..322dbf8 100644 --- a/src/pages/Well/index.jsx +++ b/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: , - breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//), + breadcrumb, topRightBlock: topRightBlock?.(well), - }), [well, location.pathname, setLayoutProps, topRightBlock]) + }), [well, setLayoutProps, topRightBlock]) return (