fix(refresher): use componentOnReady utility for CE build (#25783)

Resolves #25782
This commit is contained in:
Sean Perkins
2022-08-22 12:52:47 -04:00
committed by GitHub
parent d631195124
commit bd715a5256

View File

@ -10,7 +10,7 @@ import {
ION_CONTENT_ELEMENT_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR,
printIonContentErrorMsg, printIonContentErrorMsg,
} from '../../utils/content'; } from '../../utils/content';
import { clamp, getElementRoot, raf, transitionEndAsync } from '../../utils/helpers'; import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '../../utils/helpers';
import { hapticImpact } from '../../utils/native/haptic'; import { hapticImpact } from '../../utils/native/haptic';
import { import {
@ -452,38 +452,39 @@ export class Refresher implements ComponentInterface {
* Waits for the content to be ready before querying the scroll * Waits for the content to be ready before querying the scroll
* or the background content element. * or the background content element.
*/ */
await contentEl.componentOnReady(); componentOnReady(contentEl, async () => {
const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR); const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
/** /**
* Query the custom scroll target (if available), first. In refresher implementations, * Query the custom scroll target (if available), first. In refresher implementations,
* the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
* querying the custom scroll target first and falling back to the ion-content element, * querying the custom scroll target first and falling back to the ion-content element,
* the correct scroll element will be returned by the implementation. * the correct scroll element will be returned by the implementation.
*/ */
this.scrollEl = await getScrollElement(customScrollTarget ?? contentEl); this.scrollEl = await getScrollElement(customScrollTarget ?? contentEl);
/** /**
* Query the background content element from the host ion-content element directly. * Query the background content element from the host ion-content element directly.
*/ */
this.backgroundContentEl = await contentEl.getBackgroundElement(); this.backgroundContentEl = await contentEl.getBackgroundElement();
if (await shouldUseNativeRefresher(this.el, getIonMode(this))) { if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
this.setupNativeRefresher(contentEl); this.setupNativeRefresher(contentEl);
} else { } else {
this.gesture = (await import('../../utils/gesture')).createGesture({ this.gesture = (await import('../../utils/gesture')).createGesture({
el: contentEl, el: contentEl,
gestureName: 'refresher', gestureName: 'refresher',
gesturePriority: 31, gesturePriority: 31,
direction: 'y', direction: 'y',
threshold: 20, threshold: 20,
passive: false, passive: false,
canStart: () => this.canStart(), canStart: () => this.canStart(),
onStart: () => this.onStart(), onStart: () => this.onStart(),
onMove: (ev) => this.onMove(ev), onMove: (ev) => this.onMove(ev),
onEnd: () => this.onEnd(), onEnd: () => this.onEnd(),
}); });
this.disabledChanged(); this.disabledChanged();
} }
});
} }
disconnectedCallback() { disconnectedCallback() {