diff --git a/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx b/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx
index 880a54f8..28e5d438 100644
--- a/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx
+++ b/src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx
@@ -15,7 +15,7 @@ import {Row} from '../../Layouts';
import {RemoveButton} from '../../RemoveButton';
export const CardOneOf: ObjectIndependentInput = (props) => {
- const {input, meta, spec, name} = props;
+ const {input, meta, spec, name, Layout} = props;
const [open, setOpen] = React.useState(true);
@@ -27,14 +27,19 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
onTogglerChange: onOpen,
});
- const toggler = React.useMemo(
- () => (
-
- {togglerInput}
-
- ),
- [togglerInput, props],
- );
+ const toggler = React.useMemo(() => {
+ const togglerProps = {
+ ...props,
+ name: '__stub-name',
+ children: togglerInput,
+ } as const;
+
+ if (Layout) {
+ return ;
+ }
+
+ return
;
+ }, [togglerInput, props, Layout]);
const actions = React.useMemo(() => {
if (isArrayItem(name)) {
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-chromium-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-chromium-linux.png
new file mode 100644
index 00000000..e5c4a5ba
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-webkit-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-webkit-linux.png
new file mode 100644
index 00000000..561a36b6
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-chromium-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-chromium-linux.png
new file mode 100644
index 00000000..01c0b44d
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-webkit-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-webkit-linux.png
new file mode 100644
index 00000000..e86f8521
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-column-layout-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-chromium-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-chromium-linux.png
new file mode 100644
index 00000000..3e161427
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-webkit-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-webkit-linux.png
new file mode 100644
index 00000000..ddb949db
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-chromium-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-chromium-linux.png
new file mode 100644
index 00000000..24673af6
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-webkit-linux.png b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-webkit-linux.png
new file mode 100644
index 00000000..a4466449
Binary files /dev/null and b/src/lib/kit/components/Inputs/CardOneOf/__snapshots__/CardOneOf.visual.test.tsx-snapshots/Card-OneOf-view-column-layout-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/CardOneOf/__tests__/CardOneOf.visual.test.tsx b/src/lib/kit/components/Inputs/CardOneOf/__tests__/CardOneOf.visual.test.tsx
index ac571f7a..df2f57ad 100644
--- a/src/lib/kit/components/Inputs/CardOneOf/__tests__/CardOneOf.visual.test.tsx
+++ b/src/lib/kit/components/Inputs/CardOneOf/__tests__/CardOneOf.visual.test.tsx
@@ -36,6 +36,20 @@ test.describe('Card OneOf', () => {
await expectScreenshot();
});
+
+ test('column layout', async ({mount, expectScreenshot}) => {
+ const specWithColumnLayout = {
+ ...CARD_ONEOF.default,
+ viewSpec: {
+ ...CARD_ONEOF.default.viewSpec,
+ layout: 'column',
+ },
+ } as const;
+
+ await mount();
+
+ await expectScreenshot();
+ });
});
test.describe('Card OneOf view', () => {
@@ -50,4 +64,18 @@ test.describe('Card OneOf view', () => {
await expectScreenshot();
});
+
+ test('column layout', async ({mount, expectScreenshot}) => {
+ const specWithColumnLayout = {
+ ...CARD_ONEOF.default,
+ viewSpec: {
+ ...CARD_ONEOF.default.viewSpec,
+ layout: 'column',
+ },
+ } as const;
+
+ await mount();
+
+ await expectScreenshot();
+ });
});
diff --git a/src/lib/kit/components/Views/CardOneOfView.tsx b/src/lib/kit/components/Views/CardOneOfView.tsx
index a936bf94..36c8cd17 100644
--- a/src/lib/kit/components/Views/CardOneOfView.tsx
+++ b/src/lib/kit/components/Views/CardOneOfView.tsx
@@ -3,10 +3,10 @@ import React from 'react';
import isObjectLike from 'lodash/isObjectLike';
import {Card, ViewRow} from '../';
-import {ObjectIndependentView, StringSpec, ViewController} from '../../../core';
+import {ObjectIndependentView, ViewController} from '../../../core';
export const CardOneOfView: ObjectIndependentView = (props) => {
- const {value = {}, spec, name} = props;
+ const {value = {}, spec, name, Layout} = props;
const [open, setOpen] = React.useState(true);
@@ -27,14 +27,20 @@ export const CardOneOfView: ObjectIndependentView = (props) => {
);
}, [valueKey, spec.description, specProperties]);
- const title = React.useMemo(
- () => (
-
- <>{valueName}>
-
- ),
- [spec, name, valueName],
- );
+ const title = React.useMemo(() => {
+ const titleProps = {
+ spec: spec,
+ value: valueName as any,
+ name: name,
+ children: <>{valueName}>,
+ } as const;
+
+ if (Layout) {
+ return ;
+ }
+
+ return ;
+ }, [spec, name, valueName, Layout]);
if (!value || !Object.keys(value).length) {
return null;