refresher.d.ts 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import { EventEmitter, NgZone } from '@angular/core';
  2. import { Content } from '../content/content';
  3. import { GestureController, GestureDelegate } from '../../gestures/gesture-controller';
  4. import { Platform } from '../../platform/platform';
  5. import { PointerEvents } from '../../gestures/pointer-events';
  6. import { UIEventManager } from '../../gestures/ui-event-manager';
  7. /**
  8. * @name Refresher
  9. * @description
  10. * The Refresher provides pull-to-refresh functionality on a content component.
  11. * Place the `ion-refresher` as the first child of your `ion-content` element.
  12. *
  13. * Pages can then listen to the refresher's various output events. The
  14. * `refresh` output event is fired when the user has pulled down far
  15. * enough to kick off the refreshing process. Once the async operation
  16. * has completed and the refreshing should end, call `complete()`.
  17. *
  18. * Note: Do not wrap the `ion-refresher` in a `*ngIf`. It will not render
  19. * properly this way. Please use the `enabled` property instead to
  20. * display or hide the refresher.
  21. *
  22. * @usage
  23. * ```html
  24. * <ion-content>
  25. *
  26. * <ion-refresher (ionRefresh)="doRefresh($event)">
  27. * <ion-refresher-content></ion-refresher-content>
  28. * </ion-refresher>
  29. *
  30. * </ion-content>
  31. * ```
  32. *
  33. * ```ts
  34. * @Component({...})
  35. * export class NewsFeedPage {
  36. *
  37. * doRefresh(refresher) {
  38. * console.log('Begin async operation', refresher);
  39. *
  40. * setTimeout(() => {
  41. * console.log('Async operation has ended');
  42. * refresher.complete();
  43. * }, 2000);
  44. * }
  45. *
  46. * }
  47. * ```
  48. *
  49. *
  50. * ## Refresher Content
  51. *
  52. * By default, Ionic provides the pulling icon and refreshing spinner that
  53. * looks best for the platform the user is on. However, you can change the
  54. * default icon and spinner, along with adding text for each state by
  55. * adding properties to the child `ion-refresher-content` component.
  56. *
  57. * ```html
  58. * <ion-content>
  59. *
  60. * <ion-refresher (ionRefresh)="doRefresh($event)">
  61. * <ion-refresher-content
  62. * pullingIcon="arrow-dropdown"
  63. * pullingText="Pull to refresh"
  64. * refreshingSpinner="circles"
  65. * refreshingText="Refreshing...">
  66. * </ion-refresher-content>
  67. * </ion-refresher>
  68. *
  69. * </ion-content>
  70. * ```
  71. *
  72. *
  73. * ## Further Customizing Refresher Content
  74. *
  75. * The `ion-refresher` component holds the refresh logic.
  76. * It requires a child component in order to display the content.
  77. * Ionic uses `ion-refresher-content` by default. This component
  78. * displays the refresher and changes the look depending
  79. * on the refresher's state. Separating these components
  80. * allows developers to create their own refresher content
  81. * components. You could replace our default content with
  82. * custom SVG or CSS animations.
  83. *
  84. * @demo /docs/demos/src/refresher/
  85. *
  86. */
  87. export declare class Refresher {
  88. private _plt;
  89. private _content;
  90. private _zone;
  91. _appliedStyles: boolean;
  92. _didStart: boolean;
  93. _lastCheck: number;
  94. _isEnabled: boolean;
  95. _gesture: GestureDelegate;
  96. _events: UIEventManager;
  97. _pointerEvents: PointerEvents;
  98. _top: string;
  99. /**
  100. * The current state which the refresher is in. The refresher's states include:
  101. *
  102. * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
  103. * - `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.
  104. * - `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.
  105. * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
  106. * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
  107. * - `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.
  108. */
  109. state: string;
  110. /**
  111. * The Y coordinate of where the user started to the pull down the content.
  112. */
  113. startY: number;
  114. /**
  115. * The current touch or mouse event's Y coordinate.
  116. */
  117. currentY: number;
  118. /**
  119. * The distance between the start of the pull and the current touch or
  120. * mouse event's Y coordinate.
  121. */
  122. deltaY: number;
  123. /**
  124. * A number representing how far down the user has pulled.
  125. * The number `0` represents the user hasn't pulled down at all. The
  126. * number `1`, and anything greater than `1`, represents that the user
  127. * has pulled far enough down that when they let go then the refresh will
  128. * happen. If they let go and the number is less than `1`, then the
  129. * refresh will not happen, and the content will return to it's original
  130. * position.
  131. */
  132. progress: number;
  133. /**
  134. * @input {number} The min distance the user must pull down until the
  135. * refresher can go into the `refreshing` state. Default is `60`.
  136. */
  137. pullMin: number;
  138. /**
  139. * @input {number} The maximum distance of the pull until the refresher
  140. * will automatically go into the `refreshing` state. By default, the pull
  141. * maximum will be the result of `pullMin + 60`.
  142. */
  143. pullMax: number;
  144. /**
  145. * @input {number} How many milliseconds it takes to close the refresher. Default is `280`.
  146. */
  147. closeDuration: number;
  148. /**
  149. * @input {number} How many milliseconds it takes the refresher to to snap back to the `refreshing` state. Default is `280`.
  150. */
  151. snapbackDuration: number;
  152. /**
  153. * @input {boolean} If the refresher is enabled or not. This should be used in place of an `ngIf`. Default is `true`.
  154. */
  155. enabled: boolean;
  156. /**
  157. * @output {event} Emitted when the user lets go and has pulled down
  158. * far enough, which would be farther than the `pullMin`, then your refresh hander if
  159. * fired and the state is updated to `refreshing`. From within your refresh handler,
  160. * you must call the `complete()` method when your async operation has completed.
  161. */
  162. ionRefresh: EventEmitter<Refresher>;
  163. /**
  164. * @output {event} Emitted while the user is pulling down the content and exposing the refresher.
  165. */
  166. ionPull: EventEmitter<Refresher>;
  167. /**
  168. * @output {event} Emitted when the user begins to start pulling down.
  169. */
  170. ionStart: EventEmitter<Refresher>;
  171. constructor(_plt: Platform, _content: Content, _zone: NgZone, gestureCtrl: GestureController);
  172. _onStart(ev: TouchEvent): any;
  173. _onMove(ev: TouchEvent): 1 | 2 | 3 | 0 | 5 | 6 | 8 | 7;
  174. _onMoveInZone(): 2 | 3 | 4;
  175. _onEnd(): void;
  176. _beginRefresh(): void;
  177. /**
  178. * Call `complete()` when your async operation has completed.
  179. * For example, the `refreshing` state is while the app is performing
  180. * an asynchronous operation, such as receiving more data from an
  181. * AJAX request. Once the data has been received, you then call this
  182. * method to signify that the refreshing has completed and to close
  183. * the refresher. This method also changes the refresher's state from
  184. * `refreshing` to `completing`.
  185. */
  186. complete(): void;
  187. /**
  188. * Changes the refresher's state from `refreshing` to `cancelling`.
  189. */
  190. cancel(): void;
  191. _close(state: string, delay: string): void;
  192. _setCss(y: number, duration: string, overflowVisible: boolean, delay: string): void;
  193. _setListeners(shouldListen: boolean): void;
  194. /**
  195. * @hidden
  196. */
  197. ngOnInit(): void;
  198. /**
  199. * @hidden
  200. */
  201. ngOnDestroy(): void;
  202. }