Skip to content

Commit

Permalink
Update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@joakbjerk @tujoworker
joakbjerk authored and tujoworker committed Aug 14, 2024
1 parent 142453a commit 6f5cffb
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 69 deletions.
197 changes: 128 additions & 69 deletions ...ages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
import { Card, Flex, Section } from '@dnb/eufemia/src'
import { Card, Code, Flex, Section } from '@dnb/eufemia/src'

Check failure on line 2 in packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx

View workflow job for this annotation

GitHub Actions / Run tests and checks 

'Code' is defined but never used
import { Field, Form, Iterate } from '@dnb/eufemia/src/extensions/forms'
import React from 'react'

Expand Down Expand Up @@ -49,34 +49,67 @@ export const CommitHandleRef = () => {
const commitHandleRef = React.useRef(null)

return (
<Form.Handler data={{ foo: 'bar' }}>
<Card stack>
<Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
<Form.Isolation commitHandleRef={commitHandleRef}>
<Flex.Stack>
<Form.Section path="/newPerson">
<Field.Name.First required path="/title" />
</Form.Section>
<button
onClick={() => {
commitHandleRef.current()
}}
>
Legg til
</button>
</Flex.Stack>
</Form.Isolation>
<Log />
</Card>
</Form.Handler>
<>
<Form.Handler
bottom="large"
data={{
contactPersons: [{ title: 'Hanne', value: 'hanne' }],
}}
>
<Card stack>
<Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
<Field.Selection
variant="radio"
dataPath="/contactPersons"
/>
<Form.Isolation
commitHandleRef={commitHandleRef}
transformOnCommit={(isolatedData, handlerData) => {
const transformedData = {
...handlerData,
contactPersons: [
...handlerData.contactPersons,
{
title: isolatedData.newPerson.title,
value:
isolatedData.newPerson.title.toLowerCase(),
},
],
}

return transformedData
}}
>
<Flex.Stack>
<Form.Section path="/newPerson">
<Field.Name.First required path="/title" />
</Form.Section>
</Flex.Stack>
</Form.Isolation>
<Log />
</Card>
</Form.Handler>
<button
onClick={() => {
commitHandleRef.current()
}}
>
Commit from outside of handler
</button>
</>
)
}

const Log = () => {
const { data } = Form.useData()
return (
<Section backgroundColor="sand-yellow" innerSpace>
<pre>{JSON.stringify(data)}</pre>
<Section
element="output"
innerSpace
backgroundColor="sand-yellow"
top
>
{JSON.stringify(data || {}, null, 4)}
</Section>
)
}
Expand All @@ -90,55 +123,81 @@ export const CommitHandleRef = () => {
export const TransformCommitData = () => {
return (
<ComponentBox scope={{ Iterate }}>
<Form.Handler
onChange={console.log}
defaultData={{
persons: [{ value: 'id-123', title: 'Hanne' }],
}}
>
<Card stack>
<Form.SubHeading>Legg til ny hovedkontaktperson</Form.SubHeading>
<Field.Selection required variant="radio" path="/person">
<Iterate.Array path="/persons">
<Field.Option itemPath="/" />
</Iterate.Array>
{() => {
const MyForm = () => {
return (
<Form.Handler
onChange={console.log}
defaultData={{
people: [
{ value: 'hanne', title: 'Hanne' },
{ title: 'Annen person', value: 'other' },
],
selection: 'hanne',
}}
>
<Card stack>
<Form.SubHeading>
Legg til ny hovedkontaktperson
</Form.SubHeading>
<Field.Selection
variant="radio"
path="/selection"
dataPath="/people"
/>

<Field.Option value="other-person">Annen person</Field.Option>
</Field.Selection>
<Form.Visibility
visibleWhen={{
path: '/person',
hasValue: 'other-person',
}}
animate
>
<Flex.Stack>
<Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
<Form.Isolation
transformCommitData={(isolatedData, outerData) => {
return {
...outerData,
persons: [
...outerData.persons,
isolatedData.newPerson,
],
}
}}
>
<Flex.Stack>
<Form.Section path="/newPerson">
<Field.Name.First required path="/title" />
</Form.Section>
<Form.Visibility
visibleWhen={{
path: '/selection',
hasValue: 'other',
}}
animate
>
<Flex.Stack>
<Form.SubHeading>
Ny hovedkontaktperson
</Form.SubHeading>
<Form.Isolation
transformOnCommit={(isolatedData, handlerData) => {
const lastPersonIndex =
handlerData.people.length - 1

<Form.Isolation.CommitButton />
</Flex.Stack>
</Form.Isolation>
</Flex.Stack>
</Form.Visibility>
return {
...handlerData,
people: [
...handlerData.people.slice(
0,
lastPersonIndex,
),
{
...isolatedData.newPerson,
value:
isolatedData.newPerson.title.toLowerCase(),
},
handlerData.people[lastPersonIndex],
],
}
}}
>
<Flex.Stack>
<Form.Section path="/newPerson">
<Field.Name.First required path="/title" />
</Form.Section>

<Form.SubmitButton />
</Card>
</Form.Handler>
<Form.Isolation.CommitButton />
</Flex.Stack>
</Form.Isolation>
</Flex.Stack>
</Form.Visibility>

<Form.SubmitButton />
</Card>
</Form.Handler>
)
}

return <MyForm />
}}
</ComponentBox>
)
}
8 changes: 8 additions & 0 deletions ...b-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,11 @@ import * as Examples from './Examples'
### Using the CommitButton

<Examples.UsingCommitButton />

### Using commitHandleRef

<Examples.CommitHandleRef />

### Transform data on commit

<Examples.TransformCommitData />

0 comments on commit 6f5cffb

Please sign in to comment.