Skip to content
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

Try useAnimate for all <Animate /> cases, lightening the React tree #26201

Merged
merged 1 commit into from
Nov 4, 2020
Merged

Try useAnimate for all <Animate /> cases, lightening the React tree #26201

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
30 changes: 13 additions & 17 deletions packages/components/src/navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import Animate from '../animate';
import { useAnimate } from '../animate';
import { ROOT_MENU } from './constants';
import { NavigationContext } from './context';
import { NavigationUI } from './styles/navigation-styles';
Expand Down Expand Up @@ -61,27 +61,23 @@ export default function Navigation( {
};

const classes = classnames( 'components-navigation', className );
const animateClassName = useAnimate( {
type: 'slide-in',
origin: slideOrigin,
} );

return (
<NavigationUI className={ classes }>
<Animate
<div
key={ menu }
type="slide-in"
options={ { origin: slideOrigin } }
className={ classnames( {
[ animateClassName ]: isMounted.current && slideOrigin,
} ) }
>
{ ( { className: animateClassName } ) => (
<div
className={ classnames( {
[ animateClassName ]:
isMounted.current && slideOrigin,
} ) }
>
<NavigationContext.Provider value={ context }>
{ children }
</NavigationContext.Provider>
</div>
) }
</Animate>
<NavigationContext.Provider value={ context }>
{ children }
</NavigationContext.Provider>
</div>
</NavigationUI>
);
}
88 changes: 43 additions & 45 deletions packages/components/src/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import Button from '../button';
import ScrollLock from '../scroll-lock';
import IsolatedEventContainer from '../isolated-event-container';
import { Slot, Fill, useSlot } from '../slot-fill';
import Animate from '../animate';
import { useAnimate } from '../animate';

const FocusManaged = withConstrainedTabbing(
withFocusReturn( ( { children } ) => children )
Expand Down Expand Up @@ -529,57 +529,55 @@ const Popover = ( {
onClickOutside( clickEvent );
}

const animateClassName = useAnimate( {
type: animate && animateOrigin ? 'appear' : null,
origin: animateOrigin,
} );

// Disable reason: We care to capture the _bubbled_ events from inputs
// within popover as inferring close intent.

let content = (
<PopoverDetectOutside onFocusOutside={ handleOnFocusOutside }>
<Animate
type={ animate && animateOrigin ? 'appear' : null }
options={ { origin: animateOrigin } }
<IsolatedEventContainer
className={ classnames(
'components-popover',
className,
animateClassName,
{
'is-expanded': isExpanded,
'is-without-arrow': noArrow,
'is-alternate': isAlternate,
}
) }
{ ...contentProps }
onKeyDown={ maybeClose }
ref={ containerRef }
>
{ ( { className: animateClassName } ) => (
<IsolatedEventContainer
className={ classnames(
'components-popover',
className,
animateClassName,
{
'is-expanded': isExpanded,
'is-without-arrow': noArrow,
'is-alternate': isAlternate,
}
) }
{ ...contentProps }
onKeyDown={ maybeClose }
ref={ containerRef }
>
{ isExpanded && <ScrollLock /> }
{ isExpanded && (
<div className="components-popover__header">
<span className="components-popover__header-title">
{ headerTitle }
</span>
<Button
className="components-popover__close"
icon={ close }
onClick={ onClose }
/>
</div>
) }
<div
ref={ contentRef }
className="components-popover__content"
tabIndex="-1"
>
<div style={ { position: 'relative' } }>
{ containerResizeListener }
{ children }
</div>
</div>
</IsolatedEventContainer>
{ isExpanded && <ScrollLock /> }
{ isExpanded && (
<div className="components-popover__header">
<span className="components-popover__header-title">
{ headerTitle }
</span>
<Button
className="components-popover__close"
icon={ close }
onClick={ onClose }
/>
</div>
) }
</Animate>
<div
ref={ contentRef }
className="components-popover__content"
tabIndex="-1"
>
<div style={ { position: 'relative' } }>
{ containerResizeListener }
{ children }
</div>
</div>
</IsolatedEventContainer>
</PopoverDetectOutside>
);

Expand Down
19 changes: 10 additions & 9 deletions packages/editor/src/components/post-saved-state/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Animate, Button } from '@wordpress/components';
import {
__unstableUseAnimate as useAnimate,
Button,
} from '@wordpress/components';
import { usePrevious, useViewportMatch } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
Expand Down Expand Up @@ -97,6 +100,8 @@ export default function PostSavedState( {
return () => clearTimeout( timeoutId );
}, [ isSaving ] );

const animateClassName = useAnimate( { type: 'loading' } );

if ( isSaving ) {
// TODO: Classes generation should be common across all return
// paths of this function, including proper naming convention for
Expand All @@ -106,14 +111,10 @@ export default function PostSavedState( {
} );

return (
<Animate type="loading">
{ ( { className: animateClassName } ) => (
<span className={ classnames( classes, animateClassName ) }>
<Icon icon={ cloud } />
{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
</span>
) }
</Animate>
<span className={ classnames( classes, animateClassName ) }>
<Icon icon={ cloud } />
{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
</span>
);
}

Expand Down
6 changes: 2 additions & 4 deletions packages/interface/src/components/complementary-area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Animate, Button, Panel, Slot, Fill } from '@wordpress/components';
import { Button, Panel, Slot, Fill } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { check, starEmpty, starFilled } from '@wordpress/icons';
Expand All @@ -27,9 +27,7 @@ function ComplementaryAreaSlot( { scope, ...props } ) {
function ComplementaryAreaFill( { scope, children, className } ) {
return (
<Fill name={ `ComplementaryArea/${ scope }` }>
<Animate type="slide-in" options={ { origin: 'left' } }>
{ () => <div className={ className }>{ children }</div> }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Class isn't used, so removing.

</Animate>
<div className={ className }>{ children }</div>
</Fill>
);
}
Expand Down