feat(Forms): add reverse to Iterate.Array (#4556)

Here is an [example](https://eufemia-git-feat-iterate-array-reverse-eufemia.vercel.app/uilib/extensions/forms/Iterate/Array/demos/#required) when build.
dnbexperience · Feb 13, 2025 · 0b9ba79 · 0b9ba79
1 parent 45d0e3d
commit 0b9ba79
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 4 deletions.
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
@@ -764,7 +764,7 @@ export const ViewAndEditContainerWithLineDivider = () => {
   )
 }
 
-export const Required = () => {
+export const RequiredWithPushButton = () => {
   return (
     <ComponentBox>
       <Form.Handler>
@@ -797,6 +797,73 @@ export const Required = () => {
   )
 }
 
+export const RequiredWithPushContainer = () => {
+  return (
+    <ComponentBox>
+      {() => {
+        const MyViewItem = () => {
+          return (
+            <Iterate.ViewContainer title="Account holder {itemNo}">
+              <Value.SummaryList>
+                <Value.Name.First itemPath="/firstName" />
+                <Value.Name.Last itemPath="/lastName" />
+              </Value.SummaryList>
+            </Iterate.ViewContainer>
+          )
+        }
+
+        const MyEditItem = () => {
+          return (
+            <Iterate.EditContainer
+              title="Edit account holder {itemNo}"
+              titleWhenNew="New account holder {itemNo}"
+            >
+              <MyEditItemContent />
+            </Iterate.EditContainer>
+          )
+        }
+
+        const MyEditItemContent = () => {
+          return (
+            <Field.Composition width="large">
+              <Field.Name.First itemPath="/firstName" required />
+              <Field.Name.Last itemPath="/lastName" required />
+            </Field.Composition>
+          )
+        }
+
+        return (
+          <Form.Handler>
+            <Form.Card>
+              <Iterate.PushContainer
+                path="/myListOfPeople"
+                title="New account holder"
+              >
+                <MyEditItemContent />
+              </Iterate.PushContainer>
+
+              <Iterate.Array
+                path="/myListOfPeople"
+                reverse
+                animate
+                required
+                errorMessages={{
+                  'Field.errorRequired': 'Custom message',
+                }}
+              >
+                <MyViewItem />
+                <MyEditItem />
+              </Iterate.Array>
+            </Form.Card>
+
+            <Form.SubmitButton />
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}
+
 export const NestedIterate = () => {
   return (
     <ComponentBox>

diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/...nb-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
 
-<Examples.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.
+
+<Examples.RequiredWithPushContainer />
+
+With a [PushButton](/uilib/extensions/forms/Iterate/PushButton/) to add a new item.
+
+<Examples.RequiredWithPushButton />
 
 ### 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
@@ -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
@@ -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
@@ -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(
+        <Iterate.Array value={['foo', 'bar', 'baz']} reverse>
+          <Value.String itemPath="/" label="Label {itemNo}" />
+        </Iterate.Array>
+      )
+
+      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
@@ -34,6 +34,7 @@ export type Props = Omit<
     path?: Path
     itemPath?: Path
     limit?: number
+    reverse?: boolean
     countPath?: Path
     countPathLimit?: number
     onChangeValidator?: Validator<Value>