update

docs/package.json

@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "color": "^4.2.3",
-    "helux": "^4.2.2",
+    "helux": "^4.2.3",
     "helux-store": "workspace:^",
     "speed-form": "workspace:^"
   }

example/package.json

@@ -13,7 +13,7 @@
     "axios": "^1.6.2",
     "classnames": "^2.3.2",
     "color": "^4.2.3",
-    "helux": "^4.2.2",
+    "helux": "^4.2.3",
     "helux-store": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

example/src/FormDemo.tsx

@@ -181,6 +181,13 @@ const NetworkForm = ()=>{
                     </>
                 }}
             </Network.Action>
+            <Network.Action<typeof Network.fields.wifi.standardSubmit> name="fields.wifi.standardSubmit" >
+                {({title,visible,loading,enable,run,error,progress})=>{ 
+                    return <>
+                    <Button type="submit" loading={loading} timeout={progress} visible={visible} enable={enable} onClick={run()}>{title}{error}</Button>
+                    </>
+                }}
+            </Network.Action>
         </Card>
     </Network.Form>        
 }

example/src/forms/network.tsx

@@ -39,6 +39,16 @@ const formSchema = {
 				return validator.isIP(value);
 			},
 		},
+		spareIps:[
+			{
+				value: "1.1.1.2",
+				title: "备用IP地址1"
+			},
+			{
+				value: "1.1.1.3",
+				title: "备用IP地址2"
+			},
+		],
 		gateway: {
 			value: "1.1.1.1",
 			title: "网关地址",
@@ -152,6 +162,12 @@ const formSchema = {
 						},200)
 					})					
 				})
+			},
+			standardSubmit: { // 这是一个动作,
+				title: "标准提交",
+				execute:action(async (fields)=>{
+					console.log("formData=",fields)
+				})
 			}
 		}
 	},

packages/form/package.json

@@ -24,7 +24,7 @@
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.42",
     "@vitejs/plugin-react": "^4.2.1",
-    "helux": "^4.2.2",
+    "helux": "^4.2.3",
     "jsdom": "^23.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/form/src/__tests__/serialize.test.ts

@@ -0,0 +1 @@
+//

packages/form/src/action.tsx

@@ -58,10 +58,12 @@ export type DefaultActionRenderProps={
 }
 
 
-export type ActionRunOptions = {
+export type ActionRunOptions = {    
+    preventDefault?:boolean,
     debounce?:number,
     timeout?:number
     noReentry?:boolean
+
 }
 
 
@@ -125,6 +127,7 @@ function  createFormAction(name:string,store:IStore){
     return async (options?:ActionRunOptions)=>{ 
         let fn = actionFn
         const opts = Object.assign({
+            preventDefault:true,
             noReentry:false,
             timeout:0,
             debounce:0
@@ -202,9 +205,15 @@ function useResetAction(valuePath:string[],setState:any){
 
 function useActionRunner<State extends FormActionState=FormActionState>(actionState:State){
     return useCallback((options?:ActionRunOptions)=>{
+        const opts = Object.assign({
+            preventDefault:true,
+            noReentry:false,
+            timeout:0,
+            debounce:0
+        },options)
         return (ev:any)=>{            
             actionState.execute.run()
-            if(typeof(ev.preventDefault)=='function'){
+            if(typeof(ev.preventDefault)=='function' && opts.preventDefault){
                 ev.preventDefault()
             }
         }        
@@ -297,6 +306,22 @@ export function action<Values extends Dict=Dict,R=any>(getter: AsyncComputedGett
 
 }
 
+export type SubmitAsyncComputedGetter<R> = AsyncComputedGetter<R,FormData>
+
+/**
+ * 将传一个FormData对象
+ * @param getter 
+ * @param options 
+ * @returns 
+ */
+export function submit<R=any>(getter: SubmitAsyncComputedGetter<R>,options?: ComputedOptions<R>){
+    return action<Dict,R>(async (data:Dict,opts)=>{
+        const formData = new FormData()
+        return await (getter as unknown as SubmitAsyncComputedGetter<R>)(formData,opts)
+    },options)
+
+}
+
 
 
 

packages/form/src/field.tsx

@@ -18,6 +18,7 @@ export interface DefaultFieldPropTypes{
   readonly?    : boolean;              // 是否只读
   visible?     : boolean;              // 是否可见
   enable?      : boolean               // 是否可用
+  dirty?      : boolean                // 数据已经更新过
   validate?    : boolean;              // 验证
   select?      : any[]                 // 枚举值
 }  
@@ -53,16 +54,17 @@ export type FieldComponent = React.FC<FieldProps>;
 function createFieldProps(name:string,value:any,syncer:any,filedUpdater:any){  
   return assignObject({
     name,
-    help       : "",
+    help        : "",
     defaultValue: undefined,
-    oldValue   : undefined,
-    visible    : true,
-    required   : false,
-    readonly   : false,
-    validate   : true,        
-    enable     : true,
-    placeholder: "",        
-    select     : [] as any,
+    oldValue    : undefined,
+    visible     : true,
+    required    : false,
+    readonly    : false,
+    validate    : true,        
+    enable      : true,
+    dirty       : false,
+    placeholder : "",        
+    select      : [] as any,
   },{
     ...value,
     sync:syncer,

packages/form/src/serialize.ts

@@ -60,7 +60,6 @@ function getFiledGroupValue(data:Dict){
         }else{
             result[key] = value
         }        
-        console.log("Get Field group key=",key)        
     })
     return result
 }
@@ -92,4 +91,52 @@ export interface GetFormDataOptions{
  */
 export function getFormData(snap:Dict,options?:GetFormDataOptions):Record<string,any>{
     return getFiledGroupValue(snap)
+}
+
+export interface CreateFormDataOptions{
+    // 用来实现将keyPath转换为表单项名称
+    getItemName?:(keyPath:string[])=>string
+    /**
+     * 处理值
+     */
+    getItemValue?:(keyPath:string[],type?:'array' | 'object' | '')=>string
+}
+
+
+/**
+ * 
+ * 根据一个Dict生成一个表单数据对象，用来提交
+ * 
+ * 
+ * 
+ * @param data 
+ */
+export function createFormData(data:Dict,options?:CreateFormDataOptions):FormData{
+
+    const formData = new FormData()
+    const { getItemName } = Object.assign({
+        getItemName:(keyPath:string[])=>keyPath.join('.')
+
+    },options)
+
+    function append(keyPath:string[],value:any){
+        if(value==undefined){
+            return
+        }
+        const name = getItemName ? getItemName(keyPath) : keyPath.join('.')
+        if(Array.isArray(value)){
+            value.forEach((item,index)=>{
+                append([...keyPath,String(index)],item)
+            })
+        }else if(isPlainObject(value)){
+            Object.entries(value).forEach(([key,value])=>{
+                append([...keyPath,key],value)
+            })
+        }else{
+            formData.append(name,value)
+        }
+    }
+    append([],data)
+    return formData
+
 }

packages/store/package.json

@@ -22,7 +22,7 @@
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.42",
     "@vitejs/plugin-react": "^4.2.1",
-    "helux": "^4.2.2",
+    "helux": "^4.2.3",
     "jsdom": "^23.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/store/src/computed.ts

@@ -353,7 +353,7 @@ function createAsyncComputedObject(stateCtx:any,mutateId:string,valueObj:Partial
     progress: 0,
     run: markRaw(
         skipComputed(() => {
-          return stateCtx.runMutateTask(mutateId,{extraArgs:{a:1}});
+          return stateCtx.runMutateTask({desc:mutateId,extraArgs:{a:1}});
         })
     )
   },valueObj)
@@ -544,7 +544,6 @@ function createAsyncComputedMutate<Store extends StoreSchema<any>>(stateCtx: ISh
     },
     // 此函数在依赖变化时执行，用来异步计算
     task: async ({ draft, setState, input,extraArgs }) => {
-      console.log("extraArgs=",extraArgs)
       if(noReentry && isMutateRunning ) {
         storeOptions.log(`Reentry async computed: ${valuePath.join(".")}`,'warn');
         return
@@ -605,3 +604,4 @@ export function createComputed<Store extends StoreSchema<any>>(stateCtx: IShared
       }
     });
 }
+