listpage-next 0.0.47 → 0.0.50

package/dist/components/DataTable/components/DataTable.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/components/DataTable.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled_components from "styled-components";
+import { Card, Pagination, Table } from "antd";
+import { useColumns } from "../hooks/useColumns.js";
+import { useData } from "../hooks/useData.js";
+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, onPaginationChange } = useData({
+        dataSource,
+        request,
+        refreshDeps,
+        pagination: restProps.pagination
+    });
+    const columns = useColumns(props, {});
+    return /*#__PURE__*/ jsxs(Card, {
+        title: title,
+        extra: extra,
+        styles: {
+            body: {
+                padding: 0
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(TableContainer, {
+                children: /*#__PURE__*/ jsx(Table, {
+                    bordered: false,
+                    loading: loading,
+                    ...restProps,
+                    columns: columns,
+                    dataSource: data,
+                    pagination: false
+                })
+            }),
+            false !== restProps.pagination && /*#__PURE__*/ jsx(PaginationContainer, {
+                children: /*#__PURE__*/ jsx(Pagination, {
+                    align: "end",
+                    ...pagination,
+                    ...restProps?.pagination,
+                    onChange: onPaginationChange
+                })
+            })
+        ]
+    });
+};
+export { DataTable };

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

@@ -1,20 +1,25 @@
 import { jsx } from "react/jsx-runtime";
+import { Typography } from "antd";
 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
-                });
-            };
+            if (column.component) {
+                if ('text' === column.component) return function(value, record, index) {
+                    return textRender(value, column.props);
+                };
+                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,
@@ -22,4 +27,13 @@ function useColumns(props, ctx) {
         };
     });
 }
+function textRender(value, props) {
+    return /*#__PURE__*/ jsx(Typography.Text, {
+        ellipsis: {
+            tooltip: true
+        },
+        ...props,
+        children: value
+    });
+}
 export { useColumns };

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

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

package/dist/components/DataTable/index.js

@@ -1,58 +1 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import styled_components from "styled-components";
-import { Card, Pagination, Table } from "antd";
-import { useColumns } from "./hooks/useColumns.js";
-import { useData } from "./hooks/useData.js";
-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, onPaginationChange } = useData({
-        dataSource,
-        request,
-        refreshDeps,
-        pagination: restProps.pagination
-    });
-    const columns = useColumns(props, {});
-    return /*#__PURE__*/ jsxs(Card, {
-        title: title,
-        extra: extra,
-        styles: {
-            body: {
-                padding: 0
-            }
-        },
-        children: [
-            /*#__PURE__*/ jsx(TableContainer, {
-                children: /*#__PURE__*/ jsx(Table, {
-                    bordered: false,
-                    loading: loading,
-                    ...restProps,
-                    columns: columns,
-                    dataSource: data,
-                    pagination: false
-                })
-            }),
-            false !== restProps.pagination && /*#__PURE__*/ jsx(PaginationContainer, {
-                children: /*#__PURE__*/ jsx(Pagination, {
-                    align: "end",
-                    ...pagination,
-                    ...restProps?.pagination,
-                    onChange: onPaginationChange
-                })
-            })
-        ]
-    });
-};
-export { DataTable };
+export * from "./components/DataTable.js";

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

@@ -3,6 +3,7 @@ import { TableProps } from "antd";
 import { BaseQueryParams, PaginationData } from "../../../http-client";
 import { ColumnType } from "antd/es/table";
 import { ColumnRender } from "../components/Render";
+import { TextProps } from "antd/es/typography/Text";
 export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, 'dataSource' | 'title' | 'columns'> {
     dataSource?: Record[];
     request?: (pageParams: BaseQueryParams) => Promise<PaginationData<Record>>;
@@ -11,8 +12,12 @@ export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, '
     extra?: React.ReactNode;
     columns?: DataTableColumns<Record>[];
 }
-export interface DataTableColumns<Record = any> extends Omit<ColumnType<Record>, 'render'> {
-    render?: ColumnRender<Record>;
+export type ComponentType = 'text';
+export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : unknown;
+export type TextComponentProps = TextProps;
+export interface DataTableColumns<Record = any> extends ColumnType<Record> {
+    component?: ComponentType | ColumnRender<Record>;
+    props?: ComponentProps;
 }
 export interface DataTableContext {
 }

package/dist/demos/demo6.js

@@ -6,7 +6,7 @@ const columns = [
         key: 'enable',
         title: 'Enable',
         dataIndex: 'enable',
-        render: (props)=>/*#__PURE__*/ jsx(Switch, {
+        component: (props)=>/*#__PURE__*/ jsx(Switch, {
                 size: "small",
                 checked: props.value,
                 onChange: (e)=>props.onChange(e)
@@ -14,8 +14,15 @@ const columns = [
     },
     {
         title: 'Name',
+        width: 80,
         dataIndex: 'name',
-        key: 'name'
+        key: 'name',
+        component: 'text',
+        props: {
+            ellipsis: {
+                tooltip: true
+            }
+        }
     },
     {
         title: 'Age',

package/package.json

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