listpage-next 0.0.130 → 0.0.132

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

@@ -1,10 +1,10 @@
-import { SelectProps } from "antd";
-import { PaginationData } from "../../http-client";
+import { SelectProps } from 'antd';
+import { PaginationData } from '../../http-client';
 type BaseOption = {
     label: string;
     value: string;
 };
-export type AsyncSelectProps<Data extends BaseOption> = Omit<SelectProps, 'options'> & {
+export type AsyncSelectProps<Data extends BaseOption = any> = Omit<SelectProps, 'options'> & {
     request: (parmas: {
         current: number;
         pageSize: number;

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

@@ -1,7 +1,3 @@
 import { ColumnType } from 'antd/es/table';
-import { DataTableContext, DataTableProps, LinkComponentProps, TagComponentProps, TextComponentProps, TimeComponentProps } from '../typings';
+import { DataTableContext, DataTableProps } from '../typings';
 export declare function useColumns<Record>(props: DataTableProps<Record>, ctx: DataTableContext): ColumnType<Record>[];
-export declare function textRender(value: any, props?: TextComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare function timeRender(value: any, props?: TimeComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare function tagRender(value: any, props?: TagComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare function linkRender(record: any, props?: LinkComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,93 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import dayjs from "dayjs";
-import { Tag, Typography } from "antd";
-import { Render } from "../components/Render.js";
-import { TextOverflow } from "../../TextOverflow/index.js";
-import { styled } from "styled-components";
+import { createColumnRender } from "../utils/render.js";
 function useColumns(props, ctx) {
     const { columns = [] } = props;
-    return columns.map((column)=>{
-        const getRender = ()=>{
-            if (column.component) {
-                if ('text' === column.component) return function(value, record, index) {
-                    return textRender(value, column.props);
-                };
-                if ('time' === column.component) return function(value, record, index) {
-                    return timeRender(value, column.props);
-                };
-                if ('tag' === column.component) return function(value, record, index) {
-                    return tagRender(value, column.props);
-                };
-                if ('link' === column.component) return function(value, record, index) {
-                    return linkRender(record, 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 {
+    return columns.map((column)=>({
             ...column,
-            render: getRender()
-        };
-    });
+            render: createColumnRender(ctx, column)
+        }));
 }
-function textRender(value, props) {
-    return /*#__PURE__*/ jsx(Typography.Text, {
-        ellipsis: {
-            tooltip: true
-        },
-        ...props,
-        children: value
-    });
-}
-function timeRender(value, props) {
-    const time = value ? dayjs(value).format(props?.format) : '-';
-    return /*#__PURE__*/ jsx("span", {
-        children: time
-    });
-}
-function tagRender(value, props) {
-    return /*#__PURE__*/ jsx(Tag, {
-        ...props,
-        children: value
-    });
-}
-function linkRender(record, props) {
-    const getPropName = (propName)=>{
-        if ('function' == typeof propName) return propName(record);
-        return record[propName];
-    };
-    const title = getPropName(props?.titlePropName || 'title');
-    const href = getPropName(props?.hrefPropName || 'href');
-    const aLink = /*#__PURE__*/ jsx(LinkStyle, {
-        href: href,
-        target: props?.target,
-        children: title
-    });
-    return /*#__PURE__*/ jsx(TextOverflow, {
-        text: aLink,
-        tooltipProps: {
-            title
-        }
-    });
-}
-const LinkStyle = styled.a`
-  color: #1677ff;
-  &:hover {
-    color: #69b1ff;
-  }
-  outline: 0;
-  text-decoration: none;
-  transition: color 0.3s;
-  background-color: transparent;
-  cursor: pointer;
-`;
-export { linkRender, tagRender, textRender, timeRender, useColumns };
+export { useColumns };

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

@@ -1,9 +1,8 @@
-import React, { HTMLAttributeAnchorTarget, JSX } from 'react';
-import { TableProps, TagProps } from 'antd';
+import React, { JSX } from 'react';
+import { TableProps } from 'antd';
 import { BaseQueryParams, PaginationData } from '../../../http-client';
 import { ColumnType } from 'antd/es/table';
-import { TextProps } from 'antd/es/typography/Text';
-import { ColumnRender } from '../components/Render';
+import { ColumnRenderProps } from './render';
 export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, 'dataSource' | 'title' | 'columns'> {
     dataSource?: Record[];
     request?: (pageParams: BaseQueryParams) => Promise<PaginationData<Record>>;
@@ -16,24 +15,11 @@ export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, '
         content: JSX.Element;
     }[];
 }
-export type ComponentType = 'text' | 'time' | 'tag' | 'link';
-export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : ComponentType extends 'time' ? TimeComponentProps : ComponentType extends 'tag' ? TagComponentProps : ComponentType extends 'link' ? LinkComponentProps : unknown;
-export type TextComponentProps = TextProps;
-export type TimeComponentProps = {
-    format?: string;
-};
-export type TagComponentProps = TagProps;
-export type LinkComponentProps = {
-    titlePropName?: string | ((record: any) => string);
-    hrefPropName?: string | ((record: any) => string);
-    target?: HTMLAttributeAnchorTarget;
-};
-export interface DataTableColumns<Record = any, Context = any> extends ColumnType<Record> {
-    component?: ComponentType | ColumnRender<Record, Context>;
-    props?: ComponentProps;
+export interface DataTableColumns<Record = any, Context = any> extends ColumnType<Record>, Omit<ColumnRenderProps<Record, Context>, 'render'> {
 }
 export interface DataTableContext {
     showFloat: (key: string, record: any) => void;
     hideFloat: (key: string) => void;
     refresh: () => void;
 }
+export * from './render';

package/dist/components/DataTable/typings/index.js

@@ -0,0 +1 @@
+export * from "./render.js";

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

@@ -0,0 +1,21 @@
+import { HTMLAttributeAnchorTarget } from 'react';
+import { TagProps, TypographyProps } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { ColumnRender } from '../components/Render';
+export type ComponentType = 'text' | 'time' | 'tag' | 'link';
+export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : ComponentType extends 'time' ? TimeComponentProps : ComponentType extends 'tag' ? TagComponentProps : ComponentType extends 'link' ? LinkComponentProps : unknown;
+export type TextComponentProps = TypographyProps['Text'];
+export type TimeComponentProps = {
+    format?: string;
+};
+export type TagComponentProps = TagProps;
+export type LinkComponentProps = {
+    titlePropName?: string | ((record: any) => string);
+    hrefPropName?: string | ((record: any) => string);
+    target?: HTMLAttributeAnchorTarget;
+};
+export interface ColumnRenderProps<Record, Context> {
+    component?: ComponentType | ColumnRender<Record, Context>;
+    props?: ComponentProps;
+    render?: ColumnType<Record>['render'];
+}

package/dist/components/DataTable/utils/render.d.ts

@@ -0,0 +1,2 @@
+import { ColumnRenderProps } from '../typings/render';
+export declare function createColumnRender<Record = any, Context = any, ColumnType extends ColumnRenderProps<Record, Context> = any>(ctx: Context, column: ColumnType): ColumnType['render'];

package/dist/components/DataTable/utils/render.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { Tag, Typography } from "antd";
+import { styled } from "styled-components";
+import dayjs from "dayjs";
+import { Render } from "../components/Render.js";
+import { TextOverflow } from "../../TextOverflow/index.js";
+function createColumnRender(ctx, column) {
+    if (column.component) {
+        if ('text' === column.component) return function(value, record, index) {
+            return textRender(value, column.props);
+        };
+        if ('time' === column.component) return function(value, record, index) {
+            return timeRender(value, column.props);
+        };
+        if ('tag' === column.component) return function(value, record, index) {
+            return tagRender(value, column.props);
+        };
+        if ('link' === column.component) return function(value, record, index) {
+            return linkRender(record, 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;
+}
+function textRender(value, props) {
+    return /*#__PURE__*/ jsx(Typography.Text, {
+        ellipsis: {
+            tooltip: true
+        },
+        ...props,
+        children: value
+    });
+}
+function timeRender(value, props) {
+    try {
+        const time = value ? dayjs(value).format(props?.format) : '-';
+        return /*#__PURE__*/ jsx("span", {
+            children: time
+        });
+    } catch  {
+        return /*#__PURE__*/ jsx("span", {
+            children: "-"
+        });
+    }
+}
+function tagRender(value, props) {
+    return /*#__PURE__*/ jsx(Tag, {
+        ...props,
+        children: value
+    });
+}
+function linkRender(record, props) {
+    const getPropName = (propName)=>{
+        if ('function' == typeof propName) return propName(record);
+        return record[propName];
+    };
+    const title = getPropName(props?.titlePropName || 'title');
+    const href = getPropName(props?.hrefPropName || 'href');
+    const aLink = /*#__PURE__*/ jsx(LinkStyle, {
+        href: href,
+        target: props?.target,
+        children: title
+    });
+    return /*#__PURE__*/ jsx(TextOverflow, {
+        text: aLink,
+        tooltipProps: {
+            title
+        }
+    });
+}
+const LinkStyle = styled.a`
+  color: #1677ff;
+  &:hover {
+    color: #69b1ff;
+  }
+  outline: 0;
+  text-decoration: none;
+  transition: color 0.3s;
+  background-color: transparent;
+  cursor: pointer;
+`;
+export { createColumnRender };

package/dist/components/FilterGroup/components/FilterForm/index.d.ts

@@ -1,11 +1,12 @@
 import { ReactElement, ReactNode } from 'react';
 import { FormItemProps } from 'antd';
-import { ComponentType } from '../../typings';
-export interface FilterFormOption {
+import { ComponentProps, ComponentType } from '../../typings';
+export interface FilterFormOption<Type extends ComponentType = any> {
     name: string;
     label?: ReactNode;
-    component?: ComponentType | ReactElement;
+    component?: Type | ReactElement;
     colSpan?: number;
+    props?: ComponentProps<Type>;
     formItemProps?: Omit<FormItemProps, 'children'>;
 }
 export interface FilterFormProps<FormValue = any> {

package/dist/components/FilterGroup/components/FilterForm/index.js

@@ -8,14 +8,14 @@ import { getComponent } from "../../utils/getComponent.js";
 import { cleanUpFormValues } from "../../utils/format.js";
 const FilterForm = ({ options, initialValues, onSubmit, onReset, labelInline })=>{
     const formRef = useRef(null);
-    const items = useMemo(()=>(options ?? []).map(({ colSpan, component, label, ...props })=>{
-            const renderComponent = getComponent(component);
+    const items = useMemo(()=>(options ?? []).map(({ colSpan, component, label, props, ...formItemProps })=>{
+            const renderComponent = getComponent(component, props);
             return {
-                key: props.name,
+                key: formItemProps.name,
                 node: /*#__PURE__*/ jsx(FilterItem, {
                     labelInline: labelInline,
                     label: label,
-                    formItemProps: props,
+                    formItemProps: formItemProps,
                     children: renderComponent
                 }),
                 colSpan: colSpan || 2

package/dist/components/FilterGroup/typings/component.d.ts

@@ -1 +1,12 @@
-export type ComponentType = 'input' | 'select';
+import { InputProps, SelectProps } from 'antd';
+import { RangePickerProps } from 'antd/es/date-picker';
+import { AsyncSelectProps } from '../../AsyncSelect';
+export type ComponentType = 'input' | 'select' | 'async-select' | 'daterange';
+export type InputComponentProps = InputProps;
+export type SelectComponentProps = SelectProps;
+export type AsyncSelectComponentProps = AsyncSelectProps;
+export type DateRangeComponentProps = {
+    value: [string, string];
+    onChange: (value: [string | null, string | null]) => void;
+} & Omit<RangePickerProps, 'value' | 'onChange'>;
+export type ComponentProps<ComponentType> = ComponentType extends 'input' ? InputComponentProps : ComponentType extends 'async-select' ? AsyncSelectComponentProps : ComponentType extends 'select' ? SelectComponentProps : ComponentType extends 'daterange' ? DateRangeComponentProps : unknown;

package/dist/components/FilterGroup/utils/getComponent.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { ComponentType } from '../typings/component';
-export declare const getComponent: (component?: ReactElement | ComponentType) => import("react/jsx-runtime").JSX.Element;
+export declare const getComponent: (component?: ReactElement | ComponentType, props?: any) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/utils/getComponent.js

@@ -1,16 +1,40 @@
 import { jsx } from "react/jsx-runtime";
-import { Input, Select } from "antd";
-const EnhancedInput = (props)=>/*#__PURE__*/ jsx(Input, {
+import dayjs from "dayjs";
+import { DatePicker, Input, Select } from "antd";
+import { useMemo } from "react";
+import { AsyncSelect } from "../../AsyncSelect/index.js";
+const EnhancedRangePicker = (props)=>{
+    const { value, onChange } = props;
+    const realValue = useMemo(()=>(value ?? []).map((i)=>{
+            if (i) return dayjs(i);
+        }), [
+        value
+    ]);
+    return /*#__PURE__*/ jsx(DatePicker.RangePicker, {
         ...props,
-        onChange: (e)=>props.onChange?.(e.target.value)
+        value: realValue,
+        onChange: (_, dates)=>{
+            onChange?.(dates);
+        }
     });
-const getComponent = (component)=>{
+};
+const getComponent = (component, props = {})=>{
     if ('string' == typeof component) {
         const type = component;
-        if ('input' === type) return /*#__PURE__*/ jsx(EnhancedInput, {});
-        if ('select' === type) return /*#__PURE__*/ jsx(Select, {});
+        if ('input' === type) return /*#__PURE__*/ jsx(Input, {
+            ...props
+        });
+        if ('select' === type) return /*#__PURE__*/ jsx(Select, {
+            ...props
+        });
+        if ('async-select' === type) return /*#__PURE__*/ jsx(AsyncSelect, {
+            ...props
+        });
+        if ('daterange' === type) return /*#__PURE__*/ jsx(EnhancedRangePicker, {
+            ...props
+        });
     }
     if (component) return component;
-    return /*#__PURE__*/ jsx(EnhancedInput, {});
+    return /*#__PURE__*/ jsx(Input, {});
 };
 export { getComponent };

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

@@ -1,34 +1,10 @@
-import { jsx } from "react/jsx-runtime";
 import { useListPageStore } from "../context/listpage.js";
-import { textRender, timeRender } from "../../DataTable/hooks/useColumns.js";
-import { Render } from "../../DataTable/components/Render.js";
+import { createColumnRender } from "../../DataTable/utils/render.js";
 function useColumns(columns) {
     const ctx = useListPageStore();
-    return columns.map((column)=>{
-        const getRender = ()=>{
-            if (column.component) {
-                if ('text' === column.component) return function(value, record, index) {
-                    return textRender(value, column.props);
-                };
-                if ('time' === column.component) return function(value, record, index) {
-                    return timeRender(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 {
+    return columns.map((column)=>({
             ...column,
-            render: getRender()
-        };
-    });
+            render: createColumnRender(ctx, column)
+        }));
 }
 export { useColumns };

package/dist/demos/demo5.js

@@ -17,22 +17,19 @@ const columns = [
         width: 80,
         dataIndex: 'name',
         key: 'name',
-        component: 'text',
-        props: {
-            ellipsis: {
-                tooltip: true
-            }
-        }
-    },
-    {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age'
+        component: 'text'
     },
     {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address'
+        title: 'LINK',
+        dataIndex: 'link',
+        key: 'link',
+        width: 80,
+        component: 'link',
+        props: {
+            target: '_blank',
+            titlePropName: 'link',
+            hrefPropName: 'link'
+        }
     }
 ];
 const listdata = Array.from(new Array(100)).map((_, index)=>({
@@ -40,6 +37,7 @@ const listdata = Array.from(new Array(100)).map((_, index)=>({
         name: `Edward King ${index}`,
         age: 32,
         enable: true,
+        link: 'https://www.baidu.com',
         address: `London, Park Lane no. ${index}`
     }));
 const request = async (params)=>{

package/package.json

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