Skip to content

Commit

Permalink
fix(Container): handle Form.Visibility nested in fragments
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz committed Sep 3, 2024
1 parent ea444c0 commit 4eb47b3
Show file tree
Hide file tree
Showing 3 changed files with 357 additions and 1 deletion.
179 changes: 179 additions & 0 deletions packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { setMedia, matchMedia } from 'mock-match-media'
import Flex from '../Flex'
import { createSpacingClasses } from '../../space/SpacingUtils'
import { SpaceProps } from '../../Space'
import { Form } from '../../../extensions/forms'
import H1 from '../../../elements/H1'
import P from '../../../elements/P'

describe('Flex.Container', () => {
it('should forward HTML attributes', () => {
Expand Down Expand Up @@ -721,6 +723,183 @@ describe('Flex.Container', () => {
document.querySelectorAll('[class*="dnb-space__"]')
).toHaveLength(3)
})

it('should handle nested fragments like _supportsSpacingProps=children', () => {
const { rerender, Wrapper, TestComponent } = getMocks()

Wrapper._supportsSpacingProps = 'children'

rerender(
<Flex.Vertical>
<>
<>
Content A<p>Content B</p>
</>
<>
<TestComponent top="large" />
</>
</>
</Flex.Vertical>
)

const container = document.querySelector('.dnb-flex-container')
expect(container).toMatchInlineSnapshot(`
<div
class="dnb-space dnb-flex-container dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-flex-start dnb-flex-container--spacing-small dnb-flex-container--wrap dnb-flex-container--divider-space"
>
<div
class="dnb-space dnb-space__top--zero dnb-space__bottom--zero"
>
Content A
</div>
<div
class="dnb-space dnb-space__top--zero dnb-space__bottom--zero"
>
<p>
Content B
</p>
</div>
<div
class="dnb-space__top--large dnb-space__bottom--zero test-item"
>
content
</div>
</div>
`)

expect(
document.querySelectorAll('.dnb-flex-container')
).toHaveLength(1)
expect(
document.querySelectorAll('[class*="dnb-space__"]')
).toHaveLength(3)
})

it('should handle Form.Visibility', () => {
const { rerender, Wrapper } = getMocks()

Wrapper._supportsSpacingProps = 'children'

rerender(
<Form.Handler
id="unique-id"
data={{
visible: false,
}}
>
<Flex.Vertical>
<Form.SubHeading>Heading</Form.SubHeading>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</Flex.Vertical>
</Form.Handler>
)

const container = document.querySelector('.dnb-flex-container')
expect(container).toMatchInlineSnapshot(`
<div
class="dnb-space dnb-flex-container dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-flex-start dnb-flex-container--spacing-small dnb-flex-container--wrap dnb-flex-container--divider-space"
>
<h3
class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-space__top--zero dnb-space__bottom--zero"
>
Heading
</h3>
</div>
`)

expect(
document.querySelectorAll('.dnb-flex-container')
).toHaveLength(1)
expect(
document.querySelectorAll('[class*="dnb-space__"]')
).toHaveLength(1)
})

it('should handle Form.Visibility nested in fragments', () => {
const { rerender, Wrapper } = getMocks()

Wrapper._supportsSpacingProps = 'children'

rerender(
<Form.Handler
id="unique-id"
data={{
visible: false,
}}
>
<Flex.Vertical>
<Form.SubHeading>Heading</Form.SubHeading>
<>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
</>
</Flex.Vertical>
</Form.Handler>
)

const container = document.querySelector('.dnb-flex-container')
expect(container).toMatchInlineSnapshot(`
<div
class="dnb-space dnb-flex-container dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-flex-start dnb-flex-container--spacing-small dnb-flex-container--wrap dnb-flex-container--divider-space"
>
<h3
class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-space__top--zero dnb-space__bottom--zero"
>
Heading
</h3>
</div>
`)

expect(
document.querySelectorAll('.dnb-flex-container')
).toHaveLength(1)
expect(
document.querySelectorAll('[class*="dnb-space__"]')
).toHaveLength(1)
})
})

it('should set custom element', () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/flex/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,8 @@ export function renderWithSpacing(
function wrapWithSpace({ element, spaceProps, variant = null }) {
return variant ?? getSpaceVariant(element) === true ? (
React.cloneElement(element as React.ReactElement, spaceProps)
) : getSpaceVariant(element) === 'children' ? (
renderWithSpacing(element, spaceProps)
) : (
<Space {...spaceProps}>{element}</Space>
)
Expand Down
177 changes: 176 additions & 1 deletion packages/dnb-eufemia/src/extensions/forms/Form/Visibility/stories/Visibility.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useCallback } from 'react'
import { Field, Form } from '../../..'
import { Flex, Section } from '../../../../../components'
import { Flex, Section, Card } from '../../../../../components'
import { P } from '../../../../../elements'

export default {
title: 'Eufemia/Extensions/Forms/Visibility',
Expand Down Expand Up @@ -174,3 +175,177 @@ export const KeepInDOM = () => {
</Form.Handler>
)
}

export const wrappingVisibilityInFragmentAllVisible = () => {
return (
<Form.Handler
id={'wrappingVisibilityInFragmentAllVisible'}
data={{
visible: true,
}}
>
<Card stack>
<Form.SubHeading>Test heading</Form.SubHeading>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
</Card>
</Form.Handler>
)
}

export const wrappingVisibilityInFragmentAllHidden = () => {
return (
<Form.Handler
id={'wrappingVisibilityInFragmentAllHidden'}
data={{
visible: false,
}}
>
<Card stack>
<Form.SubHeading>Test heading</Form.SubHeading>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
</Card>
</Form.Handler>
)
}

export const wrappingVisibilityInFragments2Hidden = () => {
return (
<Form.Handler
id={'wrappingVisibilityInFragments2Hidden'}
data={{
visible1: true,
visible2: false,
visible3: true,
visible4: false,
visible5: true,
}}
>
<Card stack>
<Form.SubHeading>Test heading</Form.SubHeading>
<>
<Form.Visibility
visibleWhen={{ path: '/visible1', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible2', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<>
<Form.Visibility
visibleWhen={{ path: '/visible3', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible4', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible5', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
</Card>
</Form.Handler>
)
}

export const wrappingVisibilityInFragments3Hidden = () => {
return (
<Form.Handler
id={'wrappingVisibilityInFragments3Hidden'}
data={{
visible1: false,
visible2: true,
visible3: false,
visible4: true,
visible5: false,
}}
>
<Card stack>
<Form.SubHeading>Test heading</Form.SubHeading>
<>
<Form.Visibility
visibleWhen={{ path: '/visible1', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible2', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
<>
<Form.Visibility
visibleWhen={{ path: '/visible3', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible4', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
<Form.Visibility
visibleWhen={{ path: '/visible5', hasValue: true }}
>
<P>text</P>
</Form.Visibility>
</>
</Card>
</Form.Handler>
)
}

0 comments on commit 4eb47b3

Please sign in to comment.