listpage-next 0.0.45 → 0.0.47

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

@@ -0,0 +1,18 @@
+import { JSX } from "react";
+import { DataTableContext } from "../typings";
+export interface RenderProps<T, Record> {
+    ctx: DataTableContext;
+    defaultValue: T;
+    record: Record;
+    index: number;
+    render: (props: UserRenderComponentProps<T, Record>) => JSX.Element;
+}
+export type UserRenderComponentProps<T, Record> = {
+    ctx: DataTableContext;
+    value: T;
+    onChange: (v: T) => void;
+    record: Record;
+    index: number;
+};
+export type ColumnRender<R> = <T = any>(props: UserRenderComponentProps<T, R>) => JSX.Element;
+export declare const Render: <T = any, Record = any>(props: RenderProps<T, Record>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/components/Render.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useControllableValue } from "ahooks";
+const Render = (props)=>{
+    const { render: Component, record, index, ctx } = props;
+    const [value, onChange] = useControllableValue(props);
+    return /*#__PURE__*/ jsx(Component, {
+        value: value,
+        onChange: onChange,
+        record: record,
+        index: index,
+        ctx: ctx
+    });
+};
+export { Render };

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

@@ -0,0 +1,3 @@
+import { ColumnType } from "antd/es/table";
+import { DataTableContext, DataTableProps } from "../typings";
+export declare function useColumns<Record>(props: DataTableProps<Record>, ctx: DataTableContext): ColumnType<Record>[];

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Render } from "../components/Render.js";
+function useColumns(props, ctx) {
+    const { columns = [] } = props;
+    return columns.map((column)=>{
+        const getRender = ()=>{
+            if ('function' != typeof column.render) return column.render;
+            if ('object' == typeof column.render) return column.render;
+            if ('function' == typeof column.render) return function(value, record, index) {
+                return /*#__PURE__*/ jsx(Render, {
+                    render: column.render,
+                    defaultValue: value,
+                    record: record,
+                    index: index,
+                    ctx: ctx
+                });
+            };
+        };
+        return {
+            ...column,
+            render: getRender()
+        };
+    });
+}
+export { useColumns };

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

@@ -1,13 +1,10 @@
 import { DataTableProps } from "../typings";
+import { BaseQueryParams } from "../../../http-client";
 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;
-    };
+    pagination: BaseQueryParams;
+    onPaginationChange: (page: number, pageSize: number) => void;
 } | {
     data: T[] | undefined;
     loading: boolean;
@@ -16,6 +13,6 @@ export declare function useData<T = any>(props: DataTableProps<T>): {
         pageSize?: number;
         sort?: string;
         total: number | undefined;
-        onChange: (page: number, pageSize: number) => void;
     };
+    onPaginationChange: (page: number, pageSize: number) => void;
 };

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

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

package/dist/components/DataTable/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled_components from "styled-components";
 import { Card, Pagination, Table } from "antd";
-import zh_CN from "antd/locale/zh_CN";
+import { useColumns } from "./hooks/useColumns.js";
 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;
@@ -18,12 +18,13 @@ const TableContainer = styled_components.div`
 `;
 const DataTable = (props)=>{
     const { title, extra, dataSource, request, refreshDeps, ...restProps } = props;
-    const { data, loading, pagination } = useData({
+    const { data, loading, pagination, onPaginationChange } = useData({
         dataSource,
         request,
         refreshDeps,
         pagination: restProps.pagination
     });
+    const columns = useColumns(props, {});
     return /*#__PURE__*/ jsxs(Card, {
         title: title,
         extra: extra,
@@ -37,21 +38,18 @@ const DataTable = (props)=>{
                 children: /*#__PURE__*/ jsx(Table, {
                     bordered: false,
                     loading: loading,
-                    locale: zh_CN.Table,
                     ...restProps,
+                    columns: columns,
                     dataSource: data,
                     pagination: false
                 })
             }),
-            /*#__PURE__*/ jsx(PaginationContainer, {
+            false !== restProps.pagination && /*#__PURE__*/ jsx(PaginationContainer, {
                 children: /*#__PURE__*/ jsx(Pagination, {
-                    style: {
-                        border: 'none'
-                    },
                     align: "end",
-                    locale: zh_CN.Pagination,
                     ...pagination,
-                    ...restProps?.pagination
+                    ...restProps?.pagination,
+                    onChange: onPaginationChange
                 })
             })
         ]

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

@@ -1,10 +1,18 @@
+import React from "react";
 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'> {
+import { ColumnType } from "antd/es/table";
+import { ColumnRender } from "../components/Render";
+export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, 'dataSource' | 'title' | 'columns'> {
     dataSource?: Record[];
     request?: (pageParams: BaseQueryParams) => Promise<PaginationData<Record>>;
     refreshDeps?: any[];
     title?: React.ReactNode;
     extra?: React.ReactNode;
+    columns?: DataTableColumns<Record>[];
+}
+export interface DataTableColumns<Record = any> extends Omit<ColumnType<Record>, 'render'> {
+    render?: ColumnRender<Record>;
+}
+export interface DataTableContext {
 }

package/dist/demos/demo6.js

@@ -1,7 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import { Button } from "antd";
+import { Button, Switch } from "antd";
 import { DataTable } from "../components/DataTable/index.js";
 const columns = [
+    {
+        key: 'enable',
+        title: 'Enable',
+        dataIndex: 'enable',
+        render: (props)=>/*#__PURE__*/ jsx(Switch, {
+                size: "small",
+                checked: props.value,
+                onChange: (e)=>props.onChange(e)
+            })
+    },
     {
         title: 'Name',
         dataIndex: 'name',
@@ -22,6 +32,7 @@ const listdata = Array.from(new Array(100)).map((_, index)=>({
         key: index,
         name: `Edward King ${index}`,
         age: 32,
+        enable: true,
         address: `London, Park Lane no. ${index}`
     }));
 const request = async (params)=>{

package/package.json

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