From c8753378eb48ed93164c1bb0161dbda61fb8a664 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 31 Oct 2022 05:10:28 +0500 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=B2=20=D0=BD=D0=B0=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B8=20Breadcrumb.Item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LayoutPortal.tsx | 2 +- src/components/MenuBreadcrumb.tsx | 58 +++++++++++++------------------ src/pages/AdminPanel/index.jsx | 25 +++++++------ src/pages/Well/index.jsx | 6 ++-- 4 files changed, 42 insertions(+), 49 deletions(-) diff --git a/src/components/LayoutPortal.tsx b/src/components/LayoutPortal.tsx index 97173e3..c8c3f0b 100644 --- a/src/components/LayoutPortal.tsx +++ b/src/components/LayoutPortal.tsx @@ -114,7 +114,7 @@ const _LayoutPortal = memo(() => { setWellsTreeOpen((prev) => !prev)}>{currentWell} )} - {breadcrumb} + {breadcrumb !== true && breadcrumb} )} {topRightBlock} diff --git a/src/components/MenuBreadcrumb.tsx b/src/components/MenuBreadcrumb.tsx index 05cbc74..5299039 100644 --- a/src/components/MenuBreadcrumb.tsx +++ b/src/components/MenuBreadcrumb.tsx @@ -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) => ( + + {itemRender ? itemRender(item) : ( + {item.title} + )} + + )) } - -export const MenuBreadcrumbItems = memo(({ 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) => ( - - {itemRender ? itemRender(item) : ( - {item.title} - )} - - ))} - - ) -}) diff --git a/src/pages/AdminPanel/index.jsx b/src/pages/AdminPanel/index.jsx index ad338e2..e4c11b8 100755 --- a/src/pages/AdminPanel/index.jsx +++ b/src/pages/AdminPanel/index.jsx @@ -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: , - title: 'Администраторская панель', - isAdmin: true, - breadcrumb: , -} - const AdminPanel = memo(() => { + const location = useLocation() const root = useRootPath() const rootPath = useMemo(() => `${root}/admin`, [root]) - useLayoutProps(layoutProps) + const setLayoutProps = useLayoutProps() + + useEffect(() => { + setLayoutProps({ + sider: , + title: 'Администраторская панель', + isAdmin: true, + breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//), + }) + }, [location.pathname]) return ( diff --git a/src/pages/Well/index.jsx b/src/pages/Well/index.jsx index 534b313..398a0b8 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 { 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: , - breadcrumb: , + breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//), topRightBlock: topRightBlock, - }), [well, setLayoutProps, topRightBlock]) + }), [well, location.pathname, setLayoutProps, topRightBlock]) useEffect(() => setTopRightBlock(undefined), [location])