Исправлена ошибка в назначении Breadcrumb.Item

This commit is contained in:
Александр Сироткин 2022-10-31 05:10:28 +05:00
parent 685191484a
commit c8753378eb
4 changed files with 42 additions and 49 deletions

View File

@ -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}

View File

@ -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)
const rootPart = pathRoot.exec(path)
if (!rootPart || rootPart.length <= 0) return []
const root = rootPart[0]
const parts = path.trim().slice(root.length).split('/')
const items = makeBreadcrumbItems(menuItems, parts, root)
return items.map((item) => (
<Breadcrumb.Item key={item.route} {...getItemProps(item)}>
{itemRender ? itemRender(item) : (
<Link to={item.route}>{item.title}</Link>
)}
</Breadcrumb.Item>
))
}
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])
return (
<>
{items.map((item) => (
<Breadcrumb.Item key={item.route} {...getItemProps(item)}>
{itemRender ? itemRender(item) : (
<Link to={item.route}>{item.title}</Link>
)}
</Breadcrumb.Item>
))}
</>
)
})

View File

@ -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}>

View File

@ -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])