Skip to content

Change triggerAnimation() to animate() #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
elizabetdev wants to merge 1 commit into from
Closed

Change triggerAnimation() to animate() #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src-docs/src/views/header/header_alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,10 @@ const HeaderUpdates = forwardRef(
const bellRef = useRef();
const cheerRef = useRef();

// we're passing passing the `triggerAnimation` callbacks to the `headerUpdatesRef` child components that we want to animate
// we're passing passing the `animate` callbacks to the `headerUpdatesRef` child components that we want to animate
const animate = useCallback(() => {
bellRef.current?.triggerAnimation();
cheerRef.current?.triggerAnimation();
bellRef.current?.animate();
cheerRef.current?.animate();
}, []);

// we're using the `useImperativeHandle` which allows the child to expose a function to the parent
Expand Down
19 changes: 13 additions & 6 deletions src-docs/src/views/header/header_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,9 @@ const headerLinksSnippet = `<EuiHeader>
</EuiHeaderLinks>
</EuiHeader>`;

const headerAlertSnippet = `<EuiHeader>
const headerAlertSnippet = [
,
`<EuiHeader>
<EuiHeaderSection grow={false}>
<EuiHeaderSectionItem>
<!-- HeaderSectionItem content -->
Expand All @@ -117,18 +119,24 @@ const headerAlertSnippet = `<EuiHeader>
<EuiHeaderSectionItem>
<!-- Button to trigger portal content like a EuiPopover or a EuiFlyout -->
<EuiHeaderSectionItemButton
ref={bellButtonRef}
aria-controls={portalContentId}
aria-expanded={isPortalContentVisible}
aria-label="Open portal content"
onClick={() => showPortalConten()}
notification={showNotification}
animation={isAnimating}
>
<EuiIcon type="bell" />
</EuiHeaderSectionItemButton>
</EuiHeaderSectionItem>
</EuiHeaderSection>
</EuiHeader>`;
</EuiHeader>`,
`<!-- You can target the bellButtonRef to trigger the animation -->
<EuiButton onClick={() => bellButtonRef.current?.animate()}>
Animate
</EuiButton>
`,
];

export const HeaderExample = {
title: 'Header',
Expand Down Expand Up @@ -343,9 +351,8 @@ export const HeaderExample = {
<EuiCode>node</EuiCode> that will render inside a{' '}
<strong>EuiBadgeNotification</strong> or pass{' '}
<EuiCode>true</EuiCode> to render a simple dot. You can also animate
the button by calling the <EuiCode>triggerAnimation()</EuiCode>{' '}
method on the <strong>EuiHeaderSectionItemButton</strong>{' '}
<EuiCode>ref</EuiCode>.
the button by calling the <EuiCode>animate()</EuiCode> method on the{' '}
<strong>EuiHeaderSectionItemButton</strong> <EuiCode>ref</EuiCode>.
</p>

<p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/header/header_section/header_section_item_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const EuiHeaderSectionItemButton = forwardRef<
ref,
() => {
if (buttonRef) {
(buttonRef as any).triggerAnimation = () => {
(buttonRef as any).animate = () => {
const keyframes: Keyframe[] = [
{ transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },
{
Expand Down