feat(MultiOneOf): added new input multi one of

docs/spec.md

@@ -86,6 +86,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | 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                                                                                                                           |
+| viewSpec.placeholder       | `string`                 |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
 
 ### StringSpec
 

src/lib/core/types/specs.ts

@@ -87,6 +87,7 @@ export interface ObjectSpec<LinkType = any> {
         oneOfParams?: {
             toggler?: 'select' | 'radio';
         };
+        placeholder?: string;
     };
 }
 

src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss

@@ -0,0 +1,25 @@
+@import '../../../styles/variables';
+
+.#{$ns}multi-oneof {
+    &__select {
+        max-width: 305px;
+    }
+
+    &__content {
+        &_flat {
+            & > .#{$ns}group-indent {
+                margin: 0;
+                border-left: none;
+                padding: 0;
+
+                & > .#{$ns}use-search {
+                    margin-top: 15px;
+
+                    &:empty {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+
+import {Select} from '@gravity-ui/uikit';
+import _ from 'lodash';
+
+import {
+    Controller,
+    FieldValue,
+    ObjectIndependentInput,
+    ObjectIndependentInputProps,
+    ValidateError,
+} from '../../../../core';
+import {block} from '../../../utils';
+import {GroupIndent} from '../../GroupIndent';
+
+import './MultiOneOf.scss';
+
+const b = block('multi-oneof');
+
+export interface MultiOneOfProps extends ObjectIndependentInputProps {
+    withoutIndent?: boolean;
+}
+
+export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
+    const {name, input, spec, Layout, withoutIndent} = props;
+    const {value, onBlur, onChange, onFocus, parentOnUnmount} = input;
+
+    const [valueSelect, setValueSelect] = React.useState(() => (value ? Object.keys(value) : []));
+
+    const handleOpenChange = React.useCallback(
+        (open: boolean) => {
+            if (open) {
+                onFocus();
+            } else {
+                onBlur();
+            }
+        },
+        [onFocus, onBlur],
+    );
+
+    const parentOnChange = React.useCallback(
+        (
+            childName: string,
+            childValue: FieldValue,
+            childErrors?: Record<string, ValidateError>,
+        ) => {
+            const _value = _.set(value || {}, childName.split(`${name}.`).join(''), childValue);
+
+            onChange(_value, childErrors);
+        },
+        [name, onChange, value],
+    );
+
+    const specProperties = React.useMemo(
+        () => (_.isObjectLike(spec.properties) ? spec.properties! : {}),
+        [spec.properties],
+    );
+
+    const options = React.useMemo(
+        () =>
+            (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+                const title =
+                    spec.description?.[value] ||
+                    specProperties[value]?.viewSpec.layoutTitle ||
+                    value ||
+                    '';
+
+                return {
+                    value,
+                    title,
+                    content: title,
+                };
+            }),
+        [spec.description, spec.viewSpec.order, specProperties],
+    );
+
+    const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]);
+
+    const selectInput = React.useMemo(
+        () => (
+            <Select
+                width="max"
+                value={valueSelect}
+                options={options}
+                onUpdate={setValueSelect}
+                onOpenChange={handleOpenChange}
+                disabled={spec.viewSpec.disabled}
+                placeholder={spec.viewSpec.placeholder}
+                filterable={filterable}
+                multiple
+                className={b('select')}
+                qa={name}
+            />
+        ),
+        [
+            filterable,
+            handleOpenChange,
+            name,
+            options,
+            spec.viewSpec.disabled,
+            spec.viewSpec.placeholder,
+            valueSelect,
+        ],
+    );
+
+    const header = React.useMemo(() => {
+        if (Layout) {
+            return <Layout {...props}>{selectInput}</Layout>;
+        }
+
+        return <React.Fragment>{selectInput}</React.Fragment>;
+    }, [Layout, props, selectInput]);
+
+    const content = React.useCallback(
+        (value: string[]) => (
+            <React.Fragment>
+                {value.map((property) => (
+                    <React.Fragment key={property}>
+                        {specProperties && specProperties[property] ? (
+                            <Controller
+                                name={`${name}.${property}`}
+                                spec={specProperties[property]}
+                                parentOnUnmount={parentOnUnmount}
+                                parentOnChange={parentOnChange}
+                                value={input.value?.[property]}
+                            />
+                        ) : null}
+                    </React.Fragment>
+                ))}
+            </React.Fragment>
+        ),
+        [specProperties, name, parentOnUnmount, parentOnChange, input.value],
+    );
+
+    if (!options) {
+        return null;
+    }
+
+    return (
+        <React.Fragment>
+            {header}
+            <div
+                className={b('content', {
+                    flat: withoutIndent,
+                })}
+            >
+                <GroupIndent>{content(valueSelect)}</GroupIndent>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export const MultiOneOfFlat: ObjectIndependentInput = (props) => (
+    <MultiOneOf {...props} withoutIndent />
+);

src/lib/kit/components/Inputs/MultiOneOf/index.ts

@@ -0,0 +1 @@
+export * from './MultiOneOf';

src/lib/kit/components/Inputs/index.ts

@@ -2,7 +2,10 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './MonacoInput';
+export * from './MultiOneOf';
 export * from './MultiSelect';
+export * from './NumberWithScale';
 export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
@@ -15,5 +18,3 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
-export * from './NumberWithScale';
-export * from './MonacoInput';

src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss

@@ -0,0 +1,35 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}multi-oneof-view {
+    &__tooltip {
+        overflow-wrap: break-word;
+    }
+
+    &__tooltip-container {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        margin-bottom: 6px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__content {
+        &_multiple-values {
+            & > .#{$ns}group-indent {
+                padding-top: 0px;
+            }
+        }
+
+        &_flat {
+            & > .#{$ns}group-indent {
+                margin: 0 0 20px;
+                border-left: none;
+                padding: 0;
+            }
+        }
+    }
+}

src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {Popover} from '@gravity-ui/uikit';
+import _ from 'lodash';
+
+import {ObjectIndependentView, ObjectIndependentViewProps, ViewController} from '../../../../core';
+import {block} from '../../../utils';
+import {GroupIndent} from '../../GroupIndent';
+
+import './MultiOneOfView.scss';
+
+const b = block('multi-oneof-view');
+
+export interface MultiOneOfViewProps extends ObjectIndependentViewProps {
+    withoutIndent?: boolean;
+}
+
+export const MultiOneOfView: React.FC<MultiOneOfViewProps> = (props) => {
+    const {name, value, Layout, spec, withoutIndent} = props;
+
+    const specProperties = React.useMemo(
+        () => (_.isObjectLike(spec.properties) ? spec.properties! : {}),
+        [spec.properties],
+    );
+
+    const values = React.useMemo(() => Object.keys(value || []), [value]);
+
+    const items = React.useMemo(
+        () =>
+            values.map((value) => {
+                const title =
+                    spec.description?.[value] ||
+                    specProperties[value]?.viewSpec.layoutTitle ||
+                    value ||
+                    '';
+
+                return title;
+            }),
+        [spec.description, specProperties, values],
+    );
+
+    const content = React.useMemo(
+        () => (
+            <React.Fragment>
+                {values.map((value) => (
+                    <React.Fragment key={value}>
+                        {specProperties && specProperties[value] ? (
+                            <ViewController
+                                name={`${name}.${value}`}
+                                spec={specProperties[value]}
+                            />
+                        ) : null}
+                    </React.Fragment>
+                ))}
+            </React.Fragment>
+        ),
+        [name, specProperties, values],
+    );
+
+    const selectView = React.useMemo(
+        () => (
+            <React.Fragment>
+                {items.map((item) => (
+                    <Popover
+                        placement={['bottom', 'top']}
+                        key={item}
+                        content={item}
+                        className={b('tooltip-container')}
+                        contentClassName={b('tooltip')}
+                        disabled={item.length < 51}
+                    >
+                        {item}
+                    </Popover>
+                ))}
+            </React.Fragment>
+        ),
+        [items],
+    );
+
+    const header = React.useMemo(() => {
+        if (Layout) {
+            return <Layout {...props}>{selectView}</Layout>;
+        }
+
+        return <React.Fragment>{selectView}</React.Fragment>;
+    }, [Layout, props, selectView]);
+
+    if (!value) {
+        return null;
+    }
+
+    return (
+        <React.Fragment>
+            {header}
+            <div
+                className={b('content', {flat: withoutIndent, 'multiple-values': items.length > 1})}
+            >
+                <GroupIndent>{content}</GroupIndent>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export const MultiOneOfFlatView: ObjectIndependentView = (props) => (
+    <MultiOneOfView {...props} withoutIndent />
+);

src/lib/kit/components/Views/MultiOneOfView/index.ts

@@ -0,0 +1 @@
+export * from './MultiOneOfView';

src/lib/kit/components/Views/index.ts

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
+export * from './MultiOneOfView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';
 export * from './ObjectBaseView';