Skip to content

Commit 0b9ba79

Browse files
authored
1 parent 45d0e3d commit 0b9ba79

File tree

6 files changed

+139
-4
lines changed

6 files changed

+139
-4
lines changed

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx

+68-1
Original file line numberDiff line numberDiff line change
@@ -764,7 +764,7 @@ export const ViewAndEditContainerWithLineDivider = () => {
764764
)
765765
}
766766

767-
export const Required = () => {
767+
export const RequiredWithPushButton = () => {
768768
return (
769769
<ComponentBox>
770770
<Form.Handler>
@@ -797,6 +797,73 @@ export const Required = () => {
797797
)
798798
}
799799

800+
export const RequiredWithPushContainer = () => {
801+
return (
802+
<ComponentBox>
803+
{() => {
804+
const MyViewItem = () => {
805+
return (
806+
<Iterate.ViewContainer title="Account holder {itemNo}">
807+
<Value.SummaryList>
808+
<Value.Name.First itemPath="/firstName" />
809+
<Value.Name.Last itemPath="/lastName" />
810+
</Value.SummaryList>
811+
</Iterate.ViewContainer>
812+
)
813+
}
814+
815+
const MyEditItem = () => {
816+
return (
817+
<Iterate.EditContainer
818+
title="Edit account holder {itemNo}"
819+
titleWhenNew="New account holder {itemNo}"
820+
>
821+
<MyEditItemContent />
822+
</Iterate.EditContainer>
823+
)
824+
}
825+
826+
const MyEditItemContent = () => {
827+
return (
828+
<Field.Composition width="large">
829+
<Field.Name.First itemPath="/firstName" required />
830+
<Field.Name.Last itemPath="/lastName" required />
831+
</Field.Composition>
832+
)
833+
}
834+
835+
return (
836+
<Form.Handler>
837+
<Form.Card>
838+
<Iterate.PushContainer
839+
path="/myListOfPeople"
840+
title="New account holder"
841+
>
842+
<MyEditItemContent />
843+
</Iterate.PushContainer>
844+
845+
<Iterate.Array
846+
path="/myListOfPeople"
847+
reverse
848+
animate
849+
required
850+
errorMessages={{
851+
'Field.errorRequired': 'Custom message',
852+
}}
853+
>
854+
<MyViewItem />
855+
<MyEditItem />
856+
</Iterate.Array>
857+
</Form.Card>
858+
859+
<Form.SubmitButton />
860+
</Form.Handler>
861+
)
862+
}}
863+
</ComponentBox>
864+
)
865+
}
866+
800867
export const NestedIterate = () => {
801868
return (
802869
<ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx

+9-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,15 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
6666

6767
### Required
6868

69-
<Examples.Required />
69+
With a [PushContainer](/uilib/extensions/forms/Iterate/PushContainer/) to add a new item.
70+
71+
The new item gets inserted at the beginning of the array by using the `reverse` property.
72+
73+
<Examples.RequiredWithPushContainer />
74+
75+
With a [PushButton](/uilib/extensions/forms/Iterate/PushButton/) to add a new item.
76+
77+
<Examples.RequiredWithPushButton />
7078

7179
### Minium one item
7280

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ function ArrayComponent(props: Props) {
5454
const {
5555
path: pathProp,
5656
itemPath: itemPathProp,
57+
reverse,
5758
countPath,
5859
countPathTransform,
5960
countPathLimit = Infinity,
@@ -212,7 +213,7 @@ function ArrayComponent(props: Props) {
212213
const limitedList =
213214
typeof limit === 'number' ? list.slice(0, limit) : list
214215

215-
return limitedList.map((value, index) => {
216+
const arrayItems = limitedList.map((value, index) => {
216217
const id = idsRef.current[index] || makeUniqueId()
217218

218219
const hasNewItems =
@@ -303,9 +304,24 @@ function ArrayComponent(props: Props) {
303304
return itemContext
304305
})
305306

307+
if (reverse) {
308+
return arrayItems.reverse()
309+
}
310+
311+
return arrayItems
312+
306313
// In order to update "valueWhileClosingRef" we need to have "salt" in the deps array
307314
// eslint-disable-next-line react-hooks/exhaustive-deps
308-
}, [salt, arrayValue, limit, path, itemPath, absolutePath, handleChange])
315+
}, [
316+
salt,
317+
arrayValue,
318+
limit,
319+
path,
320+
itemPath,
321+
absolutePath,
322+
reverse,
323+
handleChange,
324+
])
309325

310326
const total = arrayItems.length
311327
useEffect(() => {

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export const ArrayProperties: PropertiesTableProps = {
2727
type: 'number',
2828
status: 'optional',
2929
},
30+
reverse: {
31+
doc: 'When `true` it will reverse the order of the items.',
32+
type: 'boolean',
33+
status: 'optional',
34+
},
3035
countPath: {
3136
doc: 'A path (JSON Pointer) to the array length.',
3237
type: 'string',

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -2336,4 +2336,42 @@ describe('Iterate.Array', () => {
23362336
expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(0)
23372337
})
23382338
})
2339+
2340+
describe('reverse', () => {
2341+
it('should reverse the order of the items', () => {
2342+
render(
2343+
<Iterate.Array value={['foo', 'bar', 'baz']} reverse>
2344+
<Value.String itemPath="/" label="Label {itemNo}" />
2345+
</Iterate.Array>
2346+
)
2347+
2348+
expect(
2349+
document.querySelectorAll('.dnb-forms-iterate__element')
2350+
).toHaveLength(3)
2351+
expect(
2352+
document.querySelectorAll(
2353+
'.dnb-forms-iterate__element .dnb-forms-value-block__content'
2354+
)[0]
2355+
).toHaveTextContent('baz')
2356+
expect(
2357+
document.querySelectorAll(
2358+
'.dnb-forms-iterate__element .dnb-forms-value-block__content'
2359+
)[1]
2360+
).toHaveTextContent('bar')
2361+
expect(
2362+
document.querySelectorAll(
2363+
'.dnb-forms-iterate__element .dnb-forms-value-block__content'
2364+
)[2]
2365+
).toHaveTextContent('foo')
2366+
expect(
2367+
document.querySelectorAll('.dnb-form-label')[0]
2368+
).toHaveTextContent('Label 3')
2369+
expect(
2370+
document.querySelectorAll('.dnb-form-label')[1]
2371+
).toHaveTextContent('Label 2')
2372+
expect(
2373+
document.querySelectorAll('.dnb-form-label')[2]
2374+
).toHaveTextContent('Label 1')
2375+
})
2376+
})
23392377
})

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export type Props = Omit<
3434
path?: Path
3535
itemPath?: Path
3636
limit?: number
37+
reverse?: boolean
3738
countPath?: Path
3839
countPathLimit?: number
3940
onChangeValidator?: Validator<Value>

0 commit comments

Comments
 (0)