From 653ff9219890561a6f392f2e385c4c18882282c9 Mon Sep 17 00:00:00 2001
From: golbahsg <golbahsg@yandex-team.ru>
Date: Wed, 30 Aug 2023 19:00:50 +0300
Subject: [PATCH] feat(ObjectBase): add inline variant

---
 .../Inputs/ObjectBase/ObjectBase.scss         | 19 +++++++
 .../Inputs/ObjectBase/ObjectBase.tsx          | 48 ++++++++++++++---
 src/lib/kit/constants/config.tsx              |  2 +
 src/stories/Inline.stories.tsx                | 51 +++++++++++++++++++
 4 files changed, 112 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
 create mode 100644 src/stories/Inline.stories.tsx

diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
new file mode 100644
index 00000000..561d4e96
--- /dev/null
+++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
@@ -0,0 +1,19 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}objectbase {
+    &__content {
+        &_inline {
+            display: flex;
+
+            > .#{$ns}use-search {
+                flex: auto;
+                margin-bottom: 0;
+                margin-right: 8px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
index 3f0d6a83..b60c73e3 100644
--- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
+++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
@@ -9,13 +9,30 @@ import {
     FieldObjectValue,
     FieldValue,
     ObjectIndependentInput,
+    ObjectIndependentInputProps,
     ObjectValue,
-    Spec,
     ValidateError,
+    isNumberSpec,
+    isStringSpec,
     transformArrIn,
 } from '../../../../core';
+import {block} from '../../../utils';
 
-export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restProps}) => {
+import './ObjectBase.scss';
+
+const b = block('objectbase');
+
+export interface ObjectBaseProps extends ObjectIndependentInputProps {
+    inline?: boolean;
+}
+
+export const ObjectBase: React.FC<ObjectBaseProps> = ({
+    inline,
+    spec,
+    name,
+    Layout,
+    ...restProps
+}) => {
     const addBtn = React.useMemo(
         () => (
             <Button
@@ -49,7 +66,11 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
     );
 
     const content = React.useMemo(() => {
-        if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
+        if (
+            !spec.properties ||
+            !_.isObjectLike(spec.properties) ||
+            !Object.keys(spec.properties || {}).length
+        ) {
             return null;
         }
 
@@ -57,10 +78,16 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
             return addBtn;
         }
 
-        const specProperties = {...spec.properties} as Record<string, Spec>;
+        const specProperties = inline
+            ? Object.fromEntries(
+                  Object.entries(spec.properties).filter(
+                      ([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
+                  ),
+              )
+            : spec.properties;
 
         return (
-            <React.Fragment>
+            <div className={b('content', {inline})}>
                 {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
                     specProperties[property] ? (
                         <Controller
@@ -73,16 +100,17 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
                         />
                     ) : null,
                 )}
-            </React.Fragment>
+            </div>
         );
     }, [
         spec.properties,
         spec.viewSpec.order,
-        name,
         restProps.input.value,
+        restProps.input.parentOnUnmount,
+        inline,
         addBtn,
+        name,
         parentOnChange,
-        restProps.input.parentOnUnmount,
     ]);
 
     if (!Layout || !content) {
@@ -95,3 +123,7 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
         </Layout>
     );
 };
+
+export const Inline: ObjectIndependentInput = (props) => {
+    return <ObjectBase {...props} inline />;
+};
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index e62f7144..148e5ca8 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/src/lib/kit/constants/config.tsx
@@ -14,6 +14,7 @@ import {
     FileInputView,
     Group,
     Group2,
+    Inline,
     MonacoInput,
     MonacoInputCard,
     MonacoView,
@@ -144,6 +145,7 @@ export const dynamicConfig: DynamicFormConfig = {
             object_value: {Component: ObjectValueInput, independent: true},
             multi_oneof: {Component: MultiOneOf, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlat, independent: true},
+            inline: {Component: Inline, independent: true},
         },
         layouts: {
             row: Row,
diff --git a/src/stories/Inline.stories.tsx b/src/stories/Inline.stories.tsx
new file mode 100644
index 00000000..63c3c71e
--- /dev/null
+++ b/src/stories/Inline.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {StoryFn} from '@storybook/react';
+
+import {Inline as InlineBase, ObjectSpec, SpecTypes} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Object/Inline',
+    component: InlineBase,
+};
+
+const baseSpec: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        gender: {
+            type: SpecTypes.String,
+            enum: ['male', 'female', 'other'],
+            viewSpec: {type: 'select', placeholder: 'Choose gender'},
+        },
+        name: {
+            type: SpecTypes.Number,
+            viewSpec: {type: 'base', placeholder: 'Type your name'},
+        },
+    },
+    viewSpec: {
+        type: 'inline',
+        layout: 'row',
+        layoutTitle: 'Candidate',
+    },
+};
+
+const value = {gender: 'other', name: 'Foo'};
+
+const excludeOptions = ['description', 'viewSpec.type', 'viewSpec.oneOfParams'];
+
+const template = (spec: ObjectSpec = baseSpec) => {
+    const Template: StoryFn<typeof InlineBase> = (__, {viewMode}) => (
+        <InputPreview
+            spec={spec}
+            value={value}
+            excludeOptions={excludeOptions}
+            viewMode={viewMode}
+        />
+    );
+
+    return Template;
+};
+
+export const Inline = template();