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

Author: NasgulNexus

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
 

src/lib/core/types/specs.ts

@@ -123,6 +123,7 @@ export interface ObjectSpec<
         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,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,