@gravity-ui/dynamic-forms 5.14.0 → 5.15.0

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

@@ -26,9 +26,11 @@
   white-space: initial;
   line-height: var(--_--height);
 }
-.df-text-content__icon {
+.df-text-content__icon, .df-text-content__alert-icon {
   display: flex;
   align-items: center;
+}
+.df-text-content__icon {
   margin-right: var(--df-text-content-icon-margin-right, var(--g-spacing-1));
 }
 .df-text-content__wrapper {

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

@@ -14,18 +14,23 @@ 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]);
+    const iconName = textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon;
+    const alertView = textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert;
+    const hasIconParam = typeof iconName === 'string';
+    const IconComponent = react_1.default.useMemo(() => (iconName ? (0, utils_2.loadIcon)(iconName) : undefined), [iconName]);
+    const iconLib = react_1.default.useMemo(() => (IconComponent ? react_1.default.createElement(LazyLoader_1.LazyLoader, { component: IconComponent }) : null), [IconComponent]);
+    const alertIcon = react_1.default.useMemo(() => (iconLib ? react_1.default.createElement("span", { className: b('alert-icon') }, iconLib) : null), [iconLib]);
     if (!text) {
         return null;
     }
-    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) })) : undefined;
     let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert) {
         const titleAlert = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert) || !(0, lodash_1.isEmpty)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)
             ? textContentParams.titleAlert
             : undefined;
-        content = (react_1.default.createElement(uikit_1.Alert, { icon: iconLib, message: content, 
+        content = (react_1.default.createElement(uikit_1.Alert, Object.assign({}, (alertIcon || hasIconParam ? { icon: alertIcon } : {}), { message: content, 
             // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
-            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert }));
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: (0, utils_2.isAlertView)(alertView) ? alertView : undefined })));
     }
     else 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: value, icon: iconLib }, content));

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadIcon = void 0;
+exports.isAlertView = exports.loadIcon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const loadIcon = (name) => {
@@ -20,3 +20,7 @@ const loadIcon = (name) => {
     return Icon;
 };
 exports.loadIcon = loadIcon;
+const isAlertView = (view) => {
+    return view === 'filled' || view === 'outlined';
+};
+exports.isAlertView = isAlertView;

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

@@ -5,16 +5,17 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Inputs_1 = require("../Inputs");
 const TextContentView = ({ name, spec, Layout, value }) => {
+    var _a;
+    const layoutValue = ((_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.text) || spec.viewSpec.layoutDescription || 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 react_1.default.createElement(Layout, Object.assign({ name: name, value: layoutValue }, props));
             };
             return Component;
         }
         return undefined;
-    }, [Layout, name]);
+    }, [Layout, layoutValue, name]);
     return react_1.default.createElement(Inputs_1.TextContentComponent, { spec: spec, value: value, Layout: WrappedLayout });
 };
 exports.TextContentView = TextContentView;

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

@@ -26,9 +26,11 @@
   white-space: initial;
   line-height: var(--_--height);
 }
-.df-text-content__icon {
+.df-text-content__icon, .df-text-content__alert-icon {
   display: flex;
   align-items: center;
+}
+.df-text-content__icon {
   margin-right: var(--df-text-content-icon-margin-right, var(--g-spacing-1));
 }
 .df-text-content__wrapper {

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

@@ -4,25 +4,30 @@ import { isEmpty } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import { block } from '../../../utils';
 import { LazyLoader } from '../../LazyLoader';
-import { loadIcon } from './utils';
+import { isAlertView, loadIcon } from './utils';
 import './TextContent.css';
 const b = block('text-content');
 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]);
+    const iconName = textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon;
+    const alertView = textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert;
+    const hasIconParam = typeof iconName === 'string';
+    const IconComponent = React.useMemo(() => (iconName ? loadIcon(iconName) : undefined), [iconName]);
+    const iconLib = React.useMemo(() => (IconComponent ? React.createElement(LazyLoader, { component: IconComponent }) : null), [IconComponent]);
+    const alertIcon = React.useMemo(() => (iconLib ? React.createElement("span", { className: b('alert-icon') }, iconLib) : null), [iconLib]);
     if (!text) {
         return null;
     }
-    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) })) : undefined;
     let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert) {
         const titleAlert = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert) || !isEmpty(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.titleAlert)
             ? textContentParams.titleAlert
             : undefined;
-        content = (React.createElement(Alert, { icon: iconLib, message: content, 
+        content = (React.createElement(Alert, Object.assign({}, (alertIcon || hasIconParam ? { icon: alertIcon } : {}), { message: content, 
             // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
-            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.viewAlert }));
+            title: titleAlert, theme: textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeAlert, view: isAlertView(alertView) ? alertView : undefined })));
     }
     else if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
         content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));

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

@@ -1,2 +1,4 @@
 import React from 'react';
+import type { AlertProps } from '@gravity-ui/uikit';
 export declare const loadIcon: (name: string) => React.LazyExoticComponent<React.ComponentType<any>>;
+export declare const isAlertView: (view: unknown) => view is AlertProps["view"];

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

@@ -15,3 +15,6 @@ export const loadIcon = (name) => {
     });
     return Icon;
 };
+export const isAlertView = (view) => {
+    return view === 'filled' || view === 'outlined';
+};

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import { TextContentComponent } from '../Inputs';
 export const TextContentView = ({ name, spec, Layout, value }) => {
+    var _a;
+    const layoutValue = ((_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.text) || spec.viewSpec.layoutDescription || 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 React.createElement(Layout, Object.assign({ name: name, value: layoutValue }, props));
             };
             return Component;
         }
         return undefined;
-    }, [Layout, name]);
+    }, [Layout, layoutValue, name]);
     return React.createElement(TextContentComponent, { spec: spec, value: value, Layout: WrappedLayout });
 };

package/package.json

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