add event

Author: xlorne

apps/app-mobile/src/components/string/index.tsx

@@ -18,6 +18,9 @@ export const FormString: React.FC<FormItemProps> = (props) => {
                 onChange={(event)=>{
                     props.onChange?.(event);
                 }}
+                onBlur={(event)=>{
+                    props.onBlur?.(event.target.value);
+                }}
             />
         </Form.Item>
     )

apps/app-pc/src/components/string/index.tsx

@@ -18,6 +18,9 @@ export const FormString: React.FC<FormItemProps> = (props) => {
                 onChange={(event)=>{
                     props.onChange?.(event.target.value);
                 }}
+                onBlur={(event)=>{
+                    props.onBlur?.(event.target.value);
+                }}
             />
         </Form.Item>
     )

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

@@ -1,7 +1,6 @@
 import {createFormInstance, FormView} from "@coding-form/form-view";
 import type {FormMeta} from "@coding-form/form-view";
 import {Button, Space} from "antd";
-import type {OnChangeEvent} from "@coding-form/form-view";
 
 const HomePage = () => {
 
@@ -42,11 +41,12 @@ const HomePage = () => {
                 ]}
                 events={[
                     {
+                        type: 'change',
                         target:'name',
                         event:(value)=>{
                             console.log('value',value)
                         }
-                    } as OnChangeEvent
+                    }
                 ]}
             />
 

packages/form-view/src/event/event-context.ts

@@ -1,26 +1,66 @@
 import {FieldKey, FormEvent} from "@/types";
 
-export class EventContext{
+export class EventContext {
 
-    private readonly events:FormEvent[];
+    private readonly events: FormEvent[];
 
-    constructor(events:FormEvent[]){
+    constructor(events: FormEvent[]) {
         this.events = events;
     }
 
+    public handlerOnChange(target: FieldKey, value: any) {
+        const events = this.getEvents('change', target);
+        if (events && events.length > 0) {
+            for (const event of events) {
+                event.event(value);
+            }
+        }
+    }
 
-    public handlerOnChange(target:FieldKey,value:string){
-        const event = this.getEvent(target);
-        if(event){
 
+    public handlerOnBlur(target: FieldKey,value:any) {
+        const events = this.getEvents('blur', target);
+        if (events && events.length > 0) {
+            for (const event of events) {
+                event.event(value);
+            }
         }
     }
 
-    private getEvent(target:FieldKey){
-        for(let event of this.events){
-            console.log(typeof event)
+    public getLoadEvents(): FormEvent[] {
+        return this.getEvents('load');
+    }
+
+
+    private getEvents(type: string, target?: FieldKey) {
+        const events = [];
+        for (const event of this.events) {
+            if (event.type == type) {
+                const eventTarget = event.target;
+
+                if (target === eventTarget) {
+                    events.push(event)
+                }
+                if (typeof target !== 'string' && typeof eventTarget === 'string') {
+                    if (target?.fieldCode === eventTarget) {
+                        events.push(event)
+                    }
+                }
+
+                if (typeof target === 'string' && typeof eventTarget !== 'string') {
+                    if (!eventTarget?.formCode && eventTarget?.fieldCode === target) {
+                        events.push(event)
+                    }
+                }
+
+                if (typeof target !== 'string' && typeof eventTarget !== 'string') {
+                    if (eventTarget?.fieldCode === target?.fieldCode && eventTarget?.formCode === target?.formCode) {
+                        events.push(event)
+                    }
+                }
+            }
         }
-        return null;
+        return events;
     }
 
 }

packages/form-view/src/factory/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {FormItemProps} from "@/types/item";
 import {FormField} from "@/types";
 import {FormContextScope} from "@/context";
+import {value} from "happy-dom/lib/PropertySymbol";
 
 export class FormItemFactory {
 
@@ -44,12 +45,15 @@ export class FormItemFactory {
             fieldCode:formField.code,
         }
 
-        const handlerOnChange = (value:string)=>{
+        const handlerOnChange = (value:any)=>{
             formItemProps.onChange?.(value);
             eventContext.handlerOnChange(fieldKey, value);
         }
 
-
+        const handlerOnBlur = (value:any) => {
+            formItemProps.onBlur?.(value);
+            eventContext.handlerOnBlur(fieldKey,value);
+        }
 
         if (FormItem) {
             const rules = context.getValidate().getValidatorRules(fieldKey);
@@ -58,6 +62,7 @@ export class FormItemFactory {
                     {...formItemProps}
                     rules={rules}
                     onChange={handlerOnChange}
+                    onBlur={handlerOnBlur}
                 />
             )
         }

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

@@ -22,6 +22,17 @@ export const FormSubView:React.FC<FormSubViewProps> = (props)=>{
 
     const formTarget  = formControl?.getProxyTarget();
 
+
+    React.useEffect(()=>{
+        const events =  context.getEventContext().getLoadEvents();
+        if (events && events.length > 0) {
+            for (const event of events) {
+                event.event();
+            }
+        }
+    },[]);
+
+
     return (
         <Form
             form={formTarget}

packages/form-view/src/types/event.ts

@@ -5,53 +5,15 @@ import {FieldKey} from "@/types";
  */
 export interface FormEvent {
 
-}
-
-
-/**
- * 初始化加载事件
- */
-export interface OnLoadEvent extends FormEvent {
-
-    /**
-     * 事件定义
-     */
-    event:()=>void;
-
-}
-
-/**
- * 失去焦点事件
- */
-export interface OnBlurEvent extends FormEvent {
-
-    /**
-     * 作用对象
-     */
-    target:FieldKey;
+    // 事件类型
+    type:'load'|'change'|'blur';
 
-    /**
-     * 事件定义
-     */
-    event:()=>void;
-
-}
-
-
-/**
- * 值变更事件
- */
-export interface OnChangeEvent extends FormEvent {
+    // 作用对象
+    target?:FieldKey;
 
-    /**
-     * 作用对象
-     */
-    target:FieldKey;
+    // 事件触发
+    event:(value?:any)=>void;
 
-    /**
-     * 事件定义
-     */
-    event:(value:any)=>void;
 }
 
 

packages/form-view/src/types/item.ts

@@ -6,6 +6,7 @@ export interface FormItemProps{
     defaultValue?: string;
     value?: string;
     onChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
     placeholder?:string;
     readOnly?:boolean;
     rules?:any[];