diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx index 0a49d25a..3d52736b 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx +++ b/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 = ({ +export interface TextContentComponentProps { + spec: StringSpec; + value?: string; + Layout?: React.FC<{spec: StringSpec; children: React.ReactElement}>; +} + +export const TextContentComponent: React.FC = ({ spec, + value, Layout, - input, - ...restProps }) => { const {textContentParams, layoutDescription} = spec.viewSpec; @@ -42,7 +47,7 @@ export const TextContent: React.FC = ({ size="m" theme={textContentParams.themeLabel} className={b()} - value={input.value} + value={value} icon={iconLib} > {content} @@ -57,10 +62,10 @@ export const TextContent: React.FC = ({ ) : null} {content} - {input.value ? ( + {value ? ( : - {input.value} + {value} ) : null} @@ -74,12 +79,41 @@ export const TextContent: React.FC = ({ _spec.viewSpec.layoutDescription = undefined; } - return ( - - {content} - - ); + return {content}; } 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 ( + + ); + }; + + return Component; + } + + return undefined; + }, [Layout, layoutProps, input, arrayInput, meta, name]); + + return ; +}; diff --git a/src/lib/kit/components/Views/TextContentView.tsx b/src/lib/kit/components/Views/TextContentView.tsx new file mode 100644 index 00000000..c0c94bf3 --- /dev/null +++ b/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 ; + }; + + return Component; + } + + return undefined; + }, [Layout, name]); + + return ; +}; diff --git a/src/lib/kit/components/Views/index.ts b/src/lib/kit/components/Views/index.ts index a63c9862..bd7c463c 100644 --- a/src/lib/kit/components/Views/index.ts +++ b/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'; diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx index 187c8889..c10d2cd6 100644 --- a/src/lib/kit/constants/config.tsx +++ b/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,