update

zhangfisher · Jan 23, 2024 · 9fa36ba · 9fa36ba
1 parent 4a4440f
commit 9fa36ba
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 187 deletions.
diff --git a/docs/docs/reactive/index.md b/docs/docs/reactive/index.md
@@ -0,0 +1,12 @@
+---
+nav: 
+  title: 响应式
+  order: 2
+---
+
+# 关于
+
+`SpeedForm`是一个非常轻量级的表单组件，它的目标是让表单开发变得更加简单、快速、灵活。
+
+
+
diff --git a/docs/docs/render/index.md b/docs/docs/render/index.md
@@ -0,0 +1,20 @@
+---
+nav: 
+  title: 渲染库
+  order: 1
+---
+
+# 关于
+
+`SpeedForm`是一个非常轻量级的表单组件，它的目标是让表单开发变得更加简单、快速、灵活。
+
+
+
+- `@speed-form/antd`：基于`antd`的渲染库，支持`antd`的所有表单组件
+- `@speed-form/element-ui`：基于`element-ui`的渲染库，支持`element-ui`的所有表单组件
+- `@speed-form/iview`：基于`iview`的渲染库，支持`iview`的所有表单组件
+- `@speed-form/vuetify`：基于`vuetify`的渲染库，支持`vuetify`的所有表单组件
+- `@speed-form/element-plus`：基于`element-plus`的渲染库，支持`element-plus`的所有表单组件
+- `@speed-form/ant-design-vue`：基于`ant-design-vue`的渲染库，支持`ant-design-vue`的所有表单组件
+- `@speed-form/naive-ui`：基于`naive-ui`的渲染库，支持`naive-ui`的所有表单组件
+- `@speed-form/element3`：基于`element3`的渲染库，支持`element3`的所有表单组件
diff --git a/example/src/App.css b/example/src/App.css
@@ -34,6 +34,10 @@
   color:white;
 }
 
+button:focus{
+  outline: none!important;
+}
+
 #app>.tabs{
   position: relative;
   flex-grow: 1;

diff --git a/example/src/FormDemo.tsx b/example/src/FormDemo.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import Card from "./components/Card"  
 import Network from './forms/network';
 import JsonViewer from "./components/JsonViewer" 
@@ -152,57 +152,67 @@ const NetworkForm = ()=>{
                     </FieldRow>
                 }}
             </Network.Field>   
-            <Network.Action<typeof Network.fields.wifi.submit> name="fields.wifi.submit" >
-                {({title,visible,loading,enable,run,timeout,error,value})=>{ 
-                    console.log("action submit",loading,enable,timeout,error,value)
-                    return <Button loading={loading} timeout={timeout} visible={visible} enable={enable} onClick={run()}>{title}</Button>
-                }}
-            </Network.Action>
-            <Network.Action<typeof Network.fields.wifi.timeoutSubmit> name="fields.wifi.timeoutSubmit" >
-                {({title,visible,loading,enable,run,error,timeout})=>{ 
-                    return <Button loading={loading} timeout={timeout} visible={visible} enable={enable} onClick={run()}>{title}{error}</Button>
-                }}
-            </Network.Action>
-            <Network.Action<typeof Network.fields.wifi.progressSubmit> name="fields.wifi.progressSubmit" >
-                {({title,visible,loading,enable,run,error,progress})=>{ 
-                    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>
-            <Network.Action<typeof Network.fields.wifi.retrySubmit> name="fields.wifi.retrySubmit" >
-                {({title,visible,loading,enable,run,error,retry,progress})=>{ 
-                    return <>
-                    <Button loading={loading} timeout={progress} visible={visible} enable={enable} onClick={run()}>{title}{error}</Button>
-                    {retry>0 && <span>重试次数：{retry}</span>}
-                    </>
-                }}
-            </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>
+            <div style={{display:'flex',flexDirection:'column'}}>
+                <Network.Action<typeof Network.fields.wifi.submit> name="fields.wifi.submit" >
+                    {({title,visible,loading,enable,run,timeout,error,value})=>{ 
+                        console.log("action submit",loading,enable,timeout,error,value)
+                        return <Button loading={loading} timeout={timeout} visible={visible} enable={enable} onClick={run()}>{title}</Button>
+                    }}
+                </Network.Action>
+                <Network.Action<typeof Network.fields.wifi.timeoutSubmit> name="fields.wifi.timeoutSubmit" >
+                    {({title,visible,loading,enable,run,error,timeout})=>{ 
+                        return <Button loading={loading} timeout={timeout} visible={visible} enable={enable}  error={error} onClick={run()}>{title}</Button>
+                    }}
+                </Network.Action>
+                <Network.Action<typeof Network.fields.wifi.progressSubmit> name="fields.wifi.progressSubmit" >
+                    {({title,visible,loading,enable,run,error,progress})=>{ 
+                        return <Button loading={loading} timeout={progress} visible={visible} enable={enable}  error={error} onClick={run()}>{title}</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}  error={error} onClick={run()}>{title}</Button>
+                    }}
+                </Network.Action>
+                <Network.Action<typeof Network.fields.wifi.retrySubmit> name="fields.wifi.retrySubmit" >
+                    {({title,visible,loading,enable,run,error,retry,progress})=>{ 
+                        return <>
+                        <Button loading={loading} timeout={progress} visible={visible} enable={enable}  error={error} onClick={run()}>{title}</Button>
+                        {retry>0 && <span>重试次数：{retry}</span>}
+                        </>
+                    }}
+                </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}  error={error} enable={enable} onClick={run()}>{title}</Button>
+                        </>
+                    }}
+                </Network.Action>
+                <Network.Action<typeof Network.fields.wifi.cancelableSubmit> name="fields.wifi.cancelableSubmit" >
+                    {({title,visible,loading,enable,run,cancel,error,progress})=>{ 
+                        return <>
+                            <Button loading={loading} cancel={cancel} timeout={progress} visible={visible} enable={enable} error={error} onClick={run({cancelable:true})}>{title}</Button>
+                        </>
+                    }}
+                </Network.Action>
+            </div>
+
         </Card>
     </Network.Form>        
 }
 
 
 const FormDemo:React.FC = ()=>{
     // 如果缺少以下两句，则state.select无法触发setOnReadHook 
-    const [state] = Network.useState()
- 
+    const [state] = Network.useState() 
+
     const submit = useCallback((options?:ActionRunOptions)=>{
-        Network.actions.submit(options).then((result)=>{
-            console.log("提交结果：",result)
-        }).catch((error)=>{
-            console.log("提交错误：",error)
-        })
+        // Network.actions.submit(options).then((result)=>{            
+        //     console.log("提交结果：",result)
+        // }).catch((error)=>{
+        //     console.log("提交错误：",error)
+        // })
     },[])
 
     // Network.state.actions.ping.execute
@@ -216,12 +226,17 @@ const FormDemo:React.FC = ()=>{
                 {/* <NetworkForm/> */}
                 <button onClick={()=>submit()}>提交</button>
                 <button onClick={()=>submit({timeout:1000})}>提交超时</button>
+                <span>
+                <button onClick={()=>submit({cancelable:true})}>提交取消</button>
+                <button onClick={()=>submit}>取消</button>
+                </span>
             </div>
             <div style={{padding:"8px",margin:'8px',width:'40%'}}> 
                 <Card title="表单数据">
                     <JsonViewer data={state}/> 
                 </Card>
             </div>
+
         </div>
 
     )

diff --git a/example/src/components/Button.tsx b/example/src/components/Button.tsx
@@ -8,13 +8,17 @@ export type ButtonProps =React.PropsWithChildren<
         enable?:boolean,
         loading?:boolean
         timeout?:number
+        error?:string
+        cancel?:()=>any
     }>
 
 export const Button:React.FC<ButtonProps> = (props)=>{
     const { visible=true,enable=true,loading,timeout=0 } =props
 
 
-    return (<button style={{
+    return (
+    <>
+    <button style={{
         padding:"8px",
         margin:"4px",
         border:"1px solid #008bfdca",
@@ -23,15 +27,34 @@ export const Button:React.FC<ButtonProps> = (props)=>{
     }}
         disabled={!enable}
         {...props}
-    >
+    >        
         {loading ? <Loading/> : null}
-        {props.children}        
+        <span style={{flexGrow:1}}>{props.children}        </span>
         {timeout >0 ? <span style={{
             padding:"4px",
             color:"red",
             backgroundColor:"#eee",
             borderRadius:"4px",
         }}>{timeout}</span> : '' }
-
-    </button>)
+        {
+            props.error ? <span style={{
+                padding:"4px",
+                color:"red",
+                backgroundColor:"#eee",
+                borderRadius:"4px",
+            }}>{props.error}</span> : ''
+        }
+    </button>    
+    {props.loading && props.cancel ? 
+        <button onClick={props.cancel} style={{            
+                padding:"4px",
+                color:"red",
+                margin:"2px",
+                fontSize:"10px",
+                backgroundColor:"#eee",
+                borderRadius:"4px",
+                cursor:"pointer"
+            }}> 取消</button> : ''}
+    </>
+    )
 }
diff --git a/example/src/forms/network.tsx b/example/src/forms/network.tsx
@@ -168,6 +168,21 @@ const formSchema = {
 				execute:action(async (fields)=>{
 					console.log("formData=",fields)
 				})
+			},
+			cancelableSubmit: { // 这是一个动作,
+				title: "可取消的提交",
+				execute:action(async (fields,{abortSignal})=>{
+					console.log("formData=",fields)	
+					return new Promise<void>((resolve,reject)=>{
+						setTimeout(()=>{
+							resolve()
+						},5000)
+						abortSignal()?.addEventListener("abort",()=>{
+							console.log("已取消：cancelled")
+							reject("cancelled")
+						})
+					})					
+				})
 			}
 		}
 	},
@@ -177,10 +192,17 @@ const formSchema = {
 			enable: (root: any) => {
 				return root.fields.wifi.ssid.value.length > 3
 			},
-			execute: async () => {
-				await delay(2000);
-				return count++
-			},
+			execute: action(async (f,{abortSignal}) => {
+				return new Promise<number>((resolve,reject)=>{
+					setTimeout(()=>{
+						resolve(count++)
+					},2000)
+					abortSignal()?.addEventListener("abort",()=>{
+						console.log("已取消：cancelled")
+						reject("cancelled")
+					})
+				})			 
+			}),
 		},
 		errorSubmit: {
 			title: "提交错误",