feat(BooleanOneOf): add new input BooleanOneOf (#182)

Author: NasgulNexus

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
 

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;

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;

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-chromium-linux.png

@@ -50,6 +50,12 @@ test.describe('OneOf', () => {
             await expectScreenshot();
         });
     });
+
+    test('toggler checkbox default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={ONEOF.defaultCheckbox} />);
+
+        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(<DynamicView spec={ONEOF.defaultCheckbox} value={VALUE.object} />);
+
+        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(<DynamicForm spec={ONEOF_FALT.defaultCheckbox} />);
+
+        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(<DynamicView spec={ONEOF_FALT.defaultCheckbox} value={VALUE.string} />);
+
+        await expectScreenshot();
+    });
 });

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-dark-webkit-linux.png

@@ -492,6 +492,73 @@ export const ONEOF: Record<string, ObjectSpec> = {
             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<string, FormValue> = {
@@ -853,4 +920,68 @@ export const ONEOF_FALT: Record<string, ObjectSpec> = {
             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',
+                },
+            },
+        },
+    },
 };

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-chromium-linux.png

@@ -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(() => {

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-toggler-checkbox-default-light-webkit-linux.png

@@ -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<OneOfViewProps> = (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) {

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-chromium-linux.png

@@ -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';

src/lib/kit/components/Inputs/OneOf/__snapshots__/OneOf.visual.test.tsx-snapshots/OneOf-Flat-view-toggler-checkbox-default-dark-webkit-linux.png

@@ -26,4 +26,10 @@
             margin-right: 8px;
         }
     }
+
+    &__checkbox {
+        height: 28px;
+        display: flex;
+        align-items: center;
+    }
 }