listpage-next 0.0.43 → 0.0.45

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: pageSize !== params.pageSize ? 1 : 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,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, Pagination, Table } from "antd";
+import zh_CN from "antd/locale/zh_CN";
+import { useData } from "./hooks/useData.js";
+import styled_components from "styled-components";
+const PaginationContainer = styled_components.div`
+    padding: 12px 16px 12px 0;
+    border-top: 1px solid #f0f0f0;
+`;
+const TableContainer = styled_components.div`
+    table {
+        tr:last-child {
+            td {
+                border-bottom: none;
+            }
+        }
+    }
+`;
+const DataTable = (props)=>{
+    const { title, extra, dataSource, request, refreshDeps, ...restProps } = props;
+    const { data, loading, pagination } = useData({
+        dataSource,
+        request,
+        refreshDeps,
+        pagination: restProps.pagination
+    });
+    return /*#__PURE__*/ jsxs(Card, {
+        title: title,
+        extra: extra,
+        styles: {
+            body: {
+                padding: 0
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(TableContainer, {
+                children: /*#__PURE__*/ jsx(Table, {
+                    bordered: false,
+                    loading: loading,
+                    locale: zh_CN.Table,
+                    ...restProps,
+                    dataSource: data,
+                    pagination: false
+                })
+            }),
+            /*#__PURE__*/ jsx(PaginationContainer, {
+                children: /*#__PURE__*/ jsx(Pagination, {
+                    style: {
+                        border: 'none'
+                    },
+                    align: "end",
+                    locale: zh_CN.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

@@ -30,7 +30,6 @@ function useActiveMenuKey(items, baseUrl = '') {
     ]);
     const activeKey = useMemo(()=>{
         const filteredPaths = removeBaseUrl(location.pathname, baseUrl);
-        debugger;
         const paths = getPaths(filteredPaths);
         return matchRoutes(items, 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,57 @@
+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 listdata = Array.from(new Array(100)).map((_, index)=>({
+        key: index,
+        name: `Edward King ${index}`,
+        age: 32,
+        address: `London, Park Lane no. ${index}`
+    }));
+const request = async (params)=>{
+    const { current, pageSize } = params;
+    const take = pageSize;
+    const skip = (current - 1) * take;
+    const list = listdata.slice(skip, skip + take);
+    return {
+        list: list,
+        total: listdata.length,
+        current: current,
+        pageSize: pageSize
+    };
+};
+const Demo6 = ()=>/*#__PURE__*/ jsx(DataTable, {
+        scroll: {
+            y: 300
+        },
+        title: "测试标题",
+        extra: /*#__PURE__*/ jsx(Button, {
+            children: "操作"
+        }),
+        columns: columns,
+        request: request,
+        pagination: {
+            showSizeChanger: true,
+            defaultPageSize: 10,
+            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.43",
+  "version": "0.0.45",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",