Content-Length: 5782 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1740.patch
thub.com
From f84b565f20191797f50a9546d1b31dba46a49391 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi
Date: Tue, 3 Jun 2025 19:50:01 +0500
Subject: [PATCH] Added support for grids similar to rjsf
---
.../jsonSchemaFormComp/JsonFormsRenderer.tsx | 71 +++++++++++--------
.../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 7 --
2 files changed, 43 insertions(+), 35 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
index cbdab8a0f..bc1eaaf65 100644
--- 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 = ({
schema,
data,
@@ -78,6 +75,7 @@ const JsonFormsRenderer: React.FC = ({
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 = ({
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 = ({
// Fallback to default rendering if not a categorization
return (
-
-
-
+
+
+
);
};
-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);
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index f0b83c4f5..0705a745b 100644
--- 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.",
- // })
- // )
}
)}
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/1740.patch
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy