diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx index 897803cf526..3ad4e1842c1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx @@ -764,7 +764,7 @@ export const ViewAndEditContainerWithLineDivider = () => { ) } -export const Required = () => { +export const RequiredWithPushButton = () => { return ( @@ -797,6 +797,73 @@ export const Required = () => { ) } +export const RequiredWithPushContainer = () => { + return ( + + {() => { + const MyViewItem = () => { + return ( + + + + + + + ) + } + + const MyEditItem = () => { + return ( + + + + ) + } + + const MyEditItemContent = () => { + return ( + + + + + ) + } + + return ( + + + + + + + + + + + + + + + ) + }} + + ) +} + export const NestedIterate = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx index 80c0cc32cd1..bb3c51580b5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx @@ -66,7 +66,15 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T ### Required - +With a [PushContainer](/uilib/extensions/forms/Iterate/PushContainer/) to add a new item. + +The new item gets inserted at the beginning of the array by using the `reverse` property. + + + +With a [PushButton](/uilib/extensions/forms/Iterate/PushButton/) to add a new item. + + ### Minium one item diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx index 22ecc7d0ae0..774ac77fb6b 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx @@ -54,6 +54,7 @@ function ArrayComponent(props: Props) { const { path: pathProp, itemPath: itemPathProp, + reverse, countPath, countPathTransform, countPathLimit = Infinity, @@ -212,7 +213,7 @@ function ArrayComponent(props: Props) { const limitedList = typeof limit === 'number' ? list.slice(0, limit) : list - return limitedList.map((value, index) => { + const arrayItems = limitedList.map((value, index) => { const id = idsRef.current[index] || makeUniqueId() const hasNewItems = @@ -303,9 +304,24 @@ function ArrayComponent(props: Props) { return itemContext }) + if (reverse) { + return arrayItems.reverse() + } + + return arrayItems + // In order to update "valueWhileClosingRef" we need to have "salt" in the deps array // eslint-disable-next-line react-hooks/exhaustive-deps - }, [salt, arrayValue, limit, path, itemPath, absolutePath, handleChange]) + }, [ + salt, + arrayValue, + limit, + path, + itemPath, + absolutePath, + reverse, + handleChange, + ]) const total = arrayItems.length useEffect(() => { diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts index 9f8e5e12366..599098333f2 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts @@ -27,6 +27,11 @@ export const ArrayProperties: PropertiesTableProps = { type: 'number', status: 'optional', }, + reverse: { + doc: 'When `true` it will reverse the order of the items.', + type: 'boolean', + 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/__tests__/Array.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx index ef6a56cdc57..f6d6a900bee 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx @@ -2336,4 +2336,42 @@ describe('Iterate.Array', () => { expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(0) }) }) + + describe('reverse', () => { + it('should reverse the order of the items', () => { + render( + + + + ) + + expect( + document.querySelectorAll('.dnb-forms-iterate__element') + ).toHaveLength(3) + expect( + document.querySelectorAll( + '.dnb-forms-iterate__element .dnb-forms-value-block__content' + )[0] + ).toHaveTextContent('baz') + expect( + document.querySelectorAll( + '.dnb-forms-iterate__element .dnb-forms-value-block__content' + )[1] + ).toHaveTextContent('bar') + expect( + document.querySelectorAll( + '.dnb-forms-iterate__element .dnb-forms-value-block__content' + )[2] + ).toHaveTextContent('foo') + expect( + document.querySelectorAll('.dnb-form-label')[0] + ).toHaveTextContent('Label 3') + expect( + document.querySelectorAll('.dnb-form-label')[1] + ).toHaveTextContent('Label 2') + expect( + document.querySelectorAll('.dnb-form-label')[2] + ).toHaveTextContent('Label 1') + }) + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts index 76e16e907c5..39ef4c594c7 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts @@ -34,6 +34,7 @@ export type Props = Omit< path?: Path itemPath?: Path limit?: number + reverse?: boolean countPath?: Path countPathLimit?: number onChangeValidator?: Validator