-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useHeightAnimation): add hook to make height (auto) animations e…
…asy (for internal use as of now)
- Loading branch information
1 parent
56829ef
commit 2ec0c24
Showing
5 changed files
with
371 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
packages/dnb-design-system-portal/src/docs/uilib/helpers/hooks.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import { | ||
| HeightAnimationExample, | ||
| } from 'Docs/uilib/helpers/Examples' | ||
| import SkipLinkExample from 'Docs/uilib/usage/accessibility/examples/skip-link-example.js' | ||
|
|
||
| ## Description | ||
|
|
||
| These React Hooks are internally used in the components, and are with that a good choice when it comes to save bandwidth in the final production bundle. | ||
|
|
||
| ## `useHeightAnimation` | ||
|
|
||
| In many places we want to animate the content in and out. The challenge is to never define a fixed height, because of a unknown content size and a different font size the users is using. | ||
|
|
||
| The `useHeightAnimation` hook takes an HTML Element, and animates it from 0 to the current content. When the animation is done, it tests the element height to `auto`. | ||
|
|
||
| The element animation is done with a CSS transition, e.g.: | ||
|
|
||
| ```css | ||
| .animation-element { | ||
| overflow: hidden; | ||
| transition: height 1s var(--easing-default); | ||
| } | ||
| ``` | ||
|
|
||
| <HeightAnimationExample /> |
150 changes: 150 additions & 0 deletions
150
packages/dnb-eufemia/src/shared/__tests__/useHeightAnimation.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| /** | ||
| * useHeightAnimation Tests | ||
| * | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import classnames from 'classnames' | ||
| import { render, act, fireEvent } from '@testing-library/react' | ||
| import { useHeightAnimation } from '../useHeightAnimation' | ||
| import ToggleButton from '../../components/ToggleButton' | ||
| import { wait } from '@testing-library/user-event/dist/utils' | ||
|
|
||
| beforeEach(() => { | ||
| window.requestAnimationFrame = jest.fn((callback) => { | ||
| return setTimeout(callback, 0) | ||
| }) | ||
| window.cancelAnimationFrame = jest.fn((id) => { | ||
| clearTimeout(id) | ||
| return id | ||
| }) | ||
| }) | ||
|
|
||
| describe('useHeightAnimation', () => { | ||
| const AnimatedContent = ({ open = false, noAnimation = false }) => { | ||
| const animationElement = React.useRef() | ||
| const { isOpen, isInDOM, isInTransition } = useHeightAnimation( | ||
| animationElement, | ||
| { | ||
| open, | ||
| animate: !noAnimation, | ||
| } | ||
| ) | ||
|
|
||
| return ( | ||
| <div | ||
| className={classnames( | ||
| 'wrapper-element', | ||
| isOpen && 'is-open', | ||
| isInDOM && 'is-in-dom', | ||
| isInTransition && 'is-in-transition' | ||
| )} | ||
| > | ||
| <div ref={animationElement} className="animation-element"> | ||
| <div className="content">content</div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const Component = ({ open = false }) => { | ||
| const [openState, setOpenState] = React.useState(open) | ||
|
|
||
| const onChangeHandler = ({ checked }) => { | ||
| setOpenState(checked) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <ToggleButton checked={openState} onChange={onChangeHandler}> | ||
| Toggle me | ||
| </ToggleButton> | ||
|
|
||
| <AnimatedContent open={open || openState} /> | ||
|
|
||
| <p>Text</p> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| it('should be closed by default', () => { | ||
| render(<Component />) | ||
| expect(document.querySelector('.is-in-dom')).toBeFalsy() | ||
| }) | ||
|
|
||
| it('should have element in DOM when open property is true', () => { | ||
| const { rerender } = render(<Component />) | ||
|
|
||
| expect(document.querySelector('.is-in-dom')).toBeFalsy() | ||
|
|
||
| rerender(<Component open />) | ||
|
|
||
| expect(document.querySelector('.is-in-dom')).toBeTruthy() | ||
| }) | ||
|
|
||
| it('should set height style to auto', async () => { | ||
| const { rerender } = render(<Component />) | ||
|
|
||
| rerender(<Component open />) | ||
|
|
||
| await act(async () => { | ||
| const element = document.querySelector('.animation-element') | ||
|
|
||
| expect(element.getAttribute('style')).toBe('') | ||
|
|
||
| await wait(1) | ||
|
|
||
| expect(element.getAttribute('style')).toBe('height: 0px;') | ||
|
|
||
| simulateAnimationEnd(element) | ||
|
|
||
| expect(element.getAttribute('style')).toBe('height: auto;') | ||
| }) | ||
| }) | ||
|
|
||
| it('should act with different states through the animation transition', async () => { | ||
| render(<Component />) | ||
|
|
||
| await act(async () => { | ||
| fireEvent.click(document.querySelector('button')) | ||
|
|
||
| await wait(1) | ||
|
|
||
| expect( | ||
| Array.from(document.querySelector('.wrapper-element').classList) | ||
| ).toEqual(['wrapper-element', 'is-in-dom']) | ||
|
|
||
| await wait(1) | ||
|
|
||
| expect( | ||
| Array.from(document.querySelector('.wrapper-element').classList) | ||
| ).toEqual([ | ||
| 'wrapper-element', | ||
| 'is-open', | ||
| 'is-in-dom', | ||
| 'is-in-transition', | ||
| ]) | ||
|
|
||
| fireEvent.click(document.querySelector('button')) | ||
|
|
||
| await wait(1) | ||
|
|
||
| expect( | ||
| Array.from(document.querySelector('.wrapper-element').classList) | ||
| ).toEqual(['wrapper-element', 'is-open', 'is-in-dom']) | ||
|
|
||
| simulateAnimationEnd(document.querySelector('.animation-element')) | ||
|
|
||
| await wait(1) | ||
|
|
||
| expect( | ||
| Array.from(document.querySelector('.wrapper-element').classList) | ||
| ).toEqual(['wrapper-element']) | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| function simulateAnimationEnd(element: Element) { | ||
| const event = new CustomEvent('transitionend') | ||
| element.dispatchEvent(event) | ||
| } |
Oops, something went wrong.