feat(forms): add support for {itemNr} in iterate container title an…

…d add `useItem` hook
dnbexperience · Aug 20, 2024 · 6ae5079 · 6ae5079
1 parent 977962b
commit 6ae5079
Show file tree

Hide file tree

Showing 24 changed files with 415 additions and 216 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
@@ -578,17 +578,20 @@ export const UsingIterate = () => {
         const MyEditItem = () => {
           return (
             <Iterate.EditContainer
-              title="Edit account holder"
-              titleWhenNew="New account holder"
+              title="Edit account holder {itemNr}"
+              titleWhenNew="New account holder {itemNr}"
             >
               <MyEditItemForm />
             </Iterate.EditContainer>
           )
         }
 
         const MyViewItem = () => {
+          const item = Iterate.useItem()
+          console.log('index:', item.index)
+
           return (
-            <Iterate.ViewContainer title="Account holder">
+            <Iterate.ViewContainer title="Account holder {itemNr}">
               <Value.SummaryList>
                 <Value.Name.First itemPath="/firstName" showEmpty />
                 <Value.Name.Last itemPath="/lastName" placeholder="-" />

diff --git a/...sign-system-portal/src/docs/uilib/extensions/forms/Iterate/AnimatedContainer/Examples.tsx b/...sign-system-portal/src/docs/uilib/extensions/forms/Iterate/AnimatedContainer/Examples.tsx
@@ -20,7 +20,7 @@ export const Default = () => {
                   path="/myList"
                   placeholder={<>Empty list</>}
                 >
-                  <Iterate.AnimatedContainer title="Title">
+                  <Iterate.AnimatedContainer title="Title {itemNr}">
                     <Field.String label="Label" itemPath="/" />
 
                     <Iterate.Toolbar>

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
@@ -83,7 +83,7 @@ export const WithTable = () => {
           >
             <Tr>
               <Td>
-                <Value.String itemPath="/name" />
+                <Value.Name.Last itemPath="/name" />
               </Td>
               <Td>
                 <Value.Number itemPath="/age" />
@@ -246,17 +246,20 @@ export const ViewAndEditContainer = () => {
         const MyEditItem = () => {
           return (
             <Iterate.EditContainer
-              title="Edit account holder"
-              titleWhenNew="New account holder"
+              title="Edit account holder {itemNr}"
+              titleWhenNew="New account holder {itemNr}"
             >
               <MyEditItemForm />
             </Iterate.EditContainer>
           )
         }
 
         const MyViewItem = () => {
+          const item = Iterate.useItem()
+          console.log('index:', item.index)
+
           return (
-            <Iterate.ViewContainer title="Account holder">
+            <Iterate.ViewContainer title="Account holder {itemNr}">
               <Value.SummaryList>
                 <Value.Name.First itemPath="/firstName" showEmpty />
                 <Value.Name.Last itemPath="/lastName" placeholder="-" />

diff --git a/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/info.mdx b/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/info.mdx
@@ -60,7 +60,7 @@ If you want to be able to provide values to the individual field component direc
 
 Examples of both the use of `itemPath` and Render Props in `Iterate.Array` can be found on [demos](/uilib/extensions/forms/Iterate/Array/demos).
 
-## Number in labels
+## The item number in labels
 
 You can use the `{itemNr}` variable in the label to display the current item number. This is useful when you have a list of items and you want to display the item number in the label.
 
@@ -74,6 +74,20 @@ render(
 )
 ```
 
+The [ViewContainer](/uilib/extensions/forms/Iterate/ViewContainer) and the [EditContainer](/uilib/extensions/forms/Iterate/EditContainer) also supports `{itemNr}` in the title property to display the current item number.
+
+```tsx
+import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Iterate.Array value={['foo', 'bar']}>
+    <Iterate.ViewContainer title="Item no. {itemNr}">
+      ...
+    </Iterate.ViewContainer>
+  </Iterate.Array>,
+)
+```
+
 ## Filter data
 
 You can filter data by paths specific or all paths.

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/Iterate/EditContainer/info.mdx
@@ -22,12 +22,52 @@ render(
     </Iterate.EditContainer>
 
     <Iterate.ViewContainer title="Account holder">
-      <Value.String itemPath="/name" />
+      <Value.Name.Last itemPath="/name" />
     </Iterate.ViewContainer>
   </Iterate.Array>,
 )
 ```
 
+## The item number in the title
+
+You can use the `{itemNr}` variable in the `title` or the `titleWhenNew` property to display the current item number.
+
+```tsx
+import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Iterate.Array>
+    <Iterate.EditContainer
+      title="Edit account holder {itemNr}"
+      titleWhenNew="New account holder {itemNr}"
+    >
+      <Field.Name.Last itemPath="/name" />
+    </Iterate.EditContainer>
+  </Iterate.Array>,
+)
+```
+
+## Get the internal item object
+
+You can get the internal item object by using the `Iterate.useItem` hook.
+
+```tsx
+import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+const MyItemForm = () => {
+  const item = Iterate.useItem()
+  console.log('index:', item.index)
+
+  return <Field.String itemPath="/" />
+}
+
+render(
+  <Iterate.Array value={['foo', 'bar']}>
+    <MyItemForm />
+  </Iterate.Array>,
+)
+```
+
 ## Accessibility
 
 The `Iterate.EditContainer` component has an `aria-label` attribute, which is set to the `title` prop value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

diff --git a/...b-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx b/...b-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx
@@ -29,17 +29,20 @@ export const InitiallyOpen = () => {
         const MyEditItem = () => {
           return (
             <Iterate.EditContainer
-              title="Edit account holder"
-              titleWhenNew="New account holder"
+              title="Edit account holder {itemNr}"
+              titleWhenNew="New account holder {itemNr}"
             >
               <MyEditItemForm />
             </Iterate.EditContainer>
           )
         }
 
         const MyViewItem = () => {
+          const item = Iterate.useItem()
+          console.log('index:', item.index)
+
           return (
-            <Iterate.ViewContainer title="Account holder">
+            <Iterate.ViewContainer title="Account holder {itemNr}">
               <Value.SummaryList>
                 <Value.Name.First itemPath="/firstName" showEmpty />
                 <Value.Name.Last itemPath="/lastName" placeholder="-" />

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/Iterate/ViewContainer/info.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/Iterate/ViewContainer/info.mdx
@@ -22,7 +22,23 @@ render(
     </Iterate.EditContainer>
 
     <Iterate.ViewContainer title="Account holder">
-      <Value.String itemPath="/name" />
+      <Value.Name.Last itemPath="/name" />
+    </Iterate.ViewContainer>
+  </Iterate.Array>,
+)
+```
+
+## The item number in the title
+
+You can use the `{itemNr}` variable in the `title` property to display the current item number.
+
+```tsx
+import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Iterate.Array>
+    <Iterate.ViewContainer title="Account holder {itemNr}">
+      <Value.Name.Last itemPath="/name" />
     </Iterate.ViewContainer>
   </Iterate.Array>,
 )

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -110,8 +110,8 @@ function FieldBlock(props: Props) {
     ...rest
   } = Object.assign({}, sharedData.data, props)
 
-  const iterateElementContext = useContext(IterateElementContext)
-  const { index: iterateIndex } = iterateElementContext ?? {}
+  const iterateItemContext = useContext(IterateElementContext)
+  const { index: iterateIndex } = iterateItemContext ?? {}
 
   const blockId = useId(props.id)
   const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/AnimatedContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer/AnimatedContainer.tsx
@@ -3,8 +3,8 @@ import IterateItemContext from '../IterateItemContext'
 import { EditContainerWithoutToolbar, AllProps } from '../EditContainer'
 
 function AnimatedContainer(props: AllProps) {
-  const iterateElementContext = useContext(IterateItemContext)
-  const { isNew } = iterateElementContext ?? {}
+  const iterateItemContext = useContext(IterateItemContext)
+  const { isNew } = iterateItemContext ?? {}
 
   return (
     <EditContainerWithoutToolbar