message.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import { MessageType } from './message.interface';
  10. import props from './props';
  11. import { unitConvert } from '../common/utils';
  12. const SHOW_DURATION = 400;
  13. const { prefix } = config;
  14. const name = `${prefix}-message`;
  15. let Message = class Message extends SuperComponent {
  16. constructor() {
  17. super(...arguments);
  18. this.options = {
  19. multipleSlots: true,
  20. };
  21. this.properties = Object.assign({}, props);
  22. this.data = {
  23. prefix,
  24. classPrefix: name,
  25. messageList: [],
  26. };
  27. this.index = 0;
  28. this.instances = [];
  29. this.gap = 12;
  30. this.observers = {
  31. visible(value) {
  32. if (value) {
  33. this.setMessage(this.properties, this.properties.theme);
  34. }
  35. else {
  36. this.setData({
  37. messageList: [],
  38. });
  39. }
  40. },
  41. };
  42. this.pageLifetimes = {
  43. show() {
  44. this.hideAll();
  45. },
  46. };
  47. this.lifetimes = {
  48. ready() {
  49. this.memoInitialData();
  50. },
  51. };
  52. }
  53. memoInitialData() {
  54. this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
  55. }
  56. setMessage(msg, theme = MessageType.info) {
  57. let id = `${name}_${this.index}`;
  58. if (msg.single) {
  59. id = name;
  60. }
  61. this.gap = unitConvert(msg.gap || this.gap);
  62. const msgObj = Object.assign(Object.assign({}, msg), { theme,
  63. id, gap: this.gap });
  64. const instanceIndex = this.instances.findIndex((x) => x.id === id);
  65. if (instanceIndex < 0) {
  66. this.addMessage(msgObj);
  67. }
  68. else {
  69. const instance = this.instances[instanceIndex];
  70. const offsetHeight = this.getOffsetHeight(instanceIndex);
  71. instance.resetData(() => {
  72. instance.setData(msgObj, instance.show.bind(instance, offsetHeight));
  73. instance.onHide = () => {
  74. this.close(id);
  75. };
  76. });
  77. }
  78. }
  79. addMessage(msgObj) {
  80. const list = [...this.data.messageList, { id: msgObj.id }];
  81. this.setData({
  82. messageList: list,
  83. }, () => {
  84. const offsetHeight = this.getOffsetHeight();
  85. const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
  86. if (this.instances) {
  87. this.instances.push(instance);
  88. this.index += 1;
  89. }
  90. });
  91. }
  92. getOffsetHeight(index = -1) {
  93. let offsetHeight = 0;
  94. let len = index;
  95. if (len === -1 || len > this.instances.length) {
  96. len = this.instances.length;
  97. }
  98. for (let i = 0; i < len; i += 1) {
  99. const instance = this.instances[i];
  100. offsetHeight += instance.data.height + instance.data.gap;
  101. }
  102. return offsetHeight;
  103. }
  104. showMessageItem(options, id, offsetHeight) {
  105. const instance = this.selectComponent(`#${id}`);
  106. if (instance) {
  107. instance.resetData(() => {
  108. instance.setData(options, instance.show.bind(instance, offsetHeight));
  109. instance.onHide = () => {
  110. this.close(id);
  111. };
  112. });
  113. return instance;
  114. }
  115. console.error('未找到组件,请确认 selector && context 是否正确');
  116. }
  117. close(id) {
  118. setTimeout(() => {
  119. this.removeMsg(id);
  120. }, SHOW_DURATION);
  121. this.removeInstance(id);
  122. }
  123. hide(id) {
  124. if (!id) {
  125. this.hideAll();
  126. }
  127. const instance = this.instances.find((x) => x.id === id);
  128. if (instance) {
  129. instance.hide();
  130. }
  131. }
  132. hideAll() {
  133. for (let i = 0; i < this.instances.length;) {
  134. const instance = this.instances[i];
  135. instance.hide();
  136. }
  137. }
  138. removeInstance(id) {
  139. const index = this.instances.findIndex((x) => x.id === id);
  140. if (index < 0)
  141. return;
  142. const instance = this.instances[index];
  143. const removedHeight = instance.data.height;
  144. this.instances.splice(index, 1);
  145. for (let i = index; i < this.instances.length; i += 1) {
  146. const instance = this.instances[i];
  147. instance.setData({
  148. wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap,
  149. });
  150. }
  151. }
  152. removeMsg(id) {
  153. const msgIndex = this.data.messageList.findIndex((x) => x.id === id);
  154. if (msgIndex > -1) {
  155. this.data.messageList.splice(msgIndex, 1);
  156. this.setData({
  157. messageList: this.data.messageList,
  158. });
  159. }
  160. }
  161. handleClose() {
  162. this.triggerEvent('close-btn-click');
  163. }
  164. handleLinkClick() {
  165. this.triggerEvent('link-click');
  166. }
  167. handleDurationEnd() {
  168. this.triggerEvent('duration-end');
  169. }
  170. };
  171. Message = __decorate([
  172. wxComponent()
  173. ], Message);
  174. export default Message;