Skip to content

Commit

Permalink
Refactor Toolbar to be included as JSX
Browse files Browse the repository at this point in the history
  • Loading branch information
tujoworker committed Sep 11, 2024
1 parent 5577cb9 commit b85792c
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 121 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -378,52 +378,41 @@ export const InitialOpen = () => {

<Card align="stretch">
<Iterate.Array path="/countries" defaultValue={[null]}>
<Iterate.ViewContainer
toolbar={
<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return <Iterate.ViewContainer.EditButton />
}
return (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}}
</Iterate.Toolbar>
}
>
<Iterate.ViewContainer>
<Value.SelectCountry
label="Land du er statsborger i"
itemPath="/"
/>
<Iterate.Toolbar>
{({ items }) =>
items.length === 1 ? (
<Iterate.ViewContainer.EditButton />
) : (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}
</Iterate.Toolbar>
</Iterate.ViewContainer>

<Iterate.EditContainer
toolbar={
<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return null
}

return (
<>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</>
)
}}
</Iterate.Toolbar>
}
>
<Iterate.EditContainer>
<Field.SelectCountry
label="Land du er statsborger i"
itemPath="/"
required
/>
<Iterate.Toolbar>
{({ items }) =>
items.length === 1 ? null : (
<>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</>
)
}
</Iterate.Toolbar>
</Iterate.EditContainer>
</Iterate.Array>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,12 @@ import { Iterate, Field } from '@dnb/eufemia/extensions/forms'

render(
<Iterate.Array>
<Iterate.EditContainer
toolbar={
<Iterate.Toolbar>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</Iterate.Toolbar>
}
>
<Iterate.EditContainer>
<Field.Name.Last itemPath="/name" />
<Iterate.Toolbar>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</Iterate.Toolbar>
</Iterate.EditContainer>
</Iterate.Array>,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,25 @@ render(

## Customize the Toolbar

You can customize the toolbar by passing a function as a child to `Iterate.Toolbar`. The function receives the following parameters as an object:
You can customize the toolbar by either passing a function as a child or as a JSX element:

```tsx
import { Iterate } from '@dnb/eufemia/extensions/forms'

render(
<Iterate.Array>
<Iterate.ViewContainer>
Item Content
<Iterate.Toolbar>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</Iterate.Toolbar>
</Iterate.ViewContainer>
</Iterate.Array>,
)
```

The function receives the following parameters as an object:

- `index` the index of the current item in the array.
- `value` the value of the current item.
Expand All @@ -37,25 +55,18 @@ import { Iterate } from '@dnb/eufemia/extensions/forms'

render(
<Iterate.Array>
<Iterate.ViewContainer
toolbar={
<Iterate.Toolbar>
{({ items, index, value }) => {
if (items.length === 1) {
return null
}

return (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}}
</Iterate.Toolbar>
}
>
<Iterate.ViewContainer>
Item Content
<Iterate.Toolbar>
{({ items, index, value }) => {
return items.length === 1 ? null : (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}}
</Iterate.Toolbar>
</Iterate.ViewContainer>
</Iterate.Array>,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,13 @@ import { Iterate, Value } from '@dnb/eufemia/extensions/forms'

render(
<Iterate.Array>
<Iterate.ViewContainer
toolbar={
<Iterate.Toolbar>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</Iterate.Toolbar>
}
>
<Iterate.ViewContainer>
<Value.Name.Last itemPath="/name" />

<Iterate.Toolbar>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</Iterate.Toolbar>
</Iterate.ViewContainer>
</Iterate.Array>,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,30 @@ export type Props = {
export type AllProps = Props & FlexContainerProps & ElementSectionProps

export default function EditContainer(props: AllProps) {
const { toolbar, ...rest } = props
const { toolbar, children, ...rest } = props

const hasToolbar =
!toolbar &&
React.Children.toArray(children).some((child) => {
return child?.['type'] === Toolbar
})

return (
<EditContainerWithoutToolbar
toolbar={
toolbar ?? (
<Toolbar>
<DoneButton />
<CancelButton />
</Toolbar>
)
hasToolbar
? null
: toolbar ?? (
<Toolbar>
<DoneButton />
<CancelButton />
</Toolbar>
)
}
{...rest}
/>
>
{children}
</EditContainerWithoutToolbar>
)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -384,8 +384,9 @@ describe('PushContainer', () => {
<Form.Handler>
<Iterate.Array path="/entries">...</Iterate.Array>

<Iterate.PushContainer path="/entries" toolbar={<Toolbar />}>
<Iterate.PushContainer path="/entries">
<Field.String itemPath="/" />
<Toolbar />
</Iterate.PushContainer>
</Form.Handler>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ function ViewContainer(props: AllProps) {
itemTitle = ariaLabel = ariaLabel.replace('{itemNr}', index + 1)
}

const hasToolbar =
!toolbar &&
React.Children.toArray(children).some((child) => {
return child?.['type'] === Toolbar
})

return (
<ElementBlock
mode="view"
Expand All @@ -45,12 +51,14 @@ function ViewContainer(props: AllProps) {
<Flex.Stack>
{itemTitle && <Lead size="basis">{itemTitle}</Lead>}
{children}
{toolbar ?? (
<Toolbar>
<EditButton />
<RemoveButton />
</Toolbar>
)}
{hasToolbar
? null
: toolbar ?? (
<Toolbar>
<EditButton />
<RemoveButton />
</Toolbar>
)}
</Flex.Stack>
</ElementBlock>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -148,53 +148,49 @@ export const InitialOpen = () => {

const MyEditItem = useCallback(() => {
return (
<Iterate.EditContainer
toolbar={
<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return null
}

return (
<>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</>
)
}}
</Iterate.Toolbar>
}
>
<Iterate.EditContainer>
<MyEditItemForm />

<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return null
}

return (
<>
<Iterate.EditContainer.DoneButton />
<Iterate.EditContainer.CancelButton />
</>
)
}}
</Iterate.Toolbar>
</Iterate.EditContainer>
)
}, [MyEditItemForm])

const MyViewItem = useCallback(() => {
return (
<Iterate.ViewContainer
toolbar={
<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return <Iterate.ViewContainer.EditButton />
}

return (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}}
</Iterate.Toolbar>
}
>
<Iterate.ViewContainer>
<Value.SelectCountry
label="Land du er statsborger i"
itemPath="/"
/>

<Iterate.Toolbar>
{({ items }) => {
if (items.length === 1) {
return <Iterate.ViewContainer.EditButton />
}

return (
<>
<Iterate.ViewContainer.EditButton />
<Iterate.ViewContainer.RemoveButton />
</>
)
}}
</Iterate.Toolbar>
</Iterate.ViewContainer>
)
}, [])
Expand Down

0 comments on commit b85792c

Please sign in to comment.