@tker-react/layout 0.2.11 → 0.2.13

package/dist/index.d.mts

@@ -1,12 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface LayoutProps {
     children?: ReactNode;
-    activePath?: string;
-    activeFullPath?: string;
 }
-declare function Layout({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare const Layout: react.MemoExoticComponent<({ children }: LayoutProps) => react_jsx_runtime.JSX.Element>;
 
 interface BreadcrumbItem {
     path: string;
@@ -74,10 +73,8 @@ interface LayoutAdapters {
 
 interface LayoutProviderProps {
     children?: ReactNode;
-    activePath?: string;
-    activeFullPath?: string;
 }
-declare function LayoutProvider({ children, activePath, activeFullPath, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
+declare function LayoutProvider({ children }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMenus(data: MenuItem[]): void;
 declare function setMenuAdapter(c: ComponentType<MenuAdapterProps>): void;
@@ -92,6 +89,7 @@ declare function setLayoutMode(mode: "side-menu" | "top-menu"): void;
 declare function setExpandedWidth(width: string): void;
 declare function setCollapsedWidth(width: string): void;
 declare function setNavigateAdapter(fn: (path: string) => void): void;
+declare function setActivePath(path: string, fullPath?: string): void;
 
-export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
+export { Layout, LayoutProvider, setActivePath, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.d.ts

@@ -1,12 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface LayoutProps {
     children?: ReactNode;
-    activePath?: string;
-    activeFullPath?: string;
 }
-declare function Layout({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare const Layout: react.MemoExoticComponent<({ children }: LayoutProps) => react_jsx_runtime.JSX.Element>;
 
 interface BreadcrumbItem {
     path: string;
@@ -74,10 +73,8 @@ interface LayoutAdapters {
 
 interface LayoutProviderProps {
     children?: ReactNode;
-    activePath?: string;
-    activeFullPath?: string;
 }
-declare function LayoutProvider({ children, activePath, activeFullPath, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
+declare function LayoutProvider({ children }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMenus(data: MenuItem[]): void;
 declare function setMenuAdapter(c: ComponentType<MenuAdapterProps>): void;
@@ -92,6 +89,7 @@ declare function setLayoutMode(mode: "side-menu" | "top-menu"): void;
 declare function setExpandedWidth(width: string): void;
 declare function setCollapsedWidth(width: string): void;
 declare function setNavigateAdapter(fn: (path: string) => void): void;
+declare function setActivePath(path: string, fullPath?: string): void;
 
-export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
+export { Layout, LayoutProvider, setActivePath, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import "./layout.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useCallback, useMemo, useState, useEffect, createContext, useContext } from 'react';
+import { useRef, useCallback, useMemo, useState, useSyncExternalStore, createContext, useContext, memo, useEffect } from 'react';
 
 function findMenuItemByPath(menuData, path) {
   for (const item of menuData) {
@@ -112,6 +112,28 @@ function consumeLayoutConfig() {
     navigateAdapter: _navigateAdapter
   };
 }
+let _activePath = "";
+const _pathParamsMap = /* @__PURE__ */ new Map();
+let _activePathListeners = [];
+function setActivePath(path, fullPath) {
+  _activePath = path;
+  if (fullPath && fullPath !== path) {
+    _pathParamsMap.set(path, fullPath);
+  }
+  _activePathListeners.forEach((l) => l());
+}
+function subscribeActivePath(listener) {
+  _activePathListeners.push(listener);
+  return () => {
+    _activePathListeners = _activePathListeners.filter((l) => l !== listener);
+  };
+}
+function getActivePathSnapshot() {
+  return _activePath;
+}
+function getFullPathByActivePath(path) {
+  return _pathParamsMap.get(path) || path;
+}
 
 const LayoutContext = createContext(null);
 const LayoutInteractionContext = createContext(null);
@@ -131,11 +153,11 @@ function useLayoutContext() {
   if (!ctx) throw new Error("useLayoutContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
   return ctx;
 }
-function LayoutProvider({
-  children,
-  activePath = "",
-  activeFullPath
-}) {
+const ActivePathContext = createContext("");
+function useActivePathContext() {
+  return useContext(ActivePathContext);
+}
+function LayoutProvider({ children }) {
   const config = consumeLayoutConfig();
   const navigateRef = useRef(null);
   navigateRef.current = config.navigateAdapter;
@@ -174,12 +196,7 @@ function LayoutProvider({
   menuDataRef.current = config.menus;
   const layoutModeRef = useRef(config.layoutMode);
   layoutModeRef.current = config.layoutMode;
-  const pathParamsMap = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
-    if (activeFullPath && activeFullPath !== activePath) {
-      pathParamsMap.current.set(activePath, activeFullPath);
-    }
-  }, [activePath, activeFullPath]);
+  const activePath = useSyncExternalStore(subscribeActivePath, getActivePathSnapshot);
   const toggleMenuOpen = useCallback((path, forceOpen) => {
     setOpenKeys((prev) => {
       const next = new Set(prev);
@@ -210,7 +227,7 @@ function LayoutProvider({
         toggleMenuOpen(path);
       }
     } else {
-      const fullPath = pathParamsMap.current.get(path) || path;
+      const fullPath = getFullPathByActivePath(path);
       if (window.location.pathname + window.location.search !== fullPath) {
         navigateRef.current?.(fullPath);
       }
@@ -227,7 +244,7 @@ function LayoutProvider({
     setCollapsedState(nextCollapsed);
   }, []);
   const getFullPath = useCallback(
-    (path) => pathParamsMap.current.get(path) || path,
+    (path) => getFullPathByActivePath(path),
     []
   );
   const isConcretePage = useCallback(
@@ -258,7 +275,6 @@ function LayoutProvider({
     () => ({
       adapters,
       menuData: config.menus,
-      activePath,
       expandedWidth: config.expandedWidth,
       collapsedWidth: config.collapsedWidth,
       layoutMode: config.layoutMode,
@@ -271,7 +287,6 @@ function LayoutProvider({
     [
       adapters,
       config.menus,
-      activePath,
       config.expandedWidth,
       config.collapsedWidth,
       config.layoutMode,
@@ -282,7 +297,7 @@ function LayoutProvider({
       navigate
     ]
   );
-  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children: /* @__PURE__ */ jsx(LayoutInteractionContext.Provider, { value: interactionValue, children: /* @__PURE__ */ jsx(LayoutOpenKeysContext.Provider, { value: openKeysValue, children }) }) });
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children: /* @__PURE__ */ jsx(LayoutInteractionContext.Provider, { value: interactionValue, children: /* @__PURE__ */ jsx(LayoutOpenKeysContext.Provider, { value: openKeysValue, children: /* @__PURE__ */ jsx(ActivePathContext.Provider, { value: activePath, children }) }) }) });
 }
 
 function LayoutAside() {
@@ -291,11 +306,11 @@ function LayoutAside() {
     expandedWidth,
     collapsedWidth,
     menuData,
-    activePath,
     layoutMode,
     getFullPath,
     navigate
   } = useLayoutContext();
+  const activePath = useActivePathContext();
   const { collapsed, toggleCollapse, menuItemClick } = useLayoutInteractionContext();
   const { openKeys } = useLayoutOpenKeysContext();
   const menuMode = layoutMode === "top-menu" ? "top" : "side";
@@ -347,18 +362,24 @@ function LayoutAside() {
   ] });
 }
 
-function LayoutContent({ children }) {
+const LayoutContent = memo(function LayoutContent2({ children }) {
+  const { layoutMode } = useLayoutContext();
+  const isTopMenu = layoutMode === "top-menu";
+  return /* @__PURE__ */ jsxs("main", { className: "tker-layout-content", children: [
+    /* @__PURE__ */ jsx(LayoutTabs, { isTopMenu }),
+    /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children })
+  ] });
+});
+function LayoutTabs({ isTopMenu }) {
   const {
     adapters,
     menuData,
-    activePath,
-    layoutMode,
     homePath,
     maxTabs,
     getFullPath,
     navigate
   } = useLayoutContext();
-  const isTopMenu = layoutMode === "top-menu";
+  const activePath = useActivePathContext();
   const menuDataRef = useRef(menuData);
   menuDataRef.current = menuData;
   const initialTab = activePath && activePath !== "/" ? openTabInData([], activePath, { homePath, maxTabs, menuData }) : [];
@@ -451,21 +472,19 @@ function LayoutContent({ children }) {
     );
   }, []);
   const TabAdapter = adapters.tab;
-  return /* @__PURE__ */ jsxs("main", { className: "tker-layout-content", children: [
-    !isTopMenu && TabAdapter && /* @__PURE__ */ jsx(
-      TabAdapter,
-      {
-        tabData,
-        activeTab,
-        onSelect: handleTabSelect,
-        onClose: handleTabClose,
-        onCloseOther: handleCloseOtherTabs,
-        onCloseAll: handleCloseAllTabs,
-        onSetFixed: handleSetFixed
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children })
-  ] });
+  if (isTopMenu || !TabAdapter) return null;
+  return /* @__PURE__ */ jsx(
+    TabAdapter,
+    {
+      tabData,
+      activeTab,
+      onSelect: handleTabSelect,
+      onClose: handleTabClose,
+      onCloseOther: handleCloseOtherTabs,
+      onCloseAll: handleCloseAllTabs,
+      onSetFixed: handleSetFixed
+    }
+  );
 }
 function openTabInData(tabData, path, config) {
   const { homePath, maxTabs, menuData } = config;
@@ -516,12 +535,12 @@ function LayoutHeader() {
     expandedWidth,
     collapsedWidth,
     menuData,
-    activePath,
     layoutMode,
     getFullPath,
     isConcretePage,
     navigate
   } = useLayoutContext();
+  const activePath = useActivePathContext();
   const { collapsed, menuItemClick } = useLayoutInteractionContext();
   const isTopMenu = layoutMode === "top-menu";
   const isSideMenu = layoutMode === "side-menu";
@@ -592,7 +611,7 @@ function LayoutHeader() {
   ] });
 }
 
-function LayoutInner({ children }) {
+const LayoutInner = memo(function LayoutInner2({ children }) {
   const { layoutMode } = useLayoutContext();
   const isSideMenu = layoutMode === "side-menu";
   return /* @__PURE__ */ jsxs("div", { className: "tker-layout", children: [
@@ -602,9 +621,9 @@ function LayoutInner({ children }) {
       /* @__PURE__ */ jsx(LayoutContent, { children })
     ] })
   ] });
-}
-function Layout({ children, ...props }) {
-  return /* @__PURE__ */ jsx(LayoutProvider, { ...props, children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
-}
+});
+const Layout = memo(function Layout2({ children }) {
+  return /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
+});
 
-export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
+export { Layout, LayoutProvider, setActivePath, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tker-react/layout",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "private": false,
   "license": "MIT",
   "type": "module",