@gravity-ui/dynamic-forms 2.4.0 → 2.5.0

package/build/cjs/lib/core/components/Form/Controller.js

@@ -28,7 +28,7 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
+    if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && !spec.viewSpec.hideInput) {
         return withSearch(render(renderProps));
     }
     return null;

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

@@ -5,4 +5,15 @@
 .df-text-content .yc-label__text {
   text-align: initial;
   white-space: initial;
+}
+.df-text-content__icon {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.df-text-content__wrapper {
+  display: flex;
+}
+.df-text-content__separator {
+  margin: 0 4px;
 }

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

@@ -4,21 +4,38 @@ exports.TextContent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 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 { spec, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout"]);
-    const { themeLabel, layoutDescription } = spec.viewSpec;
-    if (!layoutDescription) {
+    var _b;
+    var { spec, Layout, input } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout", "input"]);
+    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) {
         return null;
     }
-    let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
-    if (themeLabel) {
-        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: themeLabel, className: b() }, content));
+    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));
+    }
+    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,
+            content,
+            input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: b('separator') }, ":"),
+                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {
-        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
-        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+        const _spec = lodash_1.default.cloneDeep(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 content;
 };

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const loadIcon = (name) => {
+    const Icon = react_1.default.lazy(() => {
+        return new Promise((resolve) => {
+            const icon = Promise.resolve().then(() => tslib_1.__importStar(require(`@gravity-ui/icons`))).then((module) => {
+                if (module[name]) {
+                    return { default: module[name] };
+                }
+                return {
+                    default: () => null,
+                };
+            });
+            resolve(icon);
+        });
+    });
+    return Icon;
+};
+exports.loadIcon = loadIcon;

package/build/cjs/lib/kit/components/LazyLoader/LazyLoader.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyLoader = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const LazyLoader = ({ component, initialFallback = react_1.default.createElement(react_1.default.Fragment, null), }) => {
+    const fallback = react_1.default.useRef(() => initialFallback);
+    const Component = component;
+    const updateFallback = async () => {
+        const result = await component._result;
+        if (!lodash_1.default.isUndefined(result)) {
+            fallback.current = result.default;
+        }
+    };
+    react_1.default.useEffect(() => {
+        updateFallback();
+    }, [component]);
+    return (react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(fallback.current, null) },
+        react_1.default.createElement(Component, null)));
+};
+exports.LazyLoader = LazyLoader;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./LazyLoader"), exports);

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

@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./ErrorWrapper"), exports);
 tslib_1.__exportStar(require("./GroupIndent"), exports);
 tslib_1.__exportStar(require("./Inputs"), exports);
 tslib_1.__exportStar(require("./Layouts"), exports);
+tslib_1.__exportStar(require("./LazyLoader"), exports);
 tslib_1.__exportStar(require("./LongValue"), exports);
 tslib_1.__exportStar(require("./SimpleVerticalAccordeon"), exports);
 tslib_1.__exportStar(require("./TogglerCard"), exports);

package/build/cjs/lib/kit/utils/common.js

@@ -36,7 +36,7 @@ const isNotEmptyValue = (value, spec) => {
 };
 exports.isNotEmptyValue = isNotEmptyValue;
 const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (lodash_1.default.isObjectLike(spec)) {
         const result = lodash_1.default.cloneDeep(spec);
         if (lodash_1.default.isString(result.type)) {
@@ -48,7 +48,7 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_e) {
+                catch (_j) {
                     _defaultValue = undefined;
                 }
             }
@@ -70,7 +70,14 @@ const prepareSpec = (spec, parseJsonDefaultValue) => {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
         if (lodash_1.default.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
+            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
+        }
+        if (lodash_1.default.isString((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
+            result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
+        }
+        if (lodash_1.default.isString((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
+            result.viewSpec.textContentParams.themeLabel =
+                result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
         if (lodash_1.default.isString(result.validator)) {
             result.validator = result.validator.toLowerCase();

package/build/esm/lib/core/components/Form/Controller.js

@@ -24,7 +24,7 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         useField: renderProps,
         useSearch: withSearch,
     }, __mirror);
-    if (_.isString(name) && isCorrectSpec(spec)) {
+    if (_.isString(name) && isCorrectSpec(spec) && !spec.viewSpec.hideInput) {
         return withSearch(render(renderProps));
     }
     return null;

package/build/esm/lib/core/types/specs.d.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';
 import { ArrayValue, ObjectValue } from './';
 export interface ArraySpec<LinkType = any> {
@@ -27,6 +28,7 @@ export interface ArraySpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         addButtonPosition?: 'down' | 'right';
+        hideInput?: boolean;
     };
 }
 export interface BooleanSpec<LinkType = any> {
@@ -42,6 +44,7 @@ export interface BooleanSpec<LinkType = any> {
         layoutDescription?: string;
         layoutOpen?: boolean;
         link?: LinkType;
+        hideInput?: boolean;
     };
 }
 export interface NumberSpec<LinkType = any> {
@@ -62,6 +65,7 @@ export interface NumberSpec<LinkType = any> {
         link?: LinkType;
         placeholder?: string;
         copy?: boolean;
+        hideInput?: boolean;
     };
 }
 export interface ObjectSpec<LinkType = any> {
@@ -84,6 +88,7 @@ export interface ObjectSpec<LinkType = any> {
             toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
+        hideInput?: boolean;
     };
 }
 export interface StringSpec<LinkType = any> {
@@ -119,7 +124,13 @@ export interface StringSpec<LinkType = any> {
         };
         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;

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

@@ -5,4 +5,15 @@
 .df-text-content .yc-label__text {
   text-align: initial;
   white-space: initial;
+}
+.df-text-content__icon {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.df-text-content__wrapper {
+  display: flex;
+}
+.df-text-content__separator {
+  margin: 0 4px;
 }

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

@@ -1,22 +1,39 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { Label } from '@gravity-ui/uikit';
+import { Label, Text } from '@gravity-ui/uikit';
+import _ from 'lodash';
 import { block } from '../../../utils';
+import { LazyLoader } from '../../LazyLoader';
+import { loadIcon } from './utils';
 import './TextContent.css';
 const b = block('text-content');
 export const TextContent = (_a) => {
-    var { spec, Layout } = _a, restProps = __rest(_a, ["spec", "Layout"]);
-    const { themeLabel, layoutDescription } = spec.viewSpec;
-    if (!layoutDescription) {
+    var _b;
+    var { spec, Layout, input } = _a, restProps = __rest(_a, ["spec", "Layout", "input"]);
+    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) {
         return null;
     }
-    let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
-    if (themeLabel) {
-        content = (React.createElement(Label, { size: "m", theme: themeLabel, className: b() }, content));
+    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));
+    }
+    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,
+            content,
+            input.value ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: b('separator') }, ":"),
+                React.createElement(Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {
-        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
-        return (React.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+        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 content;
 };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const loadIcon: (name: string) => React.LazyExoticComponent<React.ComponentType<any>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export const loadIcon = (name) => {
+    const Icon = React.lazy(() => {
+        return new Promise((resolve) => {
+            const icon = import(`@gravity-ui/icons`).then((module) => {
+                if (module[name]) {
+                    return { default: module[name] };
+                }
+                return {
+                    default: () => null,
+                };
+            });
+            resolve(icon);
+        });
+    });
+    return Icon;
+};

package/build/esm/lib/kit/components/LazyLoader/LazyLoader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type LazyLoaderProps = {
+    component: React.LazyExoticComponent<React.ComponentType<any>>;
+    initialFallback?: JSX.Element;
+};
+export declare const LazyLoader: ({ component, initialFallback, }: LazyLoaderProps) => JSX.Element;

package/build/esm/lib/kit/components/LazyLoader/LazyLoader.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import _ from 'lodash';
+export const LazyLoader = ({ component, initialFallback = React.createElement(React.Fragment, null), }) => {
+    const fallback = React.useRef(() => initialFallback);
+    const Component = component;
+    const updateFallback = async () => {
+        const result = await component._result;
+        if (!_.isUndefined(result)) {
+            fallback.current = result.default;
+        }
+    };
+    React.useEffect(() => {
+        updateFallback();
+    }, [component]);
+    return (React.createElement(React.Suspense, { fallback: React.createElement(fallback.current, null) },
+        React.createElement(Component, null)));
+};

package/build/esm/lib/kit/components/LazyLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './LazyLoader';

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

@@ -0,0 +1 @@
+export * from './LazyLoader';

package/build/esm/lib/kit/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';
+export * from './LazyLoader';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
 export * from './TogglerCard';

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

@@ -5,6 +5,7 @@ export * from './ErrorWrapper';
 export * from './GroupIndent';
 export * from './Inputs';
 export * from './Layouts';
+export * from './LazyLoader';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
 export * from './TogglerCard';

package/build/esm/lib/kit/utils/common.js

@@ -31,7 +31,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (_.isObjectLike(spec)) {
         const result = _.cloneDeep(spec);
         if (_.isString(result.type)) {
@@ -43,7 +43,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_e) {
+                catch (_j) {
                     _defaultValue = undefined;
                 }
             }
@@ -65,7 +65,14 @@ export const prepareSpec = (spec, parseJsonDefaultValue) => {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
         if (_.isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
-            result.viewSpec.themeLabel = result.viewSpec.themeLabel.toLowerCase();
+            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
+        }
+        if (_.isString((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
+            result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
+        }
+        if (_.isString((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
+            result.viewSpec.textContentParams.themeLabel =
+                result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
         if (_.isString(result.validator)) {
             result.validator = result.validator.toLowerCase();

package/package.json

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