-
Notifications
You must be signed in to change notification settings - Fork 10.7k
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.
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
only make order summary sticky when it's not longer than view #47680
Changes from 2 commits
bdc6128
3746955
2dc287e
6f3103f
0774128
1730363
f102d74
73772c2
abbd1ee
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { useState, useRef, useEffect } from '@wordpress/element'; | ||
|
||
/** | ||
* Returns a ref, its dimensions, and its visible viewport dimensions. Useful to know if an element should be sticky or not. This hook only runs when an element changes its intersection or dimensions. | ||
* | ||
* @example | ||
* | ||
* ```js | ||
* const App = () => { | ||
* const [ observedRef, observedElement, viewWindow ] = useObservedViewport(); | ||
* | ||
* return ( | ||
* <MyElement ref={ observedRef } className={ observedElement.height < viewWindow.height ? 'is-sticky': '' } /> | ||
* ); | ||
* }; | ||
* ``` | ||
*/ | ||
export function useObservedViewport(): [ | ||
React.Ref< HTMLElement >, | ||
{ height: number; width: number }, | ||
{ height: number; width: number } | ||
] { | ||
const [ observedElement, setObservedElement ] = useState( { | ||
height: 0, | ||
width: 0, | ||
} ); | ||
|
||
const [ viewWindow, setViewWindow ] = useState( { | ||
height: 0, | ||
width: 0, | ||
} ); | ||
|
||
const observedRef = useRef< HTMLElement >( null ); | ||
|
||
useEffect( () => { | ||
if ( ! observedRef.current ) { | ||
return; | ||
} | ||
const element = observedRef.current; | ||
const resizeObserver = new ResizeObserver( ( entries ) => { | ||
entries.forEach( ( entry ) => { | ||
if ( entry.target === element ) { | ||
const { height, width } = entry.contentRect; | ||
setObservedElement( { height, width } ); | ||
} | ||
} ); | ||
} ); | ||
|
||
const intersectionObserver = new IntersectionObserver( | ||
( entries ) => { | ||
entries.forEach( ( entry ) => { | ||
const { height, width } = entry.boundingClientRect; | ||
setObservedElement( { height, width } ); | ||
if ( entry.target.ownerDocument.defaultView ) { | ||
setViewWindow( { | ||
height: entry.target.ownerDocument.defaultView | ||
?.innerHeight, | ||
width: entry.target.ownerDocument.defaultView | ||
?.innerWidth, | ||
} ); | ||
} | ||
} ); | ||
}, | ||
{ | ||
root: null, | ||
rootMargin: '0px', | ||
threshold: 1, | ||
} | ||
); | ||
Comment on lines
+58
to
+78
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This will observe the element when it intersect with the page and is visible in it, useful for cases where the page size changes. |
||
|
||
resizeObserver.observe( element ); | ||
intersectionObserver.observe( element ); | ||
|
||
return () => { | ||
if ( ! element ) { | ||
return; | ||
} | ||
|
||
resizeObserver.unobserve( element ); | ||
intersectionObserver.unobserve( element ); | ||
}; | ||
}, [] ); | ||
return [ observedRef, observedElement, viewWindow ]; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: patch | ||
Type: fix | ||
Comment: This is a follow up to another PR not yet shipped. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hi Nadir, quick question, can you link the other PR please? Can this be reviewed and merged first? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The other PR is already merged There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This resizer will track the element height changes (collapse vs expand, add items to it...).