@tker-react/layout 0.2.10 → 0.2.12

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, useEffect, createContext, useContext, memo } from 'react';
 
 function findMenuItemByPath(menuData, path) {
   for (const item of menuData) {
@@ -131,6 +131,10 @@ function useLayoutContext() {
   if (!ctx) throw new Error("useLayoutContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
   return ctx;
 }
+const ActivePathContext = createContext("");
+function useActivePathContext() {
+  return useContext(ActivePathContext);
+}
 function LayoutProvider({
   children,
   activePath = "",
@@ -258,7 +262,6 @@ function LayoutProvider({
     () => ({
       adapters,
       menuData: config.menus,
-      activePath,
       expandedWidth: config.expandedWidth,
       collapsedWidth: config.collapsedWidth,
       layoutMode: config.layoutMode,
@@ -271,7 +274,6 @@ function LayoutProvider({
     [
       adapters,
       config.menus,
-      activePath,
       config.expandedWidth,
       config.collapsedWidth,
       config.layoutMode,
@@ -282,7 +284,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 +293,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,25 +349,37 @@ 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 [tabData, setTabData] = useState([]);
-  const [activeTab, setActiveTab] = useState("");
+  const activePath = useActivePathContext();
   const menuDataRef = useRef(menuData);
   menuDataRef.current = menuData;
+  const initialTab = activePath && activePath !== "/" ? openTabInData([], activePath, { homePath, maxTabs, menuData }) : [];
+  const [tabData, setTabData] = useState(() => initialTab);
+  const [activeTab, setActiveTab] = useState(() => initialTab.length > 0 ? activePath : "");
   const activeTabRef = useRef(activeTab);
   activeTabRef.current = activeTab;
+  const isFirstRender = useRef(true);
   useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
     if (!activePath || activePath === "/") return;
     setTabData((prev) => {
       const exists = prev.find((t) => t.path === activePath);
@@ -445,21 +459,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;
@@ -510,12 +522,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";
@@ -586,7 +598,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: [
@@ -596,7 +608,7 @@ function LayoutInner({ children }) {
       /* @__PURE__ */ jsx(LayoutContent, { children })
     ] })
   ] });
-}
+});
 function Layout({ children, ...props }) {
   return /* @__PURE__ */ jsx(LayoutProvider, { ...props, children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
 }

package/package.json

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