Merge branch 'main' into dynamic-docs

Author: NasgulNexus

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [4.15.0](https://github.com/gravity-ui/dynamic-forms/compare/v4.14.3...v4.15.0) (2024-12-12)
+
+
+### Features
+
+* add column view ([#257](https://github.com/gravity-ui/dynamic-forms/issues/257)) ([0138f29](https://github.com/gravity-ui/dynamic-forms/commit/0138f29f1352d4e1fb5b62efa5e40c446a09412a))
+
+
+### Bug Fixes
+
+* Fix meta types ([#255](https://github.com/gravity-ui/dynamic-forms/issues/255)) ([e7a710c](https://github.com/gravity-ui/dynamic-forms/commit/e7a710ce90c48440c35624dd2c5b093adb9f39d5))
+
+## [4.14.3](https://github.com/gravity-ui/dynamic-forms/compare/v4.14.2...v4.14.3) (2024-11-29)
+
+
+### Bug Fixes
+
+* fix remove button for array item object ([#251](https://github.com/gravity-ui/dynamic-forms/issues/251)) ([f156e5b](https://github.com/gravity-ui/dynamic-forms/commit/f156e5b8ecd230da2de3de52422a3ec182c653bf))
+
 ## [4.14.2](https://github.com/gravity-ui/dynamic-forms/compare/v4.14.1...v4.14.2) (2024-11-12)
 
 

package-lock.json

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

package.json

@@ -33,5 +33,6 @@ export interface FieldRenderProps<Value extends FieldValue> {
         valid: boolean;
         visited: boolean;
         submitFailed: boolean;
+        childErrors: Record<string, ValidateError>;
     };
 }

src/lib/core/components/Form/types/field.ts

@@ -0,0 +1,81 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}column {
+    margin-bottom: 15px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &__first-row {
+        min-height: 28px;
+        display: flex;
+        margin-bottom: auto;
+        flex-direction: column;
+        flex-shrink: 0;
+
+        &-inner {
+            display: inline;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        &::after {
+            content: '';
+            width: 100%;
+            flex-shrink: 1;
+        }
+    }
+
+    &__title {
+        word-break: break-word;
+        margin-right: 3px;
+
+        &_required {
+            &::after {
+                content: '*';
+                color: var(--g-color-text-danger);
+            }
+        }
+    }
+
+    &__note {
+        position: relative;
+
+        &-inner {
+            position: absolute;
+            margin-top: 1px;
+
+            .g-help-popover {
+                display: flex;
+
+                & > span {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    &__second-row {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        &-inner {
+            display: flex;
+            justify-content: space-around;
+        }
+    }
+
+    &__remove-button {
+        margin-left: 5px;
+    }
+
+    &__required-mark {
+        color: var(--g-color-text-danger);
+    }
+
+    &__error-wrapper {
+        min-width: 100%;
+    }
+}

src/lib/kit/components/Layouts/Column/Column.scss

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import {HelpPopover} from '@gravity-ui/components';
+import {TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+
+import {
+    FieldValue,
+    LayoutProps,
+    Spec,
+    StringSpec,
+    isArrayItem,
+    isArraySpec,
+    isObjectSpec,
+    withGenerateButton,
+} from '../../../../core';
+import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
+import {block} from '../../../utils';
+
+import './Column.scss';
+
+const b = block('column');
+
+interface ColumnProps {}
+
+const ColumnBase = <T extends FieldValue, S extends Spec>({
+    name,
+    spec,
+    input,
+    meta,
+    children,
+}: LayoutProps<T, undefined, undefined, S> & ColumnProps) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
+
+    return (
+        <div className={b()}>
+            <div className={b('first-row')}>
+                <div className={b('first-row-inner')}>
+                    <Text className={b('title', {required: spec.required})}>
+                        {spec.viewSpec.layoutTitle}
+                    </Text>
+                    {spec.viewSpec.layoutDescription ? (
+                        <span className={b('note')}>
+                            <Text className={b('note-inner')}>
+                                <HelpPopover
+                                    htmlContent={spec.viewSpec.layoutDescription}
+                                    placement={['bottom', 'top']}
+                                />
+                            </Text>
+                        </span>
+                    ) : null}
+                </div>
+            </div>
+            <div className={b('second-row')}>
+                <div className={b('second-row-inner')}>
+                    <ErrorWrapper
+                        name={name}
+                        meta={meta}
+                        withoutChildErrorStyles={
+                            // TODO: remove condition spec.viewSpec.type !== 'select'
+                            (isArraySpec(spec) && spec.viewSpec.type !== 'select') ||
+                            isObjectSpec(spec)
+                        }
+                        className={b('error-wrapper')}
+                    >
+                        {children}
+                    </ErrorWrapper>
+                    {generateButton ? (
+                        <GenerateRandomValueButton
+                            spec={spec as StringSpec}
+                            onChange={input.onChange as (value: string) => void}
+                        />
+                    ) : null}
+                    {arrayItem ? (
+                        <Button
+                            view="flat-secondary"
+                            className={b('remove-button')}
+                            onClick={input.onDrop}
+                            qa={`${name}-remove-item`}
+                        >
+                            <Icon data={TrashBin} size={16} />
+                        </Button>
+                    ) : null}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const Column = <T extends FieldValue, S extends Spec>(
+    props: LayoutProps<T, undefined, undefined, S>,
+) => <ColumnBase {...props} />;