@tker-react/layout 0.2.12 → 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, memo } 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);
@@ -135,11 +157,7 @@ const ActivePathContext = createContext("");
 function useActivePathContext() {
   return useContext(ActivePathContext);
 }
-function LayoutProvider({
-  children,
-  activePath = "",
-  activeFullPath
-}) {
+function LayoutProvider({ children }) {
   const config = consumeLayoutConfig();
   const navigateRef = useRef(null);
   navigateRef.current = config.navigateAdapter;
@@ -178,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);
@@ -214,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);
       }
@@ -231,7 +244,7 @@ function LayoutProvider({
     setCollapsedState(nextCollapsed);
   }, []);
   const getFullPath = useCallback(
-    (path) => pathParamsMap.current.get(path) || path,
+    (path) => getFullPathByActivePath(path),
     []
   );
   const isConcretePage = useCallback(
@@ -609,8 +622,8 @@ const LayoutInner = memo(function LayoutInner2({ 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.12",
+  "version": "0.2.13",
   "private": false,
   "license": "MIT",
   "type": "module",