Skip to content

Commit 9a1817a

Browse files
xlornexlorne
committed
add hiddenFields requiredFields
1 parent b09e0d4 commit 9a1817a

10 files changed

Lines changed: 221 additions & 86 deletions

File tree

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ const HomePage = () => {
6464
}}
6565
>getValues</Button>
6666

67+
<Button
68+
onClick={async () => {
69+
const values = await form.validateFields();
70+
console.log(values);
71+
}}
72+
>validate</Button>
73+
6774
<Button
6875
onClick={() => {
6976
form.setFieldsValue({

‎packages/form-view/src/context/form-context.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import React from "react";
22
import {FormValidate} from "@/validate";
33
import {FormPresenter} from "@/presenters";
4-
import {FormState} from "@/types";
4+
import {FormState, FormViewProps} from "@/types";
55
import {EventContext} from "@/event";
66
import {FormInstance} from "@/instance";
77

88

99
export class FormContextScope {
1010

11+
private readonly props:FormViewProps;
1112
private readonly instance: FormInstance;
1213
private readonly validate: FormValidate;
1314
private readonly presenter: FormPresenter;
1415
private readonly eventContext: EventContext;
1516

16-
constructor(instance: FormInstance,
17+
constructor(props:FormViewProps,
18+
instance: FormInstance,
1719
validate: FormValidate,
1820
eventContext: EventContext,
1921
presenter: FormPresenter) {
22+
this.props = props;
2023
this.instance = instance;
2124
this.presenter = presenter;
2225
this.eventContext = eventContext;
2326
this.validate = validate;
27+
this.instance.setPresenter(presenter);
2428
}
2529

2630
public initialState() {
27-
this.presenter.initialState();
31+
this.presenter.initialState(this.props.meta);
2832
}
2933

3034
public syncState(state: FormState) {
@@ -35,7 +39,6 @@ export class FormContextScope {
3539
return this.instance.getFormControl(formCode);
3640
}
3741

38-
3942
public getPresenter() {
4043
return this.presenter;
4144
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,14 @@ export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
3232
<FormContext.Provider value={context}>
3333
<FormSubView
3434
Form={Form}
35-
meta={meta}
36-
context={context}
35+
formCode={meta.code}
3736
review={review}
3837
/>
3938
{subFormList && subFormList.map(item=>{
4039
return (
4140
<FormSubView
4241
Form={Form}
43-
meta={item}
44-
context={context}
42+
formCode={item.code}
4543
review={review}
4644
/>
4745
)

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

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,53 @@
1-
import {FormMeta} from "@/types";
21
import React from "react";
3-
import {FormContextScope} from "@/context";
42
import {FormItemFactory} from "@/factory";
3+
import {useFormContext} from "@/hooks";
54

6-
interface FormSubViewProps{
7-
meta:FormMeta;
5+
interface FormSubViewProps {
6+
formCode: string;
87
Form: React.ComponentType<any>;
9-
context:FormContextScope;
10-
review:boolean;
8+
review: boolean;
119
}
1210

13-
14-
export const FormSubView:React.FC<FormSubViewProps> = (props)=>{
11+
export const FormSubView: React.FC<FormSubViewProps> = (props) => {
1512
const Form = props.Form;
16-
const formCode = props.meta.code;
17-
const fields = props.meta.fields;
13+
const formCode = props.formCode;
1814
const review = props.review;
19-
const context = props.context;
2015

21-
const formControl = context.getFormControl(formCode);
16+
const {state, context} = useFormContext();
17+
18+
const fields = React.useMemo(() => {
19+
const formList = [];
20+
formList.push(state);
21+
for (const subForm of state.subForms || []) {
22+
formList.push(subForm);
23+
}
24+
for (const subForm of formList) {
25+
if (subForm.code === formCode) {
26+
return subForm.fields;
27+
}
28+
}
29+
return [];
30+
}, [state]);
2231

23-
const formTarget = formControl?.getProxyTarget();
32+
const formControl = context.getFormControl(formCode);
2433

34+
const formTarget = formControl?.getProxyTarget();
2535

26-
React.useEffect(()=>{
27-
const events = context.getEventContext().getLoadEvents();
36+
React.useEffect(() => {
37+
const events = context.getEventContext().getLoadEvents();
2838
if (events && events.length > 0) {
2939
for (const event of events) {
3040
event.event();
3141
}
3242
}
33-
},[]);
34-
43+
}, []);
3544

3645
return (
3746
<Form
3847
form={formTarget}
3948
>
4049
{fields.map(field => {
41-
return FormItemFactory.getInstance().render(formCode,field,review,context);
50+
return FormItemFactory.getInstance().render(formCode, field, review, context);
4251
})}
4352
</Form>
4453
)

‎packages/form-view/src/hooks/create-form-instance.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@ import {FormInstance} from "@/instance";
22
import {FormMeta} from "@/types";
33

44
export const createFormInstance = (meta:FormMeta) => {
5-
65
return new FormInstance(meta);
76
}

‎packages/form-view/src/hooks/use-form-context.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {FormInstance} from "@/instance";
88
import {FormValidate} from "@/validate";
99
import {EventContext} from "@/event";
1010

11-
export const useFormContext = ()=> {
11+
export const useFormContext = () => {
1212
const value = React.useContext(FormContext);
1313
const state = useSelector((state: FormReduxState) => state.form);
1414
if (!value) {
@@ -21,7 +21,7 @@ export const useFormContext = ()=> {
2121
}
2222

2323

24-
export const createFormContext = (props:FormViewProps)=> {
24+
export const createFormContext = (props: FormViewProps) => {
2525

2626
const ref = React.useRef<FormContextScope | undefined>(undefined);
2727

@@ -31,7 +31,6 @@ export const createFormContext = (props:FormViewProps)=> {
3131

3232
if (!ref.current) {
3333
const presenter = new FormPresenter(
34-
props,
3534
state,
3635
(prevState) => {
3736
dispatch(updateState(prevState));
@@ -41,19 +40,19 @@ export const createFormContext = (props:FormViewProps)=> {
4140

4241
const instance = props.form ? props.form as FormInstance : new FormInstance(props.meta);
4342

44-
const validate = new FormValidate(props.meta, instance,props.validators || []);
43+
const validate = new FormValidate(props.meta, instance, props.validators || []);
4544

4645
const eventContext = new EventContext(props.events || []);
47-
ref.current = new FormContextScope(instance, validate,eventContext,presenter);
46+
ref.current = new FormContextScope(props, instance, validate, eventContext, presenter);
4847
ref.current.initialState();
4948
}
5049

5150

52-
React.useEffect(()=>{
51+
React.useEffect(() => {
5352
if (ref.current) {
5453
ref.current.syncState(state);
5554
}
56-
},[state]);
55+
}, [state]);
5756

5857

5958
return ref.current;

‎packages/form-view/src/instance/control.ts‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
export class FormControl {
22

33
// 控制对象的表单编码
4-
private readonly formCode:string;
4+
private readonly formCode: string;
55

66
// 代理的form控制对象
7-
private readonly proxyTarget:any;
7+
private readonly proxyTarget: any;
88

9-
constructor(formCode:string,target: any) {
9+
constructor(formCode: string, target: any) {
1010
this.formCode = formCode;
1111
this.proxyTarget = target;
1212
}
1313

14-
public getFormCode(){
14+
public getFormCode() {
1515
return this.formCode;
1616
}
1717

@@ -36,26 +36,22 @@ export class FormControl {
3636
}
3737

3838
public setFieldValue(name: string, value: any) {
39-
console.log('setFieldValue', name, value);
40-
this.proxyTarget.setFieldValue(name,value);
39+
this.proxyTarget.setFieldValue(name, value);
4140
}
4241

4342
public submit() {
4443
this.proxyTarget.submit();
4544
}
4645

4746
public validateFields(nameList?: string[]) {
48-
return new Promise<any>((resolve) => {
49-
47+
return new Promise<any>((resolve, reject) => {
48+
this.proxyTarget
49+
.validateFields(nameList)
50+
.then((values: any) => {
51+
resolve(values);
52+
})
53+
.catch(reject);
5054
});
5155
}
5256

53-
public hiddenFields(hidden:boolean,nameList?: string[]) {
54-
console.log('hiddenFields, nameList', nameList);
55-
}
56-
57-
public requiredFields(required:boolean,nameList?: string[]) {
58-
console.log('requiredFields, nameList', nameList);
59-
}
60-
6157
}

0 commit comments

Comments
 (0)