listpage-next 0.0.44 → 0.0.45

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

@@ -28,7 +28,7 @@ function useData(props) {
     const onChange = (page, pageSize)=>{
         setParams({
             ...params,
-            current: page,
+            current: pageSize !== params.pageSize ? 1 : page,
             pageSize
         });
     };

package/dist/components/DataTable/index.js

@@ -1,6 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import { Card, Table } from "antd";
+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({
@@ -9,7 +24,7 @@ const DataTable = (props)=>{
         refreshDeps,
         pagination: restProps.pagination
     });
-    return /*#__PURE__*/ jsx(Card, {
+    return /*#__PURE__*/ jsxs(Card, {
         title: title,
         extra: extra,
         styles: {
@@ -17,15 +32,29 @@ const DataTable = (props)=>{
                 padding: 0
             }
         },
-        children: /*#__PURE__*/ jsx(Table, {
-            loading: loading,
-            ...restProps,
-            dataSource: data,
-            pagination: {
-                ...pagination,
-                ...restProps?.pagination
-            }
-        })
+        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/demos/demo6.js

@@ -18,29 +18,28 @@ const columns = [
         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)=>{
-    console.log(params);
+    const { current, pageSize } = params;
+    const take = pageSize;
+    const skip = (current - 1) * take;
+    const list = listdata.slice(skip, skip + take);
     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
+        list: list,
+        total: listdata.length,
+        current: current,
+        pageSize: pageSize
     };
 };
 const Demo6 = ()=>/*#__PURE__*/ jsx(DataTable, {
+        scroll: {
+            y: 300
+        },
         title: "测试标题",
         extra: /*#__PURE__*/ jsx(Button, {
             children: "操作"
@@ -49,7 +48,7 @@ const Demo6 = ()=>/*#__PURE__*/ jsx(DataTable, {
         request: request,
         pagination: {
             showSizeChanger: true,
-            defaultPageSize: 2,
+            defaultPageSize: 10,
             showTotal (total, range) {
                 return `共${total}条数据`;
             }

package/package.json

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