diff --git a/src/lib/core/components/Form/Controller/Controller.tsx b/src/lib/core/components/Form/Controller/Controller.tsx index 19827d5c..4a776a08 100644 --- a/src/lib/core/components/Form/Controller/Controller.tsx +++ b/src/lib/core/components/Form/Controller/Controller.tsx @@ -21,6 +21,7 @@ export interface ControllerProps void) | null; parentOnUnmount: ((childName: string) => void) | null; + additionalContentLayout?: React.ReactNode; } export const Controller = < @@ -33,6 +34,7 @@ export const Controller = < value: valueFromParent, parentOnChange, parentOnUnmount, + additionalContentLayout, }: ControllerProps) => { const {config, tools, mutatorsStore, __mirror} = useDynamicFormsCtx(); @@ -47,6 +49,7 @@ export const Controller = < tools, parentOnChange, parentOnUnmount, + additionalContentLayout, }), ); @@ -120,8 +123,9 @@ export const Controller = < onDrop: methods.onDrop, }, meta: {...omit(store.state, 'value'), submitFailed: store.tools.submitFailed}, + additionalContentLayout: additionalContentLayout, }), - [methods, store.name, store.state, store.tools.submitFailed], + [methods, store.name, store.state, store.tools.submitFailed, additionalContentLayout], ); const withSearch = useSearch(store.spec, store.state.value, store.name); diff --git a/src/lib/core/components/Form/Controller/types.ts b/src/lib/core/components/Form/Controller/types.ts index a176fe1b..e21d5226 100644 --- a/src/lib/core/components/Form/Controller/types.ts +++ b/src/lib/core/components/Form/Controller/types.ts @@ -1,3 +1,4 @@ +import React from 'react'; import {FormValue, Spec} from '../../../types'; import { DynamicFormConfig, @@ -42,6 +43,7 @@ export interface GetRenderParams< | InputEntity | IndependentInputEntity; Layout?: LayoutType; + additionalContentLayout?: React.ReactNode; } export interface GetValidateParams { @@ -110,6 +112,7 @@ export interface InitializeStoreParams void) | null; parentOnUnmount: ((childName: string) => void) | null; + additionalContentLayout?: React.ReactNode; } export interface ControllerStore< @@ -148,6 +151,7 @@ export interface ControllerStore< childErrors: Record; }; afterStoreUpdateCB?: () => void; + additionalContentLayout?: React.ReactNode; } export interface UpdateStoreParams< diff --git a/src/lib/core/components/Form/Controller/utils.tsx b/src/lib/core/components/Form/Controller/utils.tsx index e1dda489..3190bdbf 100644 --- a/src/lib/core/components/Form/Controller/utils.tsx +++ b/src/lib/core/components/Form/Controller/utils.tsx @@ -142,6 +142,7 @@ export const getRender = ( spec, inputEntity, Layout, + additionalContentLayout, }: GetRenderParams) => { const render = (props: FieldRenderProps) => { if (inputEntity && isCorrectSpec(spec) && isString(name)) { @@ -169,7 +170,13 @@ export const getRender = ( if (Layout) { return ( - + {input} ); @@ -467,10 +474,11 @@ export const initializeStore = < tools, parentOnChange, parentOnUnmount, + additionalContentLayout, }: InitializeStoreParams): ControllerStore => { const spec = getSpec({name, spec: _spec, mutatorsStore}); const components = getComponents({spec, config}); - const render = getRender({name, spec, ...components}); + const render = getRender({name, spec, ...components, additionalContentLayout}); const validate = getValidate({spec, config}); const state = getFieldInitials({ name, diff --git a/src/lib/core/components/Form/types/layout.ts b/src/lib/core/components/Form/types/layout.ts index f1d6f856..571a4ff7 100644 --- a/src/lib/core/components/Form/types/layout.ts +++ b/src/lib/core/components/Form/types/layout.ts @@ -12,6 +12,7 @@ export type LayoutProps< > = { children: React.ReactElement; layoutProps?: LayoutComponentProps; + additionalContentLayout?: React.ReactNode; } & Omit, 'inputProps'>; export type LayoutType< diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index 02aa0ce7..c5dbd5c7 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -47,6 +47,7 @@ export interface ArraySpec< placement?: 'horizontal' | 'vertical'; disabled?: Record; }; + enableLockLength?: boolean; }; } diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-chromium-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-chromium-linux.png index 518341c6..307c0e70 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-chromium-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-webkit-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-webkit-linux.png index 94d3da09..f45410e7 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-webkit-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-chromium-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-chromium-linux.png index 6d6186de..71057f27 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-chromium-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-webkit-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-webkit-linux.png index 88165457..05819ddd 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-webkit-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Accordeon-Card-array-spec-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-chromium-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-chromium-linux.png index a18e80fd..af72a516 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-chromium-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-webkit-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-webkit-linux.png index 763783ea..a1168970 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-webkit-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-chromium-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-chromium-linux.png index 4ce27cfa..9f2f1253 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-chromium-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-webkit-linux.png b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-webkit-linux.png index 952a92b8..7bf64a0c 100644 Binary files a/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-webkit-linux.png and b/src/lib/kit/components/Card/__snapshots__/Card.visual.test.tsx-snapshots/Card-Section-Card-array-spec-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss index 58837a6d..f528eb42 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss @@ -34,4 +34,8 @@ margin-left: 4px; } } + + &__remove-button { + margin-left: 4px; + } } diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx index ff21759e..cf9d02af 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import {Plus} from '@gravity-ui/icons'; -import {Button, Icon, Label} from '@gravity-ui/uikit'; +import {Plus, TrashBin} from '@gravity-ui/icons'; +import {Button, Icon, Label, Popover} from '@gravity-ui/uikit'; import set from 'lodash/set'; import { @@ -21,6 +21,7 @@ import { transformArrIn, } from '../../../../core'; import {block} from '../../../utils'; +import i18n from '../../../i18n'; import './ArrayBase.scss'; @@ -42,6 +43,20 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { return isBooleanSpec(spec.items) || isNumberSpec(spec.items) || isStringSpec(spec.items); }, [spec.items]); + const disabledButtonLength = React.useMemo(() => { + if (spec.viewSpec.enableLockLength) { + return { + remove: keys.length <= (spec.minLength || 0), + add: keys.length >= (spec.maxLength || Infinity), + }; + } + + return { + remove: false, + add: false, + }; + }, [keys.length, spec.maxLength, spec.minLength, spec.viewSpec.enableLockLength]); + const getItemSpec = React.useCallback( (idx: number): typeof spec.items | null => { if (!itemSpecCorrect) { @@ -72,6 +87,13 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { [input.onChange, input.name], ); + const removeItem = React.useCallback( + (key: string) => { + arrayInput.onItemRemove(key); + }, + [arrayInput], + ); + const AddButton: React.FC = React.useCallback(() => { let onClick = () => arrayInput.onItemAdd(undefined); @@ -88,15 +110,24 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { } return ( - + + ); }, [ arrayInput, @@ -107,6 +138,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { spec.viewSpec.itemLabel, spec.viewSpec.layoutTitle, spec.viewSpec.addButtonPosition, + disabledButtonLength, ]); const items = React.useMemo( @@ -133,6 +165,25 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { parentOnUnmount={input.parentOnUnmount} spec={itemSpec} name={`${name}.<${key}>`} + additionalContentLayout={ + + + + } /> ); @@ -145,6 +196,9 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { input.parentOnUnmount, input.value, spec.viewSpec.itemPrefix, + spec.minLength, + disabledButtonLength.remove, + removeItem, ], ); diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-chromium-linux.png index 49f14f42..df7581e8 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-webkit-linux.png index 02b2c084..1f9eb728 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-chromium-linux.png index 0c76371b..9278a843 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-webkit-linux.png index 225a4433..5ba34763 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-add-button-position-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-chromium-linux.png index eeeac7c8..f67784a0 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-webkit-linux.png index cbeed70c..fcf48560 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-chromium-linux.png index cf23b4bb..78ec701a 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-webkit-linux.png index 4e1c8a64..f664f639 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-default-value-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-chromium-linux.png index 8e7b0932..00722b2b 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-webkit-linux.png index 9e063408..6f652161 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-chromium-linux.png index afbea52e..4e5f43ea 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-webkit-linux.png index 158a3cc5..eec35d8a 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-description-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-chromium-linux.png index fb6f9773..44ac5768 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-webkit-linux.png index 4256096e..84bdc2bd 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-chromium-linux.png index 5a415d20..76e1b1e4 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-webkit-linux.png index 82c170e8..762cf222 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-max-length-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-chromium-linux.png index 5ed29bc4..3c899314 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-webkit-linux.png index ee052f02..0af89e51 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-chromium-linux.png index 9c8a3f25..97f2e6ff 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-webkit-linux.png index 0a5cd2df..590cf1d7 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-error-min-length-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-chromium-linux.png index a4380265..15e264e6 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-webkit-linux.png index 9b1cfc82..554ecaed 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-chromium-linux.png index ecfe98a0..6a3d9784 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-webkit-linux.png index c2a06a0f..a1896087 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-item-prefix-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-chromium-linux.png index 331dcaaa..6869710d 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-webkit-linux.png index 5092066e..dd8eb453 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-chromium-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-chromium-linux.png index 087db926..87da85f2 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-chromium-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-webkit-linux.png b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-webkit-linux.png index 13a4ec8f..26471f11 100644 Binary files a/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-webkit-linux.png and b/src/lib/kit/components/Inputs/ArrayBase/__snapshots__/ArrayBase.visual.test.tsx-snapshots/Array-Base-required-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx index 7e8afa3e..1de239c3 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Plus, TrashBin} from '@gravity-ui/icons'; -import {Button, Flex, Icon, Table} from '@gravity-ui/uikit'; +import {Button, Flex, Icon, Popover, Table} from '@gravity-ui/uikit'; import {HelpPopover} from '@gravity-ui/components'; import noop from 'lodash/noop'; import set from 'lodash/set'; @@ -23,6 +23,7 @@ import { } from '../../../../core'; import {useSearchContext} from '../../../../core/components/Form/hooks'; import {block} from '../../../utils'; +import i18n from '../../../i18n'; import './TableArrayInput.scss'; @@ -43,6 +44,20 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) => [arrayInput.value], ); + const disabledButtonLength = React.useMemo(() => { + if (spec.viewSpec.enableLockLength) { + return { + remove: keys.length <= (spec.minLength || 0), + add: keys.length >= (spec.maxLength || Infinity), + }; + } + + return { + remove: false, + add: false, + }; + }, [keys.length, spec.maxLength, spec.minLength, spec.viewSpec.enableLockLength]); + const onItemAdd = React.useCallback(() => { arrayInput.onItemAdd({}); }, [arrayInput.onItemAdd]); @@ -90,14 +105,22 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) => name: '', sticky: 'right', template: ({key}: {key: string}) => ( - + + ), }; @@ -199,14 +222,21 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) => {spec.viewSpec.layoutTitle || null} ) : ( - + + )} ); diff --git a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-chromium-linux.png b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-chromium-linux.png index dd4cb431..8183b464 100644 Binary files a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-webkit-linux.png b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-webkit-linux.png index 148b8c2a..674ea4cb 100644 Binary files a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-chromium-linux.png b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-chromium-linux.png index 151a2c69..d90474e0 100644 Binary files a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-chromium-linux.png and b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-webkit-linux.png b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-webkit-linux.png index 1701911d..56c8faca 100644 Binary files a/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-webkit-linux.png and b/src/lib/kit/components/Layouts/Accordeon/__snapshots__/Accordeon.visual.test.tsx-snapshots/Accordeon-array-spec-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-chromium-linux.png index 4e0fcfaf..9a36656c 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-webkit-linux.png index ae692922..de7022bf 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-chromium-linux.png index de7dfc30..bb34c1da 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-webkit-linux.png index 5cc9bd9b..fd356a6e 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-array-spec-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-chromium-linux.png index 4865ab5a..70e3f4af 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-webkit-linux.png index 53913c01..9c851675 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-chromium-linux.png index 4e2c5964..fecf3759 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-webkit-linux.png index 29debb91..a91e749d 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-description-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-chromium-linux.png index 88f3d0d4..5651e6b2 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-webkit-linux.png index c809cf8e..13f27272 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-chromium-linux.png index 36a3566b..2b861c55 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-webkit-linux.png index e8131044..40f6c893 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-max-length-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-chromium-linux.png index 11a9c694..da34bccd 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-webkit-linux.png index 7942ed3a..ce10d61a 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-chromium-linux.png index 2890e214..294db4a1 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-webkit-linux.png index 22940da0..1c26d225 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-error-min-length-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-chromium-linux.png index 59091f5a..366c1dc3 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-webkit-linux.png index 72fbf3cf..4572cd4e 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-chromium-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-chromium-linux.png index eff1bb9d..53f3a271 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-chromium-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-webkit-linux.png b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-webkit-linux.png index f3bec51a..f038db0c 100644 Binary files a/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-webkit-linux.png and b/src/lib/kit/components/Layouts/AccordeonCard/__snapshots__/AccordeonCard.visual.test.tsx-snapshots/Accordeon-Card-Form-test-array-specs-required-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss index fd20b220..465588c3 100644 --- a/src/lib/kit/components/Layouts/Row/Row.scss +++ b/src/lib/kit/components/Layouts/Row/Row.scss @@ -79,10 +79,6 @@ word-break: break-word; } - &__remove-button { - margin-left: 5px; - } - &__required-mark { color: var(--g-color-text-danger); } diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx index 563fe760..8644fcc5 100644 --- a/src/lib/kit/components/Layouts/Row/Row.tsx +++ b/src/lib/kit/components/Layouts/Row/Row.tsx @@ -1,15 +1,14 @@ 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 {Text} from '@gravity-ui/uikit'; import { FieldValue, LayoutProps, Spec, StringSpec, - isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, @@ -32,8 +31,8 @@ const RowBase = ({ meta, verboseDescription, children, + additionalContentLayout, }: LayoutProps & RowProps) => { - const arrayItem = React.useMemo(() => isArrayItem(name), [name]); const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]); return ( @@ -75,16 +74,7 @@ const RowBase = ({ onChange={input.onChange as (value: string) => void} /> ) : null} - {arrayItem ? ( - - ) : null} + {additionalContentLayout} {verboseDescription && spec.viewSpec.layoutDescription ? (
({ input, meta, children, + additionalContentLayout, }: LayoutProps) => { const arrayItem = React.useMemo(() => isArrayItem(name), [name]); const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]); const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]); - const removeButton = React.useMemo(() => { - if (arrayItem) { - return ( - - ); - } - - return null; - }, [input.onDrop, arrayItem, name]); - return (
({ onChange={input.onChange as (value: string) => void} /> ) : null} - {removeButton} + {additionalContentLayout}
); }; diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts index 0ddd8eb0..f7878ea5 100644 --- a/src/stories/components/InputPreview/constants.ts +++ b/src/stories/components/InputPreview/constants.ts @@ -17,6 +17,11 @@ const required: BooleanSpec = { viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Required'}, }; +const enableLockLength: BooleanSpec = { + type: SpecTypes.Boolean, + viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Enable Lock Length'}, +}; + const maxLength: NumberSpec = { type: SpecTypes.Number, viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Max length'}, @@ -631,6 +636,7 @@ export const getArrayOptions = (): ObjectSpec => ({ hidden, selectParams, checkboxGroupParams, + enableLockLength, inputProps, }, [ @@ -648,6 +654,7 @@ export const getArrayOptions = (): ObjectSpec => ({ 'hidden', 'selectParams', 'checkboxGroupParams', + 'enableLockLength', 'inputProps', ], ),