action-sheet.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import { h } from '@stencil/core';
  2. export class PWAActionSheet {
  3. constructor() {
  4. this.header = undefined;
  5. this.cancelable = true;
  6. this.options = [];
  7. this.open = false;
  8. }
  9. componentDidLoad() {
  10. requestAnimationFrame(() => {
  11. this.open = true;
  12. });
  13. }
  14. dismiss() {
  15. if (this.cancelable) {
  16. this.close();
  17. }
  18. }
  19. close() {
  20. this.open = false;
  21. setTimeout(() => {
  22. this.el.parentNode.removeChild(this.el);
  23. }, 500);
  24. }
  25. handleOptionClick(e, i) {
  26. e.stopPropagation();
  27. this.onSelection.emit(i);
  28. this.close();
  29. }
  30. render() {
  31. return (h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, h("div", { class: "content" }, h("div", { class: "title" }, this.header), this.options.map((option, i) => h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, h("div", { class: "action-sheet-button" }, option.title))))));
  32. }
  33. static get is() { return "pwa-action-sheet"; }
  34. static get encapsulation() { return "shadow"; }
  35. static get originalStyleUrls() {
  36. return {
  37. "$": ["action-sheet.css"]
  38. };
  39. }
  40. static get styleUrls() {
  41. return {
  42. "$": ["action-sheet.css"]
  43. };
  44. }
  45. static get properties() {
  46. return {
  47. "header": {
  48. "type": "string",
  49. "mutable": false,
  50. "complexType": {
  51. "original": "string",
  52. "resolved": "string",
  53. "references": {}
  54. },
  55. "required": false,
  56. "optional": false,
  57. "docs": {
  58. "tags": [],
  59. "text": ""
  60. },
  61. "attribute": "header",
  62. "reflect": false
  63. },
  64. "cancelable": {
  65. "type": "boolean",
  66. "mutable": false,
  67. "complexType": {
  68. "original": "boolean",
  69. "resolved": "boolean",
  70. "references": {}
  71. },
  72. "required": false,
  73. "optional": false,
  74. "docs": {
  75. "tags": [],
  76. "text": ""
  77. },
  78. "attribute": "cancelable",
  79. "reflect": false,
  80. "defaultValue": "true"
  81. },
  82. "options": {
  83. "type": "unknown",
  84. "mutable": false,
  85. "complexType": {
  86. "original": "ActionSheetOption[]",
  87. "resolved": "ActionSheetOption[]",
  88. "references": {
  89. "ActionSheetOption": {
  90. "location": "import",
  91. "path": "../../definitions"
  92. }
  93. }
  94. },
  95. "required": false,
  96. "optional": false,
  97. "docs": {
  98. "tags": [],
  99. "text": ""
  100. },
  101. "defaultValue": "[]"
  102. }
  103. };
  104. }
  105. static get states() {
  106. return {
  107. "open": {}
  108. };
  109. }
  110. static get events() {
  111. return [{
  112. "method": "onSelection",
  113. "name": "onSelection",
  114. "bubbles": true,
  115. "cancelable": true,
  116. "composed": true,
  117. "docs": {
  118. "tags": [],
  119. "text": ""
  120. },
  121. "complexType": {
  122. "original": "any",
  123. "resolved": "any",
  124. "references": {}
  125. }
  126. }];
  127. }
  128. static get elementRef() { return "el"; }
  129. }