@faasjs/ant-design 8.0.0-beta.15 → 8.0.0-beta.17

package/README.md

@@ -23,6 +23,7 @@
 - [Title](functions/Title.md)
 - [transferOptions](functions/transferOptions.md)
 - [transferValue](functions/transferValue.md)
+- [useApp](functions/useApp.md)
 - [useConfigContext](functions/useConfigContext.md)
 - [useDrawer](functions/useDrawer.md)
 - [useFaas](functions/useFaas.md)
@@ -46,7 +47,6 @@
 - [FaasDataWrapperProps](interfaces/FaasDataWrapperProps.md)
 - [FaasItemProps](interfaces/FaasItemProps.md)
 - [FormItemProps](interfaces/FormItemProps.md)
-- [FormProps](interfaces/FormProps.md)
 - [LinkProps](interfaces/LinkProps.md)
 - [ModalProps](interfaces/ModalProps.md)
 - [RoutesProps](interfaces/RoutesProps.md)
@@ -70,6 +70,8 @@
 - [FaasItemType](type-aliases/FaasItemType.md)
 - [FaasItemTypeValue](type-aliases/FaasItemTypeValue.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
+- [FormFaasProps](type-aliases/FormFaasProps.md)
+- [FormProps](type-aliases/FormProps.md)
 - [FormSubmitProps](type-aliases/FormSubmitProps.md)
 - [LoadingProps](type-aliases/LoadingProps.md)
 - [ResolvedTheme](type-aliases/ResolvedTheme.md)
@@ -85,5 +87,5 @@
 
 ## Variables
 
+- [AppContext](variables/AppContext.md)
 - [ConfigContext](variables/ConfigContext.md)
-- [useApp](variables/useApp.md)

package/dist/index.cjs

@@ -272,7 +272,7 @@ function useModal(init) {
 	};
 }
 //#endregion
-//#region src/App.tsx
+//#region src/useApp.ts
 const AppContext = (0, _faasjs_react.createSplittingContext)([
 	"message",
 	"notification",
@@ -281,6 +281,20 @@ const AppContext = (0, _faasjs_react.createSplittingContext)([
 	"drawerProps",
 	"setDrawerProps"
 ]);
+/**
+* Get app context.
+*
+* ```ts
+* import { useApp } from '@faasjs/ant-design'
+*
+* const { message, notification, setModalProps, setDrawerProps } = useApp()
+* ```
+*/
+function useApp() {
+	return AppContext.use();
+}
+//#endregion
+//#region src/App.tsx
 function RoutesApp(props) {
 	const location = (0, react_router_dom.useLocation)();
 	const { drawerProps, setDrawerProps, modalProps, setModalProps } = useApp();
@@ -365,17 +379,6 @@ function App(props) {
 		})
 	});
 }
-/**
-* Get app context.
-*
-* ```ts
-* import { useApp } from '@faasjs/ant-design'
-*
-* const { message, notification, setModalProps, setDrawerProps } = useApp()
-* ```
-*/
-const useApp = AppContext.use;
-App.useApp = useApp;
 //#endregion
 //#region src/Blank.tsx
 /**
@@ -895,105 +898,183 @@ function isFormItemProps(item) {
 * Form component with Ant Design & FaasJS
 *
 * - Based on [Ant Design Form](https://ant.design/components/form/).
+* - Use `onFinish` for custom submit logic.
+* - Use `faas` for the built-in FaasJS submit flow.
+*
+* @example
+* ```tsx
+* import { Form } from '@faasjs/ant-design'
+*
+* export function ProfileForm() {
+*   return (
+*     <Form
+*       items={[
+*         { id: 'name', required: true },
+*         { id: 'email', required: true },
+*       ]}
+*       onFinish={async (values) => {
+*         console.log(values)
+*       }}
+*     />
+*   )
+* }
+* ```
+*
+* @example
+* ```tsx
+* import { Form } from '@faasjs/ant-design'
+*
+* export function CreateUserForm() {
+*   return (
+*     <Form
+*       initialValues={{ role: 'user' }}
+*       items={[
+*         { id: 'name', required: true },
+*         { id: 'role', options: ['user', 'admin'] },
+*       ]}
+*       faas={{
+*         action: 'user/create',
+*         params: (values) => ({
+*           role: values.role || 'user',
+*         }),
+*       }}
+*     />
+*   )
+* }
+* ```
 */
 function Form(props) {
 	const [loading, setLoading] = (0, react.useState)(false);
-	const [computedProps, setComputedProps] = (0, react.useState)();
-	const [submit, setSubmit] = (0, react.useState)();
+	const [antdProps, setAntdProps] = (0, react.useState)();
+	const [submit, setSubmit] = (0, react.useState)(props.submit === false ? false : {});
+	const [items, setItems] = (0, react.useState)([]);
 	const config = useConfigContext();
 	const [extendTypes, setExtendTypes] = (0, react.useState)();
 	const [form] = antd.Form.useForm(props.form);
 	const [initialValues, setInitialValues] = (0, react.useState)(props.initialValues || Object.create(null));
+	const [onFinish, setOnFinish] = (0, react.useState)();
 	(0, _faasjs_react.useEqualEffect)(() => {
-		const { submit, ...propsCopy } = {
-			...props,
-			form
-		};
-		let nextInitialValues = propsCopy.initialValues;
-		if (typeof submit !== "undefined") setSubmit(submit);
-		if (propsCopy.initialValues && propsCopy.items?.length) {
-			for (const key in propsCopy.initialValues) propsCopy.initialValues[key] = transferValue(propsCopy.items.find((item) => isFormItemProps(item) && item.id === key)?.type, propsCopy.initialValues[key]);
-			nextInitialValues = propsCopy.initialValues;
-			setInitialValues(propsCopy.initialValues);
-			delete propsCopy.initialValues;
-		}
-		if (propsCopy.items?.length) {
-			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(nextInitialValues || Object.create(null));
+		if (props.onFinish) {
+			setOnFinish(() => async (values) => {
+				if (!props.onFinish) return;
+				setLoading(true);
+				try {
+					return await props.onFinish(values);
+				} finally {
+					setLoading(false);
+				}
+			});
+			return;
 		}
-		const submitTo = typeof submit === "object" ? submit.to : void 0;
-		if (propsCopy.onFinish) {
-			const originOnFinish = propsCopy.onFinish;
-			propsCopy.onFinish = async (values) => {
+		if (props.faas?.action) {
+			setOnFinish(() => async (values) => {
+				if (!props.faas?.action) return;
 				setLoading(true);
+				let submitValues = values;
 				try {
-					if (submitTo?.action) await originOnFinish(values, async (nextValues) => (0, _faasjs_react.faas)(submitTo.action, submitTo.params ? {
-						...nextValues,
-						...submitTo.params
-					} : nextValues));
-					else await originOnFinish(values);
+					if (props.faas?.transformValues) submitValues = await props.faas.transformValues(values);
+					const extraParams = typeof props.faas?.params === "function" ? props.faas.params(submitValues) : props.faas.params;
+					if (extraParams) submitValues = {
+						...submitValues,
+						...extraParams
+					};
+					const result = await (0, _faasjs_react.faas)(props.faas.action, submitValues);
+					props.faas.onSuccess?.(result, submitValues);
+					return result;
 				} catch (error) {
-					console.error(error);
+					props.faas.onError?.(error, submitValues);
+					throw error;
+				} finally {
+					props.faas.onFinally?.();
+					setLoading(false);
 				}
-				setLoading(false);
-			};
-		} else if (submitTo?.action) propsCopy.onFinish = async (values) => {
-			setLoading(true);
-			return (0, _faasjs_react.faas)(submitTo.action, submitTo.params ? {
-				...values,
-				...submitTo.params
-			} : values).then((result) => {
-				submitTo.then?.(result);
-				return result;
-			}).catch((error) => {
-				submitTo.catch?.(error);
-				return Promise.reject(error);
-			}).finally(() => {
-				submitTo.finally?.();
-				setLoading(false);
 			});
-		};
-		if (propsCopy.extendTypes) {
-			setExtendTypes(propsCopy.extendTypes);
-			delete propsCopy.extendTypes;
+			return;
 		}
-		setComputedProps(propsCopy);
-	}, [form, props]);
+		setOnFinish(void 0);
+	}, [props.onFinish, props.faas]);
+	(0, _faasjs_react.useEqualEffect)(() => {
+		setExtendTypes(props.extendTypes);
+	}, [props.extendTypes]);
+	(0, _faasjs_react.useEqualEffect)(() => {
+		setSubmit(props.submit === false ? false : props.submit || {});
+	}, [props.submit]);
+	(0, _faasjs_react.useEqualEffect)(() => {
+		const nextInitialValues = props.initialValues ? JSON.parse(JSON.stringify(props.initialValues)) : Object.create(null);
+		for (const key in nextInitialValues) nextInitialValues[key] = transferValue(props.items?.find((item) => isFormItemProps(item) && item.id === key)?.type, nextInitialValues[key]);
+		if (props.items?.length) setItems(props.items.map((item) => {
+			if (!isFormItemProps(item) || !item.if) return item;
+			return {
+				...item,
+				hidden: !item.if(nextInitialValues)
+			};
+		}));
+		else setItems([]);
+		if (props.initialValues) {
+			setInitialValues(nextInitialValues);
+			return;
+		}
+		setInitialValues(null);
+	}, [props.initialValues, props.items]);
+	(0, _faasjs_react.useEqualEffect)(() => {
+		const propsCopy = { ...props };
+		delete propsCopy.onFinish;
+		delete propsCopy.faas;
+		delete propsCopy.extendTypes;
+		delete propsCopy.submit;
+		delete propsCopy.items;
+		delete propsCopy.initialValues;
+		setAntdProps(propsCopy);
+	}, [props]);
 	const onValuesChange = (0, _faasjs_react.useEqualCallback)((changedValues, allValues) => {
 		console.debug("Form:onValuesChange", changedValues, allValues);
 		if (props.onValuesChange) props.onValuesChange(changedValues, allValues);
-		if (!props.items) return;
+		if (!items.length) return;
 		for (const key in changedValues) {
-			const item = computedProps?.items?.find((i) => isFormItemProps(i) && i.id === key);
+			const item = items.find((i) => isFormItemProps(i) && i.id === key);
 			if (item?.onValueChange) item.onValueChange(changedValues[key], allValues, form);
 		}
-	}, [computedProps]);
+	}, [
+		items,
+		props.onValuesChange,
+		form
+	]);
 	(0, _faasjs_react.useEqualEffect)(() => {
 		if (!initialValues) return;
 		console.debug("Form:initialValues", initialValues);
 		form.setFieldsValue(initialValues);
 		setInitialValues(null);
-	}, [form, initialValues]);
-	if (!computedProps) return null;
+	}, [
+		form,
+		initialValues,
+		items
+	]);
+	if (!antdProps) return null;
+	const submitButtonProps = typeof submit === "object" ? submit.buttonProps : void 0;
+	const submitButtonLoading = loading ? true : submitButtonProps?.loading ?? false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Form, {
-		...computedProps,
+		...antdProps,
+		form,
+		onFinish,
 		onValuesChange,
 		children: [
-			computedProps.beforeItems,
-			computedProps.items?.map((item) => {
+			props.beforeItems,
+			items.map((item) => {
 				if (isFormItemProps(item)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormItem, {
 					...item,
 					...extendTypes ? { extendTypes } : {}
 				}, item.id);
 				return item;
 			}),
-			computedProps.children,
+			props.children,
 			typeof submit !== "boolean" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Button, {
+				...submitButtonProps,
 				htmlType: "submit",
-				type: "primary",
-				loading,
+				type: submitButtonProps?.type || "primary",
+				loading: submitButtonLoading,
 				children: submit?.text || config.theme.Form.submit.text
 			}),
-			computedProps.footer
+			props.footer
 		]
 	});
 }
@@ -1614,6 +1695,7 @@ function useThemeToken() {
 }
 //#endregion
 exports.App = App;
+exports.AppContext = AppContext;
 exports.Blank = Blank;
 exports.ConfigContext = ConfigContext;
 exports.ConfigProvider = ConfigProvider;

package/dist/index.d.ts

@@ -1,11 +1,9 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ErrorBoundaryProps, FaasDataInjection as FaasDataInjection$1, FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataWrapperRef, FaasReactClient, FaasReactClientOptions, faas, useFaas } from "@faasjs/react";
 import { ButtonProps, ConfigProviderProps as ConfigProviderProps$1, DatePickerProps, DescriptionsProps, Drawer, DrawerProps as DrawerProps$1, FormInstance, FormItemProps as FormItemProps$1, FormProps as FormProps$1, GlobalToken, InputNumberProps, InputProps, Modal, ModalProps as ModalProps$1, RadioProps, SelectProps, SwitchProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, TabsProps as TabsProps$1 } from "antd";
-import { MessageInstance } from "antd/es/message/interface";
-import { NotificationInstance } from "antd/es/notification/interface";
 import { BrowserRouterProps, RouteProps } from "react-router-dom";
 import * as react from "react";
 import { CSSProperties, ComponentType, Dispatch, FC, JSX, LazyExoticComponent, ReactElement, ReactNode, SetStateAction, lazy } from "react";
-import { ErrorBoundaryProps, FaasDataInjection as FaasDataInjection$1, FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataWrapperRef, FaasReactClient, FaasReactClientOptions, faas, useFaas } from "@faasjs/react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Dayjs } from "dayjs";
 import * as antd_es_form_FormItem0 from "antd/es/form/FormItem";
 import * as antd_es_form0 from "antd/es/form";
@@ -16,6 +14,8 @@ import * as antd_es_form_hooks_useFormInstance0 from "antd/es/form/hooks/useForm
 import * as _rc_component_form0 from "@rc-component/form";
 import * as antd_es_form_context0 from "antd/es/form/context";
 import { Tab } from "@rc-component/tabs/lib/interface";
+import { MessageInstance } from "antd/es/message/interface";
+import { NotificationInstance } from "antd/es/notification/interface";
 
 //#region ../types/src/index.d.ts
 /**
@@ -206,64 +206,12 @@ declare const ConfigContext: react.Context<ConfigContextValue>;
 declare function ConfigProvider(props: ConfigProviderProps): react_jsx_runtime0.JSX.Element | null;
 declare function useConfigContext(): ConfigContextValue;
 //#endregion
-//#region src/Drawer.d.ts
-interface DrawerProps extends DrawerProps$1 {
-  children?: JSX.Element | JSX.Element[];
-}
-type setDrawerProps = Dispatch<SetStateAction<DrawerProps>>;
-/**
- * Hook style drawer
- *
- * ```tsx
- * function Example() {
- *   const { drawer, setDrawerProps } = useDrawer()
- *
- *   return <>
- *     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
- *       Toggle
- *     </Button>
- *     {drawer}
- *   </>
- * }
- * ```
- */
-declare function useDrawer(init?: DrawerProps): {
-  drawer: react_jsx_runtime0.JSX.Element;
-  drawerProps: DrawerProps;
-  setDrawerProps: setDrawerProps;
-};
-//#endregion
 //#region src/ErrorBoundary.d.ts
 /**
  * Styled error boundary.
  */
 declare function ErrorBoundary(props: ErrorBoundaryProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/Modal.d.ts
-interface ModalProps extends ModalProps$1 {
-  children?: JSX.Element | JSX.Element[] | string;
-}
-type setModalProps = Dispatch<SetStateAction<ModalProps>>;
-/**
- * Hook style modal
- *
- * ```tsx
- * function Example() {
- *   const { modal, setModalProps } = useModal()
- *
- *   return <>
- *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
- *     {modal}
- *   </>
- * }
- * ```
- */
-declare function useModal(init?: ModalProps): {
-  modal: react_jsx_runtime0.JSX.Element;
-  modalProps: ModalProps;
-  setModalProps: setModalProps;
-};
-//#endregion
 //#region src/App.d.ts
 interface AppProps {
   children: React.ReactNode;
@@ -282,14 +230,6 @@ interface AppProps {
   /** @see https://faasjs.com/doc/ant-design/#configprovider */
   faasConfigProviderProps?: Omit<ConfigProviderProps, 'children'> | false;
 }
-interface useAppProps {
-  message: MessageInstance;
-  notification: NotificationInstance;
-  modalProps: ModalProps;
-  setModalProps: setModalProps;
-  drawerProps: DrawerProps;
-  setDrawerProps: setDrawerProps;
-}
 /**
  * App component with Ant Design & FaasJS
  *
@@ -318,19 +258,6 @@ interface useAppProps {
  * ```
  */
 declare function App(props: AppProps): react_jsx_runtime0.JSX.Element;
-declare namespace App {
-  var useApp: any;
-}
-/**
- * Get app context.
- *
- * ```ts
- * import { useApp } from '@faasjs/ant-design'
- *
- * const { message, notification, setModalProps, setDrawerProps } = useApp()
- * ```
- */
-declare const useApp: any;
 //#endregion
 //#region src/Blank.d.ts
 interface BlankProps {
@@ -576,7 +503,7 @@ type UnionFaasItemInjection<Value = any, Values = any> = {
  * @param value - The value of the current item.
  * @param values - The entire list of values.
  * @param index - The index of the current item in the list.
- * @param scene {@link UnionScene} - The scene in which the rendering is taking place.
+ * @param scene - The scene in which the rendering is taking place. See {@link UnionScene}.
  *
  * @example
  * ```tsx
@@ -796,57 +723,126 @@ declare namespace Description {
   var displayName: string;
 }
 //#endregion
+//#region src/Drawer.d.ts
+interface DrawerProps extends DrawerProps$1 {
+  children?: JSX.Element | JSX.Element[];
+}
+type setDrawerProps = Dispatch<SetStateAction<DrawerProps>>;
+/**
+ * Hook style drawer
+ *
+ * ```tsx
+ * function Example() {
+ *   const { drawer, setDrawerProps } = useDrawer()
+ *
+ *   return <>
+ *     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
+ *       Toggle
+ *     </Button>
+ *     {drawer}
+ *   </>
+ * }
+ * ```
+ */
+declare function useDrawer(init?: DrawerProps): {
+  drawer: react_jsx_runtime0.JSX.Element;
+  drawerProps: DrawerProps;
+  setDrawerProps: setDrawerProps;
+};
+//#endregion
 //#region src/Form.d.ts
 type FormSubmitProps = {
-  /** 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: FaasAction; /** params will overwrite form values before submit */
-    params?: Record<string, any>;
-    then?: (result: any) => void;
-    catch?: (error: any) => void;
-    finally?: () => void;
-  };
+  /** Default: Submit */text?: string; /** Props for the built-in submit button */
+  buttonProps?: ButtonProps;
+};
+/**
+ * Built-in FaasJS submit handler for Form.
+ *
+ * @example
+ * ```ts
+ * {
+ *   action: 'user/create',
+ *   params: (values) => ({
+ *     ...values,
+ *     role: values.role || 'user',
+ *   }),
+ *   onSuccess: (result) => {
+ *     console.log(result)
+ *   },
+ * }
+ * ```
+ */
+type FormFaasProps<Values extends Record<string, any> = any> = {
+  /** Action name to submit to */action: FaasAction; /** params will overwrite form values before submit */
+  params?: Record<string, any> | ((values: Record<string, any>) => Record<string, any>); /** Transform form values before sending the request */
+  transformValues?: (values: Values) => Record<string, any> | Promise<Record<string, any>>; /** Called when the request succeeds */
+  onSuccess?: (result: any, values: Record<string, any>) => void; /** Called when the request fails */
+  onError?: (error: any, values: Record<string, any>) => void; /** Called after the request settles */
+  onFinally?: () => void;
 };
-interface FormProps<Values extends Record<string, any> = any, ExtendItemProps extends ExtendFormItemProps = ExtendFormItemProps> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
-  items?: ((ExtendItemProps extends ExtendFormItemProps ? ExtendItemProps | FormItemProps : FormItemProps) | JSX.Element)[];
-  /** Default: { text: 'Submit' }, set false to disable it */
+type FormProps<Values extends Record<string, any> = any, ExtendItemProps extends ExtendFormItemProps = ExtendFormItemProps> = Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> & {
+  items?: ((ExtendItemProps extends ExtendFormItemProps ? ExtendItemProps | FormItemProps : FormItemProps) | JSX.Element)[]; /** Default: { text: 'Submit' }, set false to disable it */
   submit?: false | FormSubmitProps;
-  onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any>;
   beforeItems?: JSX.Element | JSX.Element[];
   footer?: JSX.Element | JSX.Element[];
   extendTypes?: ExtendTypes;
   children?: ReactNode;
   initialValues?: Partial<Values>;
-}
+} & ({
+  /** Built-in FaasJS submit handler, ignored when onFinish is provided */faas?: FormFaasProps<Values>;
+  onFinish?: never;
+} | {
+  faas?: never; /** Custom submit handler, takes precedence over faas when both are provided */
+  onFinish?: (values: Values) => void | Promise<void>;
+});
 /**
  * Form component with Ant Design & FaasJS
  *
  * - Based on [Ant Design Form](https://ant.design/components/form/).
+ * - Use `onFinish` for custom submit logic.
+ * - Use `faas` for the built-in FaasJS submit flow.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from '@faasjs/ant-design'
+ *
+ * export function ProfileForm() {
+ *   return (
+ *     <Form
+ *       items={[
+ *         { id: 'name', required: true },
+ *         { id: 'email', required: true },
+ *       ]}
+ *       onFinish={async (values) => {
+ *         console.log(values)
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Form } from '@faasjs/ant-design'
+ *
+ * export function CreateUserForm() {
+ *   return (
+ *     <Form
+ *       initialValues={{ role: 'user' }}
+ *       items={[
+ *         { id: 'name', required: true },
+ *         { id: 'role', options: ['user', 'admin'] },
+ *       ]}
+ *       faas={{
+ *         action: 'user/create',
+ *         params: (values) => ({
+ *           role: values.role || 'user',
+ *         }),
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
  */
 declare function Form<Values extends Record<string, any> = any>(props: FormProps<Values>): react_jsx_runtime0.JSX.Element | null;
 declare namespace Form {
@@ -886,6 +882,31 @@ interface LinkProps {
  */
 declare function Link(props: LinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Modal.d.ts
+interface ModalProps extends ModalProps$1 {
+  children?: JSX.Element | JSX.Element[] | string;
+}
+type setModalProps = Dispatch<SetStateAction<ModalProps>>;
+/**
+ * Hook style modal
+ *
+ * ```tsx
+ * function Example() {
+ *   const { modal, setModalProps } = useModal()
+ *
+ *   return <>
+ *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
+ *     {modal}
+ *   </>
+ * }
+ * ```
+ */
+declare function useModal(init?: ModalProps): {
+  modal: react_jsx_runtime0.JSX.Element;
+  modalProps: ModalProps;
+  setModalProps: setModalProps;
+};
+//#endregion
 //#region src/Routers.d.ts
 declare function PageNotFound(): react_jsx_runtime0.JSX.Element;
 interface RoutesProps {
@@ -990,6 +1011,27 @@ interface TitleProps {
  */
 declare function Title(props: TitleProps): JSX.Element | null;
 //#endregion
+//#region src/useApp.d.ts
+interface useAppProps {
+  message: MessageInstance;
+  notification: NotificationInstance;
+  modalProps: ModalProps;
+  setModalProps: setModalProps;
+  drawerProps: DrawerProps;
+  setDrawerProps: setDrawerProps;
+}
+declare const AppContext: any;
+/**
+ * Get app context.
+ *
+ * ```ts
+ * import { useApp } from '@faasjs/ant-design'
+ *
+ * const { message, notification, setModalProps, setDrawerProps } = useApp()
+ * ```
+ */
+declare function useApp<NewT extends useAppProps = useAppProps>(this: void): Readonly<NewT>;
+//#endregion
 //#region src/useThemeToken.d.ts
 /**
  * Hook to retrieve the theme token from the Ant Design theme configuration.
@@ -1001,4 +1043,4 @@ declare function Title(props: TitleProps): JSX.Element | null;
  */
 declare function useThemeToken(): GlobalToken;
 //#endregion
-export { App, AppProps, BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, Drawer, DrawerProps, ErrorBoundary, type ErrorBoundaryProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, type FaasDataWrapperRef, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasReactClient, type FaasReactClientOptions, Form, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, Modal, ModalProps, PageNotFound, ResolvedTheme, Routes, RoutesProps, TabProps, Table, TableFaasDataParams, TableFaasDataResponse, TableItemProps, TableProps, Tabs, TabsProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, cloneUnionFaasItemElement, faas, idToTitle, lazy, setDrawerProps, setModalProps, transferOptions, transferValue, useApp, useAppProps, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };
+export { App, AppContext, AppProps, BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, Drawer, DrawerProps, ErrorBoundary, type ErrorBoundaryProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, type ExtendFormItemProps, type ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, type FaasDataWrapperRef, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasReactClient, type FaasReactClientOptions, Form, FormFaasProps, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, Modal, ModalProps, PageNotFound, ResolvedTheme, Routes, RoutesProps, TabProps, Table, TableFaasDataParams, TableFaasDataResponse, TableItemProps, TableProps, Tabs, TabsProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, cloneUnionFaasItemElement, faas, idToTitle, lazy, setDrawerProps, setModalProps, transferOptions, transferValue, useApp, useAppProps, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };

package/dist/index.mjs

@@ -248,7 +248,7 @@ function useModal(init) {
 	};
 }
 //#endregion
-//#region src/App.tsx
+//#region src/useApp.ts
 const AppContext = createSplittingContext([
 	"message",
 	"notification",
@@ -257,6 +257,20 @@ const AppContext = createSplittingContext([
 	"drawerProps",
 	"setDrawerProps"
 ]);
+/**
+* Get app context.
+*
+* ```ts
+* import { useApp } from '@faasjs/ant-design'
+*
+* const { message, notification, setModalProps, setDrawerProps } = useApp()
+* ```
+*/
+function useApp() {
+	return AppContext.use();
+}
+//#endregion
+//#region src/App.tsx
 function RoutesApp(props) {
 	const location = useLocation();
 	const { drawerProps, setDrawerProps, modalProps, setModalProps } = useApp();
@@ -341,17 +355,6 @@ function App(props) {
 		})
 	});
 }
-/**
-* Get app context.
-*
-* ```ts
-* import { useApp } from '@faasjs/ant-design'
-*
-* const { message, notification, setModalProps, setDrawerProps } = useApp()
-* ```
-*/
-const useApp = AppContext.use;
-App.useApp = useApp;
 //#endregion
 //#region src/Blank.tsx
 /**
@@ -871,105 +874,183 @@ function isFormItemProps(item) {
 * Form component with Ant Design & FaasJS
 *
 * - Based on [Ant Design Form](https://ant.design/components/form/).
+* - Use `onFinish` for custom submit logic.
+* - Use `faas` for the built-in FaasJS submit flow.
+*
+* @example
+* ```tsx
+* import { Form } from '@faasjs/ant-design'
+*
+* export function ProfileForm() {
+*   return (
+*     <Form
+*       items={[
+*         { id: 'name', required: true },
+*         { id: 'email', required: true },
+*       ]}
+*       onFinish={async (values) => {
+*         console.log(values)
+*       }}
+*     />
+*   )
+* }
+* ```
+*
+* @example
+* ```tsx
+* import { Form } from '@faasjs/ant-design'
+*
+* export function CreateUserForm() {
+*   return (
+*     <Form
+*       initialValues={{ role: 'user' }}
+*       items={[
+*         { id: 'name', required: true },
+*         { id: 'role', options: ['user', 'admin'] },
+*       ]}
+*       faas={{
+*         action: 'user/create',
+*         params: (values) => ({
+*           role: values.role || 'user',
+*         }),
+*       }}
+*     />
+*   )
+* }
+* ```
 */
 function Form(props) {
 	const [loading, setLoading] = useState(false);
-	const [computedProps, setComputedProps] = useState();
-	const [submit, setSubmit] = useState();
+	const [antdProps, setAntdProps] = useState();
+	const [submit, setSubmit] = useState(props.submit === false ? false : {});
+	const [items, setItems] = useState([]);
 	const config = useConfigContext();
 	const [extendTypes, setExtendTypes] = useState();
 	const [form] = Form$1.useForm(props.form);
 	const [initialValues, setInitialValues] = useState(props.initialValues || Object.create(null));
+	const [onFinish, setOnFinish] = useState();
 	useEqualEffect(() => {
-		const { submit, ...propsCopy } = {
-			...props,
-			form
-		};
-		let nextInitialValues = propsCopy.initialValues;
-		if (typeof submit !== "undefined") setSubmit(submit);
-		if (propsCopy.initialValues && propsCopy.items?.length) {
-			for (const key in propsCopy.initialValues) propsCopy.initialValues[key] = transferValue(propsCopy.items.find((item) => isFormItemProps(item) && item.id === key)?.type, propsCopy.initialValues[key]);
-			nextInitialValues = propsCopy.initialValues;
-			setInitialValues(propsCopy.initialValues);
-			delete propsCopy.initialValues;
-		}
-		if (propsCopy.items?.length) {
-			for (const item of propsCopy.items) if (isFormItemProps(item) && item.if) item.hidden = !item.if(nextInitialValues || Object.create(null));
+		if (props.onFinish) {
+			setOnFinish(() => async (values) => {
+				if (!props.onFinish) return;
+				setLoading(true);
+				try {
+					return await props.onFinish(values);
+				} finally {
+					setLoading(false);
+				}
+			});
+			return;
 		}
-		const submitTo = typeof submit === "object" ? submit.to : void 0;
-		if (propsCopy.onFinish) {
-			const originOnFinish = propsCopy.onFinish;
-			propsCopy.onFinish = async (values) => {
+		if (props.faas?.action) {
+			setOnFinish(() => async (values) => {
+				if (!props.faas?.action) return;
 				setLoading(true);
+				let submitValues = values;
 				try {
-					if (submitTo?.action) await originOnFinish(values, async (nextValues) => faas(submitTo.action, submitTo.params ? {
-						...nextValues,
-						...submitTo.params
-					} : nextValues));
-					else await originOnFinish(values);
+					if (props.faas?.transformValues) submitValues = await props.faas.transformValues(values);
+					const extraParams = typeof props.faas?.params === "function" ? props.faas.params(submitValues) : props.faas.params;
+					if (extraParams) submitValues = {
+						...submitValues,
+						...extraParams
+					};
+					const result = await faas(props.faas.action, submitValues);
+					props.faas.onSuccess?.(result, submitValues);
+					return result;
 				} catch (error) {
-					console.error(error);
+					props.faas.onError?.(error, submitValues);
+					throw error;
+				} finally {
+					props.faas.onFinally?.();
+					setLoading(false);
 				}
-				setLoading(false);
-			};
-		} else if (submitTo?.action) propsCopy.onFinish = async (values) => {
-			setLoading(true);
-			return faas(submitTo.action, submitTo.params ? {
-				...values,
-				...submitTo.params
-			} : values).then((result) => {
-				submitTo.then?.(result);
-				return result;
-			}).catch((error) => {
-				submitTo.catch?.(error);
-				return Promise.reject(error);
-			}).finally(() => {
-				submitTo.finally?.();
-				setLoading(false);
 			});
-		};
-		if (propsCopy.extendTypes) {
-			setExtendTypes(propsCopy.extendTypes);
-			delete propsCopy.extendTypes;
+			return;
 		}
-		setComputedProps(propsCopy);
-	}, [form, props]);
+		setOnFinish(void 0);
+	}, [props.onFinish, props.faas]);
+	useEqualEffect(() => {
+		setExtendTypes(props.extendTypes);
+	}, [props.extendTypes]);
+	useEqualEffect(() => {
+		setSubmit(props.submit === false ? false : props.submit || {});
+	}, [props.submit]);
+	useEqualEffect(() => {
+		const nextInitialValues = props.initialValues ? JSON.parse(JSON.stringify(props.initialValues)) : Object.create(null);
+		for (const key in nextInitialValues) nextInitialValues[key] = transferValue(props.items?.find((item) => isFormItemProps(item) && item.id === key)?.type, nextInitialValues[key]);
+		if (props.items?.length) setItems(props.items.map((item) => {
+			if (!isFormItemProps(item) || !item.if) return item;
+			return {
+				...item,
+				hidden: !item.if(nextInitialValues)
+			};
+		}));
+		else setItems([]);
+		if (props.initialValues) {
+			setInitialValues(nextInitialValues);
+			return;
+		}
+		setInitialValues(null);
+	}, [props.initialValues, props.items]);
+	useEqualEffect(() => {
+		const propsCopy = { ...props };
+		delete propsCopy.onFinish;
+		delete propsCopy.faas;
+		delete propsCopy.extendTypes;
+		delete propsCopy.submit;
+		delete propsCopy.items;
+		delete propsCopy.initialValues;
+		setAntdProps(propsCopy);
+	}, [props]);
 	const onValuesChange = useEqualCallback((changedValues, allValues) => {
 		console.debug("Form:onValuesChange", changedValues, allValues);
 		if (props.onValuesChange) props.onValuesChange(changedValues, allValues);
-		if (!props.items) return;
+		if (!items.length) return;
 		for (const key in changedValues) {
-			const item = computedProps?.items?.find((i) => isFormItemProps(i) && i.id === key);
+			const item = items.find((i) => isFormItemProps(i) && i.id === key);
 			if (item?.onValueChange) item.onValueChange(changedValues[key], allValues, form);
 		}
-	}, [computedProps]);
+	}, [
+		items,
+		props.onValuesChange,
+		form
+	]);
 	useEqualEffect(() => {
 		if (!initialValues) return;
 		console.debug("Form:initialValues", initialValues);
 		form.setFieldsValue(initialValues);
 		setInitialValues(null);
-	}, [form, initialValues]);
-	if (!computedProps) return null;
+	}, [
+		form,
+		initialValues,
+		items
+	]);
+	if (!antdProps) return null;
+	const submitButtonProps = typeof submit === "object" ? submit.buttonProps : void 0;
+	const submitButtonLoading = loading ? true : submitButtonProps?.loading ?? false;
 	return /* @__PURE__ */ jsxs(Form$1, {
-		...computedProps,
+		...antdProps,
+		form,
+		onFinish,
 		onValuesChange,
 		children: [
-			computedProps.beforeItems,
-			computedProps.items?.map((item) => {
+			props.beforeItems,
+			items.map((item) => {
 				if (isFormItemProps(item)) return /* @__PURE__ */ jsx(FormItem, {
 					...item,
 					...extendTypes ? { extendTypes } : {}
 				}, item.id);
 				return item;
 			}),
-			computedProps.children,
+			props.children,
 			typeof submit !== "boolean" && /* @__PURE__ */ jsx(Button, {
+				...submitButtonProps,
 				htmlType: "submit",
-				type: "primary",
-				loading,
+				type: submitButtonProps?.type || "primary",
+				loading: submitButtonLoading,
 				children: submit?.text || config.theme.Form.submit.text
 			}),
-			computedProps.footer
+			props.footer
 		]
 	});
 }
@@ -1589,4 +1670,4 @@ function useThemeToken() {
 	return theme.useToken().token;
 }
 //#endregion
-export { App, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, FaasReactClient, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, cloneUnionFaasItemElement, faas, idToTitle, lazy, transferOptions, transferValue, useApp, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };
+export { App, AppContext, Blank, ConfigContext, ConfigProvider, Description, Drawer, ErrorBoundary, FaasDataWrapper, FaasReactClient, Form, FormItem, Link, Loading, Modal, PageNotFound, Routes, Table, Tabs, Title, cloneUnionFaasItemElement, faas, idToTitle, lazy, transferOptions, transferValue, useApp, useConfigContext, useDrawer, useFaas, useModal, useThemeToken, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "8.0.0-beta.15",
+  "version": "8.0.0-beta.17",
   "homepage": "https://faasjs.com/doc/ant-design",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.15",
+    "@faasjs/react": ">=8.0.0-beta.17",
     "@types/lodash-es": "*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.15",
+    "@faasjs/react": ">=8.0.0-beta.17",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",