feat: add view for text-content (#235)

Author: bocembocem

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {Label, Text} from '@gravity-ui/uikit';
 import cloneDeep from 'lodash/cloneDeep';
 
-import {StringIndependentInputProps} from '../../../../core';
+import {StringIndependentInput, StringSpec} from '../../../../core';
 import {block} from '../../../utils';
 import {LazyLoader} from '../../LazyLoader';
 
@@ -13,11 +13,16 @@ import './TextContent.scss';
 
 const b = block('text-content');
 
-export const TextContent: React.FC<StringIndependentInputProps> = ({
+export interface TextContentComponentProps {
+    spec: StringSpec;
+    value?: string;
+    Layout?: React.FC<{spec: StringSpec; children: React.ReactElement}>;
+}
+
+export const TextContentComponent: React.FC<TextContentComponentProps> = ({
     spec,
+    value,
     Layout,
-    input,
-    ...restProps
 }) => {
     const {textContentParams, layoutDescription} = spec.viewSpec;
 
@@ -42,7 +47,7 @@ export const TextContent: React.FC<StringIndependentInputProps> = ({
                 size="m"
                 theme={textContentParams.themeLabel}
                 className={b()}
-                value={input.value}
+                value={value}
                 icon={iconLib}
             >
                 {content}
@@ -57,10 +62,10 @@ export const TextContent: React.FC<StringIndependentInputProps> = ({
                     </Text>
                 ) : null}
                 {content}
-                {input.value ? (
+                {value ? (
                     <React.Fragment>
                         <Text className={b('separator')}>:</Text>
-                        <Text color="secondary">{input.value}</Text>
+                        <Text color="secondary">{value}</Text>
                     </React.Fragment>
                 ) : null}
             </div>
@@ -74,12 +79,41 @@ export const TextContent: React.FC<StringIndependentInputProps> = ({
             _spec.viewSpec.layoutDescription = undefined;
         }
 
-        return (
-            <Layout spec={_spec} input={input} {...restProps}>
-                {content}
-            </Layout>
-        );
+        return <Layout spec={_spec}>{content}</Layout>;
     }
 
     return content;
 };
+
+export const TextContent: StringIndependentInput = ({
+    name,
+    spec,
+    Layout,
+    input,
+    arrayInput,
+    meta,
+    layoutProps,
+}) => {
+    const WrappedLayout = React.useMemo(() => {
+        if (Layout) {
+            const Component: TextContentComponentProps['Layout'] = (props) => {
+                return (
+                    <Layout
+                        name={name}
+                        input={input}
+                        layoutProps={layoutProps}
+                        arrayInput={arrayInput}
+                        meta={meta}
+                        {...props}
+                    />
+                );
+            };
+
+            return Component;
+        }
+
+        return undefined;
+    }, [Layout, layoutProps, input, arrayInput, meta, name]);
+
+    return <TextContentComponent spec={spec} value={input.value} Layout={WrappedLayout} />;
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {StringIndependentView} from '../../../core';
+import {TextContentComponent, TextContentComponentProps} from '../Inputs';
+
+export const TextContentView: StringIndependentView = ({name, spec, Layout, value}) => {
+    const WrappedLayout = React.useMemo(() => {
+        if (Layout) {
+            const Component: TextContentComponentProps['Layout'] = (props) => {
+                const VALUE_STUB =
+                    'if u see this, please create issue about it here: https://github.com/gravity-ui/dynamic-forms/issues/new';
+
+                return <Layout name={name} value={VALUE_STUB} {...props} />;
+            };
+
+            return Component;
+        }
+
+        return undefined;
+    }, [Layout, name]);
+
+    return <TextContentComponent spec={spec} value={value} Layout={WrappedLayout} />;
+};

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

@@ -12,6 +12,7 @@ export * from './ObjectValueInputView';
 export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
+export * from './TextContentView';
 export * from './TextLinkView';
 export * from './TimeRangeSelectorView';
 export * from './DateView';

src/lib/kit/constants/config.tsx

@@ -52,6 +52,7 @@ import {
     TextArea,
     TextAreaView,
     TextContent,
+    TextContentView,
     TextLink,
     TextLinkView,
     TimeRangeSelector,
@@ -277,7 +278,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             file_input: {Component: FileInputView},
             number_with_scale: {Component: NumberWithScaleView},
             monaco_input: {Component: MonacoView},
-            text_content: undefined,
+            text_content: {Component: TextContentView, independent: true},
         },
         layouts: {
             row: ViewRow,