Added support for grids similar to rjsf

kamal-qureshi · kamal-qureshi · commit f84b565f2019 · 2025-06-03T19:50:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
@@ -15,13 +15,11 @@ import {
   Steps,
 } from "antd";
 import styled from "styled-components";
-import type { JsonSchema } from "@jsonforms/core";
 import type { JSONSchema7 } from "json-schema";
 import { debounce } from "lodash";
 import dayjs from "dayjs";
 import { trans } from "i18n";
 import type { 
-  JsonFormsUiSchema, 
   FieldUiSchema, 
   Layout, 
   Categorization,
@@ -30,10 +28,14 @@ import type {
   Category,
   Control
 } from "./types";
-import type { SwitchChangeEventHandler } from "antd/es/switch";
+import { useContainerWidth } from "./jsonSchemaFormComp";
+
 const { TextArea } = Input;
 
-const Container = styled.div`
+const Container = styled.div
+`
+  gap: 16px;
+  width: 100%;
   .ant-form-item {
     margin-bottom: 16px;
   }
@@ -62,11 +64,6 @@ const Container = styled.div`
   }
 `;
 
-interface HorizontalLayout {
-  type: "HorizontalLayout";
-  elements: Control[];
-}
-
 const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
   schema,
   data,
@@ -78,6 +75,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
   validationState: externalValidationState,
   onValidationChange,
 }) => {
+  const containerWidth = useContainerWidth();
   // Local state to handle immediate updates
   const [localData, setLocalData] = useState(data);
   // Track focused field
@@ -116,7 +114,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
     if (!uiSchema) return undefined;
     
     // For JSONForms UI schema, we need to find the Control element that matches the path
-    if (uiSchema.type === "HorizontalLayout" && Array.isArray(uiSchema.elements)) {
+    if (Array.isArray(uiSchema.elements)) {
       const control = uiSchema.elements.find((element: any) => {
         if (element.type === "Control") {
           // Convert the scope path to match our field path
@@ -666,24 +664,41 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
 
   // Fallback to default rendering if not a categorization
   return (
-    <Container style={style}>
-      <Form layout="vertical">
-        {Object.entries(schema.properties || {}).map(
-          ([key, fieldSchema]: [string, any]) =>
-            renderField(key, fieldSchema, localData?.[key])
-        )}
-        <Form.Item>
-          <Button
-            type="primary"
-            onClick={handleSubmit}
-            style={{ float: "right" }}
-          >
-            {trans("event.submit")}
-          </Button>
-        </Form.Item>
-      </Form>
-    </Container>
+      <Container>
+        <Form layout="vertical">
+          <Row gutter={16}>
+            {Object.entries(schema.properties || {}).map(([key, fieldSchema]) => {
+              const fieldUiSchema = uiSchema?.[key] || {};
+              const colSpan = calculateColSpan(fieldUiSchema, containerWidth);
+
+              return (
+                <Col key={key} {...colSpan}>
+                  {renderField(key, fieldSchema, localData?.[key])}
+                </Col>
+              );
+            })}
+          </Row>
+          <Form.Item>
+            <Button
+              type="primary"
+              onClick={handleSubmit}
+              style={{ float: "right" }}
+            >
+              {trans("event.submit")}
+            </Button>
+          </Form.Item>
+        </Form>
+      </Container>
   );
 };
 
-export default React.memo(JsonFormsRenderer);
+const calculateColSpan = (uiSchema: any, containerWidth: number) => {
+  const colSpan = uiSchema?.["ui:colSpan"] || { xs: 24, sm: 24, md: 12, lg: 12, xl: 8 };
+  if (containerWidth > 1200 && colSpan.xl) return { span: colSpan.xl };
+  if (containerWidth > 992 && colSpan.lg) return { span: colSpan.lg };
+  if (containerWidth > 768 && colSpan.md) return { span: colSpan.md };
+  if (containerWidth > 576 && colSpan.sm) return { span: colSpan.sm };
+  return { span: 24 }; 
+};
+
+export default React.memo(JsonFormsRenderer);
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -483,13 +483,6 @@ let FormBasicComp = (function () {
                   tooltip: "Define custom error messages for form fields. Use __errors array for field-specific errors.",
                 })
               ) 
-              // : (
-              //   children.validationState.propertyView({
-              //     key: "validationState",
-              //     label: trans("jsonSchemaForm.validationState"),
-              //     tooltip: "Current validation state of the form fields. Shows errors and touched state for each field.",
-              //   })
-              // )
               }
             </Section>
           )}

Original file line number	Diff line number	Diff line change
`@@ -483,13 +483,6 @@ let FormBasicComp = (function () {`
`483`	`483`	`tooltip: "Define custom error messages for form fields. Use __errors array for field-specific errors.",`
`484`	`484`	`})`
`485`	`485`	`)`
`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`		`- // )`
`493`	`486`	`}`
`494`	`487`	`</Section>`
`495`	`488`	`)}`