diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss index c1c2e417..86479c4d 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss @@ -10,6 +10,14 @@ &_add-button-down { margin-bottom: 15px; } + + &_items-primitive { + min-width: 100%; + + &:empty { + min-width: unset; + } + } } &__item-prefix { diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx index ab51b056..dd2a0922 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx @@ -14,7 +14,10 @@ import { OBJECT_ARRAY_FLAG, Spec, ValidateError, + isBooleanSpec, isCorrectSpec, + isNumberSpec, + isStringSpec, transformArrIn, } from '../../../../core'; import {block} from '../../../utils'; @@ -35,6 +38,10 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { const itemSpecCorrect = React.useMemo(() => isCorrectSpec(spec.items), [spec.items]); + const itemsPrimitive = React.useMemo(() => { + return isBooleanSpec(spec.items) || isNumberSpec(spec.items) || isStringSpec(spec.items); + }, [spec.items]); + const getItemSpec = React.useCallback( (idx: number): typeof spec.items | null => { if (!itemSpecCorrect) { @@ -155,6 +162,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { className={b('items-wrapper', { 'add-button-down': spec.viewSpec.addButtonPosition !== 'right' && keys.length > 0, + 'items-primitive': itemsPrimitive, })} > {items} diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss index cddcb994..ce456227 100644 --- a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss +++ b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss @@ -2,7 +2,6 @@ .#{$ns}array-base-view { &__item-prefix { - margin-top: -10px; - margin-bottom: 15px; + margin-bottom: 6px; } }