listpage-next 0.0.46 → 0.0.48

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,24 @@
+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 (column.component) return function(value, record, index) {
+                return /*#__PURE__*/ jsx(Render, {
+                    render: column.component,
+                    defaultValue: value,
+                    record: record,
+                    index: index,
+                    ctx: ctx
+                });
+            };
+            return column.render;
+        };
+        return {
+            ...column,
+            render: getRender()
+        };
+    });
+}
+export { useColumns };

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;
@@ -24,6 +24,7 @@ const DataTable = (props)=>{
         refreshDeps,
         pagination: restProps.pagination
     });
+    const columns = useColumns(props, {});
     return /*#__PURE__*/ jsxs(Card, {
         title: title,
         extra: extra,
@@ -37,16 +38,15 @@ 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, {
                     align: "end",
-                    locale: zh_CN.Pagination,
                     ...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 ColumnType<Record> {
+    component?: 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.46",
+  "version": "0.0.48",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",