Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf84b565

Browse files
committed
Added support for grids similar to rjsf
1 parent6284ae7 commitf84b565

File tree

2 files changed

+43
-35
lines changed

2 files changed

+43
-35
lines changed

‎client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,11 @@ import {
1515
Steps,
1616
}from"antd";
1717
importstyledfrom"styled-components";
18-
importtype{JsonSchema}from"@jsonforms/core";
1918
importtype{JSONSchema7}from"json-schema";
2019
import{debounce}from"lodash";
2120
importdayjsfrom"dayjs";
2221
import{trans}from"i18n";
2322
importtype{
24-
JsonFormsUiSchema,
2523
FieldUiSchema,
2624
Layout,
2725
Categorization,
@@ -30,10 +28,14 @@ import type {
3028
Category,
3129
Control
3230
}from"./types";
33-
importtype{SwitchChangeEventHandler}from"antd/es/switch";
31+
import{useContainerWidth}from"./jsonSchemaFormComp";
32+
3433
const{ TextArea}=Input;
3534

36-
constContainer=styled.div`
35+
constContainer=styled.div
36+
`
37+
gap: 16px;
38+
width: 100%;
3739
.ant-form-item {
3840
margin-bottom: 16px;
3941
}
@@ -62,11 +64,6 @@ const Container = styled.div`
6264
}
6365
`;
6466

65-
interfaceHorizontalLayout{
66-
type:"HorizontalLayout";
67-
elements:Control[];
68-
}
69-
7067
constJsonFormsRenderer:React.FC<JsonFormsRendererProps>=({
7168
schema,
7269
data,
@@ -78,6 +75,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
7875
validationState:externalValidationState,
7976
onValidationChange,
8077
})=>{
78+
constcontainerWidth=useContainerWidth();
8179
// Local state to handle immediate updates
8280
const[localData,setLocalData]=useState(data);
8381
// Track focused field
@@ -116,7 +114,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
116114
if(!uiSchema)returnundefined;
117115

118116
// For JSONForms UI schema, we need to find the Control element that matches the path
119-
if(uiSchema.type==="HorizontalLayout"&&Array.isArray(uiSchema.elements)){
117+
if(Array.isArray(uiSchema.elements)){
120118
constcontrol=uiSchema.elements.find((element:any)=>{
121119
if(element.type==="Control"){
122120
// Convert the scope path to match our field path
@@ -666,24 +664,41 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
666664

667665
// Fallback to default rendering if not a categorization
668666
return(
669-
<Containerstyle={style}>
670-
<Formlayout="vertical">
671-
{Object.entries(schema.properties||{}).map(
672-
([key,fieldSchema]:[string,any])=>
673-
renderField(key,fieldSchema,localData?.[key])
674-
)}
675-
<Form.Item>
676-
<Button
677-
type="primary"
678-
onClick={handleSubmit}
679-
style={{float:"right"}}
680-
>
681-
{trans("event.submit")}
682-
</Button>
683-
</Form.Item>
684-
</Form>
685-
</Container>
667+
<Container>
668+
<Formlayout="vertical">
669+
<Rowgutter={16}>
670+
{Object.entries(schema.properties||{}).map(([key,fieldSchema])=>{
671+
constfieldUiSchema=uiSchema?.[key]||{};
672+
constcolSpan=calculateColSpan(fieldUiSchema,containerWidth);
673+
674+
return(
675+
<Colkey={key}{...colSpan}>
676+
{renderField(key,fieldSchema,localData?.[key])}
677+
</Col>
678+
);
679+
})}
680+
</Row>
681+
<Form.Item>
682+
<Button
683+
type="primary"
684+
onClick={handleSubmit}
685+
style={{float:"right"}}
686+
>
687+
{trans("event.submit")}
688+
</Button>
689+
</Form.Item>
690+
</Form>
691+
</Container>
686692
);
687693
};
688694

689-
exportdefaultReact.memo(JsonFormsRenderer);
695+
constcalculateColSpan=(uiSchema:any,containerWidth:number)=>{
696+
constcolSpan=uiSchema?.["ui:colSpan"]||{xs:24,sm:24,md:12,lg:12,xl:8};
697+
if(containerWidth>1200&&colSpan.xl)return{span:colSpan.xl};
698+
if(containerWidth>992&&colSpan.lg)return{span:colSpan.lg};
699+
if(containerWidth>768&&colSpan.md)return{span:colSpan.md};
700+
if(containerWidth>576&&colSpan.sm)return{span:colSpan.sm};
701+
return{span:24};
702+
};
703+
704+
exportdefaultReact.memo(JsonFormsRenderer);

‎client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -483,13 +483,6 @@ let FormBasicComp = (function () {
483483
tooltip:"Define custom error messages for form fields. Use __errors array for field-specific errors.",
484484
})
485485
)
486-
// : (
487-
// children.validationState.propertyView({
488-
// key: "validationState",
489-
// label: trans("jsonSchemaForm.validationState"),
490-
// tooltip: "Current validation state of the form fields. Shows errors and touched state for each field.",
491-
// })
492-
// )
493486
}
494487
</Section>
495488
)}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp