From ac66ef271dc3059812f97c0c8ca5d817cd2faf51 Mon Sep 17 00:00:00 2001 From: Michael Shiplet Date: Mon, 16 Sep 2024 11:23:34 -0600 Subject: [PATCH] add ColumnLayoutProps to ControlUISchema (#94) --- package.json | 2 +- src/layouts/HorizontalLayout.tsx | 2 +- src/layouts/render-layout-elements.tsx | 11 ++++++++- src/testSchemas/anyOfSchema.ts | 31 +++++++++++++++++++++++++- src/testSchemas/arraySchema.tsx | 21 +++++++++++++++++ src/testSchemas/enumSchema.ts | 12 ++++++++++ src/testSchemas/numericSchema.ts | 3 +++ src/testSchemas/numericSliderSchema.ts | 21 +++++++++++++++++ src/testSchemas/objectArraySchema.tsx | 6 +++++ src/testSchemas/objectSchema.ts | 18 +++++++++++++++ src/ui-schema.ts | 6 +++++ 11 files changed, 129 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index c86c441..bfee549 100644 --- 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 index 455daa2..ec4c8d6 100644 --- a/src/layouts/HorizontalLayout.tsx +++ b/src/layouts/HorizontalLayout.tsx @@ -27,7 +27,7 @@ export function HorizontalLayout({ return (
{!isEmpty(groupLayout.label) && groupLayout.label} - + { 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 ( - + export const AnyOfTooltipUISchema = { @@ -173,6 +187,9 @@ export const AnyOfTooltipUISchema = { type: "Control", scope: "#/properties/contactMethod", formItemProps: { tooltip: "Choose wisely" }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -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 index 6a90d96..3d6eb42 100644 --- 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 @@ -30,6 +33,9 @@ export const arrayControlSortableUISchema = { options: { showSortButtons: true, }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -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 @@ -64,6 +73,9 @@ export const arrayControlTooltipUISchema = { formItemProps: { tooltip: "Items of value", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -87,6 +99,9 @@ export const arrayControlUISchemaWithIcons = { onClick: () => {}, // User should be unable to override the onClick event }, }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -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 index fb094ce..481e641 100644 --- 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 @@ -71,6 +74,9 @@ export const enumProfessionUISchema = { type: "Control", scope: "#/properties/profession", options: { optionType: "dropdown" }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -82,6 +88,9 @@ export const enumPSIUISchema = { type: "Control", scope: "#/properties/psi", options: { optionType: "radio" }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -100,6 +109,9 @@ export const enumSnakeCaseUISchema = { option_3: "Option 3", }, }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema diff --git a/src/testSchemas/numericSchema.ts b/src/testSchemas/numericSchema.ts index cab0970..f19bdc7 100644 --- 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 diff --git a/src/testSchemas/numericSliderSchema.ts b/src/testSchemas/numericSliderSchema.ts index 655e864..6b56eda 100644 --- 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 @@ -125,6 +128,9 @@ export const numericSliderTooltipUISchema = { formItemProps: { tooltip: "°Kelvin = °Celsius + 273.15 or °Fahrenheit + 459.67", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -135,6 +141,9 @@ export const numericSliderHorizontalUISchema = { { type: "Control", scope: "#/properties/numericRangeValue", + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -148,6 +157,9 @@ export const numericSliderUSDUISchema = { options: { addonBefore: "$", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -161,6 +173,9 @@ export const numericSliderPercentageUISchema = { options: { addonAfter: "%", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -174,6 +189,9 @@ export const numericSliderTemperatureUISchema = { options: { addonAfter: "°F", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -188,6 +206,9 @@ export const numericSliderUISchemaWithRule = { effect: RuleEffect.HIDE, condition: {}, }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema diff --git a/src/testSchemas/objectArraySchema.tsx b/src/testSchemas/objectArraySchema.tsx index 497ee24..f915a7d 100644 --- 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 @@ -70,6 +73,9 @@ export const objectArrayControlUISchemaWithIcons = { onClick: () => {}, // User should be unable to override the onClick event }, }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema diff --git a/src/testSchemas/objectSchema.ts b/src/testSchemas/objectSchema.ts index 7fd9157..d7bbd16 100644 --- 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 @@ -37,6 +40,9 @@ export const objectUISchemaWithTooltip = { formItemProps: { tooltip: "It's what you call yourself", }, + layoutProps: { + columns: undefined, + }, }, ], } satisfies UISchema @@ -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 @@ -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 diff --git a/src/ui-schema.ts b/src/ui-schema.ts index a6b53c5..013f871 100644 --- a/src/ui-schema.ts +++ b/src/ui-schema.ts @@ -45,6 +45,10 @@ interface Labelable { interface Labeled extends Labelable { label: string | T } + +export interface ColumnLayoutProps { + columns?: number +} /** * Common base interface for any UI schema element. */ @@ -79,6 +83,7 @@ export type VerticalLayoutUISchema = LayoutUISchema & { */ export interface HorizontalLayoutUISchema extends LayoutUISchema { type: "HorizontalLayout" + layoutProps?: ColumnLayoutProps } /** * A group resembles a vertical layout, but additionally might have a label. @@ -196,6 +201,7 @@ export type ControlUISchema = UISchemaElement & ControlUISchemaLabel & { type: "Control" formItemProps?: FormItemProps + layoutProps?: ColumnLayoutProps } /** * The category layout.