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;