feat(Forms): add limit prop to Iterate.Array

dnbexperience · Sep 19, 2024 · 9ff830f · 9ff830f
1 parent a8a41ad
commit 9ff830f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx
@@ -85,6 +85,7 @@ function ArrayComponent(props: Props) {
   const {
     path,
     value: arrayValue,
+    limit,
     error,
     defaultValue,
     withoutFlex,
@@ -142,8 +143,10 @@ function ArrayComponent(props: Props) {
   const { getNextContainerMode } = useSwitchContainerMode()
 
   const arrayItems = useMemo(() => {
-    const list = valueWhileClosingRef.current || arrayValue
-    return (list ?? []).map((value, index) => {
+    const list = (valueWhileClosingRef.current || arrayValue) ?? []
+    const limitedList =
+      typeof limit === 'number' ? list.slice(0, limit) : list
+    return limitedList.map((value, index) => {
       const id = idsRef.current[index] || makeUniqueId()
 
       const hasNewItems =
@@ -232,7 +235,7 @@ function ArrayComponent(props: Props) {
 
     // In order to update "valueWhileClosingRef" we need to have "salt" in the deps array
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [salt, arrayValue, path, handleChange])
+  }, [salt, arrayValue, limit, path, handleChange])
 
   // - Call the onChange callback when a new element is added without calling "handlePush"
   useMemo(() => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts
@@ -12,6 +12,11 @@ export const ArrayProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
+  limit: {
+    doc: 'Limit the number of items to iterate over. Defaults to `undefined`.',
+    type: 'number',
+    status: 'optional',
+  },
   countPath: {
     doc: 'A path (JSON Pointer) to the array length.',
     type: 'string',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts
@@ -21,6 +21,7 @@ export type Props = Omit<
   > & {
     children: ElementChild | Array<ElementChild>
     path?: Path
+    limit?: number
     countPath?: Path
     countPathLimit?: number
     validator?: Validator<Value>