Skip to content

Commit 9f4763d

Browse files
xlornexlorne
committed
add layout
1 parent 47f30da commit 9f4763d

17 files changed

Lines changed: 252 additions & 20 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const FormString: React.FC<FormItemProps> = (props) => {
1212
required={props.required}
1313
hidden={props.hidden}
1414
rules={props.rules}
15+
layout={props.layout}
1516
>
1617
<Input
1718
placeholder={props.placeholder}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const FormString: React.FC<FormItemProps> = (props) => {
1212
required={props.required}
1313
hidden={props.hidden}
1414
rules={props.rules}
15+
layout={props.layout}
1516
>
1617
<Input
1718
placeholder={props.placeholder}

‎apps/app-pc/src/config/form-register.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {registerFormItems} from "@coding-form/form-view";
22
import {FormString} from "@/components/string";
33
import {Form} from "antd";
4+
import {LayoutFactory} from "@coding-form/form-view";
5+
import {CardFormLayout} from "@/layout/card-form-layout.tsx";
46

57
export const registerForms = () => {
68

@@ -10,4 +12,6 @@ export const registerForms = () => {
1012
componentType:FormString
1113
}
1214
]);
15+
16+
LayoutFactory.getInstance().register('card',CardFormLayout);
1317
}

‎apps/app-pc/src/layout/card-form-layout.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from "react";
2+
import type {FieldLayout, FormLayoutProps} from "@coding-form/form-view";
3+
import {FormItemFactory} from "@coding-form/form-view";
4+
import {Col, Row} from "antd";
5+
6+
export const CardFormLayout:React.FC<FormLayoutProps> = (props: FormLayoutProps) => {
7+
8+
const layout = props.layout;
9+
const review = props.review;
10+
const context = props.context;
11+
const formCode = props.formCode;
12+
13+
14+
const fieldLayouts = layout.props.fields;
15+
16+
const getFieldView = (fieldCode:string)=>{
17+
for (const field of props.fields){
18+
if(field.code === fieldCode){
19+
return FormItemFactory.getInstance().render(formCode, field,layout.props.layout, review, context);
20+
}
21+
}
22+
return null;
23+
}
24+
25+
26+
const fieldRender = (fieldLayout:FieldLayout)=>{
27+
const FormItem = getFieldView(fieldLayout.code);
28+
29+
return (
30+
<Col span={fieldLayout.span}>
31+
{FormItem}
32+
</Col>
33+
)
34+
}
35+
36+
37+
return (
38+
<Row>
39+
<Col span={24}>
40+
{layout.props.title}
41+
</Col>
42+
43+
{fieldLayouts.map(item=>{
44+
return fieldRender(item);
45+
})}
46+
47+
</Row>
48+
)
49+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,23 @@ const HomePage = () => {
5959
}
6060
}
6161
]}
62+
layouts={[
63+
{
64+
formCode:'leave',
65+
type:'card',
66+
props:{
67+
title:'测试',
68+
layout:'vertical',
69+
mainFields:[],
70+
fields:[
71+
{
72+
code:'name',
73+
span:12
74+
}
75+
]
76+
}
77+
}
78+
]}
6279
/>
6380

6481
<Space>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {FormPresenter} from "@/presenters";
44
import {FormState, FormViewProps} from "@/types";
55
import {EventContext} from "@/event";
66
import {FormInstance} from "@/instance";
7+
import {LayoutContext} from "@/layout";
78

89

910
export class FormContextScope {
@@ -13,17 +14,20 @@ export class FormContextScope {
1314
private readonly validate: FormValidate;
1415
private readonly presenter: FormPresenter;
1516
private readonly eventContext: EventContext;
17+
private readonly layoutContext: LayoutContext;
1618

1719
constructor(props:FormViewProps,
1820
instance: FormInstance,
1921
validate: FormValidate,
2022
eventContext: EventContext,
23+
layoutContext: LayoutContext,
2124
presenter: FormPresenter) {
2225
this.props = props;
2326
this.instance = instance;
2427
this.presenter = presenter;
2528
this.eventContext = eventContext;
2629
this.validate = validate;
30+
this.layoutContext = layoutContext;
2731
this.instance.setPresenter(presenter);
2832
}
2933

@@ -39,6 +43,10 @@ export class FormContextScope {
3943
return this.instance.getFormControl(formCode);
4044
}
4145

46+
public getLayoutContext() {
47+
return this.layoutContext;
48+
}
49+
4250
public getFormInstance(){
4351
return this.instance;
4452
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import {FormItemProps} from "@/types/item";
33
import {FormField} from "@/types";
44
import {FormContextScope} from "@/context";
5-
import {value} from "happy-dom/lib/PropertySymbol";
65

76
export class FormItemFactory {
87

@@ -28,7 +27,12 @@ export class FormItemFactory {
2827
}
2928

3029

31-
public render(formCode:string,formField:FormField,readOnly:boolean,context:FormContextScope){
30+
public render(formCode:string,
31+
formField:FormField,
32+
layout:'horizontal' | 'vertical',
33+
readOnly:boolean,
34+
context:FormContextScope){
35+
3236
const formItemProps: FormItemProps = {
3337
...formField,
3438
readOnly: readOnly,
@@ -65,6 +69,7 @@ export class FormItemFactory {
6569
rules={rules}
6670
onChange={handlerOnChange}
6771
onBlur={handlerOnBlur}
72+
layout={layout}
6873
/>
6974
)
7075
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import {FormItemFactory} from "@/factory";
32
import {useFormContext} from "@/hooks";
43

54
interface FormSubViewProps {
@@ -35,6 +34,8 @@ export const FormSubView: React.FC<FormSubViewProps> = (props) => {
3534

3635
const formTarget = formControl?.getProxyTarget();
3736

37+
const layoutContext = context.getLayoutContext();
38+
3839
React.useEffect(() => {
3940
const events = context.getEventContext().getLoadEvents();
4041
if (events && events.length > 0) {
@@ -44,13 +45,13 @@ export const FormSubView: React.FC<FormSubViewProps> = (props) => {
4445
}
4546
}, []);
4647

48+
49+
4750
return (
4851
<Form
4952
form={formTarget}
5053
>
51-
{fields.map(field => {
52-
return FormItemFactory.getInstance().render(formCode, field, review, context);
53-
})}
54+
{layoutContext.render(props.formCode, fields, review, context)}
5455
</Form>
5556
)
5657
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {FormPresenter} from "@/presenters";
77
import {FormInstance} from "@/instance";
88
import {FormValidate} from "@/validate";
99
import {EventContext} from "@/event";
10+
import {LayoutContext} from "@/layout";
1011

1112
export const useFormContext = () => {
1213
const value = React.useContext(FormContext);
@@ -42,8 +43,10 @@ export const createFormContext = (props: FormViewProps) => {
4243

4344
const validate = new FormValidate(props.meta, instance, props.validators || []);
4445

46+
const layoutContext = new LayoutContext(props.layouts || []);
47+
4548
const eventContext = new EventContext(props.events || []);
46-
ref.current = new FormContextScope(props, instance, validate, eventContext, presenter);
49+
ref.current = new FormContextScope(props, instance, validate, eventContext, layoutContext, presenter);
4750
ref.current.initialState();
4851
}
4952

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ export * from "./register";
66
export * from "./types";
77
export * from "./hooks";
88
export * from "./factory";
9+
export * from "./layout";
910
export * from "./form";

0 commit comments

Comments
 (0)