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

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`\>: { `beforeItems?`: `JSX.Element` \| `JSX.Element`[] ; `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`  }
 
 ___
 
@@ -425,13 +425,13 @@ ___
 
 ### DatePicker
 
-• **DatePicker**: `PickerComponentClass`<`PickerProps`<`Dayjs`\>, `unknown`\> & {}
+• `Const` **DatePicker**: `PickerComponentClass`<`PickerProps`<`Dayjs`\>, `unknown`\> & {}
 
 ___
 
 ### TimePicker
 
-• **TimePicker**: `ForwardRefExoticComponent`<[`TimePickerProps`](#timepickerprops) & `RefAttributes`<`any`\>\>
+• `Const` **TimePicker**: `ForwardRefExoticComponent`<[`TimePickerProps`](#timepickerprops) & `RefAttributes`<`any`\>\>
 
 ## Functions
 
@@ -459,7 +459,7 @@ ___
 
 ### Calendar
 
-▸ `Const` **Calendar**(`props`): `Element`
+▸ **Calendar**(`props`): `Element`
 
 #### Parameters
 
@@ -691,7 +691,7 @@ ___
 
 ### useFaasState
 
-▸ `Const` **useFaasState**(): [[`FaasState`](#faasstate), (`state`: `IHookStateSetAction`<[`FaasState`](#faasstate)\>) => `void`]
+▸ **useFaasState**(): [[`FaasState`](#faasstate), (`state`: `IHookStateSetAction`<[`FaasState`](#faasstate)\>) => `void`]
 
 #### Returns
 
@@ -709,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,43 @@ 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>;
+    beforeItems?: JSX.Element | JSX.Element[];
     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 +275,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 +286,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}</>
  * }
  * ```
  */

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), computedProps.beforeItems, (_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

@@ -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), computedProps.beforeItems, (_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.377",
   "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.377",
     "react-use": "*",
     "react-router-dom": "*",
     "dayjs": "*"