diff --git a/docs/spec.md b/docs/spec.md index 49c7b4b9..e44813e6 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -145,9 +145,10 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; #### OneOfParams -| Property | Type | Required | Description | -| :------- | :---------------------------- | :------: | :---------- | -| toggler | `'select'` `'radio'` `'card'` | | Switch type | +| Property | Type | Required | Description | +| :--------- | :----------------------------------------- | :------: | :--------------------------------------------- | +| toggler | `'select'` `'radio'` `'card'` `'checkbox'` | | Switch type | +| booleanMap | `Record<'true' 'false', string>` | | Special object for oneof toggler type checkbox | #### FileInput diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index 5a14659b..c4427416 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -117,7 +117,8 @@ export interface ObjectSpec< order?: string[]; link?: LinkType; oneOfParams?: { - toggler?: 'select' | 'radio' | 'card'; + toggler?: 'select' | 'radio' | 'card' | 'checkbox'; + booleanMap?: Record<'true' | 'false', string>; }; placeholder?: string; hidden?: boolean; diff --git a/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx b/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx index e89f0a80..0b4bdaaa 100644 --- a/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx +++ b/src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx @@ -4,8 +4,7 @@ import cloneDeep from 'lodash/cloneDeep'; import set from 'lodash/set'; import {Controller, FieldValue, ObjectIndependentInput, ValidateError} from '../../../../core'; - -const OBJECT_VALUE_PROPERTY_NAME = 'value'; +import {OBJECT_VALUE_PROPERTY_NAME} from '../../../constants/common'; export const ObjectValueInput: ObjectIndependentInput = (props) => { const {spec, input, name, Layout} = props; diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-chromium-linux.png new file mode 100644 index 00000000..6ef8f81e Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-webkit-linux.png new file mode 100644 index 00000000..23257e5a Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-chromium-linux.png new file mode 100644 index 00000000..89f2c2df Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-webkit-linux.png new file mode 100644 index 00000000..c798a5e8 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-chromium-linux.png new file mode 100644 index 00000000..423501a7 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-webkit-linux.png new file mode 100644 index 00000000..3dc79c57 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-chromium-linux.png new file mode 100644 index 00000000..7f70c7cb Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-webkit-linux.png new file mode 100644 index 00000000..98ab7307 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-chromium-linux.png new file mode 100644 index 00000000..d35cb9fd Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-webkit-linux.png new file mode 100644 index 00000000..7106e369 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-chromium-linux.png new file mode 100644 index 00000000..b9483f51 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-webkit-linux.png new file mode 100644 index 00000000..0cdb4337 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-toggler-checkbox-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-chromium-linux.png new file mode 100644 index 00000000..e10c1bc1 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-webkit-linux.png new file mode 100644 index 00000000..cb211c03 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-chromium-linux.png new file mode 100644 index 00000000..e8567968 Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-webkit-linux.png new file mode 100644 index 00000000..41bdfd2e Binary files /dev/null and b/src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-view-toggler-checkbox-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/OneOf/__tests__/OneOf.visual.test.tsx b/src/lib/kit/components/Inputs/OneOf/__tests__/OneOf.visual.test.tsx index cd09c1b2..3ae2ef59 100644 --- a/src/lib/kit/components/Inputs/OneOf/__tests__/OneOf.visual.test.tsx +++ b/src/lib/kit/components/Inputs/OneOf/__tests__/OneOf.visual.test.tsx @@ -50,6 +50,12 @@ test.describe('OneOf', () => { await expectScreenshot(); }); }); + + test('toggler checkbox default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); }); test.describe('OneOf view', () => { @@ -78,6 +84,12 @@ test.describe('OneOf view', () => { await expectScreenshot(); }); }); + + test('toggler checkbox default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); }); test.describe('OneOf Flat', () => { @@ -112,6 +124,12 @@ test.describe('OneOf Flat', () => { await expectScreenshot(); }); }); + + test('toggler checkbox default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); }); test.describe('OneOf Flat view', () => { @@ -140,4 +158,10 @@ test.describe('OneOf Flat view', () => { await expectScreenshot(); }); }); + + test('toggler checkbox default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); }); diff --git a/src/lib/kit/components/Inputs/OneOf/__tests__/helpers.ts b/src/lib/kit/components/Inputs/OneOf/__tests__/helpers.ts index 6db521ba..4a489c7c 100644 --- a/src/lib/kit/components/Inputs/OneOf/__tests__/helpers.ts +++ b/src/lib/kit/components/Inputs/OneOf/__tests__/helpers.ts @@ -492,6 +492,73 @@ export const ONEOF: Record = { order: ['external', 'internal', 'empty'], }, }, + defaultCheckbox: { + type: SpecTypes.Object, + defaultValue: { + external: { + name: 'name', + age: 10, + }, + }, + properties: { + external: { + required: true, + type: SpecTypes.Object, + properties: { + name: { + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Name', + }, + }, + age: { + type: SpecTypes.Number, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Age', + }, + }, + license: { + type: SpecTypes.Boolean, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'License', + }, + }, + }, + viewSpec: { + type: 'base', + layoutTitle: 'Person data', + }, + }, + internal: { + required: true, + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Person id', + }, + }, + }, + viewSpec: { + type: 'oneof', + layout: 'row', + layoutTitle: 'Candidate', + order: ['external', 'internal'], + oneOfParams: { + toggler: 'checkbox', + booleanMap: { + true: 'external', + false: 'internal', + }, + }, + }, + }, }; export const VALUE: Record = { @@ -853,4 +920,68 @@ export const ONEOF_FALT: Record = { order: ['external', 'internal', 'empty'], }, }, + defaultCheckbox: { + type: SpecTypes.Object, + defaultValue: { + internal: 'string', + }, + properties: { + external: { + required: true, + type: SpecTypes.Object, + properties: { + name: { + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Name', + }, + }, + age: { + type: SpecTypes.Number, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Age', + }, + }, + license: { + type: SpecTypes.Boolean, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'License', + }, + }, + }, + viewSpec: { + type: 'base', + layoutTitle: 'Person data', + }, + }, + internal: { + required: true, + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'Person id', + }, + }, + }, + viewSpec: { + type: 'oneof_flat', + layout: 'row', + layoutTitle: 'Candidate', + order: ['external', 'internal'], + oneOfParams: { + toggler: 'checkbox', + booleanMap: { + true: 'external', + false: 'internal', + }, + }, + }, + }, }; diff --git a/src/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.tsx b/src/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.tsx index e41bc6c5..ea89f4f9 100644 --- a/src/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.tsx +++ b/src/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.tsx @@ -3,8 +3,7 @@ import React from 'react'; import cloneDeep from 'lodash/cloneDeep'; import {ObjectIndependentView, ViewController} from '../../../../core'; - -const OBJECT_VALUE_PROPERTY_NAME = 'value'; +import {OBJECT_VALUE_PROPERTY_NAME} from '../../../constants/common'; export const ObjectValueInputView: ObjectIndependentView = ({spec, name, Layout, ...restProps}) => { const childSpec = React.useMemo(() => { diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.tsx b/src/lib/kit/components/Views/OneOfView/OneOfView.tsx index 8e677668..beea040f 100644 --- a/src/lib/kit/components/Views/OneOfView/OneOfView.tsx +++ b/src/lib/kit/components/Views/OneOfView/OneOfView.tsx @@ -4,7 +4,7 @@ import isObjectLike from 'lodash/isObjectLike'; import {GroupIndent} from '../../'; import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core'; -import {block} from '../../../utils'; +import {block, objectKeys} from '../../../utils'; import './OneOfView.scss'; @@ -22,15 +22,30 @@ const OneOfViewComponent: React.FC = (props) => { [spec.properties], ); + const specBooleanMap = React.useMemo( + () => spec.viewSpec.oneOfParams?.booleanMap, + [spec.viewSpec.oneOfParams?.booleanMap], + ); + const valueKey = React.useMemo(() => Object.keys(value)[0], [value]); const valueName = React.useMemo(() => { + if (spec.viewSpec.oneOfParams?.toggler === 'checkbox' && specBooleanMap) { + return objectKeys(specBooleanMap).find((key) => specBooleanMap[key] === valueKey); + } + return ( spec.description?.[valueKey] || specProperties[valueKey]?.viewSpec.layoutTitle || valueKey ); - }, [valueKey, spec.description, specProperties]); + }, [ + valueKey, + spec.description, + specProperties, + spec.viewSpec.oneOfParams?.toggler, + specBooleanMap, + ]); const wrappedValue = React.useMemo(() => { if (Layout) { diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts index be8db571..acfcff4d 100644 --- a/src/lib/kit/constants/common.ts +++ b/src/lib/kit/constants/common.ts @@ -3,3 +3,5 @@ import type {PopoverProps} from '@gravity-ui/uikit'; export const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top']; export const COMMON_TITLE_MAX_WIDTH = 533; + +export const OBJECT_VALUE_PROPERTY_NAME = 'value'; diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.scss b/src/lib/kit/hooks/useOneOf/useOneOf.scss index 3571bc9a..d8a18789 100644 --- a/src/lib/kit/hooks/useOneOf/useOneOf.scss +++ b/src/lib/kit/hooks/useOneOf/useOneOf.scss @@ -26,4 +26,10 @@ margin-right: 8px; } } + + &__checkbox { + height: 28px; + display: flex; + align-items: center; + } } diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.tsx b/src/lib/kit/hooks/useOneOf/useOneOf.tsx index 6ce2124e..22c2933f 100644 --- a/src/lib/kit/hooks/useOneOf/useOneOf.tsx +++ b/src/lib/kit/hooks/useOneOf/useOneOf.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import {RadioButton, Select} from '@gravity-ui/uikit'; +import {Checkbox, RadioButton, Select} from '@gravity-ui/uikit'; import isObjectLike from 'lodash/isObjectLike'; import some from 'lodash/some'; import {ObjectIndependentInputProps} from '../../../core'; import {TogglerCard} from '../../components'; -import {block} from '../../utils'; +import {block, objectKeys} from '../../utils'; import './useOneOf.scss'; @@ -27,6 +27,11 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { [spec.properties], ); + const specBooleanMap = React.useMemo( + () => spec.viewSpec.oneOfParams?.booleanMap, + [spec.viewSpec.oneOfParams?.booleanMap], + ); + const [oneOfValue, setOneOfValue] = React.useState(() => { let valueKeys: string[] | undefined; @@ -52,6 +57,30 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { [setOneOfValue, input.onChange, oneOfValue], ); + const onCheckboxChange = React.useCallback( + (checked: boolean) => { + if (specBooleanMap) { + const value = String(checked) as 'true' | 'false'; + const newValue = specBooleanMap[value]; + + onOneOfChange([newValue]); + } + }, + [onOneOfChange, specBooleanMap], + ); + + const checkboxValue = React.useMemo(() => { + if (specBooleanMap) { + const keyBooleanMap = objectKeys(specBooleanMap).find( + (key) => specBooleanMap[key] === oneOfValue, + ); + + return keyBooleanMap === 'true'; + } + + return undefined; + }, [oneOfValue, specBooleanMap]); + const options = React.useMemo( () => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => { @@ -84,8 +113,16 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { return 'select'; } + if ( + spec.viewSpec.oneOfParams?.toggler === 'checkbox' && + options.length === 2 && + specBooleanMap + ) { + return 'checkbox'; + } + return 'radio'; - }, [options, spec.viewSpec.oneOfParams?.toggler]); + }, [options, spec.viewSpec.oneOfParams?.toggler, specBooleanMap]); const togglerInput = React.useMemo(() => { if (togglerType === 'card') { @@ -126,6 +163,19 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { ); } + if (togglerType === 'checkbox') { + return ( +
+ +
+ ); + } + return ( { togglerType, oneOfValue, spec.viewSpec.disabled, + spec.description, name, options, onOneOfChange, specProperties, + onCheckboxChange, + checkboxValue, ]); const toggler = React.useMemo(() => { diff --git a/src/lib/kit/utils/index.ts b/src/lib/kit/utils/index.ts index cc72e81d..7d22dc3a 100644 --- a/src/lib/kit/utils/index.ts +++ b/src/lib/kit/utils/index.ts @@ -2,3 +2,4 @@ export * from './cn'; export * from './common'; export * from './bigIntMath'; export * from './objectInline'; +export * from './objectKeys'; diff --git a/src/lib/kit/utils/objectKeys.ts b/src/lib/kit/utils/objectKeys.ts new file mode 100644 index 00000000..b5bcbdb3 --- /dev/null +++ b/src/lib/kit/utils/objectKeys.ts @@ -0,0 +1,7 @@ +type Dictionary = Record; + +type KeysOf = T extends Dictionary ? `${Exclude}` : never; + +export function objectKeys>(obj: T) { + return Object.keys(obj) as Array>; +} diff --git a/src/stories/ObjectOneOf.stories.tsx b/src/stories/ObjectOneOf.stories.tsx index adf16ad5..48647065 100644 --- a/src/stories/ObjectOneOf.stories.tsx +++ b/src/stories/ObjectOneOf.stories.tsx @@ -71,3 +71,47 @@ const template = (spec: ObjectSpec = baseSpec) => { }; export const OneOf = template(); + +export const OneOfCheckbox = template({ + ...baseSpec, + properties: { + internal: { + required: true, + type: SpecTypes.String, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Person id'}, + }, + external: { + required: true, + type: SpecTypes.Object, + properties: { + name: { + type: SpecTypes.String, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Name'}, + }, + age: { + type: SpecTypes.Number, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Age'}, + }, + license: { + type: SpecTypes.Boolean, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'License'}, + }, + }, + viewSpec: { + type: 'base', + layoutTitle: 'Person data', + }, + }, + }, + viewSpec: { + ...baseSpec.viewSpec, + order: ['external', 'internal'], + oneOfParams: { + toggler: 'checkbox', + booleanMap: { + true: 'external', + false: 'internal', + }, + }, + }, +}); diff --git a/src/stories/ObjectOneOfFlat.stories.tsx b/src/stories/ObjectOneOfFlat.stories.tsx index 62dd50be..1907950d 100644 --- a/src/stories/ObjectOneOfFlat.stories.tsx +++ b/src/stories/ObjectOneOfFlat.stories.tsx @@ -71,3 +71,47 @@ const template = (spec: ObjectSpec = baseSpec) => { }; export const OneOfFlat = template(); + +export const OneOfFlatCheckbox = template({ + ...baseSpec, + properties: { + empty: { + required: true, + type: SpecTypes.Object, + viewSpec: {type: 'base', layoutTitle: 'Empty'}, + }, + external: { + required: true, + type: SpecTypes.Object, + properties: { + name: { + type: SpecTypes.String, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Name'}, + }, + age: { + type: SpecTypes.Number, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Age'}, + }, + license: { + type: SpecTypes.Boolean, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'License'}, + }, + }, + viewSpec: { + type: 'base', + layoutTitle: 'Person data', + }, + }, + }, + viewSpec: { + ...baseSpec.viewSpec, + order: ['empty', 'external'], + oneOfParams: { + toggler: 'checkbox', + booleanMap: { + true: 'external', + false: 'empty', + }, + }, + }, +}); diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts index 68cbdd85..7f86190f 100644 --- a/src/stories/components/InputPreview/constants.ts +++ b/src/stories/components/InputPreview/constants.ts @@ -390,9 +390,36 @@ const oneOfParams: ObjectSpec = { properties: { toggler: { type: SpecTypes.String, - enum: ['―', 'radio', 'select', 'card'], + enum: ['―', 'radio', 'select', 'card', 'checkbox'], viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Switch type'}, }, + booleanMap: { + type: SpecTypes.Object, + properties: { + true: { + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'True property', + }, + }, + false: { + type: SpecTypes.String, + viewSpec: { + type: 'base', + layout: 'row', + layoutTitle: 'False property', + }, + }, + }, + viewSpec: { + type: 'base', + layout: 'accordeon', + layoutTitle: 'Boolean Map', + layoutOpen: true, + }, + }, }, viewSpec: { type: 'base',