From b91a7069b2426fa1dfd221c5686d26d6c6da9984 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 27 Jul 2018 14:53:15 -0400 Subject: [PATCH] docs(infinite-scroll): update docs for disabling infinite scroll updates the breaking changes, usage, and test closes #14908 --- angular/BREAKING.md | 51 +++++++++++++++++++ core/src/components.d.ts | 4 +- .../infinite-scroll/infinite-scroll.tsx | 4 +- .../infinite-scroll/test/basic/index.html | 6 +-- .../infinite-scroll/usage/angular.md | 39 ++++++++++---- .../infinite-scroll/usage/javascript.md | 35 +++++++++---- 6 files changed, 110 insertions(+), 29 deletions(-) diff --git a/angular/BREAKING.md b/angular/BREAKING.md index bd22658a37..91de097462 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -28,6 +28,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4. - [Fixed Content](#fixed-content) - [Grid](#grid) - [Icon](#icon) +- [Infinite Scroll](#infinite-scroll) - [Item](#item) - [Item Divider](#item-divider) - [Item Options](#item-options) @@ -490,6 +491,56 @@ _Note: we are no longer adding the `icon` class to an `ion-icon`, so the element The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed. +## Infinite Scroll + +### Method Removed + +The `enable()` method has been removed in favor of using the `disabled` property on the `ion-infinite-scroll` element. + +**Old Usage Example:** + +```html + + + +``` + +```javascript +doInfinite(infiniteScroll) { + console.log('Begin async operation'); + + setTimeout(() => { + console.log('Async operation has ended'); + infiniteScroll.complete(); + + // To disable the infinite scroll + infiniteScroll.enable(false); + }, 500); +} +``` + +**New Usage Example:** + +```html + + + +``` + +```javascript +doInfinite(event) { + console.log('Begin async operation'); + + setTimeout(() => { + console.log('Async operation has ended'); + event.target.complete(); + + // To disable the infinite scroll + event.target.disabled = true; + }, 500); +} +``` + ## Item diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 62e394e66a..aaf7b9108e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2693,7 +2693,7 @@ declare global { */ 'complete': () => void; /** - * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Call `enable(false)` to disable the infinite scroll from actively trying to receive new data while scrolling. This method is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. + * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. */ 'disabled': boolean; /** @@ -2731,7 +2731,7 @@ declare global { namespace JSXElements { export interface IonInfiniteScrollAttributes extends HTMLAttributes { /** - * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Call `enable(false)` to disable the infinite scroll from actively trying to receive new data while scrolling. This method is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. + * If true, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. */ 'disabled'?: boolean; /** diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index 45a87458fe..e808aef413 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -47,8 +47,8 @@ export class InfiniteScroll { * If true, the infinite scroll will be hidden and scroll event listeners * will be removed. * - * Call `enable(false)` to disable the infinite scroll from actively - * trying to receive new data while scrolling. This method is useful + * Set this to true to disable the infinite scroll from actively + * trying to receive new data while scrolling. This is useful * when it is known that there is no more data that can be added, and * the infinite scroll is no longer needed. */ diff --git a/core/src/components/infinite-scroll/test/basic/index.html b/core/src/components/infinite-scroll/test/basic/index.html index 3f3e2baa2f..d4b6a5a599 100644 --- a/core/src/components/infinite-scroll/test/basic/index.html +++ b/core/src/components/infinite-scroll/test/basic/index.html @@ -21,13 +21,11 @@ - + Toggle InfiniteScroll - - - + diff --git a/core/src/components/infinite-scroll/usage/angular.md b/core/src/components/infinite-scroll/usage/angular.md index 15752559ff..ef543f8571 100644 --- a/core/src/components/infinite-scroll/usage/angular.md +++ b/core/src/components/infinite-scroll/usage/angular.md @@ -1,13 +1,18 @@ ```html - - - - - - - + + + Toggle Infinite Scroll + + + + + + + + + ``` ```typescript @@ -19,13 +24,25 @@ import { Component } from '@angular/core'; styleUrls: ['./infinite-scroll-example.css'] }) export class InfiniteScrollExample { + @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll; + constructor() {} loadData(event) { - setTimeout(function() { + setTimeout(() => { console.log('Done'); event.target.complete(); - }, 2000); + + // App logic to determine if all data is loaded + // and disable the infinite scroll + if (data.length == 1000) { + event.target.disabled = true; + } + }, 500); + } + + toggleInfiniteScroll() { + infiniteScroll.disabled = !infiniteScroll.disabled; } } ``` diff --git a/core/src/components/infinite-scroll/usage/javascript.md b/core/src/components/infinite-scroll/usage/javascript.md index f6246480d7..ff992a13fa 100644 --- a/core/src/components/infinite-scroll/usage/javascript.md +++ b/core/src/components/infinite-scroll/usage/javascript.md @@ -1,13 +1,18 @@ ```html - - - - - - - + + + Toggle Infinite Scroll + + + + + + + + + ``` ```javascript @@ -17,6 +22,16 @@ infiniteScroll.addEventListener('ionInfinite', function(event) { setTimeout(function() { console.log('Done'); event.target.complete(); - }, 2000); + + // App logic to determine if all data is loaded + // and disable the infinite scroll + if (data.length == 1000) { + event.target.disabled = true; + } + }, 500); }); + +function toggleInfiniteScroll() { + infiniteScroll.disabled = !infiniteScroll.disabled; +} ```