add ColumnLayoutProps to ControlUISchema (#94)

great-expectations · Sep 16, 2024 · ac66ef2 · ac66ef2
1 parent 6f852f8
commit ac66ef2
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "prepack": "pnpm run build",
     "test": "vitest",
-    "test:cov": "vitest run --coverage --reporter=junit --outputFile=./junit.xml",
+    "test:cov": "VITE_CJS_IGNORE_WARNING=true vitest run --coverage --reporter=junit --outputFile=./junit.xml",
     "tsc": "tsc",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format:write": "prettier . --write",

diff --git a/src/layouts/HorizontalLayout.tsx b/src/layouts/HorizontalLayout.tsx
@@ -27,7 +27,7 @@ export function HorizontalLayout({
   return (
     <Form component={form ? false : "form"} form={form}>
       {!isEmpty(groupLayout.label) && groupLayout.label}
-      <Row justify="space-between" gutter={12}>
+      <Row justify="space-between" gutter={12} align="middle">
         <AntDLayout
           {...childProps}
           direction="row"

diff --git a/src/layouts/render-layout-elements.tsx b/src/layouts/render-layout-elements.tsx
@@ -6,6 +6,7 @@ import {
 } from "@jsonforms/core"
 import { JsonFormsDispatch } from "@jsonforms/react"
 import { Col } from "antd"
+import { ColumnLayoutProps } from "../ui-schema"
 
 export const renderLayoutElements = (
   elements: UISchemaElement[],
@@ -17,9 +18,17 @@ export const renderLayoutElements = (
   direction?: "row" | "column",
 ) => {
   return elements.map((child, index) => {
+    const cols = {
+      xs: 24,
+      sm: 12,
+    }
+    if ("layoutProps" in child) {
+      cols.sm = (child.layoutProps as ColumnLayoutProps).columns ?? 12
+    }
+
     if (direction === "row") {
       return (
-        <Col key={`${path}-${index}`} xs={24} sm={12}>
+        <Col key={`${path}-${index}`} xs={cols.xs} sm={cols.sm}>
           <JsonFormsDispatch
             key={`${path}-${index}`}
             uischema={child}

diff --git a/src/testSchemas/anyOfSchema.ts b/src/testSchemas/anyOfSchema.ts
@@ -15,6 +15,9 @@ const splitterUISchema: UISchema<
       type: "Control",
       scope: "#/properties/column_name",
       label: "Column of datetime type",
+      layoutProps: {
+        columns: undefined,
+      },
     },
     {
       type: "Control",
@@ -23,6 +26,9 @@ const splitterUISchema: UISchema<
         effect: RuleEffect.HIDE,
         condition: {},
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 }
@@ -163,7 +169,15 @@ export const AnyOfWithDefaultsSchema = {
 
 export const AnyOfWithDefaultsBaseUISchema = {
   type: "VerticalLayout",
-  elements: [{ type: "Control", scope: "#/properties/contactMethod" }],
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/contactMethod",
+      layoutProps: {
+        columns: undefined,
+      },
+    },
+  ],
 } satisfies UISchema<typeof AnyOfWithDefaultsSchema>
 
 export const AnyOfTooltipUISchema = {
@@ -173,6 +187,9 @@ export const AnyOfTooltipUISchema = {
       type: "Control",
       scope: "#/properties/contactMethod",
       formItemProps: { tooltip: "Choose wisely" },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof AnyOfWithDefaultsSchema>
@@ -184,6 +201,9 @@ const AnyOfWithDefaultsUISchema1 = {
       type: "Control",
       scope: "#/properties/pattern",
       label: "Pattern",
+      layoutProps: {
+        columns: undefined,
+      },
     },
     {
       type: "Control",
@@ -192,6 +212,9 @@ const AnyOfWithDefaultsUISchema1 = {
         effect: RuleEffect.HIDE,
         condition: {},
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<
@@ -204,6 +227,9 @@ const AnyOfWithDefaultsUISchema2 = {
       type: "Control",
       scope: "#/properties/phoneNumber",
       label: "Phone Number",
+      layoutProps: {
+        columns: undefined,
+      },
     },
     {
       type: "Control",
@@ -212,6 +238,9 @@ const AnyOfWithDefaultsUISchema2 = {
         effect: RuleEffect.HIDE,
         condition: {},
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<

diff --git a/src/testSchemas/arraySchema.tsx b/src/testSchemas/arraySchema.tsx
@@ -17,6 +17,9 @@ export const arrayControlUISchema = {
     {
       type: "Control",
       scope: "#/properties/assets",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -30,6 +33,9 @@ export const arrayControlSortableUISchema = {
       options: {
         showSortButtons: true,
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -51,6 +57,9 @@ export const arrayControlSortableWithIconsUISchema = {
           onClick: () => {}, // Testing to verify this isn't called because the user should be unable to override the onClick event
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -64,6 +73,9 @@ export const arrayControlTooltipUISchema = {
       formItemProps: {
         tooltip: "Items of value",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -87,6 +99,9 @@ export const arrayControlUISchemaWithIcons = {
           onClick: () => {}, // User should be unable to override the onClick event
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -260,6 +275,9 @@ const objectArrayWithCombinatorUISchema = {
       scope: "#/properties/brownCopperKettle",
       label: "Brown Copper Kettle",
       type: "Control",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<
@@ -294,5 +312,8 @@ export const objectArrayWithCombinator_CombinatorUISchemaRegistryEntry: JsonForm
           FavoriteThing2: "Favorite Thing 2",
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     } satisfies ControlUISchema<{ oneOf: [] }> as UISchemaElement,
   }
diff --git a/src/testSchemas/enumSchema.ts b/src/testSchemas/enumSchema.ts
@@ -60,6 +60,9 @@ export const enumSizeUISchema = {
       type: "Control",
       scope: "#/properties/size",
       options: { optionType: "segmented" },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof enumSizeSchema>
@@ -71,6 +74,9 @@ export const enumProfessionUISchema = {
       type: "Control",
       scope: "#/properties/profession",
       options: { optionType: "dropdown" },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof enumProfessionSchema>
@@ -82,6 +88,9 @@ export const enumPSIUISchema = {
       type: "Control",
       scope: "#/properties/psi",
       options: { optionType: "radio" },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof enumPSISchema>
@@ -100,6 +109,9 @@ export const enumSnakeCaseUISchema = {
           option_3: "Option 3",
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof enumSnakeCaseSchema>
diff --git a/src/testSchemas/numericSchema.ts b/src/testSchemas/numericSchema.ts
@@ -109,6 +109,9 @@ export const numericHorizontalUISchema = {
     {
       type: "Control",
       scope: "#/properties/numericValue",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericROISchema>

diff --git a/src/testSchemas/numericSliderSchema.ts b/src/testSchemas/numericSliderSchema.ts
@@ -109,6 +109,9 @@ export const numericSliderVerticalUISchema = {
     {
       type: "Control",
       scope: "#/properties/numericRangeValue",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
@@ -125,6 +128,9 @@ export const numericSliderTooltipUISchema = {
       formItemProps: {
         tooltip: "°Kelvin = °Celsius + 273.15 or °Fahrenheit + 459.67",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderTemperatureSchema>
@@ -135,6 +141,9 @@ export const numericSliderHorizontalUISchema = {
     {
       type: "Control",
       scope: "#/properties/numericRangeValue",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
@@ -148,6 +157,9 @@ export const numericSliderUSDUISchema = {
       options: {
         addonBefore: "$",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
@@ -161,6 +173,9 @@ export const numericSliderPercentageUISchema = {
       options: {
         addonAfter: "%",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
@@ -174,6 +189,9 @@ export const numericSliderTemperatureUISchema = {
       options: {
         addonAfter: "°F",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
@@ -188,6 +206,9 @@ export const numericSliderUISchemaWithRule = {
         effect: RuleEffect.HIDE,
         condition: {},
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof numericSliderDonateNowSchema>
diff --git a/src/testSchemas/objectArraySchema.tsx b/src/testSchemas/objectArraySchema.tsx
@@ -8,6 +8,9 @@ export const objectArrayControlUISchema = {
     {
       scope: "#/properties/assets",
       type: "Control",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchema>
@@ -70,6 +73,9 @@ export const objectArrayControlUISchemaWithIcons = {
           onClick: () => {}, // User should be unable to override the onClick event
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectArrayControlJsonSchemaWithRequired>
diff --git a/src/testSchemas/objectSchema.ts b/src/testSchemas/objectSchema.ts
@@ -24,6 +24,9 @@ export const objectUISchemaWithName = {
     {
       type: "Control",
       scope: "#/properties/name",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectSchema>
@@ -37,6 +40,9 @@ export const objectUISchemaWithTooltip = {
       formItemProps: {
         tooltip: "It's what you call yourself",
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectSchema>
@@ -47,10 +53,16 @@ export const objectUISchemaWithNameAndLastName = {
     {
       type: "Control",
       scope: "#/properties/name",
+      layoutProps: {
+        columns: undefined,
+      },
     },
     {
       type: "Control",
       scope: "#/properties/lastName",
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectSchema>
@@ -61,6 +73,9 @@ export const objectUISchemaWithRule = {
     {
       type: "Control",
       scope: "#/properties/name",
+      layoutProps: {
+        columns: undefined,
+      },
     },
     {
       type: "Control",
@@ -72,6 +87,9 @@ export const objectUISchemaWithRule = {
           schema: { const: "John" },
         },
       },
+      layoutProps: {
+        columns: undefined,
+      },
     },
   ],
 } satisfies UISchema<typeof objectSchema>