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

package/README.md

@@ -47,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)
@@ -71,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)

package/dist/index.cjs

@@ -898,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
 		]
 	});
 }

package/dist/index.d.ts

@@ -1,9 +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 { 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";
@@ -752,55 +752,97 @@ declare function useDrawer(init?: DrawerProps): {
 //#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;
 };
-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 */
+/**
+ * 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;
+};
+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 {
@@ -1001,4 +1043,4 @@ declare function useApp<NewT extends useAppProps = useAppProps>(this: void): Rea
  */
 declare function useThemeToken(): GlobalToken;
 //#endregion
-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, 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

@@ -874,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
 		]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "8.0.0-beta.16",
+  "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.16",
+    "@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.16",
+    "@faasjs/react": ">=8.0.0-beta.17",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",