diff --git a/demos/refresher/index.ts b/demos/refresher/index.ts index b6b48f26b0..12db707b99 100644 --- a/demos/refresher/index.ts +++ b/demos/refresher/index.ts @@ -21,7 +21,7 @@ class ApiDemoApp { this.items.unshift( newData[i] ); } - refresher.endRefreshing(); + refresher.complete(); }); } diff --git a/ionic/components/refresher/refresher.scss b/ionic/components/refresher/refresher.scss index 108e8970e3..e9434e7cb5 100644 --- a/ionic/components/refresher/refresher.scss +++ b/ionic/components/refresher/refresher.scss @@ -102,7 +102,7 @@ ion-refresher-content[state=cancelling] { } } -ion-refresher-content[state=ending] { +ion-refresher-content[state=completing] { .refresher-refreshing { display: block; } diff --git a/ionic/components/refresher/refresher.ts b/ionic/components/refresher/refresher.ts index a96c50340c..94d196159e 100644 --- a/ionic/components/refresher/refresher.ts +++ b/ionic/components/refresher/refresher.ts @@ -16,7 +16,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; * Pages can then can listen to the refreshers various output events. The * `refresh` output event is the one that's fired when the user has pulled * down far enough to kick off the refreshing process. Once the async operation - * has completed and the refreshing should end, call `endRefreshing()`. + * has completed and the refreshing should end, call `complete()`. * * @usage * ```html @@ -38,7 +38,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; * * setTimeout(() => { * console.log('Async operation has ended'); - * refresher.endRefreshing(); + * refresher.complete(); * }, 2000); * } * @@ -108,8 +108,8 @@ export class Refresher { * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh. * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed. * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state. - * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `endRefreshing()` it will begin the `ending` state. - * - `ending` - The `refreshing` state has finished and the refresher is in the process of closing itself. Once closed, the refresher will go back to the `inactive` state. + * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state. + * - `completing` - The `refreshing` state has finished and the refresher is in the process of closing itself. Once closed, the refresher will go back to the `inactive` state. */ state: string = STATE_INACTIVE; @@ -180,7 +180,7 @@ export class Refresher { * @output {event} When the user lets go and has pulled down far enough, which would be * farther than the `pullMin`, then your refresh hander if fired and the state is * updated to `refreshing`. From within your refresh handler, you must call the - * `endRefreshing()` method when your async operation has completed. + * `complete()` method when your async operation has completed. */ @Output() refresh: EventEmitter = new EventEmitter(); @@ -256,7 +256,7 @@ export class Refresher { // do nothing if it's actively refreshing // or it's in the process of closing // or this was never a startY - if (this.startY === null || this.state === STATE_REFRESHING || this.state === STATE_CANCELLING || this.state === STATE_ENDING) { + if (this.startY === null || this.state === STATE_REFRESHING || this.state === STATE_CANCELLING || this.state === STATE_COMPLETING) { return 2; } @@ -387,7 +387,7 @@ export class Refresher { // set the content back to it's original location // and close the refresher // set that the refresh is actively cancelling - this.cancelRefreshing(); + this.cancel(); }); } @@ -415,34 +415,25 @@ export class Refresher { } /** - * Call `endRefreshing()` when your async operation has completed. + * Call `complete()` when your async operation has completed. * For example, the `refreshing` state is while the app is performing * an asynchronous operation, such as receiving more data from an * AJAX request. Once the data has been received, you then call this * method to signify that the refreshing has completed and to close * the refresher. This method also changes the refresher's state from - * `refreshing` to `ending`. + * `refreshing` to `completing`. */ - endRefreshing() { - this._close(STATE_ENDING, '120ms'); + complete() { + this._close(STATE_COMPLETING, '120ms'); } /** * Changes the refresher's state from `refreshing` to `cancelling`. */ - cancelRefreshing() { + cancel() { this._close(STATE_CANCELLING, ''); } - /** - * @private - */ - private complete() { - // deprecated warning - console.warn('refresher completed() deprecated, please update to endRefreshing()'); - this.endRefreshing(); - } - private _close(state: string, delay: string) { var timer; @@ -550,4 +541,4 @@ const STATE_PULLING = 'pulling'; const STATE_READY = 'ready'; const STATE_REFRESHING = 'refreshing'; const STATE_CANCELLING = 'cancelling'; -const STATE_ENDING = 'ending'; +const STATE_COMPLETING = 'completing'; diff --git a/ionic/components/refresher/test/basic/index.ts b/ionic/components/refresher/test/basic/index.ts index bad4a02cb7..07f8661bf6 100644 --- a/ionic/components/refresher/test/basic/index.ts +++ b/ionic/components/refresher/test/basic/index.ts @@ -22,7 +22,7 @@ class E2EApp { } console.info('Finished receiving data, async operation complete'); - refresher.endRefreshing(); + refresher.complete(); }); } diff --git a/ionic/components/refresher/test/refresher.spec.ts b/ionic/components/refresher/test/refresher.spec.ts index 10f7d13f28..3cf20416eb 100644 --- a/ionic/components/refresher/test/refresher.spec.ts +++ b/ionic/components/refresher/test/refresher.spec.ts @@ -184,9 +184,9 @@ describe('Refresher', () => { expect(results).toEqual(2); }); - it('should not run if state=ending', () => { + it('should not run if state=completing', () => { refresher.startY = 100; - refresher.state = 'ending'; + refresher.state = 'completing'; var results = refresher._onMove( touchEv(88) ); expect(results).toEqual(2); }); @@ -244,7 +244,8 @@ describe('Refresher', () => { nativeElement: { classList: { add: function(){}, remove: function(){} }, scrollTop: 0, - hasAttribute: function(){} + hasAttribute: function(){}, + children: {length: 1 } } } }