@gravity-ui/dynamic-forms 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.1.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.0.2...v1.1.0) (2023-03-19)
+
+
+### Features
+
+* add `row_verbose` layout ([#7](https://github.com/gravity-ui/dynamic-forms/issues/7)) ([a3030e1](https://github.com/gravity-ui/dynamic-forms/commit/a3030e105708c41211339d8ddd0b21e0b16cebfa))
+
+
+### Bug Fixes
+
+* fix store errors ([#11](https://github.com/gravity-ui/dynamic-forms/issues/11)) ([3ed0d8e](https://github.com/gravity-ui/dynamic-forms/commit/3ed0d8e7cb4faefad351c5551b48461e7f6fd529))
+
 ## [1.0.2](https://github.com/gravity-ui/dynamic-forms/compare/v1.0.1...v1.0.2) (2023-03-15)
 
 

package/build/cjs/lib/core/components/Form/hooks/useField.js

@@ -53,7 +53,15 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
                 const _value = lodash_1.default.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
                 const value = (0, helpers_2.transformArrIn)(_value);
-                return Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: Object.assign(Object.assign({}, state.childErrors), (childErrors || {})) });
+                let newChildErrors = Object.assign({}, state.childErrors);
+                if (childErrors) {
+                    const nearestChildName = lodash_1.default.keys(childErrors).sort((a, b) => a.length - b.length)[0];
+                    if (nearestChildName) {
+                        const existingСhildNames = lodash_1.default.keys(newChildErrors).filter((childName) => childName.startsWith(nearestChildName));
+                        newChildErrors = Object.assign(Object.assign({}, lodash_1.default.omit(newChildErrors, existingСhildNames)), childErrors);
+                    }
+                }
+                return Object.assign(Object.assign({}, state), { dirty: !lodash_1.default.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: newChildErrors });
             });
         };
         const onDrop = () => {
@@ -125,7 +133,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            tools.onUnmount(name);
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, { [name]: false });
         };
     }, []);
     return renderProps;

package/build/cjs/lib/core/components/Form/hooks/useStore.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
-const constants_1 = require("../constants");
 const helpers_1 = require("../helpers");
 const useStore = (name) => {
     const form = (0, react_final_form_1.useForm)();
@@ -50,13 +49,7 @@ const useStore = (name) => {
     }, [store.name, store.errors]);
     const tools = react_1.default.useMemo(() => ({
         initialValue: store.initialValue,
-        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.set(Object.assign({}, store.values), name, value), errors: Object.assign(Object.assign({}, store.errors), (errors || {})) }))),
-        onUnmount: (name) => setStore((store) => {
-            const value = lodash_1.default.get(store.values, name);
-            const values = value && value !== constants_1.REMOVED_ITEM
-                ? Object.assign({}, lodash_1.default.set(store.values, name, undefined)) : store.values;
-            return Object.assign(Object.assign({}, store), { values, errors: Object.assign({}, lodash_1.default.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name)))) });
-        }),
+        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.set(Object.assign({}, store.values), name, value), errors: errors || {} }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
     const change = react_1.default.useCallback(lodash_1.default.debounce((value) => {

package/build/cjs/lib/kit/components/Layouts/Row/Row.css

@@ -43,9 +43,18 @@
 }
 .df-row__right {
   display: flex;
+  flex-direction: column;
   flex-grow: 1;
   margin-left: 15px;
 }
+.df-row__right-inner {
+  display: flex;
+}
+.df-row__description {
+  margin-top: 10px;
+  color: var(--yc-color-text-secondary);
+  word-break: break-word;
+}
 .df-row__remove-button {
   margin-left: 5px;
 }

package/build/cjs/lib/kit/components/Layouts/Row/Row.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Row = void 0;
+exports.RowVerbose = exports.Row = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
@@ -9,7 +9,7 @@ const core_1 = require("../../../../core");
 const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('row');
-const Row = ({ name, spec, input, meta, children, }) => {
+const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
     const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
     return (react_1.default.createElement("div", { className: b({ 'extra-width': (0, core_1.isArraySpec)(spec) || arrayItem }) },
         react_1.default.createElement("div", { className: b('left') },
@@ -17,11 +17,16 @@ const Row = ({ name, spec, input, meta, children, }) => {
                 react_1.default.createElement("div", { className: b('title') },
                     spec.viewSpec.layoutTitle,
                     spec.required && react_1.default.createElement("span", { className: b('required-mark') }, "*")),
-                spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('note') },
+                !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('note') },
                     react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
         react_1.default.createElement("div", { className: b('right') },
-            react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
-            arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null)));
+            react_1.default.createElement("div", { className: b('right-inner') },
+                react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
+                arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null),
+            verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };
+const Row = (props) => (react_1.default.createElement(RowBase, Object.assign({}, props)));
 exports.Row = Row;
+const RowVerbose = (props) => (react_1.default.createElement(RowBase, Object.assign({ verboseDescription: true }, props)));
+exports.RowVerbose = RowVerbose;

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

@@ -12,6 +12,7 @@ exports.dynamicConfig = {
         },
         layouts: {
             row: components_1.Row,
+            row_verbose: components_1.RowVerbose,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -32,6 +33,7 @@ exports.dynamicConfig = {
         },
         layouts: {
             row: components_1.Row,
+            row_verbose: components_1.RowVerbose,
             table_item: components_1.TableCell,
         },
         validators: {
@@ -44,6 +46,7 @@ exports.dynamicConfig = {
         },
         layouts: {
             row: components_1.Row,
+            row_verbose: components_1.RowVerbose,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
         },
@@ -60,6 +63,7 @@ exports.dynamicConfig = {
         },
         layouts: {
             row: components_1.Row,
+            row_verbose: components_1.RowVerbose,
             accordeon: components_1.Accordeon,
             section: components_1.Section,
             section2: components_1.Section2,
@@ -85,6 +89,7 @@ exports.dynamicConfig = {
         },
         layouts: {
             row: components_1.Row,
+            row_verbose: components_1.RowVerbose,
             table_item: components_1.TableCell,
             transparent: components_1.Transparent,
             section: components_1.Section,

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -49,7 +49,15 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
                 const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
                 const error = validate === null || validate === void 0 ? void 0 : validate(_value);
                 const value = transformArrIn(_value);
-                return Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: Object.assign(Object.assign({}, state.childErrors), (childErrors || {})) });
+                let newChildErrors = Object.assign({}, state.childErrors);
+                if (childErrors) {
+                    const nearestChildName = _.keys(childErrors).sort((a, b) => a.length - b.length)[0];
+                    if (nearestChildName) {
+                        const existingСhildNames = _.keys(newChildErrors).filter((childName) => childName.startsWith(nearestChildName));
+                        newChildErrors = Object.assign(Object.assign({}, _.omit(newChildErrors, existingСhildNames)), childErrors);
+                    }
+                }
+                return Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: newChildErrors });
             });
         };
         const onDrop = () => {
@@ -121,7 +129,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {
-            tools.onUnmount(name);
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, { [name]: false });
         };
     }, []);
     return renderProps;

package/build/esm/lib/core/components/Form/hooks/useStore.d.ts

@@ -9,7 +9,6 @@ export declare const useStore: (name: string) => {
     tools: {
         initialValue: FieldObjectValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
-        onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
     watcher: JSX.Element;

package/build/esm/lib/core/components/Form/hooks/useStore.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
 import { Field as FinalFormField, useForm } from 'react-final-form';
-import { REMOVED_ITEM } from '../constants';
 import { transformArrIn, transformArrOut } from '../helpers';
 export const useStore = (name) => {
     const form = useForm();
@@ -46,13 +45,7 @@ export const useStore = (name) => {
     }, [store.name, store.errors]);
     const tools = React.useMemo(() => ({
         initialValue: store.initialValue,
-        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, value), errors: Object.assign(Object.assign({}, store.errors), (errors || {})) }))),
-        onUnmount: (name) => setStore((store) => {
-            const value = _.get(store.values, name);
-            const values = value && value !== REMOVED_ITEM
-                ? Object.assign({}, _.set(store.values, name, undefined)) : store.values;
-            return Object.assign(Object.assign({}, store), { values, errors: Object.assign({}, _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name)))) });
-        }),
+        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, value), errors: errors || {} }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
     const change = React.useCallback(_.debounce((value) => {

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -7,7 +7,6 @@ export interface DynamicFormsContext {
     tools: {
         initialValue: FieldObjectValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
-        onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
 }

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -43,9 +43,18 @@
 }
 .df-row__right {
   display: flex;
+  flex-direction: column;
   flex-grow: 1;
   margin-left: 15px;
 }
+.df-row__right-inner {
+  display: flex;
+}
+.df-row__description {
+  margin-top: 10px;
+  color: var(--yc-color-text-secondary);
+  word-break: break-word;
+}
 .df-row__remove-button {
   margin-left: 5px;
 }

package/build/esm/lib/kit/components/Layouts/Row/Row.d.ts

@@ -1,3 +1,4 @@
 import { FieldValue, LayoutProps, Spec } from '../../../../core';
 import './Row.css';
-export declare const Row: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;
+export declare const Row: <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => JSX.Element;
+export declare const RowVerbose: <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => JSX.Element;

package/build/esm/lib/kit/components/Layouts/Row/Row.js

@@ -6,7 +6,7 @@ import { ErrorWrapper } from '../../../components';
 import { block } from '../../../utils';
 import './Row.css';
 const b = block('row');
-export const Row = ({ name, spec, input, meta, children, }) => {
+const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     return (React.createElement("div", { className: b({ 'extra-width': isArraySpec(spec) || arrayItem }) },
         React.createElement("div", { className: b('left') },
@@ -14,10 +14,14 @@ export const Row = ({ name, spec, input, meta, children, }) => {
                 React.createElement("div", { className: b('title') },
                     spec.viewSpec.layoutTitle,
                     spec.required && React.createElement("span", { className: b('required-mark') }, "*")),
-                spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('note') },
+                !verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('note') },
                     React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
         React.createElement("div", { className: b('right') },
-            React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-            arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
-                React.createElement(Icon, { data: Xmark, size: 16 }))) : null)));
+            React.createElement("div", { className: b('right-inner') },
+                React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
+                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                    React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
+            verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };
+export const Row = (props) => (React.createElement(RowBase, Object.assign({}, props)));
+export const RowVerbose = (props) => (React.createElement(RowBase, Object.assign({ verboseDescription: true }, props)));

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -9,6 +9,7 @@ export const dynamicConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -29,6 +30,7 @@ export const dynamicConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
         },
         validators: {
@@ -41,6 +43,7 @@ export const dynamicConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -57,6 +60,7 @@ export const dynamicConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -82,6 +86,7 @@ export const dynamicConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
             section: Section,

package/package.json

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