fix(all): component reusage (#18963)

Use new stencil APIs to allow ionic elements to be reused once removed from the DOM.

fixes #18843
fixes #17344
fixes #16453
fixes #15879
fixes #15788
fixes #15484
fixes #17890
fixes #16364
This commit is contained in:
Manu MA
2019-08-27 16:29:37 +02:00
committed by GitHub
parent a65d897214
commit 48a27636c7
33 changed files with 411 additions and 368 deletions

View File

@ -47,7 +47,7 @@ export class PickerColumnCmp implements ComponentInterface {
this.refresh();
}
componentWillLoad() {
async connectedCallback() {
let pickerRotateFactor = 0;
let pickerScaleFactor = 0.81;
@ -60,16 +60,6 @@ export class PickerColumnCmp implements ComponentInterface {
this.rotateFactor = pickerRotateFactor;
this.scaleFactor = pickerScaleFactor;
}
async componentDidLoad() {
// get the height of one option
const colEl = this.optsEl;
if (colEl) {
this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
}
this.refresh();
this.gesture = (await import('../../utils/gesture')).createGesture({
el: this.el,
@ -81,14 +71,24 @@ export class PickerColumnCmp implements ComponentInterface {
onEnd: ev => this.onEnd(ev),
});
this.gesture.setDisabled(false);
this.tmrId = setTimeout(() => {
this.noAnimate = false;
this.refresh(true);
}, 250);
}
componentDidUnload() {
componentDidLoad() {
const colEl = this.optsEl;
if (colEl) {
// DOM READ
// We perfom a DOM read over a rendered item, this needs to happen after the first render
this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
}
this.refresh();
}
disconnectedCallback() {
cancelAnimationFrame(this.rafId);
clearTimeout(this.tmrId);
if (this.gesture) {