feat: add flat oneof input, add oneof params to object spec (#44)

bocembocem · web-flow · commit 25e9a3588b35 · 2023-05-22T15:53:54.000+04:00
diff --git a/docs/spec.md b/docs/spec.md
@@ -84,6 +84,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.layoutOpen        | `boolean`                |          | Expand [Layout](./config.md#layouts) at the first rendering                                                                                                                             |
 | viewSpec.order             | `string[]`               |          | Array of `properties` keys in the right order                                                                                                                                           |
 | viewSpec.link              | `any`                    |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
+| viewSpec.oneOfParams       | `object`                 |          | [Parameters](#oneofparams) that must be passed to oneof input                                                                                                                           |
 
 ### StringSpec
 
@@ -128,6 +129,12 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | language | `string` |   yes    | Syntax highlighting language |
 | fontSize | `string` |          | Font size                    |
 
+#### OneOfParams
+
+| Property | Type                 | Required | Description |
+| :------- | :------------------- | :------: | :---------- |
+| toggler  | `'select'` `'radio'` |          | Switch type |
+
 #### FileInput
 
 | Property     | Type                                                                          | Required | Description                                                                            |
diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -83,6 +83,9 @@ export interface ObjectSpec<LinkType = any> {
         layoutOpen?: boolean;
         order?: string[];
         link?: LinkType;
+        oneOfParams?: {
+            toggler?: 'select' | 'radio';
+        };
     };
 }
 
diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss
@@ -51,14 +51,15 @@
     &__header-left {
         display: flex;
         align-items: center;
+        flex-grow: 1;
     }
 
     &__header-right {
         display: flex;
         align-items: center;
 
         & > * {
-            margin-left: 5px;
+            margin-left: 10px;
         }
     }
 
diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.scss b/src/lib/kit/components/Inputs/OneOf/OneOf.scss
@@ -10,27 +10,45 @@
         }
     }
 
-    .#{$ns}group-indent {
-        all: unset;
-
-        & > .#{$ns}use-search {
-            padding-top: 11px;
-            padding-left: $normalOffset;
-            margin-top: 4px;
-            margin-bottom: 20px;
-            margin-left: 5px;
-            border-left: 1px solid var(--yc-color-line-generic-accent);
-
-            &:empty {
-                display: none;
-            }
+    &_base {
+        .#{$ns}group-indent {
+            all: unset;
+
+            & > .#{$ns}use-search {
+                padding-top: 11px;
+                padding-left: $normalOffset;
+                margin-top: 4px;
+                margin-bottom: 20px;
+                margin-left: 5px;
+                border-left: 1px solid var(--yc-color-line-generic-accent);
+
+                &:empty {
+                    display: none;
+                }
 
-            &:last-child {
-                margin-bottom: 0;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                & > .#{$ns}simple-vertical-accordeon_view {
+                    margin-top: -10px;
+                }
             }
+        }
+    }
+
+    &_flat {
+        & > .#{$ns}group-indent {
+            margin: 0;
+            border-left: none;
+            padding: 0;
+
+            & > .#{$ns}use-search {
+                margin-top: 15px;
 
-            & > .#{$ns}simple-vertical-accordeon_view {
-                margin-top: -10px;
+                &:empty {
+                    display: none;
+                }
             }
         }
     }
diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.tsx b/src/lib/kit/components/Inputs/OneOf/OneOf.tsx
@@ -3,15 +3,25 @@ import React from 'react';
 import _ from 'lodash';
 
 import {GroupIndent} from '../../';
-import {Controller, FieldValue, ObjectIndependentInput, ValidateError} from '../../../../core';
+import {
+    Controller,
+    FieldValue,
+    ObjectIndependentInput,
+    ObjectIndependentInputProps,
+    ValidateError,
+} from '../../../../core';
 import {useOneOf} from '../../../hooks';
 import {block} from '../../../utils';
 
 import './OneOf.scss';
 
 const b = block('oneof');
 
-export const OneOf: ObjectIndependentInput = (props) => {
+export interface OneOfProps extends ObjectIndependentInputProps {
+    withoutIndent?: boolean;
+}
+
+const OneOfComponent: React.FC<OneOfProps> = (props) => {
     const {oneOfValue, specProperties, toggler} = useOneOf({props});
 
     const parentOnChange = React.useCallback(
@@ -34,7 +44,12 @@ export const OneOf: ObjectIndependentInput = (props) => {
     );
 
     return (
-        <div className={b()}>
+        <div
+            className={b({
+                base: !props.withoutIndent,
+                flat: props.withoutIndent,
+            })}
+        >
             <div>{toggler}</div>
             {specProperties[oneOfValue] ? (
                 <GroupIndent>
@@ -51,3 +66,9 @@ export const OneOf: ObjectIndependentInput = (props) => {
         </div>
     );
 };
+
+export const OneOf = OneOfComponent;
+
+export const OneOfFlat: ObjectIndependentInput = (props) => (
+    <OneOfComponent {...props} withoutIndent />
+);
diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.scss b/src/lib/kit/components/Views/OneOfView/OneOfView.scss
@@ -0,0 +1,15 @@
+@import '../../../styles/variables';
+
+.#{$ns}oneof-view {
+    .#{$ns}group-indent {
+        margin-bottom: 20px;
+    }
+
+    &_flat {
+        & > .#{$ns}group-indent {
+            margin: 0 0 20px;
+            border-left: none;
+            padding: 0;
+        }
+    }
+}
diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.tsx b/src/lib/kit/components/Views/OneOfView/OneOfView.tsx
@@ -2,10 +2,19 @@ import React from 'react';
 
 import _ from 'lodash';
 
-import {GroupIndent} from '../';
-import {ObjectIndependentView, ViewController} from '../../../core';
+import {GroupIndent} from '../../';
+import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core';
+import {block} from '../../../utils';
 
-export const OneOfView: ObjectIndependentView = (props) => {
+import './OneOfView.scss';
+
+const b = block('oneof-view');
+
+export interface OneOfViewProps extends ObjectIndependentViewProps {
+    withoutIndent?: boolean;
+}
+
+const OneOfViewComponent: React.FC<OneOfViewProps> = (props) => {
     const {value = {}, spec, Layout, name} = props;
 
     const specProperties = React.useMemo(
@@ -40,7 +49,7 @@ export const OneOfView: ObjectIndependentView = (props) => {
     }
 
     return (
-        <React.Fragment>
+        <div className={b({flat: props.withoutIndent})}>
             {wrappedValue}
             {specProperties[valueKey] ? (
                 <GroupIndent>
@@ -51,6 +60,12 @@ export const OneOfView: ObjectIndependentView = (props) => {
                     />
                 </GroupIndent>
             ) : null}
-        </React.Fragment>
+        </div>
     );
 };
+
+export const OneOfView = OneOfViewComponent;
+
+export const OneOfFlatView: ObjectIndependentView = (props) => (
+    <OneOfViewComponent {...props} withoutIndent />
+);
diff --git a/src/lib/kit/components/Views/OneOfView/index.ts b/src/lib/kit/components/Views/OneOfView/index.ts
@@ -0,0 +1 @@
+export * from './OneOfView';
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
@@ -29,6 +29,8 @@ import {
     OneOf,
     OneOfCard,
     OneOfCardView,
+    OneOfFlat,
+    OneOfFlatView,
     OneOfView,
     Row,
     Row2,
@@ -128,6 +130,7 @@ export const dynamicConfig: DynamicFormConfig = {
     object: {
         inputs: {
             oneof: {Component: OneOf, independent: true},
+            oneof_flat: {Component: OneOfFlat, independent: true},
             card_oneof: {Component: CardOneOf, independent: true},
             secret: {Component: Secret, independent: true},
             base: {Component: ObjectBase, independent: true},
@@ -315,6 +318,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
     object: {
         views: {
             oneof: {Component: OneOfView, independent: true},
+            oneof_flat: {Component: OneOfFlatView, independent: true},
             card_oneof: {Component: CardOneOfView, independent: true},
             secret: undefined,
             base: {Component: ObjectBaseView, independent: true},
diff --git a/src/lib/kit/hooks/useOneOf.tsx b/src/lib/kit/hooks/useOneOf.tsx
@@ -65,8 +65,10 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
 
     const togglerInput = React.useMemo(() => {
         if (
-            options.length > 3 ||
-            _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)
+            spec.viewSpec.oneOfParams?.toggler !== 'radio' &&
+            (spec.viewSpec.oneOfParams?.toggler === 'select' ||
+                options.length > 3 ||
+                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))
         ) {
             return (
                 <Select
@@ -95,7 +97,7 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                 ))}
             </RadioButton>
         );
-    }, [options, oneOfValue, onOneOfChange, name]);
+    }, [options, oneOfValue, onOneOfChange, name, spec.viewSpec.oneOfParams?.toggler]);
 
     const toggler = React.useMemo(() => {
         if (Layout) {
diff --git a/src/stories/ObjectBase.stories.tsx b/src/stories/ObjectBase.stories.tsx
@@ -37,7 +37,7 @@ const baseSpec: ObjectSpec = {
 
 const value = {name: 'Foo', age: 13, license: false};
 
-const excludeOptions = ['description', 'viewSpec.type'];
+const excludeOptions = ['description', 'viewSpec.type', 'viewSpec.oneOfParams'];
 
 const template = (spec: ObjectSpec = baseSpec) => {
     const Template: ComponentStory<typeof ObjectBase> = (__, {viewMode}) => (
diff --git a/src/stories/ObjectOneOfFlat.stories.tsx b/src/stories/ObjectOneOfFlat.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {ComponentStory} from '@storybook/react';
+
+import {ObjectSpec, OneOfFlat as OneOfFlatBase, SpecTypes} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Object/OneOfFlat',
+    component: OneOfFlatBase,
+};
+
+const baseSpec: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        internal: {
+            required: true,
+            type: SpecTypes.String,
+            viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Person id'},
+        },
+        empty: {
+            required: true,
+            type: SpecTypes.Object,
+            viewSpec: {type: 'base', layoutTitle: 'Empty'},
+        },
+        external: {
+            required: true,
+            type: SpecTypes.Object,
+            properties: {
+                name: {
+                    type: SpecTypes.String,
+                    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Name'},
+                },
+                age: {
+                    type: SpecTypes.Number,
+                    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Age'},
+                },
+                license: {
+                    type: SpecTypes.Boolean,
+                    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'License'},
+                },
+            },
+            viewSpec: {
+                type: 'base',
+                layoutTitle: 'Person data',
+            },
+        },
+    },
+    description: {
+        external: 'External candidate',
+        internal: 'Internal candidate',
+        empty: 'None',
+    },
+    viewSpec: {
+        type: 'oneof_flat',
+        layout: 'row',
+        layoutTitle: 'Candidate',
+        order: ['external', 'internal', 'empty'],
+    },
+};
+
+const excludeOptions = ['viewSpec.type'];
+
+const template = (spec: ObjectSpec = baseSpec) => {
+    const Template: ComponentStory<typeof OneOfFlatBase> = (__, {viewMode}) => (
+        <InputPreview spec={spec} excludeOptions={excludeOptions} viewMode={viewMode} />
+    );
+
+    return Template;
+};
+
+export const OneOfFlat = template();
diff --git a/src/stories/ObjectSecret.stories.tsx b/src/stories/ObjectSecret.stories.tsx
@@ -33,6 +33,7 @@ const excludeOptions = [
     'viewSpec.order',
     'viewSpec.layoutOpen',
     'viewSpec.disabled',
+    'viewSpec.oneOfParams',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {
diff --git a/src/stories/ObjectTextLink.stories.tsx b/src/stories/ObjectTextLink.stories.tsx
@@ -38,6 +38,7 @@ const excludeOptions = [
     'viewSpec.order',
     'viewSpec.layoutOpen',
     'viewSpec.disabled',
+    'viewSpec.oneOfParams',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {
diff --git a/src/stories/ObjectValue.stories.tsx b/src/stories/ObjectValue.stories.tsx
@@ -35,6 +35,7 @@ const excludeOptions = [
     'viewSpec.order',
     'viewSpec.layoutOpen',
     'viewSpec.disabled',
+    'viewSpec.oneOfParams',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {
diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts

Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,9 @@ export interface ObjectSpec<LinkType = any> {`
`83`	`83`	`layoutOpen?: boolean;`
`84`	`84`	`order?: string[];`
`85`	`85`	`link?: LinkType;`
	`86`	`+ oneOfParams?: {`
	`87`	`+ toggler?: 'select' \| 'radio';`
	`88`	`+ };`
`86`	`89`	`};`
`87`	`90`	`}`
`88`	`91`
Original file line number	Diff line number	Diff line change
`@@ -51,14 +51,15 @@`
`51`	`51`	`&__header-left {`
`52`	`52`	`display: flex;`
`53`	`53`	`align-items: center;`
	`54`	`+ flex-grow: 1;`
`54`	`55`	`}`
`55`	`56`
`56`	`57`	`&__header-right {`
`57`	`58`	`display: flex;`
`58`	`59`	`align-items: center;`
`59`	`60`
`60`	`61`	`& > * {`
`61`		`- margin-left: 5px;`
	`62`	`+ margin-left: 10px;`
`62`	`63`	`}`
`63`	`64`	`}`
`64`	`65`