javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(): update to Stencil One 🎉🎊

Browse Source
This commit is contained in:
Manu MA
2019-06-19 21:33:50 +02:00
committed by GitHub
parent 7f1829eb21
commit b40f7d36d5
572 changed files with 14426 additions and 9916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -1,13 +1,12 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
import { Mode } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
@Component({
tag: 'ion-infinite-scroll',
styleUrl: 'infinite-scroll.scss'
})
export class InfiniteScroll implements ComponentInterface {
mode!: Mode;
private thrPx = 0;
private thrPc = 0;
@ -18,9 +17,6 @@ export class InfiniteScroll implements ComponentInterface {
@Element() el!: HTMLElement;
@State() isLoading = false;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
/**
* The threshold distance from the bottom
* of the content to call the `infinite` output event when scrolled.
@ -56,12 +52,11 @@ export class InfiniteScroll implements ComponentInterface {
@Prop() disabled = false;
@Watch('disabled')
protected disabledChanged(val: boolean) {
protected disabledChanged() {
if (this.disabled) {
this.isLoading = false;
this.isBusy = false;
}
this.enableScrollEvents(!val);
}
/**
@ -85,9 +80,8 @@ export class InfiniteScroll implements ComponentInterface {
this.scrollEl = await contentEl.getScrollElement();
}
this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled);
if (this.position === 'top') {
this.queue.write(() => {
writeTask(() => {
if (this.scrollEl) {
this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
}
@ -99,8 +93,7 @@ export class InfiniteScroll implements ComponentInterface {
this.scrollEl = undefined;
}
@Listen('scroll', { enabled: false })
protected onScroll() {
private onScroll = () => {
const scrollEl = this.scrollEl;
if (!scrollEl || !this.canStart()) {
return 1;
@ -145,7 +138,7 @@ export class InfiniteScroll implements ComponentInterface {
* to `enabled`.
*/
@Method()
complete() {
async complete() {
const scrollEl = this.scrollEl;
if (!this.isLoading || !scrollEl) {
return;
@ -179,7 +172,7 @@ export class InfiniteScroll implements ComponentInterface {
// ******** DOM READ ****************
requestAnimationFrame(() => {
this.queue.read(() => {
readTask(() => {
// UI has updated, save the new content dimensions
const scrollHeight = scrollEl.scrollHeight;
// New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
@ -187,7 +180,7 @@ export class InfiniteScroll implements ComponentInterface {
// ******** DOM WRITE ****************
requestAnimationFrame(() => {
this.queue.write(() => {
writeTask(() => {
scrollEl.scrollTop = newScrollTop;
this.isBusy = false;
});
@ -206,20 +199,17 @@ export class InfiniteScroll implements ComponentInterface {
);
}
private enableScrollEvents(shouldListen: boolean) {
if (this.scrollEl) {
this.enableListener(this, 'scroll', shouldListen, this.scrollEl);
}
render() {
const mode = getIonMode(this);
return (
<Host
class={{
[mode]: true,
'infinite-scroll-loading': this.isLoading,
'infinite-scroll-enabled': !this.disabled
}}
onScroll={this.disabled ? undefined : this.onScroll}
/>
);
}
hostData() {
return {
class: {
[`${this.mode}`]: true,
'infinite-scroll-loading': this.isLoading,
'infinite-scroll-enabled': !this.disabled
}
};
}
}