Updating React JSON Schema Form - and implement Grid System + Select input

Author: FalkWolsky

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button, Row, Col } from 'antd';
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
+import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+
+const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+  const { items, canAdd, onAddClick, title } = props;
+
+  return (
+    <fieldset>
+      {title && <legend>{title}</legend>}
+      <Row gutter={[0, 0]}>
+        {items.map((element: any) => (
+          <Col key={element.index} span={24} style={{ display: 'flex', alignItems: 'center' }}>
+            {/* Content container for the array item */}
+            <div style={{ flexGrow: 1 }}>
+              {element.children}
+            </div>
+
+            {/* Container for the control buttons with vertical alignment */}
+            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: "38px" }}>
+              {/* Move down button */}
+              {element.hasMoveDown && (
+                <Button
+                  type="default"
+                  icon={<ArrowDownOutlined />}
+                  onClick={element.onReorderClick(element.index, element.index + 1)}
+                  style={{ marginLeft: '4px' }}
+                />
+              )}
+
+              {/* Move up button */}
+              {element.hasMoveUp && (
+                <Button
+                  type="default"
+                  icon={<ArrowUpOutlined />}
+                  onClick={element.onReorderClick(element.index, element.index - 1)}
+                  style={{ marginLeft: '4px' }}
+                />
+              )}
+
+              {/* Remove button */}
+              {element.hasRemove && (
+                <Button
+                  type="default"
+                  icon={<DeleteOutlined />}
+                  danger
+                  onClick={element.onDropIndexClick(element.index)}
+                  style={{ marginLeft: '4px' }}
+                />
+              )}
+            </div>
+          </Col>
+        ))}
+        {/* Add button for the array */}
+        {canAdd && (
+          <Col span={24} style={{ textAlign: 'center' }}>
+            <Button type="dashed" onClick={onAddClick} icon={<PlusOutlined />}>
+              Add Item
+            </Button>
+          </Col>
+        )}
+      </Row>
+    </fieldset>
+  );
+};
+
+export default ArrayFieldTemplate;

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import { ObjectFieldTemplateProps, getTemplate, getUiOptions, descriptionId, titleId, canExpand } from '@rjsf/utils';
+import { ConfigConsumer } from 'antd/es/config-provider/context';
+
+const DESCRIPTION_COL_STYLE = {
+  paddingBottom: '8px',
+};
+
+const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+  const {
+    title,
+    description,
+    properties,
+    schema,
+    uiSchema,
+    formData,
+    idSchema,
+    onAddClick,
+    disabled,
+    readonly,
+    registry,
+  } = props;
+
+  const uiOptions = getUiOptions(uiSchema);
+  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  // Define responsive column spans based on the ui:props or fallback to defaults
+  const defaultResponsiveColSpan = {
+    xs: 24, // Extra small devices
+    sm: 24, // Small devices
+    md: 12, // Medium devices
+    lg: 12, // Large devices
+    xl: 8,  // Extra large devices
+  };
+
+  const { rowGutter = 24, colSpan = defaultResponsiveColSpan } = uiSchema?.['ui:props'] || {};
+
+  // Generate responsive colSpan props for each element
+  const calculateResponsiveColSpan = (element: any) => {
+    const { type } = element.content.props.schema;
+    const widget = getUiOptions(element.content.props.uiSchema).widget;
+
+    const defaultSpan = widget === 'textarea' || type === 'object' || type === 'array' ? 24 : colSpan;
+
+    // Ensure the returned object is properly formatted for AntD responsive properties
+    return typeof defaultSpan === 'object' ? defaultSpan : { span: defaultSpan };
+  };
+
+  return (
+    <ConfigConsumer>
+      {(configProps) => (
+        <fieldset id={idSchema.$id}>
+          <Row gutter={rowGutter}>
+            {title && (
+              <Col span={24}>
+                <TitleFieldTemplate id={titleId(idSchema)} title={title} required={props.required} schema={schema} uiSchema={uiSchema} registry={registry} />
+              </Col>
+            )}
+            {description && (
+              <Col span={24} style={DESCRIPTION_COL_STYLE}>
+                <DescriptionFieldTemplate id={descriptionId(idSchema)} description={description} schema={schema} uiSchema={uiSchema} registry={registry} />
+              </Col>
+            )}
+            {uiSchema?.['ui:grid'] && Array.isArray(uiSchema['ui:grid']) ? (
+              uiSchema['ui:grid'].map((ui_row: Record<string, any>) => {
+                return Object.keys(ui_row).map((row_item) => {
+                  const element = properties.find((p) => p.name === row_item);
+                  return element ? (
+                    // Pass responsive colSpan props using the calculated values
+                    <Col key={element.name} {...ui_row[row_item]}>
+                      {element.content}
+                    </Col>
+                  ) : null;
+                });
+              })
+            ) : (
+              properties.map((element) => (
+                <Col key={element.name} {...calculateResponsiveColSpan(element)}>
+                  {element.content}
+                </Col>
+              ))
+            )}
+          </Row>
+          {canExpand(schema, uiSchema, formData) && (
+            <Row justify="end" style={{ marginTop: '24px' }}>
+              <Col>
+                <AddButton className="object-property-expand" onClick={onAddClick(schema)} disabled={disabled || readonly} registry={registry} />
+              </Col>
+            </Row>
+          )}
+        </fieldset>
+      )}
+    </ConfigConsumer>
+  );
+};
+
+export default ObjectFieldTemplate;

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

@@ -1,7 +1,6 @@
 import { withTheme } from '@rjsf/core';
 import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
-// import Ajv from "@rjsf/validator-ajv8";
 import { default as Button } from "antd/es/button";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl";
@@ -25,6 +24,9 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { AutoHeightControl } from "../../controls/autoHeightControl";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
+import { Select } from 'antd';
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -177,6 +179,30 @@ function ErrorList(props: ErrorListProps) {
   );
 }
 
+const SearchableSelectWidget = (props : any) => {
+  const { options, value, required, disabled, readonly, autofocus, onChange } = props;
+  const { enumOptions } = options;
+
+  return (
+    <Select
+      showSearch
+      optionFilterProp="children"
+      value={value || undefined}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      onChange={(val) => onChange(val)}
+      style={{ width: '100%' }}
+      placeholder={props.placeholder}
+    >
+      {enumOptions.map((option : any) => (
+        <Select.Option key={option.value} value={option.value}>
+          {option.label}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};
+
 function onSubmit(props: {
   resetAfterSubmit: boolean;
   data: { reset: () => void };
@@ -227,6 +253,11 @@ let FormBasicComp = (function () {
             onSubmit={() => onSubmit(props)}
             onChange={(e) => props.data.onChange(e.formData)}
             transformErrors={(errors) => transformErrors(errors)}
+            templates={{
+              ObjectFieldTemplate: ObjectFieldTemplate,
+              ArrayFieldTemplate: ArrayFieldTemplate,
+            }}
+            widgets={{ searchableSelect: SearchableSelectWidget }}
             // ErrorList={ErrorList}
             children={
               <Button