add layout

Author: xlorne

apps/app-mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-example/app-mobile",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": true,
   "type": "module",
   "scripts": {

apps/app-mobile/src/pages/home.tsx

@@ -1,7 +1,6 @@
-import {createFormInstance, FormView} from "@coding-form/form-engine";
 import type {FormMeta} from "@coding-form/form-engine";
+import {createFormInstance, FormInstance, FormView} from "@coding-form/form-engine";
 import {Button, Space} from "antd-mobile";
-import {FormInstance} from "@coding-form/form-engine";
 
 const HomePage = () => {
 
@@ -30,11 +29,14 @@ const HomePage = () => {
             <FormView
                 meta={meta}
                 form={form}
+                onValuesChange={(partial, values, formCode) => {
+                    console.log(partial, values, formCode);
+                }}
                 validators={[
                     {
-                        target:'name',
-                        validator:(_instance:FormInstance,value:any)=>{
-                            if(value){
+                        target: 'name',
+                        validator: (_instance: FormInstance, value: any) => {
+                            if (value) {
                                 return true;
                             }
                             return '你可真行'
@@ -67,25 +69,25 @@ const HomePage = () => {
 
                 <Button
                     onClick={() => {
-                        form.hiddenFields(true,['name']);
+                        form.hiddenFields(true, ['name']);
                     }}
                 >enable hidden</Button>
 
                 <Button
                     onClick={() => {
-                        form.hiddenFields(false,['name']);
+                        form.hiddenFields(false, ['name']);
                     }}
                 >disable hidden</Button>
 
                 <Button
                     onClick={() => {
-                        form.requiredFields(true,['name']);
+                        form.requiredFields(true, ['name']);
                     }}
                 >enable required</Button>
 
                 <Button
                     onClick={() => {
-                        form.requiredFields(false,['name']);
+                        form.requiredFields(false, ['name']);
                     }}
                 >disable required</Button>
             </Space>

apps/app-pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-example/app-pc",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": true,
   "type": "module",
   "scripts": {

apps/app-pc/src/pages/home.tsx

@@ -51,6 +51,9 @@ const HomePage = () => {
                 onFinish={(values, formCode)=>{
                     console.log(values, formCode);
                 }}
+                onValuesChange={(partial, values, formCode) => {
+                    console.log(partial, values, formCode);
+                }}
                 validators={[
                     {
                         target:'name',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-form/root",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "form-engine",
   "main": "index.js",
   "scripts": {

packages/form-engine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-form/form-engine",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "form-engine components",
   "keywords": [
     "coding-form",

packages/form-engine/src/form/index.tsx

@@ -36,6 +36,10 @@ export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
         props.onBlur?.(formCode);
     }
 
+    const handleOnValuesChange = (partial:any,values:any,formCode:string) => {
+        props.onValuesChange?.(partial,values,formCode);
+    }
+
     return (
         <FormContext.Provider value={context}>
             {props.header}
@@ -47,6 +51,7 @@ export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
                 onBlur={handleOnBlur}
                 children={props.children}
                 layout={props.layout}
+                onValuesChange={handleOnValuesChange}
             />
             {subFormList && subFormList.map(item=>{
                 return (
@@ -57,6 +62,7 @@ export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
                         onFinish={handleOnFinish}
                         onBlur={handleOnBlur}
                         layout={props.layout}
+                        onValuesChange={handleOnValuesChange}
                     />
                 )
             })}

packages/form-engine/src/form/sub-view.tsx

@@ -5,8 +5,9 @@ interface FormSubViewProps {
     formCode: string;
     Form: React.ComponentType<any>;
     review: boolean;
-    onFinish: (values:any,formCode:string) => void;
-    onBlur: (formCode:string) => void;
+    onFinish?: (values:any,formCode:string) => void;
+    onValuesChange?:(partial:any,values:any,formCode:string)=>void;
+    onBlur?: (formCode:string) => void;
     children?:React.ReactNode;
     layout?:'horizontal' | 'vertical';
 }
@@ -56,10 +57,13 @@ export const FormSubView: React.FC<FormSubViewProps> = (props) => {
             form={formTarget}
             layout={props.layout}
             onBlur={()=>{
-                props.onBlur(props.formCode);
+                props.onBlur?.(props.formCode);
             }}
             onFinish={(values:any)=>{
-                props.onFinish(values,props.formCode);
+                props.onFinish?.(values,props.formCode);
+            }}
+            onValuesChange={(partial:any,values:any)=>{
+                props.onValuesChange?.(partial,values,props.formCode);
             }}
         >
             {props.children}

packages/form-engine/src/types/view.tsx

@@ -98,6 +98,8 @@ export interface FormViewProps {
     form?: FormInstance;
     /** 布局方向 **/
     layout?:'horizontal' | 'vertical';
+    /** 表单值更新事件 **/
+    onValuesChange?:(partial:any,values:any,formCode?:string)=>void;
     /** 表单提交数据 **/
     onFinish?: (values:any,formCode?:string) => void;
     /** 表单失去焦点事件 **/