listpage-next 0.0.42 → 0.0.44

package/dist/components/DataTable/hooks/useData.d.ts

@@ -0,0 +1,21 @@
+import { DataTableProps } from "../typings";
+export declare function useData<T = any>(props: DataTableProps<T>): {
+    data: T[];
+    loading: boolean;
+    pagination: {
+        onChange: (page: number, pageSize: number) => void;
+        current?: number;
+        pageSize?: number;
+        sort?: string;
+    };
+} | {
+    data: T[] | undefined;
+    loading: boolean;
+    pagination: {
+        current?: number;
+        pageSize?: number;
+        sort?: string;
+        total: number | undefined;
+        onChange: (page: number, pageSize: number) => void;
+    };
+};

package/dist/components/DataTable/hooks/useData.js

@@ -0,0 +1,54 @@
+import { useRequest, useUpdateEffect } from "ahooks";
+import { useState } from "react";
+function useData(props) {
+    const { dataSource = [], request, refreshDeps = [] } = props;
+    const pagination = props.pagination;
+    const [params, setParams] = useState({
+        current: pagination.current || pagination.defaultCurrent || 1,
+        pageSize: pagination.pageSize || pagination.defaultPageSize || 10
+    });
+    const { loading, data: response } = useRequest(async ()=>{
+        const response = await request?.(params);
+        return response;
+    }, {
+        ready: !!request,
+        refreshDeps: [
+            ...refreshDeps,
+            params
+        ]
+    });
+    useUpdateEffect(()=>{
+        setParams({
+            current: 1,
+            pageSize: params.pageSize || pagination?.pageSize || pagination.defaultPageSize || 10
+        });
+    }, [
+        ...refreshDeps
+    ]);
+    const onChange = (page, pageSize)=>{
+        setParams({
+            ...params,
+            current: page,
+            pageSize
+        });
+    };
+    if (!request) return {
+        data: dataSource,
+        loading: false,
+        pagination: {
+            ...params,
+            onChange
+        }
+    };
+    const { list, total, pageSize, current } = response || {};
+    return {
+        data: list,
+        loading,
+        pagination: {
+            total,
+            onChange,
+            ...params
+        }
+    };
+}
+export { useData };

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

@@ -0,0 +1,2 @@
+import { DataTableProps } from "./typings";
+export declare const DataTable: <Record = any>(props: DataTableProps<Record>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/index.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Card, Table } from "antd";
+import { useData } from "./hooks/useData.js";
+const DataTable = (props)=>{
+    const { title, extra, dataSource, request, refreshDeps, ...restProps } = props;
+    const { data, loading, pagination } = useData({
+        dataSource,
+        request,
+        refreshDeps,
+        pagination: restProps.pagination
+    });
+    return /*#__PURE__*/ jsx(Card, {
+        title: title,
+        extra: extra,
+        styles: {
+            body: {
+                padding: 0
+            }
+        },
+        children: /*#__PURE__*/ jsx(Table, {
+            loading: loading,
+            ...restProps,
+            dataSource: data,
+            pagination: {
+                ...pagination,
+                ...restProps?.pagination
+            }
+        })
+    });
+};
+export { DataTable };

package/dist/components/DataTable/typings/index.d.ts

@@ -0,0 +1,10 @@
+import { TableProps } from "antd";
+import { BaseQueryParams, PaginationData } from "../../../http-client";
+import React from "react";
+export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, 'dataSource' | 'title'> {
+    dataSource?: Record[];
+    request?: (pageParams: BaseQueryParams) => Promise<PaginationData<Record>>;
+    refreshDeps?: any[];
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+}

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

@@ -23,7 +23,7 @@ function useActiveMenuKey(items, baseUrl = '') {
         }
         const paths = findKeyPath(items, []);
         const urlPath = paths.map((p)=>getPaths(p)).flat().join('/');
-        navigate(baseUrl + '/' + urlPath);
+        navigate(urlPath);
     }, [
         items,
         navigate
@@ -43,17 +43,8 @@ function useActiveMenuKey(items, baseUrl = '') {
     ];
 }
 const removeBaseUrl = (pathname, baseUrl)=>{
-    if ('' === baseUrl) return pathname;
-    let normalizedBaseUrl = baseUrl;
-    if (!baseUrl.startsWith('/')) normalizedBaseUrl = '/' + baseUrl;
-    let normalizedPathname = pathname;
-    if (!pathname.startsWith('/')) normalizedPathname = '/' + pathname;
-    if (normalizedPathname.startsWith(normalizedBaseUrl)) {
-        if (normalizedPathname === normalizedBaseUrl || '/' === normalizedPathname.charAt(normalizedBaseUrl.length)) {
-            const result = normalizedPathname.substring(normalizedBaseUrl.length);
-            return '' === result ? '/' : result.startsWith('/') ? result : '/' + result;
-        }
-    }
+    if (!baseUrl) return pathname;
+    if (pathname.startsWith(baseUrl)) return pathname.slice(baseUrl.length);
     return pathname;
 };
 const matchRoutes = (routes, paths)=>{

package/dist/demos/demo6.d.ts

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

package/dist/demos/demo6.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "antd";
+import { DataTable } from "../components/DataTable/index.js";
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name'
+    },
+    {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age'
+    },
+    {
+        title: 'Address',
+        dataIndex: 'address',
+        key: 'address'
+    }
+];
+const request = async (params)=>{
+    console.log(params);
+    return {
+        list: [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park'
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: 42,
+                address: 'London No. 1 Lake Park'
+            }
+        ],
+        total: 10,
+        current: 1,
+        pageSize: 2
+    };
+};
+const Demo6 = ()=>/*#__PURE__*/ jsx(DataTable, {
+        title: "测试标题",
+        extra: /*#__PURE__*/ jsx(Button, {
+            children: "操作"
+        }),
+        columns: columns,
+        request: request,
+        pagination: {
+            showSizeChanger: true,
+            defaultPageSize: 2,
+            showTotal (total, range) {
+                return `共${total}条数据`;
+            }
+        }
+    });
+export { Demo6 };

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from './components/FilterGroup';
 export * from './components/Page';
 export * from './components/InfiniteList';
 export * from './components/Menu';
+export * from './components/DataTable';
 export * from './http-client';

package/dist/index.js

@@ -3,4 +3,5 @@ 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 "./components/DataTable/index.js";
 export * from "./http-client/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",