update

example/mock/index.ts

@@ -0,0 +1,15 @@
+import { MockMethod, MockConfig } from 'vite-plugin-mock'
+export default [
+  {
+    url: '/api/get',
+    method: 'get',
+    response: ({ query }) => {
+      return {
+        code: 0,
+        data: {
+          name: 'vben',
+        },
+      }
+    },
+  }
+] as MockMethod[]

example/package.json

@@ -35,6 +35,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "type-fest": "^4.8.3",
     "typescript": "^5.3.3",
-    "vite": "^5.0.6"
+    "vite": "^5.0.6",
+    "vite-plugin-mock": "^3.0.1"
   }
 }

example/src/FormDemo.tsx

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

example/src/forms/network.tsx

@@ -1,5 +1,5 @@
 import { ComputedScopeRef, computed } from "helux-store";
-import { Dict, createForm } from "speed-form";
+import { Dict, createForm,action } from "speed-form";
 // import { Project, getProjects } from "../api/getProjects";
 import { delay } from "flex-tools/async/delay";
 import validator from "validator"; 
@@ -113,7 +113,25 @@ const formSchema = {
 			},
 			progressSubmit: { // 这是一个动作,
 				title: "提交进度",
-				execute:computed(async (wifi:any,{getProgressbar})=>{
+				execute:computed(async (fields:any,{getProgressbar,getSnap})=>{
+					const bar = getProgressbar()
+					console.log("submit fields=",getSnap(fields))
+					return new Promise<void>((resolve)=>{
+						let count = 0 , tmId = 0
+						tmId = setInterval(()=>{
+							if(count==100){
+								clearInterval(tmId)
+								resolve()
+							}
+							bar.value(count++)							
+						},200)
+					})					
+				})
+			},
+			progressSubmit2: { // 这是一个动作,
+				title: "提交进度2",
+				execute:action(async (fields,{getProgressbar})=>{
+					console.log("submit fields=",fields)
 					const bar = getProgressbar()
 					return new Promise<void>((resolve)=>{
 						let count = 0 , tmId = 0

example/vite.config.ts

@@ -1,7 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { viteMockServe } from 'vite-plugin-mock'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    viteMockServe({
+      mockPath: 'mock',
+      watchFiles: true,
+      enable: true,
+    })
+  ],
 })

packages/form/src/action.tsx

@@ -289,9 +289,9 @@ export function createActionComponent<Store extends Dict = Dict,ActionStates ext
  * @param getter 
  * @param options 
  */
-export function action<Values extends Dict=Dict,R=any>(getter: AsyncComputedGetter<Values>,options?: ComputedOptions<R>){
+export function action<Values extends Dict=Dict,R=any>(getter: AsyncComputedGetter<R,Values>,options?: ComputedOptions<R>){
     return computed<R>(async (scope:any,opts)=>{
-        const data = getFormData(getSnap(scope))
+        const data = getFormData(getSnap(scope,false).fields)
         return await (getter as unknown as AsyncComputedGetter<R>)(data,opts)
     },options)
 

packages/form/src/field.tsx

@@ -30,7 +30,10 @@ export type Value = {value:any}
 // 传递给字段组件的渲染参数
 export type FieldRenderProps<PropTypes extends Dict>= Required<Omit<DefaultFieldPropTypes,keyof PropTypes> & PropTypes> & {
   sync	  	    : (debounce?:number)=>ChangeEventHandler	   		  		                    // 同步状态表单计算
-  update	  	  : (valueOrUpdater:PropTypes['value'] | ((field:PropTypes)=>void),options?:{debounce?:number})=>any	  	   
+  update	  	  : (valueOrUpdater:PropTypes['value'] | ((field:PropTypes)=>void),options?:{debounce?:number})=>any
+  // 取消正在执行的异步计算函数，执行时会调用onCancel指定的回调函数，由计算函数自已退出
+  // 如果异步计算函数没有指定onCancel回调函数，则会忽略正在进行的函数自动退出
+  cancel        : ()=>void        	  	   
   defaultValue  : PropTypes['value'] | undefined
   oldValue      : PropTypes['value'] 
 } 
@@ -80,6 +83,18 @@ function useFieldSyncer(store: any,valuePath:string[]){
   },[]) 
 }
 
+/**
+ * 提供一个函数，当调用此函数时，会取消正在执行的异步计算函数
+ * 取消的机制是:
+ *  
+ *  
+ * 
+ */
+function useCancel(){
+  return useCallback(()=>{
+
+  },[])
+}
 /**
  * 
  * 字段更新器，用来对表单数据进行更新

packages/form/src/form.tsx

@@ -219,12 +219,14 @@ function loadFormData(store:any){
  * 并且对其行为进行了一些约定
  * 
  * - immediate=false : 不会自动执行,需要手动调用action.execute.run()来执行
- *   
+ * - 让scope默认指向fields
  * 
  */
 function createActionHook(valuePath:string[],getter:Function,options:ComputedOptions){
 	if(valuePath.length>1 && valuePath[valuePath.length-1]=='execute'){
-		options.immediate = false
+		options.immediate = false			// 默认不自动执行,需要手动调用action.execute.run()来执行
+		options.scope = [FIELDS_STATE_KEY]	// 默认指向fields
+		options.noReentry = true			// 禁止重入
 	}
 }
 /**

packages/form/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./types"
 export * from "./field"
 export * from "./form"
-export * from "./fieldGroup" 
+export * from "./fieldGroup" 
+export * from "./action"

packages/form/src/serialize.ts

@@ -38,9 +38,6 @@ function isFieldGroup(data:Dict){
 }
 
 
-export interface GetFormDataOptions{
-    entry?:string[]    
-}
 
 
 function getFieldValue(data:Dict){
@@ -50,26 +47,49 @@ function getFieldValue(data:Dict){
 function getFiledGroupValue(data:Dict){
     const result:Dict = {}
     Object.entries(data).forEach(([key,value])=>{
+
+        if(typeof(key) !== 'string'){
+            return
+        }
         if(isFieldValue(value)){
             result[key] = getFieldValue(value)
         }else if(isFieldGroup(value)){
             result[key] = getFiledGroupValue(value)
         }else if(isFieldList(value)){
-
+            result[key] = getFieldListValue(value)
         }else{
             result[key] = value
         }        
+        console.log("Get Field group key=",key)        
+    })
+    return result
+}
+function getFieldListValue(data:Dict){
+    const result:any[] = []
+    data.forEach((item:Dict)=>{    
+        if(isFieldValue(item)){
+            result.push(getFieldValue(item))
+        }else if(isFieldGroup(item)){
+            result.push(getFiledGroupValue(item))
+        }else if(isFieldList(item)){
+            result.push(getFieldListValue(item))
+        }else{
+            result.push(item)
+        }        
     })
     return result
 }
-function getFiledListValue(data:Dict){
 
+
+export interface GetFormDataOptions{
+    entry?:string[]    
 }
+
 /**
  * 指定一个入口路径，获取指定路径下表单数据
- * @param state 
+ * @param snap 
  * @param entryPath 
  */
-export function getFormData(state:Dict,options?:GetFormDataOptions):Record<string,any>{
-    return getFiledGroupValue(state)
+export function getFormData(snap:Dict,options?:GetFormDataOptions):Record<string,any>{
+    return getFiledGroupValue(snap)
 }

packages/form/src/utils.ts

@@ -64,16 +64,5 @@ export function compareObject<T extends Record<string,any>>(a:T,b:T):Partial<T>{
 	return result
 }
 
-// function fn(n:number){
-// 	console.log(n,' - ',new Date().getMilliseconds())
-// }
-
-// const dfn = debounce(fn,2000)
-// let count=0
-// setInterval(()=>{
-// 	dfn(++count)
-// },100)
-
-