mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Merge pull request #3577 from woocommerce/PCP-4990
Add polling mechanism for renderer wrapper (4990)
This commit is contained in:
commit
f42721fc86
2 changed files with 46 additions and 9 deletions
|
@ -1,5 +1,6 @@
|
|||
import { setVisible } from '../Helper/Hiding';
|
||||
import MessageRenderer from '../Renderer/MessageRenderer';
|
||||
import { waitForElement } from '../Helper/WaitForElement';
|
||||
|
||||
class MessagesBootstrap {
|
||||
constructor( gateway, messageRenderer ) {
|
||||
|
@ -93,17 +94,21 @@ class MessagesBootstrap {
|
|||
|
||||
render() {
|
||||
this.renderers.forEach( ( renderer ) => {
|
||||
const shouldShow = this.shouldShow( renderer );
|
||||
setVisible( renderer.config.wrapper, shouldShow );
|
||||
if ( ! shouldShow ) {
|
||||
return;
|
||||
}
|
||||
waitForElement( renderer.config.wrapper )
|
||||
.then( () => {
|
||||
const shouldShow = this.shouldShow( renderer );
|
||||
setVisible( renderer.config.wrapper, shouldShow );
|
||||
if ( ! shouldShow ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! renderer.shouldRender() ) {
|
||||
return;
|
||||
}
|
||||
if ( ! renderer.shouldRender() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
renderer.renderWithAmount( this.lastAmount );
|
||||
renderer.renderWithAmount( this.lastAmount );
|
||||
} )
|
||||
.catch( ( err ) => console.error( err ) );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Waits for a DOM element using setTimeout polling
|
||||
* @param {string} selector - CSS selector for the element
|
||||
* @param {number} timeout - Maximum time to wait in milliseconds (default: 3000)
|
||||
* @param {number} interval - Polling interval in milliseconds (default: 100)
|
||||
* @return {Promise<Element>} - Resolves with the element or rejects if timeout
|
||||
*/
|
||||
export function waitForElement( selector, timeout = 3000, interval = 100 ) {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
const timeoutId = setTimeout( () => {
|
||||
clearInterval( intervalId );
|
||||
reject( `Element "${ selector }" not found within ${ timeout }ms` );
|
||||
}, timeout );
|
||||
|
||||
const element = document.querySelector( selector );
|
||||
if ( element ) {
|
||||
clearTimeout( timeoutId );
|
||||
resolve( element );
|
||||
return;
|
||||
}
|
||||
|
||||
const intervalId = setInterval( () => {
|
||||
const el = document.querySelector( selector );
|
||||
|
||||
if ( el ) {
|
||||
clearTimeout( timeoutId );
|
||||
clearInterval( intervalId );
|
||||
resolve( el );
|
||||
}
|
||||
}, interval );
|
||||
} );
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue