fix: add form.onChange

.changeset/rare-meals-shave.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Added support of form.onChange

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -67,6 +67,9 @@ View:
  styles:
  gap: 8px
  labelPosition: top
+ onChange:
+ executeCode: |
+ console.log({fields})
  onSubmit:
  executeCode:
  body: |

packages/runtime/src/widgets/Form/Form.tsx

@@ -4,8 +4,10 @@ import {
  type EnsembleWidget,
 } from "@ensembleui/react-framework";
 import { Form as AntForm } from "antd";
+import type { FormProps as AntFormProps } from "antd";
 import { useCallback, useState } from "react";
 import type { FormLayout } from "antd/es/form/Form";
+import { set } from "lodash-es";
 import { WidgetRegistry } from "../../registry";
 import { EnsembleRuntime } from "../../runtime";
 import { useEnsembleAction } from "../../runtime/hooks/useEnsembleAction";
@@ -20,18 +22,24 @@ export type FormProps = {
  children: EnsembleWidget[];
  enabled?: boolean;
  onSubmit?: EnsembleAction;
+ onChange?: EnsembleAction;
  styles?: {
  labelPosition: "top" | "start" | "none";
  labelOverflow: "wrap" | "visible" | "clip" | "ellipsis";
  } & EnsembleWidgetStyles;
 } & EnsembleWidgetProps;
+
+type AntFieldData = NonNullable<AntFormProps["fields"]>;
+
 export const Form: React.FC<FormProps> = (props) => {
  const { children, ...rest } = props;
 
  const [form] = AntForm.useForm<unknown>();
  const getValues = form.getFieldsValue;
 
  const action = useEnsembleAction(props.onSubmit);
+ const onChangeAction = useEnsembleAction(props.onChange);
+
  const onFinishCallback = useCallback(
  (vals: unknown) => {
  if (!action) {
@@ -43,6 +51,19 @@ export const Form: React.FC<FormProps> = (props) => {
  [action],
  );
 
+ const onChangeActionCallback = useCallback(
+ (changedFields: AntFieldData) => {
+ const fields = {};
+
+ changedFields.map(({ name, value }) =>
+ set(fields, name as string[], value),
+ );
+
+ onChangeAction?.callback({ fields });
+ },
+ [onChangeAction],
+ );
+
  // reset form
  const handleResetForm = useCallback(() => {
  form.resetFields();
@@ -90,6 +111,7 @@ export const Form: React.FC<FormProps> = (props) => {
  colon={false}
  form={form}
  layout={getLayout(values?.styles?.labelPosition)}
+ onFieldsChange={onChangeActionCallback}
  onFinish={onFinishCallback}
  style={{
  display: "flex",