diff --git a/docs/spec.md b/docs/spec.md index 6ce2d67c..13ae8f56 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -31,6 +31,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | | 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 | ### BooleanSpec @@ -47,6 +48,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) | | viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering | | viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | +| viewSpec.hideInput | `boolean` | | Hide input | ### NumberSpec @@ -68,6 +70,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | | viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value | | viewSpec.copy | `boolean` | | For `true`, will add a copy value button | +| viewSpec.hideInput | `boolean` | | Hide input | ### ObjectSpec @@ -89,35 +92,37 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | 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 | +| viewSpec.hideInput | `boolean` | | Hide input | ### StringSpec -| Property | Type | Required | Description | -| :------------------------- | :----------------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| defaultValue | `string` | | Default value | -| type | `"string"` | yes | Entity type | -| required | `boolean` | | Can the value be `undefined` or `null` | -| maxLength | `bigint` | | Maximum string length | -| minLength | `bigint` | | Minimum string length | -| pattern | `string` | | RegExp to check the field value | -| patternError | `string` | | The text of the validation error by `pattern` | -| enum | `string[]` | | An array of valid values, for example for a select | -| description | `Record` | | Easy-to-understand names for values from `enum` | -| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used | -| viewSpec.disabled | `boolean` | | Is the field available for editing | -| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity | -| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity | -| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) | -| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) | -| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering | -| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | -| viewSpec.hideValues | `string[]` | | Values that are equated to empty, to exclude the rendering of unfilled fields (for example, for `enum` with `_UNSPECIFIED`) | -| viewSpec.sizeParams | `object` | | [Parameters](#sizeparams) that must be passed for an input with dimensions | -| viewSpec.monacoParams | `object` | | [Parameters](#monacoparams) that must be passed to Monaco editor | -| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value | -| viewSpec.themeLabel | `'normal'` `'info'` `'danger'` `'warning'` `'success'` `'unknown'` | | Label color | -| viewSpec.fileInput | `object` | | [Parameters](#FileInput) that must be passed to file input | -| viewSpec.copy | `boolean` | | For `true`, will add a copy value button | +| Property | Type | Required | Description | +| :------------------------- | :----------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| defaultValue | `string` | | Default value | +| type | `"string"` | yes | Entity type | +| required | `boolean` | | Can the value be `undefined` or `null` | +| maxLength | `bigint` | | Maximum string length | +| minLength | `bigint` | | Minimum string length | +| pattern | `string` | | RegExp to check the field value | +| patternError | `string` | | The text of the validation error by `pattern` | +| enum | `string[]` | | An array of valid values, for example for a select | +| description | `Record` | | Easy-to-understand names for values from `enum` | +| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used | +| viewSpec.disabled | `boolean` | | Is the field available for editing | +| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity | +| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity | +| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) | +| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) | +| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering | +| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value | +| viewSpec.hideValues | `string[]` | | Values that are equated to empty, to exclude the rendering of unfilled fields (for example, for `enum` with `_UNSPECIFIED`) | +| viewSpec.sizeParams | `object` | | [Parameters](#sizeparams) that must be passed for an input with dimensions | +| viewSpec.monacoParams | `object` | | [Parameters](#monacoparams) that must be passed to Monaco editor | +| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value | +| viewSpec.fileInput | `object` | | [Parameters](#FileInput) that must be passed to file input | +| 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 | #### SizeParams @@ -148,6 +153,15 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec; | readAsMethod | `'readAsArrayBuffer'` `'readAsBinaryString'` `'readAsDataURL'` `'readAsText'` | | File reading method | | ignoreText | `boolean` | | For `true`, will show the `File uploaded` stub instead of the field value | +#### TextContentParams + +| Property | Type | Required | Description | +| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------: | :------------------------------------------------------------------ | +| themeLabel | `'normal'` `'info'` `'danger'` `'warning'` `'success'` `'unknown'` | | Label color | +| text | `string` | yes | Text for input | +| 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 | + #### 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/components/Form/Controller.tsx b/src/lib/core/components/Form/Controller.tsx index c59eae74..c5c94508 100644 --- a/src/lib/core/components/Form/Controller.tsx +++ b/src/lib/core/components/Form/Controller.tsx @@ -63,7 +63,7 @@ export const Controller = ({ __mirror, ); - if (_.isString(name) && isCorrectSpec(spec)) { + if (_.isString(name) && isCorrectSpec(spec) && !spec.viewSpec.hideInput) { return withSearch(render(renderProps)); } diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index 56be3e3b..862456e5 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -1,4 +1,5 @@ import {LabelProps} from '@gravity-ui/uikit'; +import {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText'; import {ReadAsMethod, SpecTypes} from '../constants'; @@ -30,6 +31,7 @@ export interface ArraySpec { link?: LinkType; placeholder?: string; addButtonPosition?: 'down' | 'right'; + hideInput?: boolean; }; } @@ -46,6 +48,7 @@ export interface BooleanSpec { layoutDescription?: string; layoutOpen?: boolean; link?: LinkType; + hideInput?: boolean; }; } @@ -67,6 +70,7 @@ export interface NumberSpec { link?: LinkType; placeholder?: string; copy?: boolean; + hideInput?: boolean; }; } @@ -90,6 +94,7 @@ export interface ObjectSpec { toggler?: 'select' | 'radio' | 'card'; }; placeholder?: string; + hideInput?: boolean; }; } @@ -123,7 +128,13 @@ export interface StringSpec { }; hideValues?: string[]; placeholder?: string; - themeLabel?: LabelProps['theme']; + hideInput?: boolean; + textContentParams?: { + themeLabel?: LabelProps['theme']; + text: string; + icon?: string; + iconColor?: ColorTextBaseProps['color']; + }; fileInput?: { accept?: string; readAsMethod?: ReadAsMethod; diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.scss b/src/lib/kit/components/Inputs/TextContent/TextContent.scss index abd536d9..365bcc1c 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.scss +++ b/src/lib/kit/components/Inputs/TextContent/TextContent.scss @@ -10,4 +10,18 @@ text-align: initial; white-space: initial; } + + &__icon { + display: flex; + align-items: center; + margin-right: 4px; + } + + &__wrapper { + display: flex; + } + + &__separator { + margin: 0 4px; + } } diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx index 2230b13b..439bb678 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx +++ b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import {Label} from '@gravity-ui/uikit'; +import {Label, Text} from '@gravity-ui/uikit'; +import _ from 'lodash'; import {StringIndependentInputProps} from '../../../../core'; import {block} from '../../../utils'; +import {LazyLoader} from '../../LazyLoader'; + +import {loadIcon} from './utils'; import './TextContent.scss'; @@ -12,29 +16,66 @@ const b = block('text-content'); export const TextContent: React.FC = ({ spec, Layout, + input, ...restProps }) => { - const {themeLabel, layoutDescription} = spec.viewSpec; + const {textContentParams, layoutDescription} = spec.viewSpec; + + const text = React.useMemo( + () => (textContentParams?.text ? textContentParams?.text : layoutDescription), + [layoutDescription, textContentParams?.text], + ); - if (!layoutDescription) { + if (!text) { return null; } - let content = ; + const iconLib = textContentParams?.icon ? ( + + ) : null; - if (themeLabel) { + let content = ; + + if (textContentParams?.themeLabel) { content = ( -