list.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { Directive, ElementRef, Input, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { DomController } from '../../platform/dom-controller';
  4. import { GestureController } from '../../gestures/gesture-controller';
  5. import { Ion } from '../ion';
  6. import { isTrueProperty } from '../../util/util';
  7. import { ItemSlidingGesture } from '../item/item-sliding-gesture';
  8. import { Platform } from '../../platform/platform';
  9. /**
  10. * The List is a widely used interface element in almost any mobile app,
  11. * and can include content ranging from basic text all the way to
  12. * buttons, toggles, icons, and thumbnails.
  13. *
  14. * Both the list, which contains items, and the list items themselves
  15. * can be any HTML element.
  16. *
  17. * Using the List and Item components make it easy to support various
  18. * interaction modes such as swipe to edit, drag to reorder, and
  19. * removing items.
  20. *
  21. * @demo /docs/demos/src/list/
  22. * @see {@link /docs/components#lists List Component Docs}
  23. * @advanced
  24. *
  25. * Enable the sliding items.
  26. *
  27. * ```ts
  28. * import { Component, ViewChild } from '@angular/core';
  29. * import { List } from 'ionic-angular';
  30. *
  31. * @Component({...})
  32. * export class MyClass {
  33. * @ViewChild(List) list: List;
  34. *
  35. * constructor() { }
  36. *
  37. * stopSliding() {
  38. * this.list.enableSlidingItems(false);
  39. * }
  40. * }
  41. * ```
  42. *
  43. */
  44. export class List extends Ion {
  45. constructor(config, elementRef, renderer, _plt, _gestureCtrl, _domCtrl) {
  46. super(config, elementRef, renderer, 'list');
  47. this._plt = _plt;
  48. this._gestureCtrl = _gestureCtrl;
  49. this._domCtrl = _domCtrl;
  50. this._enableSliding = true;
  51. this._containsSlidingItems = false;
  52. }
  53. /**
  54. * @input {boolean} If true, the sliding items will be enabled.
  55. */
  56. get sliding() {
  57. return this._enableSliding;
  58. }
  59. set sliding(val) {
  60. this._enableSliding = isTrueProperty(val);
  61. this._updateSlidingState();
  62. }
  63. /**
  64. * @hidden
  65. */
  66. containsSlidingItem(contains) {
  67. this._containsSlidingItems = contains;
  68. this._updateSlidingState();
  69. }
  70. _updateSlidingState() {
  71. let shouldSlide = this._enableSliding && this._containsSlidingItems;
  72. if (!shouldSlide) {
  73. this._slidingGesture && this._slidingGesture.destroy();
  74. this._slidingGesture = null;
  75. }
  76. else if (!this._slidingGesture) {
  77. (void 0) /* console.debug */;
  78. this._slidingGesture = new ItemSlidingGesture(this._plt, this, this._gestureCtrl, this._domCtrl);
  79. this._slidingGesture.listen();
  80. }
  81. }
  82. /**
  83. * Close any sliding items that are open.
  84. */
  85. closeSlidingItems() {
  86. this._slidingGesture && this._slidingGesture.closeOpened();
  87. }
  88. /**
  89. * @hidden
  90. */
  91. destroy() {
  92. this._slidingGesture && this._slidingGesture.destroy();
  93. }
  94. }
  95. List.decorators = [
  96. { type: Directive, args: [{
  97. selector: 'ion-list',
  98. },] },
  99. ];
  100. /** @nocollapse */
  101. List.ctorParameters = () => [
  102. { type: Config, },
  103. { type: ElementRef, },
  104. { type: Renderer, },
  105. { type: Platform, },
  106. { type: GestureController, },
  107. { type: DomController, },
  108. ];
  109. List.propDecorators = {
  110. 'sliding': [{ type: Input },],
  111. };
  112. //# sourceMappingURL=list.js.map