Skip to content

Popover: make more reactive to prop changes, avoid unnecessary updates #43335

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

Merged
ciampo merged 10 commits into from
Aug 31, 2022
Merged

Popover: make more reactive to prop changes, avoid unnecessary updates #43335

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a6bcdcf
Arow ref as a callback ref calling update()
ciampo Aug 17, 2022
8d83ab5
Reference ref and ownerDoc as internal state, compute under the same …
ciampo Aug 17, 2022
950bf86
use whileElementsMounted for auto-updating reference
ciampo Aug 17, 2022
f8d83b7
Extract getReferenceOwnerDocument amd getReferenceElement to separate…
ciampo Aug 25, 2022
1a09739
Move useLayoutEffect after calling floating ui, remove need for refer…
ciampo Aug 25, 2022
ca84935
Animate only when opening the popover
ciampo Aug 29, 2022
c1a49f6
Storybook: improve examples
ciampo Aug 29, 2022
29936a5
CHANGELOG
ciampo Aug 29, 2022
41404c0
scrollIntoView instead of focus
ciampo Aug 30, 2022
1de9502
Add iframeOffset to arrow position
ciampo Aug 31, 2022
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
Prev Previous commit
Next Next commit
Storybook: improve examples
  • Loading branch information
@ciampo
ciampo committed Aug 31, 2022
commit c1a49f6fce4d51ae0a74fc0448c9896740b24729
18 changes: 14 additions & 4 deletions packages/components/src/popover/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { useState, useRef } from '@wordpress/element';
import { useState, useRef, useEffect } from '@wordpress/element';
import { __unstableIframe as Iframe } from '@wordpress/block-editor';

/**
Expand Down Expand Up @@ -107,18 +107,26 @@ export const Default = ( args ) => {
const toggleVisible = () => {
setIsVisible( ( state ) => ! state );
};
const buttonRef = useRef();
useEffect( () => {
buttonRef.current?.focus();
}, [] );

return (
<div
style={ {
minWidth: '600px',
minHeight: '600px',
width: '300vw',
height: '300vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} }
>
<Button variant="secondary" onClick={ toggleVisible }>
<Button
variant="secondary"
onClick={ toggleVisible }
ref={ buttonRef }
>
Toggle Popover
{ isVisible && <Popover { ...args } /> }
</Button>
Expand Down Expand Up @@ -246,6 +254,8 @@ export const WithSlotOutsideIframe = ( args ) => {
style={ {
width: '100%',
height: '400px',
border: '0',
outline: '1px solid purple',
} }
>
<div
Expand Down