@gravity-ui/dynamic-forms 4.10.0 → 4.12.0

package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextContent = void 0;
+exports.TextContent = exports.TextContentComponent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
@@ -9,9 +9,8 @@ const utils_1 = require("../../../utils");
 const LazyLoader_1 = require("../../LazyLoader");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('text-content');
-const TextContent = (_a) => {
-    var _b;
-    var { spec, Layout, input } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout", "input"]);
+const TextContentComponent = ({ spec, value, Layout, }) => {
+    var _a;
     const { textContentParams, layoutDescription } = spec.viewSpec;
     const text = react_1.default.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
     if (!text) {
@@ -20,23 +19,36 @@ const TextContent = (_a) => {
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
-        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: input.value, icon: iconLib }, content));
+        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {
         content = (react_1.default.createElement("div", { className: b('wrapper') },
-            iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.iconColor, className: b('icon') }, iconLib)) : null,
             content,
-            input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
+            value ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(uikit_1.Text, { className: b('separator') }, ":"),
-                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
+                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, value))) : null));
     }
     if (Layout) {
         const _spec = (0, cloneDeep_1.default)(spec);
         if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
             _spec.viewSpec.layoutDescription = undefined;
         }
-        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
+        return react_1.default.createElement(Layout, { spec: _spec }, content);
     }
     return content;
 };
+exports.TextContentComponent = TextContentComponent;
+const TextContent = ({ name, spec, Layout, input, arrayInput, meta, layoutProps, }) => {
+    const WrappedLayout = react_1.default.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                return (react_1.default.createElement(Layout, Object.assign({ name: name, input: input, layoutProps: layoutProps, arrayInput: arrayInput, meta: meta }, props)));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, layoutProps, input, arrayInput, meta, name]);
+    return react_1.default.createElement(exports.TextContentComponent, { spec: spec, value: input.value, Layout: WrappedLayout });
+};
 exports.TextContent = TextContent;

package/build/cjs/lib/kit/components/LongValue/LongValue.css

@@ -2,6 +2,7 @@
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .df-long-value_open {
   white-space: pre-wrap;

package/build/cjs/lib/kit/components/Views/TextContentView.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContentView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Inputs_1 = require("../Inputs");
+const TextContentView = ({ name, spec, Layout, value }) => {
+    const WrappedLayout = react_1.default.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                const VALUE_STUB = 'if u see this, please create issue about it here: https://github.com/gravity-ui/dynamic-forms/issues/new';
+                return react_1.default.createElement(Layout, Object.assign({ name: name, value: VALUE_STUB }, props));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, name]);
+    return react_1.default.createElement(Inputs_1.TextContentComponent, { spec: spec, value: value, Layout: WrappedLayout });
+};
+exports.TextContentView = TextContentView;

package/build/cjs/lib/kit/components/Views/index.js

@@ -15,6 +15,7 @@ tslib_1.__exportStar(require("./ObjectValueInputView"), exports);
 tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
+tslib_1.__exportStar(require("./TextContentView"), exports);
 tslib_1.__exportStar(require("./TextLinkView"), exports);
 tslib_1.__exportStar(require("./TimeRangeSelectorView"), exports);
 tslib_1.__exportStar(require("./DateView"), exports);

package/build/cjs/lib/kit/constants/config.js

@@ -202,7 +202,7 @@ exports.dynamicViewConfig = {
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
-            text_content: undefined,
+            text_content: { Component: components_1.TextContentView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,

package/build/esm/lib/kit/components/Inputs/TextContent/TextContent.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
-import { StringIndependentInputProps } from '../../../../core';
+import { StringIndependentInput, StringSpec } from '../../../../core';
 import './TextContent.css';
-export declare const TextContent: React.FC<StringIndependentInputProps>;
+export interface TextContentComponentProps {
+    spec: StringSpec;
+    value?: string;
+    Layout?: React.FC<{
+        spec: StringSpec;
+        children: React.ReactElement;
+    }>;
+}
+export declare const TextContentComponent: React.FC<TextContentComponentProps>;
+export declare const TextContent: StringIndependentInput;

package/build/esm/lib/kit/components/Inputs/TextContent/TextContent.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { Label, Text } from '@gravity-ui/uikit';
 import cloneDeep from 'lodash/cloneDeep';
@@ -7,9 +6,8 @@ import { LazyLoader } from '../../LazyLoader';
 import { loadIcon } from './utils';
 import './TextContent.css';
 const b = block('text-content');
-export const TextContent = (_a) => {
-    var _b;
-    var { spec, Layout, input } = _a, restProps = __rest(_a, ["spec", "Layout", "input"]);
+export const TextContentComponent = ({ spec, value, Layout, }) => {
+    var _a;
     const { textContentParams, layoutDescription } = spec.viewSpec;
     const text = React.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
     if (!text) {
@@ -18,22 +16,34 @@ export const TextContent = (_a) => {
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
-        content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: input.value, icon: iconLib }, content));
+        content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {
         content = (React.createElement("div", { className: b('wrapper') },
-            iconLib ? (React.createElement(Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            iconLib ? (React.createElement(Text, { color: (_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.iconColor, className: b('icon') }, iconLib)) : null,
             content,
-            input.value ? (React.createElement(React.Fragment, null,
+            value ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { className: b('separator') }, ":"),
-                React.createElement(Text, { color: "secondary" }, input.value))) : null));
+                React.createElement(Text, { color: "secondary" }, value))) : null));
     }
     if (Layout) {
         const _spec = cloneDeep(spec);
         if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
             _spec.viewSpec.layoutDescription = undefined;
         }
-        return (React.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
+        return React.createElement(Layout, { spec: _spec }, content);
     }
     return content;
 };
+export const TextContent = ({ name, spec, Layout, input, arrayInput, meta, layoutProps, }) => {
+    const WrappedLayout = React.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                return (React.createElement(Layout, Object.assign({ name: name, input: input, layoutProps: layoutProps, arrayInput: arrayInput, meta: meta }, props)));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, layoutProps, input, arrayInput, meta, name]);
+    return React.createElement(TextContentComponent, { spec: spec, value: input.value, Layout: WrappedLayout });
+};

package/build/esm/lib/kit/components/LongValue/LongValue.css

@@ -2,6 +2,7 @@
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .df-long-value_open {
   white-space: pre-wrap;

package/build/esm/lib/kit/components/Views/TextContentView.d.ts

@@ -0,0 +1,2 @@
+import { StringIndependentView } from '../../../core';
+export declare const TextContentView: StringIndependentView;

package/build/esm/lib/kit/components/Views/TextContentView.js

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

package/build/esm/lib/kit/components/Views/index.d.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';

package/build/esm/lib/kit/components/Views/index.js

@@ -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';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -199,7 +199,7 @@ export const 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",