@faasjs/ant-design 0.0.2-beta.373 → 0.0.2-beta.376

package/README.md

@@ -158,7 +158,7 @@ ___
 
 ### DescriptionProps
 
-Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { [key: string]: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[]  } & `DescriptionsProps`
+Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { `[key: string]`: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[]  } & `DescriptionsProps`
 
 #### Type parameters
 
@@ -293,7 +293,7 @@ ___
 
 ### FormItemProps
 
-Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { [type: string]: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element`  } & `FormItemInputProps`<`T`\> & [`FaasItemProps`](#faasitemprops) & `AntdFormItemProps`<`T`\>
+Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element`  } & `FormItemInputProps`<`T`\> & [`FaasItemProps`](#faasitemprops) & `AntdFormItemProps`<`T`\>
 
 #### Type parameters
 
@@ -305,7 +305,7 @@ ___
 
 ### FormProps
 
-Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `extendTypes?`: { [type: string]: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps`)[] ; `submit?`: ``false`` \| { `text?`: `string`  }  } & `AntdFormProps`<`Values`\>
+Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps`)[] ; `submit?`: ``false`` \| { `text?`: `string` ; `to?`: { `action`: `string` ; `params?`: `Record`<`string`, `any`\>  }  } ; `onFinish?`: (`values`: `Values`, `submit?`: (`values`: `any`) => `Promise`<`any`\>) => `Promise`<`any`\>  } & `Omit`<`AntdFormProps`<`Values`\>, ``"onFinish"``\>
 
 #### Type parameters
 
@@ -318,7 +318,7 @@ ___
 
 ### ModalProps
 
-Ƭ **ModalProps**: `AntdModalProps` & { `children?`: `JSX.Element` \| `JSX.Element`[]  }
+Ƭ **ModalProps**: `AntdModalProps` & { `children?`: `JSX.Element` \| `JSX.Element`[] \| `string`  }
 
 ___
 
@@ -350,7 +350,7 @@ ___
 
 ### TableProps
 
-Ƭ **TableProps**<`T`, `ExtendTypes`\>: { `extendTypes?`: { [key: string]: [`ExtendTableTypeProps`](#extendtabletypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`TableItemProps`](#tableitemprops) \| `ExtendTypes` & [`ExtendTableItemProps`](#extendtableitemprops))[] ; `onChange?`: (`pagination`: `TablePaginationConfig`, `filters`: `Record`<`string`, `FilterValue`\>, `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`\>
+Ƭ **TableProps**<`T`, `ExtendTypes`\>: { `extendTypes?`: { `[key: string]`: [`ExtendTableTypeProps`](#extendtabletypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`TableItemProps`](#tableitemprops) \| `ExtendTypes` & [`ExtendTableItemProps`](#extendtableitemprops))[] ; `onChange?`: (`pagination`: `TablePaginationConfig`, `filters`: `Record`<`string`, `FilterValue`\>, `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`\>
 
 #### Type parameters
 
@@ -375,7 +375,8 @@ ___
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `h1?` | `boolean` \| { `className?`: `string` ; `style?`: `React.CSSProperties`  } | - |
+| `children?` | `JSX.Element` | return children |
+| `h1?` | `boolean` \| { `className?`: `string` ; `style?`: `React.CSSProperties`  } | return a h1 element |
 | `separator?` | `string` | ` - ` as default |
 | `suffix?` | `string` | - |
 | `title` | `string` \| `string`[] | - |
@@ -621,13 +622,19 @@ ___
 ▸ **Title**(`props`): `JSX.Element`
 
 Title is used to change the title of the page.
+Return null by default.
 
 ```ts
-<Title title='hi' /> // => return null, change the document.title to 'hi'
-<Title title={['a', 'b']} /> // => return null, change the document.title to 'a - b'
+// return null
+<Title title='hi' /> // => change the document.title to 'hi'
+<Title title={['a', 'b']} /> // => change the document.title to 'a - b'
 
-<Title title='hi' h1 /> // => return <h1>hi</h1>, change the document.title to 'hi'
-<Title title={['a', 'b']} h1 /> // => return <h1>a</h1>, change the document.title to 'a - b'
+// return h1
+<Title title='hi' h1 /> // => <h1>hi</h1>
+<Title title={['a', 'b']} h1 /> // => <h1>a</h1>
+
+// return children
+<Title title='hi'><CustomTitle /></Title> // => <CustomTitle />
 ```
 
 #### Parameters
@@ -702,7 +709,7 @@ Hook style modal.
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `init?` | [`ModalProps`](#modalprops) | initial props  ```ts function Example() {   const { modal, setModalProps } = useModal()    return <>{modal}</> } ``` |
+| `init?` | [`ModalProps`](#modalprops) | initial props  ```ts function Example() {   const { modal, setModalProps } = useModal()    return <>     <Button onClick={() => setModalProps({ visible: true })}>Open Modal</Button>     {modal}</> } ``` |
 
 #### Returns
 

package/dist/index.d.ts

@@ -231,11 +231,42 @@ declare type FormProps<Values = any, ExtendItemProps = any> = {
     submit?: false | {
         /** Default: Submit */
         text?: string;
+        /**
+         * Submit to FaasJS server.
+         *
+         * If use onFinish, you should call submit manually.
+         * ```ts
+         * {
+         *   submit: {
+         *     to: {
+         *       action: 'action_name'
+         *     }
+         *   },
+         *   onFinish: (values, submit) => {
+         *     // do something before submit
+         *
+         *     // submit
+         *     await submit({
+         *      ...values,
+         *      extraProps: 'some extra props'
+         *     })
+         *
+         *     // do something after submit
+         *   }
+         * }
+         * ```
+         */
+        to?: {
+            action: string;
+            /** params will overwrite form values before submit */
+            params?: Record<string, any>;
+        };
     };
+    onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any>;
     extendTypes?: {
         [type: string]: ExtendFormTypeProps;
     };
-} & FormProps$1<Values>;
+} & Omit<FormProps$1<Values>, 'onFinish'>;
 declare function Form<Values = any>(props: FormProps<Values>): JSX.Element;
 declare namespace Form {
     var useForm: typeof antd_lib_form_Form.useForm;
@@ -243,7 +274,7 @@ declare namespace Form {
 }
 
 declare type ModalProps = ModalProps$1 & {
-    children?: JSX.Element | JSX.Element[];
+    children?: JSX.Element | JSX.Element[] | string;
 };
 declare type setModalProps = (changes: Partial<ModalProps>) => void;
 /**
@@ -254,7 +285,9 @@ declare type setModalProps = (changes: Partial<ModalProps>) => void;
  * function Example() {
  *   const { modal, setModalProps } = useModal()
  *
- *   return <>{modal}</>
+ *   return <>
+ *     <Button onClick={() => setModalProps({ visible: true })}>Open Modal</Button>
+ *     {modal}</>
  * }
  * ```
  */
@@ -305,20 +338,29 @@ declare type TitleProps = {
     /** ` - ` as default */
     separator?: string;
     suffix?: string;
+    /** return a h1 element */
     h1?: boolean | {
         className?: string;
         style?: React.CSSProperties;
     };
+    /** return children */
+    children?: JSX.Element;
 };
 /**
  * Title is used to change the title of the page.
+ * Return null by default.
  *
  * ```ts
- * <Title title='hi' /> // => return null, change the document.title to 'hi'
- * <Title title={['a', 'b']} /> // => return null, change the document.title to 'a - b'
+ * // return null
+ * <Title title='hi' /> // => change the document.title to 'hi'
+ * <Title title={['a', 'b']} /> // => change the document.title to 'a - b'
+ *
+ * // return h1
+ * <Title title='hi' h1 /> // => <h1>hi</h1>
+ * <Title title={['a', 'b']} h1 /> // => <h1>a</h1>
  *
- * <Title title='hi' h1 /> // => return <h1>hi</h1>, change the document.title to 'hi'
- * <Title title={['a', 'b']} h1 /> // => return <h1>a</h1>, change the document.title to 'a - b'
+ * // return children
+ * <Title title='hi'><CustomTitle /></Title> // => <CustomTitle />
  * ```
  */
 declare function Title(props: TitleProps): JSX.Element;

package/dist/index.js

@@ -178,22 +178,22 @@ function DescriptionItemContent(props) {
         values: computedProps.values
       });
     else if (computedProps.extendTypes[computedProps.item.type].render)
-      return computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values);
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values));
     else
       throw Error(computedProps.item.type + " requires children or render");
   if (computedProps.item.children)
     return (0, import_react3.cloneElement)(computedProps.item.children, { value: computedProps.value });
   if (computedProps.item.render)
-    return computedProps.item.render(computedProps.value, computedProps.values);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.item.render(computedProps.value, computedProps.values));
   if (typeof computedProps.value === "undefined" || computedProps.value === null)
     return null;
   switch (computedProps.item.type) {
     case "string[]":
-      return computedProps.value.join(", ");
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.value.join(", "));
     case "number":
-      return computedProps.value;
+      return computedProps.value || null;
     case "number[]":
-      return computedProps.value.join(", ");
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.value.join(", "));
     case "boolean":
       return computedProps.value ? /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, {
         style: {
@@ -207,11 +207,11 @@ function DescriptionItemContent(props) {
         }
       });
     case "time":
-      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD HH:mm:ss");
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD HH:mm:ss"));
     case "date":
-      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD");
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD"));
     default:
-      return computedProps.value;
+      return computedProps.value || null;
   }
 }
 function Description(props) {
@@ -261,8 +261,9 @@ function useDrawer(init) {
 }
 
 // src/Form.tsx
+var import_react8 = require("@faasjs/react");
 var import_antd5 = require("antd");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/FormItem.tsx
 var import_antd4 = require("antd");
@@ -439,44 +440,48 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a, _b;
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const [computedProps, setComputedProps] = (0, import_react8.useState)();
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const [computedProps, setComputedProps] = (0, import_react9.useState)();
   const [config] = useFaasState();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
+        var _a2;
         setLoading(true);
         try {
-          await propsCopy.onFinish(values);
+          if (propsCopy.submit && ((_a2 = propsCopy.submit.to) == null ? void 0 : _a2.action)) {
+            await props.onFinish(values, async (values2) => (0, import_react8.faas)(propsCopy.submit.to.action, propsCopy.submit.to.params ? __spreadValues(__spreadValues({}, values2), propsCopy.submit.to.params) : values2));
+          } else
+            await propsCopy.onFinish(values);
         } catch (error) {
           console.error(error);
         }
         setLoading(false);
       };
     }
-    setComputedProps(props);
+    setComputedProps(propsCopy);
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a = computedProps.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
-    extendTypes: props.extendTypes
-  }))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd5.Button, {
+    extendTypes: computedProps.extendTypes
+  }))), computedProps.children, computedProps.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd5.Button, {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
+  }, ((_b = computedProps.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = import_antd5.Form.useForm;
 Form.Item = FormItem;
 
 // src/Modal.tsx
 var import_antd6 = require("antd");
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useModal(init) {
-  const [props, setProps] = (0, import_react9.useState)(__spreadValues({
+  const [props, setProps] = (0, import_react10.useState)(__spreadValues({
     visible: false,
     onCancel: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
       visible: false
@@ -493,7 +498,7 @@ function useModal(init) {
 
 // src/Routers.tsx
 var import_antd7 = require("antd");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_router_dom = require("react-router-dom");
 function NotFound() {
   const [config] = useFaasState();
@@ -506,7 +511,7 @@ function Routes(props) {
   return /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Routes, null, props.routes.map((r) => /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Route, __spreadProps(__spreadValues({
     key: r.path
   }, r), {
-    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react10.Suspense, {
+    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react11.Suspense, {
       fallback: props.fallback || /* @__PURE__ */ import_react.default.createElement("div", {
         style: { padding: "24px" }
       }, /* @__PURE__ */ import_react.default.createElement(import_antd7.Skeleton, {
@@ -521,12 +526,12 @@ function Routes(props) {
 }
 
 // src/Table.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_antd8 = require("antd");
 var import_dayjs4 = __toESM(require("dayjs"));
 var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
-var import_react12 = require("@faasjs/react");
+var import_react13 = require("@faasjs/react");
 function processValue(item, value) {
   var _a;
   if (typeof value !== "undefined" && value !== null) {
@@ -557,9 +562,9 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = (0, import_react11.useState)();
+  const [columns, setColumns] = (0, import_react12.useState)();
   const [config] = useFaasState();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a;
     for (const item of props.items) {
       if (!item.key)
@@ -583,7 +588,7 @@ function Table(props) {
         delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
-          item.render = (value, values) => (0, import_react11.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react12.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -694,7 +699,7 @@ function Table(props) {
       columns,
       dataSource: props.dataSource
     }));
-  return /* @__PURE__ */ import_react.default.createElement(import_react12.FaasDataWrapper, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_react13.FaasDataWrapper, __spreadValues({
     fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd8.Skeleton, {
       active: true
     }),
@@ -742,10 +747,10 @@ function Table(props) {
 }
 
 // src/Title.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 function Title(props) {
   const [config] = useFaasState();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const title = Array.isArray(props.title) ? props.title : [props.title];
     document.title = title.concat(props.suffix || config.Title.suffix).filter((t) => !!t).join(props.separator || config.Title.separator);
   }, []);
@@ -757,6 +762,8 @@ function Title(props) {
       style: props.h1.style
     }, Array.isArray(props.title) ? props.title[0] : props.title);
   }
+  if (props.children)
+    return (0, import_react14.cloneElement)(props.children, { title: props.title });
   return null;
 }
 module.exports = __toCommonJS(src_exports);

package/dist/index.mjs

@@ -138,22 +138,22 @@ function DescriptionItemContent(props) {
         values: computedProps.values
       });
     else if (computedProps.extendTypes[computedProps.item.type].render)
-      return computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values));
     else
       throw Error(computedProps.item.type + " requires children or render");
   if (computedProps.item.children)
     return cloneElement(computedProps.item.children, { value: computedProps.value });
   if (computedProps.item.render)
-    return computedProps.item.render(computedProps.value, computedProps.values);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.item.render(computedProps.value, computedProps.values));
   if (typeof computedProps.value === "undefined" || computedProps.value === null)
     return null;
   switch (computedProps.item.type) {
     case "string[]":
-      return computedProps.value.join(", ");
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.value.join(", "));
     case "number":
-      return computedProps.value;
+      return computedProps.value || null;
     case "number[]":
-      return computedProps.value.join(", ");
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.value.join(", "));
     case "boolean":
       return computedProps.value ? /* @__PURE__ */ React.createElement(CheckOutlined, {
         style: {
@@ -167,11 +167,11 @@ function DescriptionItemContent(props) {
         }
       });
     case "time":
-      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : dayjs(computedProps.value).format("YYYY-MM-DD HH:mm:ss");
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : dayjs(computedProps.value).format("YYYY-MM-DD HH:mm:ss"));
     case "date":
-      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD") : dayjs(computedProps.value).format("YYYY-MM-DD");
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD") : dayjs(computedProps.value).format("YYYY-MM-DD"));
     default:
-      return computedProps.value;
+      return computedProps.value || null;
   }
 }
 function Description(props) {
@@ -221,6 +221,7 @@ function useDrawer(init) {
 }
 
 // src/Form.tsx
+import { faas } from "@faasjs/react";
 import {
   Button as Button2,
   Form as AntdForm2
@@ -418,28 +419,32 @@ function Form(props) {
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
+        var _a2;
         setLoading(true);
         try {
-          await propsCopy.onFinish(values);
+          if (propsCopy.submit && ((_a2 = propsCopy.submit.to) == null ? void 0 : _a2.action)) {
+            await props.onFinish(values, async (values2) => faas(propsCopy.submit.to.action, propsCopy.submit.to.params ? __spreadValues(__spreadValues({}, values2), propsCopy.submit.to.params) : values2));
+          } else
+            await propsCopy.onFinish(values);
         } catch (error) {
           console.error(error);
         }
         setLoading(false);
       };
     }
-    setComputedProps(props);
+    setComputedProps(propsCopy);
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a = computedProps.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
-    extendTypes: props.extendTypes
-  }))), props.children, props.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
+    extendTypes: computedProps.extendTypes
+  }))), computedProps.children, computedProps.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
+  }, ((_b = computedProps.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = AntdForm2.useForm;
 Form.Item = FormItem;
@@ -727,7 +732,7 @@ function Table(props) {
 }
 
 // src/Title.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect6, cloneElement as cloneElement3 } from "react";
 function Title(props) {
   const [config] = useFaasState();
   useEffect6(() => {
@@ -742,6 +747,8 @@ function Title(props) {
       style: props.h1.style
     }, Array.isArray(props.title) ? props.title[0] : props.title);
   }
+  if (props.children)
+    return cloneElement3(props.children, { title: props.title });
   return null;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.373",
+  "version": "0.0.2-beta.376",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.373",
+    "@faasjs/react": "^0.0.2-beta.376",
     "react-use": "*",
     "react-router-dom": "*",
     "dayjs": "*"