From 31480c3a0b5079dcf4e1e5940d840e69579cc608 Mon Sep 17 00:00:00 2001
From: Mikhail Golbakh <golbah@yandex.ru>
Date: Tue, 5 Sep 2023 15:29:31 +0300
Subject: [PATCH] feat(ObjectBase): add inline variant (#104)

---
 .../Inputs/ObjectBase/ObjectBase.scss         | 19 ++++++
 .../Inputs/ObjectBase/ObjectBase.tsx          | 44 ++++++++++---
 .../kit/components/Views/ObjectBaseView.tsx   | 36 ----------
 .../Views/ObjectBaseView/ObjectBaseView.scss  | 19 ++++++
 .../Views/ObjectBaseView/ObjectBaseView.tsx   | 58 ++++++++++++++++
 .../components/Views/ObjectBaseView/index.ts  |  1 +
 src/lib/kit/constants/config.tsx              |  6 ++
 src/lib/kit/utils/index.ts                    |  1 +
 src/lib/kit/utils/objectInline.ts             |  9 +++
 src/stories/ObjectInline.stories.tsx          | 66 +++++++++++++++++++
 10 files changed, 214 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
 delete mode 100644 src/lib/kit/components/Views/ObjectBaseView.tsx
 create mode 100644 src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss
 create mode 100644 src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx
 create mode 100644 src/lib/kit/components/Views/ObjectBaseView/index.ts
 create mode 100644 src/lib/kit/utils/objectInline.ts
 create mode 100644 src/stories/ObjectInline.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..106b008e
--- /dev/null
+++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss
@@ -0,0 +1,19 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}object-base {
+    &__content {
+        &_inline {
+            display: flex;
+
+            & > .#{$ns}use-search {
+                width: 150px;
+                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..24349249 100644
--- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
+++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx
@@ -9,13 +9,28 @@ import {
     FieldObjectValue,
     FieldValue,
     ObjectIndependentInput,
+    ObjectIndependentInputProps,
     ObjectValue,
-    Spec,
     ValidateError,
     transformArrIn,
 } from '../../../../core';
+import {block, filterPropertiesForObjectInline} from '../../../utils';
 
-export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restProps}) => {
+import './ObjectBase.scss';
+
+const b = block('object-base');
+
+export interface ObjectBaseProps extends ObjectIndependentInputProps {
+    inline?: boolean;
+}
+
+export const ObjectBase: React.FC<ObjectBaseProps> = ({
+    inline,
+    spec,
+    name,
+    Layout,
+    ...restProps
+}) => {
     const addBtn = React.useMemo(
         () => (
             <Button
@@ -49,18 +64,24 @@ 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;
         }
 
-        if (!restProps.input.value) {
+        if (!inline && !restProps.input.value) {
             return addBtn;
         }
 
-        const specProperties = {...spec.properties} as Record<string, Spec>;
+        const specProperties = inline
+            ? filterPropertiesForObjectInline(spec.properties)
+            : spec.properties;
 
         return (
-            <React.Fragment>
+            <div className={b('content', {inline})}>
                 {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
                     specProperties[property] ? (
                         <Controller
@@ -73,16 +94,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 +117,7 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
         </Layout>
     );
 };
+
+export const ObjectInline: ObjectIndependentInput = (props) => {
+    return <ObjectBase {...props} inline />;
+};
diff --git a/src/lib/kit/components/Views/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView.tsx
deleted file mode 100644
index bce0dec5..00000000
--- a/src/lib/kit/components/Views/ObjectBaseView.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import _ from 'lodash';
-
-import {ObjectIndependentView, Spec, ViewController} from '../../../core';
-
-export const ObjectBaseView: ObjectIndependentView = ({spec, name, Layout, ...restProps}) => {
-    if (!_.isObjectLike(spec.properties)) {
-        return null;
-    }
-
-    const specProperties = {...spec.properties} as Record<string, Spec>;
-    const content = (
-        <React.Fragment>
-            {(spec.viewSpec.order || Object.keys(specProperties)).map((property: string) =>
-                specProperties[property] ? (
-                    <ViewController
-                        spec={specProperties[property]}
-                        name={`${name ? name + '.' : ''}${property}`}
-                        key={`${name ? name + '.' : ''}${property}`}
-                    />
-                ) : null,
-            )}
-        </React.Fragment>
-    );
-
-    if (!Layout) {
-        return content;
-    }
-
-    return (
-        <Layout spec={spec} name={name} {...restProps}>
-            {content}
-        </Layout>
-    );
-};
diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss
new file mode 100644
index 00000000..3c13eecc
--- /dev/null
+++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss
@@ -0,0 +1,19 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}object-base-view {
+    &__content {
+        &_inline {
+            display: flex;
+
+            & > div {
+                flex: auto;
+                margin-right: 8px;
+                margin-bottom: 0;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx
new file mode 100644
index 00000000..84b623df
--- /dev/null
+++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core';
+import {block, filterPropertiesForObjectInline} from '../../../utils';
+
+import './ObjectBaseView.scss';
+
+const b = block('object-base-view');
+
+export interface ObjectBaseViewProps extends ObjectIndependentViewProps {
+    inline?: boolean;
+}
+
+export const ObjectBaseView: React.FC<ObjectBaseViewProps> = ({
+    inline,
+    spec,
+    name,
+    Layout,
+    ...restProps
+}) => {
+    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>
+    );
+
+    if (!Layout) {
+        return content;
+    }
+
+    return (
+        <Layout spec={spec} name={name} {...restProps}>
+            {content}
+        </Layout>
+    );
+};
+
+export const ObjectInlineView: ObjectIndependentView = (props) => {
+    return <ObjectBaseView {...props} inline />;
+};
diff --git a/src/lib/kit/components/Views/ObjectBaseView/index.ts b/src/lib/kit/components/Views/ObjectBaseView/index.ts
new file mode 100644
index 00000000..55d4152b
--- /dev/null
+++ b/src/lib/kit/components/Views/ObjectBaseView/index.ts
@@ -0,0 +1 @@
+export * from './ObjectBaseView';
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index e62f7144..fccc751f 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/src/lib/kit/constants/config.tsx
@@ -28,6 +28,8 @@ import {
     NumberWithScaleView,
     ObjectBase,
     ObjectBaseView,
+    ObjectInline,
+    ObjectInlineView,
     ObjectValueInput,
     ObjectValueInputView,
     OneOf,
@@ -144,6 +146,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: ObjectInline, independent: true},
         },
         layouts: {
             row: Row,
@@ -246,6 +249,7 @@ export const dynamicCardConfig: DynamicFormConfig = {
             object_value: {Component: ObjectValueInput, independent: true},
             multi_oneof: {Component: MultiOneOf, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlat, independent: true},
+            inline: {Component: ObjectInline, independent: true},
         },
         layouts: {
             row: Row2,
@@ -341,6 +345,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             object_value: {Component: ObjectValueInputView, independent: true},
             multi_oneof: {Component: MultiOneOfView, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true},
+            inline: {Component: ObjectInlineView, independent: true},
         },
         layouts: {
             row: ViewRow,
@@ -427,6 +432,7 @@ export const dynamicViewCardConfig: DynamicViewConfig = {
             object_value: {Component: ObjectValueInputView, independent: true},
             multi_oneof: {Component: MultiOneOfView, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true},
+            inline: {Component: ObjectInlineView, independent: true},
         },
         layouts: {
             row: ViewRow2,
diff --git a/src/lib/kit/utils/index.ts b/src/lib/kit/utils/index.ts
index 2e92eec5..cc72e81d 100644
--- a/src/lib/kit/utils/index.ts
+++ b/src/lib/kit/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './cn';
 export * from './common';
 export * from './bigIntMath';
+export * from './objectInline';
diff --git a/src/lib/kit/utils/objectInline.ts b/src/lib/kit/utils/objectInline.ts
new file mode 100644
index 00000000..0d6f705b
--- /dev/null
+++ b/src/lib/kit/utils/objectInline.ts
@@ -0,0 +1,9 @@
+import {Spec, isNumberSpec, isStringSpec} from '../../core';
+
+export const filterPropertiesForObjectInline = (properties: Record<string, Spec>) => {
+    return Object.fromEntries(
+        Object.entries(properties).filter(
+            ([, propSpec]) => isStringSpec(propSpec) || isNumberSpec(propSpec),
+        ),
+    );
+};
diff --git a/src/stories/ObjectInline.stories.tsx b/src/stories/ObjectInline.stories.tsx
new file mode 100644
index 00000000..43618991
--- /dev/null
+++ b/src/stories/ObjectInline.stories.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {StoryFn} from '@storybook/react';
+
+import {ObjectInline as ObjectInlineBase, ObjectSpec, SpecTypes} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Object/Inline',
+    component: ObjectInlineBase,
+};
+
+const baseSpec: ObjectSpec = {
+    type: SpecTypes.Object,
+    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',
+    },
+};
+
+const value = {type: 'first', name: 'Foo'};
+
+const excludeOptions = [
+    'description',
+    'viewSpec.type',
+    'viewSpec.oneOfParams',
+    'viewSpec.placeholder',
+];
+
+const template = (spec: ObjectSpec = baseSpec) => {
+    const Template: StoryFn<typeof ObjectInlineBase> = (__, {viewMode}) => (
+        <InputPreview
+            spec={spec}
+            value={value}
+            excludeOptions={excludeOptions}
+            viewMode={viewMode}
+        />
+    );
+
+    return Template;
+};
+
+export const Inline = template();