toast.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { h } from '@stencil/core';
  2. export class PWAToast {
  3. constructor() {
  4. this.message = undefined;
  5. this.duration = 2000;
  6. this.closing = null;
  7. }
  8. hostData() {
  9. const classes = {
  10. out: !!this.closing
  11. };
  12. if (this.closing !== null) {
  13. classes['in'] = !this.closing;
  14. }
  15. return {
  16. class: classes
  17. };
  18. }
  19. componentDidLoad() {
  20. setTimeout(() => {
  21. this.closing = false;
  22. });
  23. setTimeout(() => {
  24. this.close();
  25. }, this.duration);
  26. }
  27. close() {
  28. this.closing = true;
  29. setTimeout(() => {
  30. this.el.parentNode.removeChild(this.el);
  31. }, 1000);
  32. }
  33. render() {
  34. return (h("div", { class: "wrapper" }, h("div", { class: "toast" }, this.message)));
  35. }
  36. static get is() { return "pwa-toast"; }
  37. static get encapsulation() { return "shadow"; }
  38. static get originalStyleUrls() {
  39. return {
  40. "$": ["toast.css"]
  41. };
  42. }
  43. static get styleUrls() {
  44. return {
  45. "$": ["toast.css"]
  46. };
  47. }
  48. static get properties() {
  49. return {
  50. "message": {
  51. "type": "string",
  52. "mutable": false,
  53. "complexType": {
  54. "original": "string",
  55. "resolved": "string",
  56. "references": {}
  57. },
  58. "required": false,
  59. "optional": false,
  60. "docs": {
  61. "tags": [],
  62. "text": ""
  63. },
  64. "attribute": "message",
  65. "reflect": false
  66. },
  67. "duration": {
  68. "type": "number",
  69. "mutable": false,
  70. "complexType": {
  71. "original": "number",
  72. "resolved": "number",
  73. "references": {}
  74. },
  75. "required": false,
  76. "optional": false,
  77. "docs": {
  78. "tags": [],
  79. "text": ""
  80. },
  81. "attribute": "duration",
  82. "reflect": false,
  83. "defaultValue": "2000"
  84. }
  85. };
  86. }
  87. static get states() {
  88. return {
  89. "closing": {}
  90. };
  91. }
  92. static get elementRef() { return "el"; }
  93. }