forked from ddrilling/asb_cloud_front
Исправлена ошибка в назначении Breadcrumb.Item
This commit is contained in:
parent
685191484a
commit
c8753378eb
@ -114,7 +114,7 @@ const _LayoutPortal = memo(() => {
|
||||
<a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
|
||||
</Breadcrumb.Item>
|
||||
)}
|
||||
{breadcrumb}
|
||||
{breadcrumb !== true && breadcrumb}
|
||||
</Breadcrumb>
|
||||
)}
|
||||
{topRightBlock}
|
||||
|
@ -1,10 +1,9 @@
|
||||
import { Breadcrumb, BreadcrumbItemProps } from 'antd'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { memo, useMemo } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { join } from 'path'
|
||||
|
||||
import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
|
||||
import { FunctionalValue, useFunctionalValue } from '@utils'
|
||||
import { FunctionalValue, getFunctionalValue, } from '@utils'
|
||||
|
||||
export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
|
||||
const out = []
|
||||
@ -22,35 +21,26 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str
|
||||
return out
|
||||
}
|
||||
|
||||
export type MenuBreadcrumbItemsProps = {
|
||||
menuItems: PrivateWellMenuItem[]
|
||||
pathRoot?: RegExp
|
||||
itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>
|
||||
itemRender?: (item: PrivateWellMenuItem) => JSX.Element
|
||||
}
|
||||
export const makeMenuBreadcrumbItems = (
|
||||
menuItems: PrivateWellMenuItem[],
|
||||
path: string,
|
||||
pathRoot: RegExp = /^\//,
|
||||
itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>,
|
||||
itemRender?: (item: PrivateWellMenuItem) => JSX.Element,
|
||||
) => {
|
||||
const getItemProps = getFunctionalValue(itemsProps)
|
||||
|
||||
export const MenuBreadcrumbItems = memo<MenuBreadcrumbItemsProps>(({ menuItems, pathRoot = /^\//, itemsProps, itemRender }) => {
|
||||
const location = useLocation()
|
||||
const getItemProps = useFunctionalValue(itemsProps)
|
||||
|
||||
const items = useMemo(() => {
|
||||
const path = location.pathname
|
||||
const rootPart = pathRoot.exec(path)
|
||||
if (!rootPart || rootPart.length <= 0) return []
|
||||
const root = rootPart[0]
|
||||
const parts = path.trim().slice(root.length).split('/')
|
||||
return makeBreadcrumbItems(menuItems, parts, root)
|
||||
}, [location, menuItems, pathRoot])
|
||||
const items = makeBreadcrumbItems(menuItems, parts, root)
|
||||
|
||||
return (
|
||||
<>
|
||||
{items.map((item) => (
|
||||
return items.map((item) => (
|
||||
<Breadcrumb.Item key={item.route} {...getItemProps(item)}>
|
||||
{itemRender ? itemRender(item) : (
|
||||
<Link to={item.route}>{item.title}</Link>
|
||||
)}
|
||||
</Breadcrumb.Item>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
})
|
||||
))
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { lazy, memo, useMemo } from 'react'
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
|
||||
import { lazy, memo, useEffect, useMemo } from 'react'
|
||||
|
||||
import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
|
||||
import { FastRunMenu } from '@components/FastRunMenu'
|
||||
import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||
import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||
import { NoAccessComponent, withPermissions } from '@utils'
|
||||
|
||||
import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
|
||||
@ -21,18 +21,21 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
|
||||
const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
|
||||
const VisitLog = lazy(() => import('./VisitLog'))
|
||||
|
||||
const layoutProps = {
|
||||
sider: <AdminNavigationMenu />,
|
||||
title: 'Администраторская панель',
|
||||
isAdmin: true,
|
||||
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/admin\//} />,
|
||||
}
|
||||
|
||||
const AdminPanel = memo(() => {
|
||||
const location = useLocation()
|
||||
const root = useRootPath()
|
||||
const rootPath = useMemo(() => `${root}/admin`, [root])
|
||||
|
||||
useLayoutProps(layoutProps)
|
||||
const setLayoutProps = useLayoutProps()
|
||||
|
||||
useEffect(() => {
|
||||
setLayoutProps({
|
||||
sider: <AdminNavigationMenu />,
|
||||
title: 'Администраторская панель',
|
||||
isAdmin: true,
|
||||
breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
|
||||
})
|
||||
}, [location.pathname])
|
||||
|
||||
return (
|
||||
<RootPathContext.Provider value={rootPath}>
|
||||
|
@ -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 { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||
import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
|
||||
import { NoAccessComponent, withPermissions } from '@utils'
|
||||
import { WellService } from '@api'
|
||||
|
||||
@ -78,9 +78,9 @@ const Well = memo(() => {
|
||||
|
||||
useEffect(() => setLayoutProps({
|
||||
sider: <NavigationMenu idWell={well.id} />,
|
||||
breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/well\/[0-9]+\//} />,
|
||||
breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//),
|
||||
topRightBlock: topRightBlock,
|
||||
}), [well, setLayoutProps, topRightBlock])
|
||||
}), [well, location.pathname, setLayoutProps, topRightBlock])
|
||||
|
||||
useEffect(() => setTopRightBlock(undefined), [location])
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user