feat(form): use custom ui:padding prop instead of custom template for schema ui settings

Author: miguelgrc

src/admin/components/Customize.jsx

@@ -75,6 +75,7 @@ const Customize = () => {
       className="scrollableTabs"
       centered
       style={{ height: "100%", width: "100%" }}
+      tabBarStyle={{ marginBottom: "0px" }}
       items={[
         {
           key: "1",

src/admin/formComponents/PropKeyEditorObjectFieldTemplate.jsx

@@ -0,0 +1,36 @@
+import { Collapse, Space } from "antd";
+import { partition } from "lodash-es";
+
+const PropKeyEditorObjectFieldTemplate = ({ properties }) => {
+  const [[uiOptions], otherProps] = partition(
+    properties,
+    (prop) => prop.name === "ui:options",
+  );
+  const elements = [
+    uiOptions,
+    { title: "Field UI Options", content: otherProps },
+  ];
+
+  return uiOptions ? (
+    <div style={{ padding: "10px", width: "100%" }}>
+      <Collapse
+        className="propKeyCollapse"
+        defaultActiveKey={Array.from(Array(properties.length).keys())}
+        expandIconPosition="end"
+        items={elements.map((item, index) => ({
+          key: index,
+          label: item.title || item.content.props.schema.title,
+          children: item.content.length
+            ? item.content.map((i) => i.content)
+            : item.content,
+        }))}
+      />
+    </div>
+  ) : (
+    <Space direction="vertical" style={{ padding: "10px", width: "100%" }}>
+      {properties.map((item) => item.content)}
+    </Space>
+  );
+};
+
+export default PropKeyEditorObjectFieldTemplate;

src/admin/utils/fieldTypes.jsx

@@ -21,8 +21,7 @@ import {
   UploadOutlined,
 } from "@ant-design/icons";
 import { placeholder } from "@codemirror/view";
-import PropKeyEditorObjectFieldTemplate from "../../forms/templates/PropKeyEditorObjectFieldTemplate";
-import UiOptionsObjectFieldTemplate from "../../forms/templates/UiOptionsObjectFieldTemplate";
+import PropKeyEditorObjectFieldTemplate from "../formComponents/PropKeyEditorObjectFieldTemplate";
 
 // COMMON / EXTRA PROPERTIES:
 
@@ -121,7 +120,8 @@ export const common = {
         "ui:widget": "switch",
       },
       "ui:order": ["showAsModal", "modal", "*"],
-      "ui:ObjectFieldTemplate": UiOptionsObjectFieldTemplate,
+      "ui:padding": 0,
+      "ui:label": false,
     },
     "ui:label": {
       "ui:widget": "switch",
@@ -546,6 +546,9 @@ const simple = {
             tooltipIsMarkdown: true,
           },
         },
+        convertToUppercase: {
+          "ui:widget": "switch",
+        },
       },
     },
     default: {

src/forms/Form.less

@@ -162,20 +162,13 @@
     }
   }
 
-  .propKeyCollapse
-    .ant-collapse-content-box
-    fieldset
-    .ant-col
-    .ant-col:last-of-type
-    .ant-form-item:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .propKeyCollapse
-    .ant-collapse-content-box
-    > .form-group:last-of-type
-    > .ant-form-item:last-of-type {
-    margin-bottom: 0;
+  .propKeyCollapse .ant-collapse-content-box {
+    fieldset .ant-col .ant-col:last-of-type .ant-form-item:last-of-type {
+      margin-bottom: 0;
+    }
+    > .form-group:last-of-type > .ant-form-item:last-of-type {
+      margin-bottom: 0;
+    }
   }
 }
 

src/forms/templates/ObjectFieldTemplate.jsx

@@ -22,7 +22,6 @@ const ObjectFieldTemplate = ({
   schema,
   title,
   uiSchema,
-  isUiOptions,
 }) => {
   const {
     colSpan = 24,
@@ -98,12 +97,12 @@ const ObjectFieldTemplate = ({
   return (
     <fieldset
       style={{
-        padding: isUiOptions && 0,
+        padding: uiSchema["ui:padding"],
       }}
       id={idSchema.$id}
     >
       <Row gutter={rowGutter} style={{ margin: 0 }}>
-        {!isUiOptions && (
+        {(uiSchema["ui:label"] || title) && (
           <Col
             style={{
               padding: "0",
@@ -125,7 +124,7 @@ const ObjectFieldTemplate = ({
         <Col
           span={24}
           className="nestedObject"
-          style={{ padding: isUiOptions && 0 }}
+          style={{ padding: uiSchema["ui:padding"] }}
         >
           <Row gutter={10}>
             {properties