feat(Select): added additional params for select (#109)

NasgulNexus · web-flow · commit 13702de605d6 · 2023-09-07T11:30:33.000+03:00
diff --git a/docs/spec.md b/docs/spec.md
@@ -32,6 +32,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.placeholder       | `string`                               |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
 | viewSpec.addButtonPosition | `"down"/"right"`                       |          | The location of the button adding a new element to the array. Default value "down".                                                                                                     |
 | viewSpec.hideInput         | `boolean`                              |          | Hide input                                                                                                                                                                              |
+| viewSpec.selectParams      | `object`                               |          | [Parameters](#selectparams) additional options for the selector                                                                                                                         |
 
 ### BooleanSpec
 
@@ -123,6 +124,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.copy              | `boolean`                |          | For `true`, will add a copy value button                                                                                                                                                |
 | viewSpec.hideInput         | `boolean`                |          | Hide input                                                                                                                                                                              |
 | viewSpec.textContentParams | `object`                 |          | [Parameters](#textcontentparams) that must be passed to text content                                                                                                                    |
+| viewSpec.selectParams      | `object`                 |          | [Parameters](#selectparams) additional options for the selector                                                                                                                         |
 
 #### SizeParams
 
@@ -162,6 +164,13 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | icon       | `string`                                                                                                                                                                                                                                                                                          |          | Icon name from the [library](https://gravity-ui.com/icons)          |
 | iconColor  | `'primary'` `'complementary'` `'secondary'` `'hint'` `'info'` `'info-heavy'` `'positive'` `'positive-heavy'` `'warning'` `'warning-heavy'` `'danger'` `'danger-heavy'` `'utility'` `'utility-heavy'` `'misc'` `'misc-heavy'` `'brand'` `'dark-primary'` `'dark-complementary'` `'dark-secondary'` |          | The color of the icon, if it does not have the themeLabel parameter |
 
+#### SelectParams
+
+| Property          | Type                     | Required | Description                     |
+| :---------------- | :----------------------- | :------: | :------------------------------ |
+| filterPlaceholder | `string`                 |          | Placeholder for filter          |
+| meta              | `Record<string, string>` |          | Additional text for enum values |
+
 #### Link
 
 A component that serves as a wrapper for the value, if necessary, rendering the value as a link.
diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -32,6 +32,10 @@ export interface ArraySpec<LinkType = any> {
         placeholder?: string;
         addButtonPosition?: 'down' | 'right';
         hideInput?: boolean;
+        selectParams?: {
+            filterPlaceholder?: string;
+            meta?: Record<string, string>;
+        };
     };
 }
 
@@ -141,6 +145,10 @@ export interface StringSpec<LinkType = any> {
             ignoreText?: boolean;
         };
         copy?: boolean;
+        selectParams?: {
+            filterPlaceholder?: string;
+            meta?: Record<string, string>;
+        };
     };
 }
 
diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss
@@ -2,4 +2,8 @@
 
 .#{$ns}multi-select {
     max-width: 305px;
+
+    &__meta-text {
+        display: block;
+    }
 }
diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Select} from '@gravity-ui/uikit';
+import {Select, Text} from '@gravity-ui/uikit';
 
 import {ArrayInput, FieldArrayValue, transformArrIn, transformArrOut} from '../../../../core';
 import {block} from '../../../utils';
@@ -19,12 +19,34 @@ export const MultiSelect: ArrayInput = ({name, input, spec}) => {
             spec.enum?.map((id) => ({
                 id,
                 value: id,
-                content: spec.description?.[id] || id,
+                text: spec.description?.[id] || id,
+                content: spec.viewSpec.selectParams?.meta?.[id] ? (
+                    <div key={id}>
+                        <Text>{spec.description?.[id] || id}</Text>
+                        <Text color="secondary" className={b('meta-text')}>
+                            {spec.viewSpec.selectParams.meta[id]}
+                        </Text>
+                    </div>
+                ) : (
+                    spec.description?.[id] || id
+                ),
                 key: id,
             })),
-        [spec.enum, spec.description],
+        [spec.enum, spec.description, spec.viewSpec.selectParams?.meta],
     );
 
+    const renderOption = React.useCallback((option: {value: string; content?: React.ReactNode}) => {
+        return <React.Fragment key={option.value}>{option.content || option.value}</React.Fragment>;
+    }, []);
+
+    const getOptionHeight = React.useCallback(() => {
+        if (spec.viewSpec.selectParams?.meta) {
+            return 44;
+        }
+
+        return 28;
+    }, [spec.viewSpec.selectParams?.meta]);
+
     const handleToggle = React.useCallback(
         (open: boolean) => {
             if (open) {
@@ -54,6 +76,9 @@ export const MultiSelect: ArrayInput = ({name, input, spec}) => {
             disabled={spec.viewSpec.disabled}
             placeholder={spec.viewSpec.placeholder}
             filterable={filterable}
+            filterPlaceholder={spec.viewSpec.selectParams?.filterPlaceholder}
+            renderOption={renderOption}
+            getOptionHeight={getOptionHeight}
             multiple
             qa={name}
         />
diff --git a/src/lib/kit/components/Inputs/Select/Select.scss b/src/lib/kit/components/Inputs/Select/Select.scss
@@ -3,4 +3,8 @@
 .#{$ns}select {
     // TODO: Remove this styles
     max-width: 305px;
+
+    &__meta-text {
+        display: block;
+    }
 }
diff --git a/src/lib/kit/components/Inputs/Select/Select.tsx b/src/lib/kit/components/Inputs/Select/Select.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Select as SelectBase} from '@gravity-ui/uikit';
+import {Select as SelectBase, Text} from '@gravity-ui/uikit';
 
 import {StringInput} from '../../../../core';
 import {block} from '../../../utils';
@@ -19,12 +19,34 @@ export const Select: StringInput = ({name, input, spec}) => {
             spec.enum?.map((id) => ({
                 id,
                 value: id,
-                content: spec.description?.[id] || id,
+                text: spec.description?.[id] || id,
+                content: spec.viewSpec.selectParams?.meta?.[id] ? (
+                    <div key={id}>
+                        <Text>{spec.description?.[id] || id}</Text>
+                        <Text color="secondary" className={b('meta-text')}>
+                            {spec.viewSpec.selectParams.meta[id]}
+                        </Text>
+                    </div>
+                ) : (
+                    spec.description?.[id] || id
+                ),
                 key: id,
             })),
-        [spec.enum, spec.description],
+        [spec.enum, spec.description, spec.viewSpec.selectParams?.meta],
     );
 
+    const renderOption = React.useCallback((option: {value: string; content?: React.ReactNode}) => {
+        return <React.Fragment key={option.value}>{option.content || option.value}</React.Fragment>;
+    }, []);
+
+    const getOptionHeight = React.useCallback(() => {
+        if (spec.viewSpec.selectParams?.meta) {
+            return 44;
+        }
+
+        return 28;
+    }, [spec.viewSpec.selectParams?.meta]);
+
     const handleChange = React.useCallback((v: string[]) => onChange(v[0]), [onChange]);
 
     const handleToggle = React.useCallback(
@@ -49,6 +71,9 @@ export const Select: StringInput = ({name, input, spec}) => {
             disabled={spec.viewSpec.disabled}
             placeholder={spec.viewSpec.placeholder}
             filterable={filterable}
+            filterPlaceholder={spec.viewSpec.selectParams?.filterPlaceholder}
+            getOptionHeight={getOptionHeight}
+            renderOption={renderOption}
             qa={name}
         />
     );
diff --git a/src/stories/ArrayBase.stories.tsx b/src/stories/ArrayBase.stories.tsx
@@ -38,6 +38,7 @@ const excludeOptions = [
     'viewSpec.type',
     'viewSpec.table',
     'viewSpec.placeholder',
+    'viewSpec.selectParams',
 ];
 
 const template = () => {
diff --git a/src/stories/ArraySelect.stories.tsx b/src/stories/ArraySelect.stories.tsx
@@ -13,18 +13,39 @@ export default {
 
 const spec: ArraySpec = {
     type: SpecTypes.Array,
-    enum: ['foo', 'bar', 'rab', 'oof'],
+    enum: ['foo', 'bar', 'rab', 'oof', 'fooBar', 'fooOof', 'barFoo', 'barOof', 'fooFoo', 'barBar'],
     description: {
         foo: 'Option 1',
         bar: 'Option 2',
         rab: 'Option 3',
         oof: 'Option 4',
+        fooBar: 'Option 5',
+        fooOof: 'Option 6',
+        barFoo: 'Option 7',
+        barOof: 'Option 8',
+        fooFoo: 'Option 9',
+        barBar: 'Option 10',
     },
     viewSpec: {
         type: 'select',
         layout: 'row',
         layoutTitle: 'Select',
         placeholder: 'placeholder text',
+        selectParams: {
+            filterPlaceholder: 'filter placeholder',
+            meta: {
+                foo: 'Additional text 1',
+                bar: 'Additional text 2',
+                rab: 'Additional text 3',
+                oof: 'Additional text 4',
+                fooBar: 'Additional text 5',
+                fooOof: 'Additional text 6',
+                barFoo: 'Additional text 7',
+                barOof: 'Additional text 8',
+                fooFoo: 'Additional text 9',
+                barBar: 'Additional text 10',
+            },
+        },
     },
 };
 
diff --git a/src/stories/ArrayTable.stories.tsx b/src/stories/ArrayTable.stories.tsx
@@ -61,6 +61,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.itemPrefix',
     'viewSpec.addButtonPosition',
+    'viewSpec.selectParams',
 ];
 
 const value = [
diff --git a/src/stories/StringBase.stories.tsx b/src/stories/StringBase.stories.tsx
@@ -27,6 +27,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringFileInput.stories.tsx b/src/stories/StringFileInput.stories.tsx
@@ -32,6 +32,7 @@ const excludeOptions = [
     'viewSpec.textContentParams',
     'viewSpec.placeholder',
     'viewSpec.layoutOpen',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringMonaco.stories.tsx b/src/stories/StringMonaco.stories.tsx
@@ -34,6 +34,7 @@ const excludeOptions = [
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
     'viewSpec.copy',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringNumberWithScale.stories.tsx b/src/stories/StringNumberWithScale.stories.tsx
@@ -44,6 +44,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringPassword.stories.tsx b/src/stories/StringPassword.stories.tsx
@@ -33,6 +33,7 @@ const excludeOptions = [
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
     'viewSpec.copy',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringSelect.stories.tsx b/src/stories/StringSelect.stories.tsx
@@ -13,18 +13,39 @@ export default {
 
 const baseSpec: StringSpec = {
     type: SpecTypes.String,
-    enum: ['foo', 'bar', 'rab', 'oof'],
+    enum: ['foo', 'bar', 'rab', 'oof', 'fooBar', 'fooOof', 'barFoo', 'barOof', 'fooFoo', 'barBar'],
     description: {
         foo: 'Option 1',
         bar: 'Option 2',
         rab: 'Option 3',
         oof: 'Option 4',
+        fooBar: 'Option 5',
+        fooOof: 'Option 6',
+        barFoo: 'Option 7',
+        barOof: 'Option 8',
+        fooFoo: 'Option 9',
+        barBar: 'Option 10',
     },
     viewSpec: {
         type: 'select',
         layout: 'row',
         layoutTitle: 'Select',
         placeholder: 'placeholder text',
+        selectParams: {
+            filterPlaceholder: 'filter placeholder',
+            meta: {
+                foo: 'Additional text 1',
+                bar: 'Additional text 2',
+                rab: 'Additional text 3',
+                oof: 'Additional text 4',
+                fooBar: 'Additional text 5',
+                fooOof: 'Additional text 6',
+                barFoo: 'Additional text 7',
+                barOof: 'Additional text 8',
+                fooFoo: 'Additional text 9',
+                barBar: 'Additional text 10',
+            },
+        },
     },
 };
 
diff --git a/src/stories/StringTextArea.stories.tsx b/src/stories/StringTextArea.stories.tsx
@@ -32,6 +32,7 @@ const excludeOptions = [
     'viewSpec.monacoParams',
     'viewSpec.textContentParams',
     'viewSpec.fileInput',
+    'viewSpec.selectParams',
 ];
 
 const template = (spec: StringSpec = baseSpec) => {
diff --git a/src/stories/StringTextContent.stories.tsx b/src/stories/StringTextContent.stories.tsx
@@ -42,6 +42,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.fileInput',
     'viewSpec.copy',
+    'viewSpec.selectParams',
 ];
 
 const value = 'value';
diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
diff --git a/src/stories/components/InputPreview/utils.ts b/src/stories/components/InputPreview/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,8 @@`
`2`	`2`
`3`	`3`	`.#{$ns}multi-select {`
`4`	`4`	`max-width: 305px;`
	`5`	`+`
	`6`	`+ &__meta-text {`
	`7`	`+ display: block;`
	`8`	`+ }`
`5`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,8 @@`
`3`	`3`	`.#{$ns}select {`
`4`	`4`	`// TODO: Remove this styles`
`5`	`5`	`max-width: 305px;`
	`6`	`+`
	`7`	`+ &__meta-text {`
	`8`	`+ display: block;`
	`9`	`+ }`
`6`	`10`	`}`