listpage-next 0.0.13 → 0.0.29

package/dist/components/Menu/hooks/useMenuNavigation.d.ts

@@ -0,0 +1,2 @@
+import { MenuItem } from '../types';
+export declare function useActiveMenuKey(items: MenuItem[]): [string | null, (key: string) => void];

package/dist/components/Menu/hooks/useMenuNavigation.js

@@ -0,0 +1,64 @@
+import { useCallback, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+function useActiveMenuKey(items) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const setActiveKey = useCallback((key)=>{
+        function findKeyPath(items, paths = []) {
+            for (const item of items){
+                if (item.key === key) return [
+                    ...paths,
+                    item.path || item.key
+                ];
+                if (item.children) {
+                    const subPaths = findKeyPath(item.children);
+                    if (subPaths.length) return [
+                        ...paths,
+                        item.path || item.key,
+                        ...subPaths
+                    ];
+                }
+            }
+            return [];
+        }
+        const paths = findKeyPath(items, []);
+        const urlPath = paths.map((p)=>getPaths(p)).flat().join('/');
+        console.log('urlPath', urlPath);
+        navigate(urlPath);
+    }, [
+        items,
+        navigate
+    ]);
+    const activeKey = useMemo(()=>{
+        const paths = getPaths(location.pathname);
+        return matchRoutes(items, paths);
+    }, [
+        location.pathname,
+        items
+    ]);
+    return [
+        activeKey,
+        setActiveKey
+    ];
+}
+const matchRoutes = (routes, paths)=>{
+    for (const route of routes){
+        const routePaths = getPaths(route.path || route.key);
+        const isMatch = isPathMatch(paths, routePaths);
+        if (isMatch) {
+            if (route.children) return matchRoutes(route.children, paths.slice(routePaths.length));
+            return route.key;
+        }
+    }
+    return null;
+};
+const isPathMatch = (urlPaths, routePaths)=>{
+    for(let i = 0; i < routePaths.length; i++){
+        const matchAny = '*' === routePaths[i];
+        const matchUrl = routePaths[i] === urlPaths[i];
+        if (!matchAny && !matchUrl) return false;
+    }
+    return true;
+};
+const getPaths = (path = '')=>path.split('/').filter(Boolean);
+export { useActiveMenuKey };

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+import { MenuProps } from './types';
+export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/index.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Menu } from "antd";
+import { useActiveMenuKey } from "./hooks/useMenuNavigation.js";
+const Menu_Menu = (props)=>{
+    const { menus, theme, style } = props;
+    const [activeKey, setActiveKey] = useActiveMenuKey(menus);
+    const menuItems = useMemo(()=>menus.map((item)=>({
+                key: item.key,
+                label: item.label,
+                icon: item.icon,
+                children: item.children?.map((child)=>({
+                        key: child.key,
+                        label: child.label,
+                        icon: child.icon
+                    }))
+            })), [
+        menus
+    ]);
+    return /*#__PURE__*/ jsx(Menu, {
+        mode: "vertical",
+        theme: theme,
+        style: style,
+        items: menuItems,
+        selectedKeys: activeKey ? [
+            activeKey
+        ] : [],
+        onSelect: (info)=>{
+            setActiveKey(info.key);
+        }
+    });
+};
+export { Menu_Menu as Menu };

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+export interface MenuItem {
+    key: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: MenuItem[];
+    disabled?: boolean;
+    path?: string;
+}
+export interface MenuProps {
+    menus: MenuItem[];
+    theme?: 'light' | 'dark';
+    style?: CSSProperties;
+}

package/dist/demos/demo4.d.ts

@@ -0,0 +1 @@
+export declare const Demo4: () => import("react/jsx-runtime").JSX.Element;

package/dist/demos/demo4.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { BrowserRouter } from "react-router-dom";
+import { Menu } from "../components/Menu/index.js";
+const Demo4 = ()=>{
+    const menuItems = [
+        {
+            key: '1',
+            label: '首页',
+            path: 'home'
+        },
+        {
+            key: '2',
+            label: '产品',
+            path: 'products',
+            children: [
+                {
+                    key: '2-1',
+                    label: '产品列表',
+                    path: 'list'
+                },
+                {
+                    key: '2-2',
+                    label: '产品详情',
+                    path: 'detail'
+                }
+            ]
+        },
+        {
+            key: '3',
+            label: '关于我们',
+            path: 'about'
+        }
+    ];
+    return /*#__PURE__*/ jsx(BrowserRouter, {
+        children: /*#__PURE__*/ jsx(Menu, {
+            menus: menuItems,
+            style: {
+                width: 200
+            }
+        })
+    });
+};
+export { Demo4 };

package/dist/http-client/client/base_url.js

@@ -1,6 +1,7 @@
 function setupBaseUrl(HttpClient) {
     HttpClient.prototype.getBaseURL = function() {
-        const { server } = this.options;
+        const { server, config } = this.options;
+        if (config?.baseURL) return config.baseURL;
         return `${server?.protocol}//${server?.host}:${server?.port}${server?.publicPath}`;
     };
 }

package/dist/http-client/client/client.js

@@ -25,7 +25,7 @@ function setupClient(HttpClient) {
             return Promise.reject(error);
         });
         apiClient.interceptors.response.use((response)=>{
-            if ('text/event-stream' === response.config.headers['content-type']) return response;
+            if ('text/event-stream' === response.headers['content-type']) return response;
             if ('blob' === response.config.responseType) return response;
             if (!successCodes.includes(response.data.code)) {
                 const error = {

package/dist/http-client/client/headers.js

@@ -1,5 +1,6 @@
 function setupHeaders(HttpClient) {
     HttpClient.prototype.getHeaders = function() {
+        if (this.options.config?.headers) return this.options.config.headers;
         return {
             'Content-Type': 'application/json'
         };

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import '@ant-design/v5-patch-for-react-19';
 export * from './components/FilterGroup';
 export * from './components/Page';
 export * from './components/InfiniteList';
+export * from './components/Menu';
 export * from './http-client';

package/dist/index.js

@@ -2,4 +2,5 @@ import "@ant-design/v5-patch-for-react-19";
 export * from "./components/FilterGroup/index.js";
 export * from "./components/Page/index.js";
 export * from "./components/InfiniteList/index.js";
+export * from "./components/Menu/index.js";
 export * from "./http-client/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.13",
+  "version": "0.0.29",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,11 +45,13 @@
     "storybook": "^8.6.14",
     "storybook-addon-rslib": "^1.0.3",
     "storybook-react-rsbuild": "^1.0.3",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "react-router-dom": ">=6.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "react-router-dom": ">=6.0.0"
   },
   "dependencies": {
     "ahooks": "^3.9.5",
@@ -64,4 +66,4 @@
     "mobx-react-lite": "~4.1.1",
     "rc-virtual-list": "~3.19.2"
   }
-}
+}