feat: update inputs (#187)

docs/spec.md

@@ -94,6 +94,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.oneOfParams       | `object`                 |          | [Parameters](#oneofparams) that must be passed to oneof input                                                                                                                           |
 | viewSpec.placeholder       | `string`                 |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
 | viewSpec.hidden            | `boolean`                |          | Hide field and view                                                                                                                                                                     |
+| viewSpec.delimiter         | `Record<string, string>` |          | Values of delimiters of inline object input elements                                                                                                                                    |
 
 ### StringSpec
 
@@ -144,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

@@ -118,12 +118,14 @@ 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;
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        delimiter?: Record<string, string>;
     };
 }
 

src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss

@@ -16,4 +16,11 @@
             }
         }
     }
+
+    &__delimiter {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        white-space: nowrap;
+    }
 }

src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import {Plus} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
-import _ from 'lodash';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+import isObjectLike from 'lodash/isObjectLike';
+import set from 'lodash/set';
 
 import {
     Controller,
@@ -53,7 +54,7 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
         (childName: string, childValue: FieldValue, childErrors?: Record<string, ValidateError>) =>
             restProps.input.onChange(
                 (currentValue) =>
-                    _.set(
+                    set(
                         {...currentValue},
                         childName.split(`${restProps.input.name}.`).join(''),
                         childValue,
@@ -66,7 +67,7 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
     const content = React.useMemo(() => {
         if (
             !spec.properties ||
-            !_.isObjectLike(spec.properties) ||
+            !isObjectLike(spec.properties) ||
             !Object.keys(spec.properties || {}).length
         ) {
             return null;
@@ -80,24 +81,32 @@ export const ObjectBase: React.FC<ObjectBaseProps> = ({
             ? filterPropertiesForObjectInline(spec.properties)
             : spec.properties;
 
+        const delimiter = spec.viewSpec.delimiter;
+        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+
         return (
             <div className={b('content', {inline})}>
-                {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
+                {orderProperties.map((property: string) =>
                     specProperties[property] ? (
-                        <Controller
-                            value={restProps.input.value?.[property]}
-                            spec={specProperties[property]}
-                            name={`${name ? name + '.' : ''}${property}`}
-                            parentOnChange={parentOnChange}
-                            parentOnUnmount={restProps.input.parentOnUnmount}
-                            key={`${name ? name + '.' : ''}${property}`}
-                        />
+                        <React.Fragment key={`${name ? name + '.' : ''}${property}`}>
+                            <Controller
+                                value={restProps.input.value?.[property]}
+                                spec={specProperties[property]}
+                                name={`${name ? name + '.' : ''}${property}`}
+                                parentOnChange={parentOnChange}
+                                parentOnUnmount={restProps.input.parentOnUnmount}
+                            />
+                            {delimiter && delimiter[property] ? (
+                                <Text className={b('delimiter')}>{delimiter[property]}</Text>
+                            ) : null}
+                        </React.Fragment>
                     ) : null,
                 )}
             </div>
         );
     }, [
         spec.properties,
+        spec.viewSpec.delimiter,
         spec.viewSpec.order,
         restProps.input.value,
         restProps.input.parentOnUnmount,

src/lib/kit/components/Inputs/ObjectBase/__tests__/ObjectBase.visual.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {OBJECT_BASE, VALUE} from './helpers';
+import {OBJECT_BASE, OBJECT_INLINE, VALUE, VALUE_INLINE} from './helpers';
 
 import {test} from '~playwright/core';
 import {DynamicForm} from '~playwright/core/DynamicForm';
@@ -75,8 +75,36 @@ test.describe('Object Base', () => {
     });
 });
 
+test.describe('Object Inline', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={OBJECT_INLINE.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('delimiter', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={OBJECT_INLINE.delimiter} />);
+
+        await expectScreenshot();
+    });
+});
+
 test('Object Base view', async ({mount, expectScreenshot}) => {
     await mount(<DynamicView spec={OBJECT_BASE.default} value={VALUE} />);
 
     await expectScreenshot();
 });
+
+test.describe('Object Inline view', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={OBJECT_INLINE.default} value={VALUE_INLINE} />);
+
+        await expectScreenshot();
+    });
+
+    test('delimiter', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={OBJECT_INLINE.delimiter} value={VALUE_INLINE} />);
+
+        await expectScreenshot();
+    });
+});

src/lib/kit/components/Inputs/ObjectBase/__tests__/helpers.ts

@@ -408,7 +408,73 @@ export const OBJECT_BASE: Record<string, ObjectSpec> = {
     },
 };
 
+export const OBJECT_INLINE: Record<string, ObjectSpec> = {
+    default: {
+        type: SpecTypes.Object,
+        defaultValue: {type: 'first', name: 'Name'},
+        properties: {
+            type: {
+                type: SpecTypes.String,
+                enum: ['first', 'second', 'third'],
+                viewSpec: {
+                    type: 'select',
+                    placeholder: 'Choose type',
+                    layout: 'transparent',
+                    layoutTitle: 'Type',
+                },
+            },
+            name: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'base',
+                    placeholder: 'Type your name',
+                    layout: 'transparent',
+                    layoutTitle: 'Name',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'inline',
+            layout: 'row',
+            layoutTitle: 'Candidate',
+        },
+    },
+    delimiter: {
+        type: SpecTypes.Object,
+        defaultValue: {type: 'first', name: 'Name'},
+        properties: {
+            type: {
+                type: SpecTypes.String,
+                enum: ['first', 'second', 'third'],
+                viewSpec: {
+                    type: 'select',
+                    placeholder: 'Choose type',
+                    layout: 'transparent',
+                    layoutTitle: 'Type',
+                },
+            },
+            name: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'base',
+                    placeholder: 'Type your name',
+                    layout: 'transparent',
+                    layoutTitle: 'Name',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'inline',
+            layout: 'row',
+            layoutTitle: 'Candidate',
+            delimiter: {type: ':'},
+        },
+    },
+};
+
 export const VALUE: FormValue = {
     name: 'name',
     age: 10,
 };
+
+export const VALUE_INLINE: FormValue = {type: 'first', name: 'Name'};

src/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import _ from 'lodash';
 
 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/__tests__/OneOf.visual.test.tsx

@@ -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();
+    });
 });