feat: blocking deletion and addition of array elements

Author: NasgulNexus

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss

@@ -22,6 +22,15 @@
                 min-width: unset;
             }
         }
+
+        &_disabled-remove-button {
+            & > * .df-row__remove-button {
+                color: var(--g-color-text-hint);
+                background-color: transparent;
+                cursor: default;
+                pointer-events: none;
+            }
+        }
     }
 
     &__item-prefix {

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx

@@ -42,6 +42,10 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         return isBooleanSpec(spec.items) || isNumberSpec(spec.items) || isStringSpec(spec.items);
     }, [spec.items]);
 
+    const disabledRemoveButton = React.useMemo(() => {
+        return keys.length <= spec.minLength;
+    }, [keys.length, spec.minLength]);
+
     const getItemSpec = React.useCallback(
         (idx: number): typeof spec.items | null => {
             if (!itemSpecCorrect) {
@@ -87,6 +91,10 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
             title = spec.viewSpec.layoutTitle;
         }
 
+        if (keys.length >= spec.maxLength) {
+            return null;
+        }
+
         return (
             <Button
                 onClick={onClick}
@@ -107,6 +115,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         spec.viewSpec.itemLabel,
         spec.viewSpec.layoutTitle,
         spec.viewSpec.addButtonPosition,
+        keys,
     ]);
 
     const items = React.useMemo(
@@ -159,6 +168,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
                     'add-button-down':
                         spec.viewSpec.addButtonPosition !== 'right' && keys.length > 0,
                     'items-primitive': itemsPrimitive,
+                    'disabled-remove-button': disabledRemoveButton,
                 })}
             >
                 {items}

src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx

@@ -95,6 +95,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                     onClick={() => onItemRemove(key)}
                     key={`remove-${key}`}
                     qa={`${name}-item-remove-${key}`}
+                    disabled={keys.length <= spec.minLength}
                 >
                     <Icon data={TrashBin} size={16} />
                 </Button>
@@ -199,14 +200,18 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                     {spec.viewSpec.layoutTitle || null}
                 </Button>
             ) : (
-                <Button
-                    onClick={onItemAdd}
-                    disabled={spec.viewSpec.disabled}
-                    qa={`${name}-add-item`}
-                >
-                    <Icon data={Plus} size={14} />
-                    {spec.viewSpec.itemLabel || null}
-                </Button>
+                <React.Fragment>
+                    {keys.length >= spec.maxLength ? null : (
+                        <Button
+                            onClick={onItemAdd}
+                            disabled={spec.viewSpec.disabled}
+                            qa={`${name}-add-item`}
+                        >
+                            <Icon data={Plus} size={14} />
+                            {spec.viewSpec.itemLabel || null}
+                        </Button>
+                    )}
+                </React.Fragment>
             )}
         </div>
     );