@faasjs/ant-design 0.0.3-beta.31 → 0.0.3-beta.32

package/README.md

@@ -62,6 +62,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [RoutesProps](interfaces/RoutesProps.md)
 - [TableItemProps](interfaces/TableItemProps.md)
 - [TitleProps](interfaces/TitleProps.md)
+- [UnionFaasItemProps](interfaces/UnionFaasItemProps.md)
 
 ### Type Aliases
 
@@ -77,7 +78,12 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [FaasItemType](#faasitemtype)
 - [FaasItemTypeValue](#faasitemtypevalue)
 - [FormSubmitProps](#formsubmitprops)
+- [LoadingProps](#loadingprops)
 - [TableProps](#tableprops)
+- [UnionFaasItemElement](#unionfaasitemelement)
+- [UnionFaasItemInjection](#unionfaasiteminjection)
+- [UnionFaasItemRender](#unionfaasitemrender)
+- [UnionScene](#unionscene)
 - [setDrawerProps](#setdrawerprops)
 - [setModalProps](#setmodalprops)
 
@@ -127,13 +133,19 @@ ___
 
 ### ExtendFormTypeProps
 
-Ƭ **ExtendFormTypeProps**: `Object`
+Ƭ **ExtendFormTypeProps**<`T`\>: `Object`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | `any` |
 
 #### Type declaration
 
 | Name | Type |
 | :------ | :------ |
-| `children?` | `ReactNode` |
+| `children?` | [`UnionFaasItemElement`](#unionfaasitemelement)<`T`\> |
 
 ___
 
@@ -151,14 +163,20 @@ ___
 
 ### ExtendTableTypeProps
 
-Ƭ **ExtendTableTypeProps**: `Object`
+Ƭ **ExtendTableTypeProps**<`T`\>: `Object`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | `any` |
 
 #### Type declaration
 
 | Name | Type |
 | :------ | :------ |
 | `children?` | `JSX.Element` |
-| `render?` | (`value`: `any`, `values`: `any`, `index`: `number`) => `JSX.Element` \| `string` \| `number` \| `boolean` \| ``null`` |
+| `render?` | [`UnionFaasItemRender`](#unionfaasitemrender)<`T`\> |
 
 ___
 
@@ -204,26 +222,13 @@ ___
 
 ### FaasDataWrapperProps
 
-Ƭ **FaasDataWrapperProps**<`PathOrData`\>: `Object`
+Ƭ **FaasDataWrapperProps**<`T`\>: `OriginProps`<`T`\> & { `loading?`: `JSX.Element` ; `loadingProps?`: [`LoadingProps`](#loadingprops)  }
 
 #### Type parameters
 
 | Name | Type |
 | :------ | :------ |
-| `PathOrData` | extends `FaasAction` |
-
-#### Type declaration
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `action` | `string` | - |
-| `children?` | `JSX.Element` | - |
-| `data?` | `FaasData`<`PathOrData`\> | use custom data, should work with setData |
-| `fallback?` | `JSX.Element` \| ``false`` | - |
-| `params?` | `FaasParams`<`PathOrData`\> | - |
-| `setData?` | `React.Dispatch`<`React.SetStateAction`<`FaasData`<`PathOrData`\>\>\> | use custom setData, should work with data |
-| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `void` | - |
-| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
+| `T` | `any` |
 
 ___
 
@@ -273,6 +278,21 @@ ___
 
 ___
 
+### LoadingProps
+
+Ƭ **LoadingProps**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `children?` | `React.ReactNode` |
+| `loading?` | `boolean` |
+| `size?` | ``"small"`` \| ``"default"`` \| ``"large"`` |
+| `style?` | `React.CSSProperties` |
+
+___
+
 ### TableProps
 
 Ƭ **TableProps**<`T`, `ExtendTypes`\>: { `extendTypes?`: { `[key: string]`: [`ExtendTableTypeProps`](#extendtabletypeprops);  } ; `faasData?`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`T`\> ; `items`: ([`TableItemProps`](interfaces/TableItemProps.md) \| `ExtendTypes` & [`ExtendTableItemProps`](#extendtableitemprops))[] ; `onChange?`: (`pagination`: `TablePaginationConfig`, `filters`: `Record`<`string`, `FilterValue` \| ``null``\>, `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[], `extra`: `TableCurrentDataSource`<`T`\>) => { `extra`: `TableCurrentDataSource`<`T`\> ; `filters`: `Record`<`string`, `FilterValue` \| ``null``\> ; `pagination`: `TablePaginationConfig` ; `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[]  }  } & `AntdTableProps`<`T`\>
@@ -286,6 +306,77 @@ ___
 
 ___
 
+### UnionFaasItemElement
+
+Ƭ **UnionFaasItemElement**<`Value`, `Values`\>: `ReactElement`<[`UnionFaasItemInjection`](#unionfaasiteminjection)<`Value`, `Values`\>\> \| ``null``
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Value` | `any` |
+| `Values` | `any` |
+
+___
+
+### UnionFaasItemInjection
+
+Ƭ **UnionFaasItemInjection**<`Value`, `Values`\>: `Object`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Value` | `any` |
+| `Values` | `any` |
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `index?` | `number` |
+| `scene?` | [`UnionScene`](#unionscene) |
+| `value?` | `Value` |
+| `values?` | `Values` |
+
+___
+
+### UnionFaasItemRender
+
+Ƭ **UnionFaasItemRender**<`Value`, `Values`\>: (`value`: `Value`, `values`: `Values`, `index`: `number`, `scene`: [`UnionScene`](#unionscene)) => `JSX.Element` \| ``null``
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Value` | `any` |
+| `Values` | `any` |
+
+#### Type declaration
+
+▸ (`value`, `values`, `index`, `scene`): `JSX.Element` \| ``null``
+
+##### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `value` | `Value` |
+| `values` | `Values` |
+| `index` | `number` |
+| `scene` | [`UnionScene`](#unionscene) |
+
+##### Returns
+
+`JSX.Element` \| ``null``
+
+___
+
+### UnionScene
+
+Ƭ **UnionScene**: ``"form"`` \| ``"description"`` \| ``"table"``
+
+___
+
 ### setDrawerProps
 
 Ƭ **setDrawerProps**: (`changes`: `Partial`<[`DrawerProps`](interfaces/DrawerProps.md)\>) => `void`
@@ -528,13 +619,19 @@ ___
 
 Loading component based on Spin
 
+```tsx
+<Loading /> // display loading
+
+<Loading loading={ !remoteData }>
+ <div>{remoteData}</div>
+</Loading>
+```
+
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `Object` |
-| `props.size?` | ``"default"`` \| ``"small"`` \| ``"large"`` |
-| `props.style?` | `CSSProperties` |
+| `props` | [`LoadingProps`](#loadingprops) |
 
 #### Returns
 
@@ -600,7 +697,7 @@ https://ant.design/components/table/
 
 | Name | Type |
 | :------ | :------ |
-| `T` | `any` |
+| `T` | extends `Record`<`string`, `any`\> |
 | `ExtendTypes` | `any` |
 
 #### Parameters

package/dist/index.d.ts

@@ -1,19 +1,19 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode, LazyExoticComponent, ComponentType } from 'react';
+import { CSSProperties, ReactNode, ReactElement, LazyExoticComponent, ComponentType } from 'react';
 import { Dayjs } from 'dayjs';
-import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, DatePickerProps, TimePickerProps, FormInstance, FormProps as FormProps$1, ButtonProps, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
+import { FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, DatePickerProps, TimePickerProps, FormInstance, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, DrawerProps as DrawerProps$1, FormProps as FormProps$1, ButtonProps, ModalProps as ModalProps$1 } from 'antd';
 export { Drawer, Modal } from 'antd';
-import { FaasDataWrapperProps } from '@faasjs/react';
-export { FaasDataInjection, FaasDataWrapperProps } from '@faasjs/react';
+import { RuleObject } from 'rc-field-form/lib/interface';
+import { FaasDataWrapperProps as FaasDataWrapperProps$1 } from '@faasjs/react';
+export { FaasDataInjection } from '@faasjs/react';
+import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
 import * as antd_es_form_context from 'antd/es/form/context';
 import * as antd_es_form_ErrorList from 'antd/es/form/ErrorList';
 import * as antd_es_form from 'antd/es/form';
 import * as rc_field_form_es_useWatch from 'rc-field-form/es/useWatch';
 import * as antd_es_form_hooks_useFormInstance from 'antd/es/form/hooks/useFormInstance';
 import * as antd_es_form_Form from 'antd/es/form/Form';
-import { RuleObject } from 'rc-field-form/lib/interface';
 import { RouteProps } from 'react-router-dom';
-import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
 
 interface BlankProps {
     value?: any;
@@ -87,56 +87,92 @@ declare function ConfigProvider({ config, children }: {
 }): JSX.Element;
 declare function useConfigContext(): ConfigProviderProps;
 
-type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
-/** FaasItemType's value type */
-type FaasItemTypeValue = {
-    string: string;
-    'string[]': string[];
-    number: number;
-    'number[]': number[];
-    boolean: boolean;
-    date: Dayjs;
-    time: Dayjs;
-    object: any;
-    'object[]': any[];
+type ExtendFormTypeProps<T = any> = {
+    children?: UnionFaasItemElement<T>;
 };
-type BaseOption = string | number | {
-    label: string;
-    value?: string | number;
+type ExtendTypes = {
+    [type: string]: ExtendFormTypeProps;
 };
-interface BaseItemProps {
-    id: string;
-    title?: string;
-    options?: BaseOption[];
+type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
+interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
+    input?: InputProps | InputNumberProps | SwitchProps | SelectProps<T> | DatePickerProps | TimePickerProps;
+    maxCount?: number;
+    object?: FormItemProps[];
+    disabled?: boolean;
+    required?: boolean;
+    col?: number;
+    children?: UnionFaasItemElement<T>;
+    formChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    formRender?: UnionFaasItemRender<T>;
+    rules?: RuleObject[];
+    label?: string | false;
+    extendTypes?: ExtendTypes;
+    /** trigger when current item's value changed */
+    onValueChange?: (value: T, values: any, form: FormInstance) => void;
+    /** trigger when any item's value changed */
+    if?: (values: Record<string, any>) => boolean;
 }
-interface FaasItemProps extends BaseItemProps {
-    /**
-     * Support string, string[], number, number[], boolean, date, time, object, object[]
-     * @default 'string'
-     */
-    type?: FaasItemType;
+/**
+ * FormItem, can be used without Form.
+ *
+ * ```ts
+ * // use inline type
+ * <FormItem type='string' id='name' />
+ *
+ * // use custom type
+ * <FormItem id='password'>
+ *   <Input.Password />
+ * </>
+ * ```
+ */
+declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
+declare namespace FormItem {
+    var useStatus: () => {
+        status?: "" | "warning" | "error" | "success" | "validating";
+    };
 }
-declare function transferOptions(options: BaseOption[]): {
-    label: string;
-    value?: string | number;
-}[];
-declare function transferValue(type: FaasItemType, value: any): any;
 
+type LoadingProps = {
+    style?: React.CSSProperties;
+    size?: 'small' | 'default' | 'large';
+    loading?: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Loading component based on Spin
+ *
+ * ```tsx
+ * <Loading /> // display loading
+ *
+ * <Loading loading={ !remoteData }>
+ *  <div>{remoteData}</div>
+ * </Loading>
+ * ```
+ */
+declare function Loading(props: LoadingProps): JSX.Element;
+
+type FaasDataWrapperProps<T = any> = FaasDataWrapperProps$1<T> & {
+    loadingProps?: LoadingProps;
+    loading?: JSX.Element;
+};
 /**
  * FaasDataWrapper component with Loading and ErrorBoundary
  */
 declare function FaasDataWrapper<T = any>(props: FaasDataWrapperProps<T>): JSX.Element;
 
-interface ExtendDescriptionTypeProps {
-    children?: JSX.Element;
-    render?: (value: any, values: any) => JSX.Element;
+interface ExtendDescriptionTypeProps<T = any> {
+    children?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
 }
 type ExtendDescriptionItemProps = BaseItemProps;
 interface DescriptionItemProps<T = any> extends FaasItemProps {
-    children?: JSX.Element;
-    render?: (value: T, values: any) => JSX.Element;
+    children?: UnionFaasItemElement<T>;
+    descriptionChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    descriptionRender?: UnionFaasItemRender<T>;
     if?: (values: Record<string, any>) => boolean;
-    object?: DescriptionItemProps[];
+    object?: DescriptionItemProps<T>[];
 }
 interface DescriptionProps<T = any, ExtendItemProps = any> extends DescriptionsProps {
     renderTitle?: ((values: T) => ReactNode);
@@ -160,6 +196,88 @@ interface DescriptionItemContentProps<T = any> {
  */
 declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
 
+interface TableItemProps<T = any> extends FaasItemProps, Omit<TableColumnProps<T>, 'title' | 'children' | 'render'> {
+    optionsType?: 'auto';
+    children?: UnionFaasItemElement<T>;
+    tableChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    tableRender?: UnionFaasItemRender<T>;
+    object?: TableItemProps<T>[];
+}
+type ExtendTableTypeProps<T = any> = {
+    children?: JSX.Element;
+    render?: UnionFaasItemRender<T>;
+};
+type ExtendTableItemProps<T = any> = BaseItemProps & Omit<TableColumnProps<T>, 'children'>;
+type TableProps<T = any, ExtendTypes = any> = {
+    items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
+    extendTypes?: {
+        [key: string]: ExtendTableTypeProps;
+    };
+    faasData?: FaasDataWrapperProps<T>;
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T> | SorterResult<T>[], extra: TableCurrentDataSource<T>) => {
+        pagination: TablePaginationConfig;
+        filters: Record<string, FilterValue | null>;
+        sorter: SorterResult<T> | SorterResult<T>[];
+        extra: TableCurrentDataSource<T>;
+    };
+} & TableProps$1<T>;
+/**
+ * Table component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/table/
+ */
+declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
+
+type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
+/** FaasItemType's value type */
+type FaasItemTypeValue = {
+    string: string;
+    'string[]': string[];
+    number: number;
+    'number[]': number[];
+    boolean: boolean;
+    date: Dayjs;
+    time: Dayjs;
+    object: any;
+    'object[]': any[];
+};
+type BaseOption = string | number | {
+    label: string;
+    value?: string | number;
+};
+interface BaseItemProps {
+    id: string;
+    title?: string;
+    options?: BaseOption[];
+}
+interface FaasItemProps extends BaseItemProps {
+    /**
+     * Support string, string[], number, number[], boolean, date, time, object, object[]
+     * @default 'string'
+     */
+    type?: FaasItemType;
+}
+declare function transferOptions(options: BaseOption[]): {
+    label: string;
+    value?: string | number;
+}[];
+declare function transferValue(type: FaasItemType, value: any): any;
+type UnionScene = 'form' | 'description' | 'table';
+type UnionFaasItemInjection<Value = any, Values = any> = {
+    scene?: UnionScene;
+    value?: Value;
+    values?: Values;
+    index?: number;
+};
+type UnionFaasItemRender<Value = any, Values = any> = (value: Value, values: Values, index: number, scene: UnionScene) => JSX.Element | null;
+type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasItemInjection<Value, Values>> | null;
+interface UnionFaasItemProps<Value = any, Values = any> extends FormItemProps, DescriptionItemProps, TableItemProps {
+    children?: UnionFaasItemElement<UnionFaasItemProps<Value, Values>> | null;
+    render?: UnionFaasItemRender;
+    object?: UnionFaasItemProps<Value, Values>[];
+}
+
 interface DrawerProps extends DrawerProps$1 {
     children?: JSX.Element | JSX.Element[];
 }
@@ -188,50 +306,6 @@ declare function useDrawer(init?: DrawerProps): {
     setDrawerProps(changes: Partial<DrawerProps>): void;
 };
 
-type ExtendFormTypeProps = {
-    children?: ReactNode;
-};
-type ExtendTypes = {
-    [type: string]: ExtendFormTypeProps;
-};
-type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
-interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>, 'id' | 'children'> {
-    input?: InputProps | InputNumberProps | SwitchProps | SelectProps<T> | DatePickerProps | TimePickerProps;
-    maxCount?: number;
-    object?: FormItemProps[];
-    disabled?: boolean;
-    required?: boolean;
-    col?: number;
-    children?: JSX.Element;
-    render?: () => JSX.Element;
-    rules?: RuleObject[];
-    label?: string | false;
-    extendTypes?: ExtendTypes;
-    /** trigger when current item's value changed */
-    onValueChange?: (value: T, values: any, form: FormInstance) => void;
-    /** trigger when any item's value changed */
-    if?: (values: Record<string, any>) => boolean;
-}
-/**
- * FormItem, can be used without Form.
- *
- * ```ts
- * // use inline type
- * <FormItem type='string' id='name' />
- *
- * // use custom type
- * <FormItem id='password'>
- *   <Input.Password />
- * </>
- * ```
- */
-declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
-declare namespace FormItem {
-    var useStatus: () => {
-        status?: "" | "error" | "warning" | "success" | "validating";
-    };
-}
-
 type FormSubmitProps = {
     /** Default: Submit */
     text?: string;
@@ -317,14 +391,6 @@ interface LinkProps {
  */
 declare function Link({ href, target, text, children, style, button, }: LinkProps): JSX.Element;
 
-/**
- * Loading component based on Spin
- */
-declare function Loading(props: {
-    style?: React.CSSProperties;
-    size?: 'small' | 'default' | 'large';
-}): JSX.Element;
-
 interface ModalProps extends ModalProps$1 {
     children?: JSX.Element | JSX.Element[] | string;
 }
@@ -378,36 +444,6 @@ interface RoutesProps {
  */
 declare function Routes(props: RoutesProps): JSX.Element;
 
-interface TableItemProps<T = any> extends FaasItemProps, Omit<TableColumnProps<T>, 'title' | 'children'> {
-    optionsType?: 'auto';
-    children?: JSX.Element;
-    object?: TableItemProps[];
-}
-type ExtendTableTypeProps = {
-    children?: JSX.Element;
-    render?: (value: any, values: any, index: number) => JSX.Element | string | number | boolean | null;
-};
-type ExtendTableItemProps<T = any> = BaseItemProps & Omit<TableColumnProps<T>, 'children'>;
-type TableProps<T = any, ExtendTypes = any> = {
-    items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
-    extendTypes?: {
-        [key: string]: ExtendTableTypeProps;
-    };
-    faasData?: FaasDataWrapperProps<T>;
-    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T> | SorterResult<T>[], extra: TableCurrentDataSource<T>) => {
-        pagination: TablePaginationConfig;
-        filters: Record<string, FilterValue | null>;
-        sorter: SorterResult<T> | SorterResult<T>[];
-        extra: TableCurrentDataSource<T>;
-    };
-} & TableProps$1<T>;
-/**
- * Table component with Ant Design & FaasJS
- *
- * @ref https://ant.design/components/table/
- */
-declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
-
 interface TitleProps {
     title: string | string[];
     /** ` - ` as default */
@@ -442,4 +478,4 @@ interface TitleProps {
  */
 declare function Title(props: TitleProps): JSX.Element;
 
-export { BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataWrapper, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, ModalProps, PageNotFound, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, setDrawerProps, setModalProps, transferOptions, transferValue, useConfigContext, useDrawer, useModal };
+export { BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataWrapper, FaasDataWrapperProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, ModalProps, PageNotFound, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, setDrawerProps, setModalProps, transferOptions, transferValue, useConfigContext, useDrawer, useModal };

package/dist/index.js

@@ -174,6 +174,10 @@ var import_react3 = require("@faasjs/react");
 var import_antd2 = require("antd");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Loading(props) {
+  if (props.loading === false)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: props.children
+    });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     style: {
       ...props.style || {},
@@ -194,7 +198,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function FaasDataWrapper(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Alert.ErrorBoundary, {
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.FaasDataWrapper, {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}),
+      fallback: props.loading || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {
+        ...props.loadingProps
+      }),
       ...props
     })
   });
@@ -238,25 +244,37 @@ function DescriptionItemContent(props) {
       return (0, import_react4.cloneElement)(
         computedProps.extendTypes[computedProps.item.type].children,
         {
+          scene: "description",
           value: computedProps.value,
           values: computedProps.values
         }
       );
     else if (computedProps.extendTypes[computedProps.item.type].render)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-        children: computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values)
+        children: computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values, 0, "description")
       });
     else
       throw Error(computedProps.item.type + " requires children or render");
+  if (computedProps.item.descriptionChildren === null)
+    return null;
+  if (computedProps.item.descriptionChildren)
+    return (0, import_react4.cloneElement)(computedProps.item.descriptionChildren, {
+      scene: "description",
+      value: computedProps.value,
+      values: computedProps.values
+    });
+  if (computedProps.item.children === null)
+    return null;
   if (computedProps.item.children)
     return (0, import_react4.cloneElement)(computedProps.item.children, {
+      scene: "description",
       value: computedProps.value,
       values: computedProps.values
     });
+  if (computedProps.item.descriptionRender)
+    return computedProps.item.descriptionRender(computedProps.value, computedProps.values, 0, "description");
   if (computedProps.item.render)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-      children: computedProps.item.render(computedProps.value, computedProps.values)
-    });
+    return computedProps.item.render(computedProps.value, computedProps.values, 0, "description");
   if (computedProps.value === null || Array.isArray(computedProps.value) && !computedProps.value.length)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Blank, {});
   switch (computedProps.item.type) {
@@ -331,9 +349,6 @@ function Description(props) {
       }).filter(Boolean)
     });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Skeleton, {
-      active: true
-    }),
     render: ({ data }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Descriptions, {
         ...props,
@@ -482,15 +497,29 @@ function FormItem(props) {
       ...computedProps,
       children: extendTypes[computedProps.type].children
     });
+  if (computedProps.formChildren === null)
+    return null;
+  if (computedProps.formChildren)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Form.Item, {
+      ...computedProps,
+      children: (0, import_react6.cloneElement)(computedProps.formChildren, { scene: "form" })
+    });
+  if (computedProps.children === null)
+    return null;
   if (computedProps.children)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Form.Item, {
       ...computedProps,
-      children: computedProps.children
+      children: (0, import_react6.cloneElement)(computedProps.children, { scene: "form" })
+    });
+  if (computedProps.formRender)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Form.Item, {
+      ...computedProps,
+      children: computedProps.formRender(null, null, 0, "form")
     });
   if (computedProps.render)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Form.Item, {
       ...computedProps,
-      children: computedProps.render()
+      children: computedProps.render(null, null, 0, "form")
     });
   switch (computedProps.type) {
     case "string":
@@ -1061,10 +1090,24 @@ function Table(props) {
           value: null
         });
       }
-      if (item.children)
+      if (item.tableChildren === null)
+        item.render = () => null;
+      else if (item.tableChildren)
+        item.render = (value, values) => (0, import_react11.cloneElement)(
+          item.tableChildren,
+          {
+            scene: "table",
+            value,
+            values
+          }
+        );
+      else if (item.children === null)
+        item.render = () => null;
+      else if (item.children)
         item.render = (value, values) => (0, import_react11.cloneElement)(
           item.children,
           {
+            scene: "table",
             value,
             values
           }
@@ -1074,6 +1117,7 @@ function Table(props) {
           item.render = (value, values) => (0, import_react11.cloneElement)(
             props.extendTypes[item.type].children,
             {
+              scene: "table",
               value,
               values
             }
@@ -1299,11 +1343,13 @@ function Table(props) {
           break;
         case "object[]":
           if (!item.render)
-            item.render = (value) => value.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
-              items: item.object,
-              dataSource: v || [],
-              column: 1
-            }, i));
+            item.render = (value) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+              children: value.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
+                items: item.object,
+                dataSource: v || [],
+                column: 1
+              }, i))
+            });
           break;
         default:
           if (!item.render)
@@ -1351,9 +1397,6 @@ function Table(props) {
       dataSource: props.dataSource
     });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd11.Skeleton, {
-      active: true
-    }),
     ...props.faasData,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaasDataTable, {
       props,

package/dist/index.mjs

@@ -119,7 +119,6 @@ function transferValue(type, value) {
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
 import {
   Descriptions,
-  Skeleton,
   Space
 } from "antd";
 import { isFunction, upperFirst as upperFirst2 } from "lodash-es";
@@ -134,8 +133,12 @@ import { FaasDataWrapper as Origin } from "@faasjs/react";
 
 // src/Loading.tsx
 import { Spin } from "antd";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 function Loading(props) {
+  if (props.loading === false)
+    return /* @__PURE__ */ jsx3(Fragment, {
+      children: props.children
+    });
   return /* @__PURE__ */ jsx3("div", {
     style: {
       ...props.style || {},
@@ -156,14 +159,16 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 function FaasDataWrapper(props) {
   return /* @__PURE__ */ jsx4(Alert.ErrorBoundary, {
     children: /* @__PURE__ */ jsx4(Origin, {
-      fallback: /* @__PURE__ */ jsx4(Loading, {}),
+      fallback: props.loading || /* @__PURE__ */ jsx4(Loading, {
+        ...props.loadingProps
+      }),
       ...props
     })
   });
 }
 
 // src/Description.tsx
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 function DescriptionItemContent(props) {
   var _a;
   const [computedProps, setComputedProps] = useState2();
@@ -200,36 +205,48 @@ function DescriptionItemContent(props) {
       return cloneElement(
         computedProps.extendTypes[computedProps.item.type].children,
         {
+          scene: "description",
           value: computedProps.value,
           values: computedProps.values
         }
       );
     else if (computedProps.extendTypes[computedProps.item.type].render)
-      return /* @__PURE__ */ jsx5(Fragment, {
-        children: computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values)
+      return /* @__PURE__ */ jsx5(Fragment2, {
+        children: computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values, 0, "description")
       });
     else
       throw Error(computedProps.item.type + " requires children or render");
+  if (computedProps.item.descriptionChildren === null)
+    return null;
+  if (computedProps.item.descriptionChildren)
+    return cloneElement(computedProps.item.descriptionChildren, {
+      scene: "description",
+      value: computedProps.value,
+      values: computedProps.values
+    });
+  if (computedProps.item.children === null)
+    return null;
   if (computedProps.item.children)
     return cloneElement(computedProps.item.children, {
+      scene: "description",
       value: computedProps.value,
       values: computedProps.values
     });
+  if (computedProps.item.descriptionRender)
+    return computedProps.item.descriptionRender(computedProps.value, computedProps.values, 0, "description");
   if (computedProps.item.render)
-    return /* @__PURE__ */ jsx5(Fragment, {
-      children: computedProps.item.render(computedProps.value, computedProps.values)
-    });
+    return computedProps.item.render(computedProps.value, computedProps.values, 0, "description");
   if (computedProps.value === null || Array.isArray(computedProps.value) && !computedProps.value.length)
     return /* @__PURE__ */ jsx5(Blank, {});
   switch (computedProps.item.type) {
     case "string[]":
-      return /* @__PURE__ */ jsx5(Fragment, {
+      return /* @__PURE__ */ jsx5(Fragment2, {
         children: computedProps.value.join(", ")
       });
     case "number":
       return computedProps.value || null;
     case "number[]":
-      return /* @__PURE__ */ jsx5(Fragment, {
+      return /* @__PURE__ */ jsx5(Fragment2, {
         children: computedProps.value.join(", ")
       });
     case "boolean":
@@ -245,11 +262,11 @@ function DescriptionItemContent(props) {
         }
       });
     case "time":
-      return /* @__PURE__ */ jsx5(Fragment, {
+      return /* @__PURE__ */ jsx5(Fragment2, {
         children: computedProps.value.format("YYYY-MM-DD HH:mm:ss")
       });
     case "date":
-      return /* @__PURE__ */ jsx5(Fragment, {
+      return /* @__PURE__ */ jsx5(Fragment2, {
         children: computedProps.value.format("YYYY-MM-DD")
       });
     case "object":
@@ -293,9 +310,6 @@ function Description(props) {
       }).filter(Boolean)
     });
   return /* @__PURE__ */ jsx5(FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ jsx5(Skeleton, {
-      active: true
-    }),
     render: ({ data }) => {
       return /* @__PURE__ */ jsx5(Descriptions, {
         ...props,
@@ -372,11 +386,12 @@ import {
 } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import {
+  cloneElement as cloneElement2,
   useEffect as useEffect3,
   useState as useState4
 } from "react";
 import { upperFirst as upperFirst3 } from "lodash-es";
-import { Fragment as Fragment2, jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs } from "react/jsx-runtime";
 function processProps(propsCopy, config) {
   if (!propsCopy.title)
     propsCopy.title = upperFirst3(propsCopy.id);
@@ -466,15 +481,29 @@ function FormItem(props) {
       ...computedProps,
       children: extendTypes[computedProps.type].children
     });
+  if (computedProps.formChildren === null)
+    return null;
+  if (computedProps.formChildren)
+    return /* @__PURE__ */ jsx7(AntdForm.Item, {
+      ...computedProps,
+      children: cloneElement2(computedProps.formChildren, { scene: "form" })
+    });
+  if (computedProps.children === null)
+    return null;
   if (computedProps.children)
     return /* @__PURE__ */ jsx7(AntdForm.Item, {
       ...computedProps,
-      children: computedProps.children
+      children: cloneElement2(computedProps.children, { scene: "form" })
+    });
+  if (computedProps.formRender)
+    return /* @__PURE__ */ jsx7(AntdForm.Item, {
+      ...computedProps,
+      children: computedProps.formRender(null, null, 0, "form")
     });
   if (computedProps.render)
     return /* @__PURE__ */ jsx7(AntdForm.Item, {
       ...computedProps,
-      children: computedProps.render()
+      children: computedProps.render(null, null, 0, "form")
     });
   switch (computedProps.type) {
     case "string":
@@ -500,7 +529,7 @@ function FormItem(props) {
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
           var _a2;
-          return /* @__PURE__ */ jsxs(Fragment2, {
+          return /* @__PURE__ */ jsxs(Fragment3, {
             children: [
               computedProps.label && /* @__PURE__ */ jsx7("div", {
                 className: "ant-form-item-label",
@@ -581,7 +610,7 @@ function FormItem(props) {
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
           var _a2, _b;
-          return /* @__PURE__ */ jsxs(Fragment2, {
+          return /* @__PURE__ */ jsxs(Fragment3, {
             children: [
               computedProps.label && /* @__PURE__ */ jsx7("div", {
                 className: "ant-form-item-label",
@@ -661,7 +690,7 @@ function FormItem(props) {
         })
       });
     case "object":
-      return /* @__PURE__ */ jsxs(Fragment2, {
+      return /* @__PURE__ */ jsxs(Fragment3, {
         children: [
           computedProps.label && /* @__PURE__ */ jsx7("div", {
             className: "ant-form-item-label",
@@ -679,7 +708,7 @@ function FormItem(props) {
       return /* @__PURE__ */ jsx7(AntdForm.List, {
         name: computedProps.name,
         rules: computedProps.rules,
-        children: (fields, { add, remove }, { errors }) => /* @__PURE__ */ jsxs(Fragment2, {
+        children: (fields, { add, remove }, { errors }) => /* @__PURE__ */ jsxs(Fragment3, {
           children: [
             fields.map((field) => /* @__PURE__ */ jsxs(AntdForm.Item, {
               style: { marginBottom: 0 },
@@ -956,7 +985,7 @@ function useModal(init) {
 // src/Routers.tsx
 import {
   Result,
-  Skeleton as Skeleton2,
+  Skeleton,
   Alert as Alert2
 } from "antd";
 import {
@@ -983,7 +1012,7 @@ function Routes(props) {
           element: r.element || /* @__PURE__ */ jsx11(Suspense, {
             fallback: props.fallback || /* @__PURE__ */ jsx11("div", {
               style: { padding: "24px" },
-              children: /* @__PURE__ */ jsx11(Skeleton2, {
+              children: /* @__PURE__ */ jsx11(Skeleton, {
                 active: true
               })
             }),
@@ -1003,12 +1032,11 @@ function Routes(props) {
 import {
   useState as useState7,
   useEffect as useEffect5,
-  cloneElement as cloneElement2
+  cloneElement as cloneElement3
 } from "react";
 import {
   Table as AntdTable,
   Radio,
-  Skeleton as Skeleton3,
   Input as Input2
 } from "antd";
 import dayjs2 from "dayjs";
@@ -1018,7 +1046,7 @@ import {
   uniqBy,
   upperFirst as upperFirst4
 } from "lodash-es";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function processValue(item, value) {
   var _a;
   const transferred = transferValue(item.type, value);
@@ -1067,19 +1095,34 @@ function Table(props) {
           value: null
         });
       }
-      if (item.children)
-        item.render = (value, values) => cloneElement2(
+      if (item.tableChildren === null)
+        item.render = () => null;
+      else if (item.tableChildren)
+        item.render = (value, values) => cloneElement3(
+          item.tableChildren,
+          {
+            scene: "table",
+            value,
+            values
+          }
+        );
+      else if (item.children === null)
+        item.render = () => null;
+      else if (item.children)
+        item.render = (value, values) => cloneElement3(
           item.children,
           {
+            scene: "table",
             value,
             values
           }
         );
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children)
-          item.render = (value, values) => cloneElement2(
+          item.render = (value, values) => cloneElement3(
             props.extendTypes[item.type].children,
             {
+              scene: "table",
               value,
               values
             }
@@ -1305,11 +1348,13 @@ function Table(props) {
           break;
         case "object[]":
           if (!item.render)
-            item.render = (value) => value.map((v, i) => /* @__PURE__ */ jsx12(Description, {
-              items: item.object,
-              dataSource: v || [],
-              column: 1
-            }, i));
+            item.render = (value) => /* @__PURE__ */ jsx12(Fragment4, {
+              children: value.map((v, i) => /* @__PURE__ */ jsx12(Description, {
+                items: item.object,
+                dataSource: v || [],
+                column: 1
+              }, i))
+            });
           break;
         default:
           if (!item.render)
@@ -1357,9 +1402,6 @@ function Table(props) {
       dataSource: props.dataSource
     });
   return /* @__PURE__ */ jsx12(FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ jsx12(Skeleton3, {
-      active: true
-    }),
     ...props.faasData,
     children: /* @__PURE__ */ jsx12(FaasDataTable, {
       props,
@@ -1455,8 +1497,8 @@ function FaasDataTable({
 }
 
 // src/Title.tsx
-import { useEffect as useEffect6, cloneElement as cloneElement3 } from "react";
-import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+import { useEffect as useEffect6, cloneElement as cloneElement4 } from "react";
+import { Fragment as Fragment5, jsx as jsx13 } from "react/jsx-runtime";
 function Title(props) {
   const { Title: Title2 } = useConfigContext();
   useEffect6(() => {
@@ -1475,11 +1517,11 @@ function Title(props) {
     });
   }
   if (props.plain)
-    return /* @__PURE__ */ jsx13(Fragment3, {
+    return /* @__PURE__ */ jsx13(Fragment5, {
       children: Array.isArray(props.title) ? props.title[0] : props.title
     });
   if (props.children)
-    return cloneElement3(props.children, { title: props.title });
+    return cloneElement4(props.children, { title: props.title });
   return null;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.3-beta.31",
+  "version": "0.0.3-beta.32",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash-es": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.3-beta.31",
+    "@faasjs/react": "^0.0.3-beta.32",
     "react-router-dom": "*",
     "dayjs": "*"
   },