mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
fix(): update to Stencil One 🎉🎊
This commit is contained in:
Manu MA
@ -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
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -12,6 +12,10 @@ The `ion-infinite-scroll` component has the infinite scroll logic. It requires a
|
||||
|
||||
Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
|
||||
|
||||
## React
|
||||
|
||||
The Infinite Scroll component is not supported in React.
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -111,62 +115,6 @@ function toggleInfiniteScroll() {
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
|
||||
|
||||
export default class Example extends Component<Props, State> {
|
||||
|
||||
ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
|
||||
|
||||
constructor() {
|
||||
this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
|
||||
}
|
||||
|
||||
loadData = (ev: MouseEvent) => {
|
||||
setTimeout(() => {
|
||||
console.log('Done');
|
||||
ev.target.complete();
|
||||
|
||||
// App logic to determine if all data is loaded
|
||||
// and disable the infinite scroll
|
||||
if (data.length == 1000) {
|
||||
ev.target.disabled = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
toggleInfiniteScroll = () => {
|
||||
this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<IonContent>
|
||||
<IonButton onClick="toggleInfiniteScroll()" expand="block">
|
||||
Toggle Infinite Scroll
|
||||
</IonButton>
|
||||
|
||||
<IonList></IonList>
|
||||
|
||||
<IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
|
||||
<IonInfiniteScrollContent
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
</IonInfiniteScrollContent>
|
||||
</IonInfiniteScroll>
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
@ -186,7 +134,7 @@ export default class Example extends Component<Props, State> {
|
||||
|
||||
## Methods
|
||||
|
||||
### `complete() => void`
|
||||
### `complete() => Promise<void>`
|
||||
|
||||
Call `complete()` within the `ionInfinite` output event handler when
|
||||
your async operation has completed. For example, the `loading`
|
||||
@ -199,7 +147,7 @@ to `enabled`.
|
||||
|
||||
#### Returns
|
||||
|
||||
Type: `void`
|
||||
Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
```tsx
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
|
||||
|
||||
export default class Example extends Component<Props, State> {
|
||||
|
||||
ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
|
||||
|
||||
constructor() {
|
||||
this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
|
||||
}
|
||||
|
||||
loadData = (ev: MouseEvent) => {
|
||||
setTimeout(() => {
|
||||
console.log('Done');
|
||||
ev.target.complete();
|
||||
|
||||
// App logic to determine if all data is loaded
|
||||
// and disable the infinite scroll
|
||||
if (data.length == 1000) {
|
||||
ev.target.disabled = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
toggleInfiniteScroll = () => {
|
||||
this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<IonContent>
|
||||
<IonButton onClick="toggleInfiniteScroll()" expand="block">
|
||||
Toggle Infinite Scroll
|
||||
</IonButton>
|
||||
|
||||
<IonList></IonList>
|
||||
|
||||
<IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
|
||||
<IonInfiniteScrollContent
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
</IonInfiniteScrollContent>
|
||||
</IonInfiniteScroll>
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user