@faasjs/ant-design 0.0.2-beta.374 → 0.0.2-beta.375

package/README.md

@@ -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
 

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;

package/dist/index.js

@@ -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);
   }, []);
@@ -758,7 +763,7 @@ function Title(props) {
     }, Array.isArray(props.title) ? props.title[0] : props.title);
   }
   if (props.children)
-    return (0, import_react13.cloneElement)(props.children, { title: props.title });
+    return (0, import_react14.cloneElement)(props.children, { title: props.title });
   return null;
 }
 module.exports = __toCommonJS(src_exports);

package/dist/index.mjs

@@ -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;

package/package.json

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