Skip to content

Commit 6160d78

Browse files
authored
feat(Forms): add insertAt to Iterate.PushContainer (#4555)
1 parent 9e98c81 commit 6160d78

File tree

3 files changed

+56
-1
lines changed

3 files changed

+56
-1
lines changed

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@ export type Props = (OnlyPathRequired | OnlyItemPathRequired) & {
6464
*/
6565
required?: boolean
6666

67+
/**
68+
* The index to insert the new item at.
69+
*/
70+
insertAt?: number
71+
6772
/**
6873
* The button to open container.
6974
*/
@@ -124,6 +129,7 @@ function PushContainer(props: AllProps) {
124129
bubbleValidation,
125130
path,
126131
itemPath,
132+
insertAt,
127133
title,
128134
required = requiredInherited,
129135
children,
@@ -208,7 +214,13 @@ function PushContainer(props: AllProps) {
208214
transformOnCommit={({ pushContainerItems }) => {
209215
return moveValueToPath(
210216
path || absolutePath,
211-
[...entries, ...pushContainerItems],
217+
typeof insertAt === 'number'
218+
? [
219+
...entries.slice(0, insertAt),
220+
...pushContainerItems,
221+
...entries.slice(insertAt),
222+
]
223+
: [...entries, ...pushContainerItems],
212224
absolutePath ? structuredClone(getValueByPath('/')) : {}
213225
)
214226
}}

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export const PushContainerProperties: PropertiesTableProps = {
1212
type: 'string',
1313
status: 'optional',
1414
},
15+
insertAt: {
16+
doc: 'The index to insert the new item at.',
17+
type: 'number',
18+
status: 'optional',
19+
},
1520
title: {
1621
doc: 'The title of the container.',
1722
type: 'React.Node',

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

+38
Original file line numberDiff line numberDiff line change
@@ -1197,4 +1197,42 @@ describe('PushContainer', () => {
11971197
).toHaveClass('dnb-height-animation--is-visible')
11981198
})
11991199
})
1200+
1201+
describe('insertAt', () => {
1202+
it('should add a new entry to the beginning of the array', async () => {
1203+
const onChange = jest.fn()
1204+
1205+
render(
1206+
<Form.Handler
1207+
onChange={onChange}
1208+
defaultData={{
1209+
entries: ['Existing'],
1210+
}}
1211+
>
1212+
<Iterate.Array path="/entries">...</Iterate.Array>
1213+
1214+
<Iterate.PushContainer path="/entries" insertAt={0}>
1215+
<Field.String itemPath="/" />
1216+
</Iterate.PushContainer>
1217+
</Form.Handler>
1218+
)
1219+
1220+
const input = document.querySelector('input')
1221+
const button = document.querySelector('button')
1222+
1223+
await userEvent.type(input, 'First entry')
1224+
1225+
expect(onChange).toHaveBeenCalledTimes(0)
1226+
1227+
await userEvent.click(button)
1228+
1229+
expect(onChange).toHaveBeenCalledTimes(1)
1230+
expect(onChange).toHaveBeenLastCalledWith(
1231+
{
1232+
entries: ['First entry', 'Existing'],
1233+
},
1234+
expect.anything()
1235+
)
1236+
})
1237+
})
12001238
})

0 commit comments

Comments
 (0)