feat(Delimiter): add delimiter for object inline (#181)

gravity-ui · Mar 13, 2024 · 5012d5d · 5012d5d
1 parent 5d4e7d2
commit 5012d5d
Show file tree

Hide file tree

Showing 36 changed files with 232 additions and 36 deletions.
diff --git a/docs/spec.md b/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
 

diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -123,6 +123,7 @@ export interface ObjectSpec<
         hidden?: boolean;
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        delimiter?: Record<string, string>;
     };
 }
 

diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
@@ -16,4 +16,11 @@
             }
         }
     }
+
+    &__delimiter {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        white-space: nowrap;
+    }
 }
diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Plus} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
 import isObjectLike from 'lodash/isObjectLike';
 import set from 'lodash/set';
 
@@ -81,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,

diff --git a/...ectBase.visual.test.tsx-snapshots/Object-Inline-default-dark-chromium-linux.png b/...ectBase.visual.test.tsx-snapshots/Object-Inline-default-dark-chromium-linux.png
diff --git a/...bjectBase.visual.test.tsx-snapshots/Object-Inline-default-dark-webkit-linux.png b/...bjectBase.visual.test.tsx-snapshots/Object-Inline-default-dark-webkit-linux.png
diff --git a/...ctBase.visual.test.tsx-snapshots/Object-Inline-default-light-chromium-linux.png b/...ctBase.visual.test.tsx-snapshots/Object-Inline-default-light-chromium-linux.png
diff --git a/...jectBase.visual.test.tsx-snapshots/Object-Inline-default-light-webkit-linux.png b/...jectBase.visual.test.tsx-snapshots/Object-Inline-default-light-webkit-linux.png
diff --git a/...tBase.visual.test.tsx-snapshots/Object-Inline-delimiter-dark-chromium-linux.png b/...tBase.visual.test.tsx-snapshots/Object-Inline-delimiter-dark-chromium-linux.png
diff --git a/...ectBase.visual.test.tsx-snapshots/Object-Inline-delimiter-dark-webkit-linux.png b/...ectBase.visual.test.tsx-snapshots/Object-Inline-delimiter-dark-webkit-linux.png
diff --git a/...Base.visual.test.tsx-snapshots/Object-Inline-delimiter-light-chromium-linux.png b/...Base.visual.test.tsx-snapshots/Object-Inline-delimiter-light-chromium-linux.png
diff --git a/...ctBase.visual.test.tsx-snapshots/Object-Inline-delimiter-light-webkit-linux.png b/...ctBase.visual.test.tsx-snapshots/Object-Inline-delimiter-light-webkit-linux.png
diff --git a/...se.visual.test.tsx-snapshots/Object-Inline-view-default-dark-chromium-linux.png b/...se.visual.test.tsx-snapshots/Object-Inline-view-default-dark-chromium-linux.png
diff --git a/...Base.visual.test.tsx-snapshots/Object-Inline-view-default-dark-webkit-linux.png b/...Base.visual.test.tsx-snapshots/Object-Inline-view-default-dark-webkit-linux.png
diff --git a/...e.visual.test.tsx-snapshots/Object-Inline-view-default-light-chromium-linux.png b/...e.visual.test.tsx-snapshots/Object-Inline-view-default-light-chromium-linux.png
diff --git a/...ase.visual.test.tsx-snapshots/Object-Inline-view-default-light-webkit-linux.png b/...ase.visual.test.tsx-snapshots/Object-Inline-view-default-light-webkit-linux.png
diff --git a/....visual.test.tsx-snapshots/Object-Inline-view-delimiter-dark-chromium-linux.png b/....visual.test.tsx-snapshots/Object-Inline-view-delimiter-dark-chromium-linux.png
diff --git a/...se.visual.test.tsx-snapshots/Object-Inline-view-delimiter-dark-webkit-linux.png b/...se.visual.test.tsx-snapshots/Object-Inline-view-delimiter-dark-webkit-linux.png
diff --git a/...visual.test.tsx-snapshots/Object-Inline-view-delimiter-light-chromium-linux.png b/...visual.test.tsx-snapshots/Object-Inline-view-delimiter-light-chromium-linux.png
diff --git a/...e.visual.test.tsx-snapshots/Object-Inline-view-delimiter-light-webkit-linux.png b/...e.visual.test.tsx-snapshots/Object-Inline-view-delimiter-light-webkit-linux.png
diff --git a/src/lib/kit/components/Inputs/ObjectBase/__tests__/ObjectBase.visual.test.tsx b/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();
+    });
+});
diff --git a/src/lib/kit/components/Inputs/ObjectBase/__tests__/helpers.ts b/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'};
diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss
@@ -16,4 +16,11 @@
             }
         }
     }
+
+    &__delimiter {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        white-space: nowrap;
+    }
 }
diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import isObjectLike from 'lodash/isObjectLike';
+import {Text} from '@gravity-ui/uikit';
 
 import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core';
 import {block, filterPropertiesForObjectInline} from '../../../utils';
@@ -20,29 +21,38 @@ export const ObjectBaseView: React.FC<ObjectBaseViewProps> = ({
     Layout,
     ...restProps
 }) => {
-    if (!spec.properties || !isObjectLike(spec.properties)) {
-        return null;
-    }
+    const content = React.useMemo(() => {
+        if (!spec.properties || !isObjectLike(spec.properties)) {
+            return null;
+        }
 
-    const specProperties = inline
-        ? filterPropertiesForObjectInline(spec.properties)
-        : spec.properties;
-
-    const content = (
-        <div className={b('content', {inline})}>
-            {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
-                specProperties[property] ? (
-                    <ViewController
-                        spec={specProperties[property]}
-                        name={`${name ? name + '.' : ''}${property}`}
-                        key={`${name ? name + '.' : ''}${property}`}
-                    />
-                ) : null,
-            )}
-        </div>
-    );
+        const specProperties = inline
+            ? filterPropertiesForObjectInline(spec.properties)
+            : spec.properties;
+
+        const delimiter = spec.viewSpec.delimiter;
+        const orderProperties = spec.viewSpec.order || Object.keys(specProperties);
+
+        return (
+            <div className={b('content', {inline})}>
+                {orderProperties.map((property: string) =>
+                    specProperties[property] ? (
+                        <React.Fragment key={`${name ? name + '.' : ''}${property}`}>
+                            <ViewController
+                                spec={specProperties[property]}
+                                name={`${name ? name + '.' : ''}${property}`}
+                            />
+                            {delimiter && delimiter[property] ? (
+                                <Text className={b('delimiter')}>{delimiter[property]}</Text>
+                            ) : null}
+                        </React.Fragment>
+                    ) : null,
+                )}
+            </div>
+        );
+    }, [inline, name, spec.properties, spec.viewSpec.delimiter, spec.viewSpec.order]);
 
-    if (!Layout) {
+    if (!Layout || !content) {
         return content;
     }
 

diff --git a/src/stories/ObjectBase.stories.tsx b/src/stories/ObjectBase.stories.tsx
@@ -37,7 +37,12 @@ const baseSpec: ObjectSpec = {
 
 const value = {name: 'Foo', age: 13, license: false};
 
-const excludeOptions = ['description', 'viewSpec.type', 'viewSpec.oneOfParams'];
+const excludeOptions = [
+    'description',
+    'viewSpec.type',
+    'viewSpec.oneOfParams',
+    'viewSpec.delimiter',
+];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: StoryFn<typeof ObjectBase> = (__, {viewMode}) => (

diff --git a/src/stories/ObjectCardOneOf.stories.tsx b/src/stories/ObjectCardOneOf.stories.tsx
@@ -59,7 +59,7 @@ const baseSpec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder'];
+const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder', 'viewSpec.delimiter'];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: StoryFn<typeof CardOneOfBase> = (__, {viewMode}) => (

diff --git a/src/stories/ObjectInline.stories.tsx b/src/stories/ObjectInline.stories.tsx
@@ -45,6 +45,10 @@ const baseSpec: ObjectSpec = {
         type: 'inline',
         layout: 'row',
         layoutTitle: 'Candidate',
+        delimiter: {
+            type: ':',
+            name: '-',
+        },
     },
 };
 

diff --git a/src/stories/ObjectMultiOneOf.stories.tsx b/src/stories/ObjectMultiOneOf.stories.tsx
@@ -61,6 +61,7 @@ const excludeOptions = [
     'viewSpec.itemLabel',
     'viewSpec.table',
     'viewSpec.oneOfParams',
+    'viewSpec.delimiter',
 ];
 
 const value = {

diff --git a/src/stories/ObjectMultiOneOfFlat.stories.tsx b/src/stories/ObjectMultiOneOfFlat.stories.tsx
@@ -61,6 +61,7 @@ const excludeOptions = [
     'viewSpec.itemLabel',
     'viewSpec.table',
     'viewSpec.oneOfParams',
+    'viewSpec.delimiter',
 ];
 
 const value = {

diff --git a/src/stories/ObjectOneOf.stories.tsx b/src/stories/ObjectOneOf.stories.tsx
@@ -60,7 +60,7 @@ const baseSpec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder'];
+const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder', 'viewSpec.delimiter'];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: StoryFn<typeof OneOfBase> = (__, {viewMode}) => (

diff --git a/src/stories/ObjectOneOfFlat.stories.tsx b/src/stories/ObjectOneOfFlat.stories.tsx
@@ -60,7 +60,7 @@ const baseSpec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder'];
+const excludeOptions = ['viewSpec.type', 'viewSpec.placeholder', 'viewSpec.delimiter'];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: StoryFn<typeof OneOfFlatBase> = (__, {viewMode}) => (

diff --git a/src/stories/ObjectSecret.stories.tsx b/src/stories/ObjectSecret.stories.tsx
@@ -35,6 +35,7 @@ const excludeOptions = [
     'viewSpec.disabled',
     'viewSpec.oneOfParams',
     'viewSpec.placeholder',
+    'viewSpec.delimiter',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

diff --git a/src/stories/ObjectTextLink.stories.tsx b/src/stories/ObjectTextLink.stories.tsx
@@ -40,6 +40,7 @@ const excludeOptions = [
     'viewSpec.disabled',
     'viewSpec.oneOfParams',
     'viewSpec.placeholder',
+    'viewSpec.delimiter',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

diff --git a/src/stories/ObjectValue.stories.tsx b/src/stories/ObjectValue.stories.tsx
@@ -37,6 +37,7 @@ const excludeOptions = [
     'viewSpec.disabled',
     'viewSpec.oneOfParams',
     'viewSpec.placeholder',
+    'viewSpec.delimiter',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {