fix(Message): 修复message重复进入位置异常与single默认值改为true (#2711)

Author: jarmywang

src/message-item/index.ts

@@ -0,0 +1,46 @@
+import { MessageType, MessageProps } from '../message/message.interface';
+import { getInstance } from '../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+interface MessageActionOptionsType extends Optional<MessageProps> {
+  context?: Context;
+  selector?: string;
+}
+
+const showMessage = function (options: MessageActionOptionsType, theme: MessageType = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+
+  if (instance) {
+    instance.resetData(() => {
+      instance.setData({ theme, ...otherOptions }, instance.show.bind(instance));
+    });
+
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options: MessageActionOptionsType) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};

src/message/message-item/message.json renamed to src/message-item/message-item.json

@@ -2,7 +2,7 @@
   "component": true,
   "styleIsolation": "apply-shared",
   "usingComponents": {
-    "t-icon": "../../icon/icon",
-    "t-link": "../../link/link"
+    "t-icon": "../icon/icon",
+    "t-link": "../link/link"
   }
 }

src/message/message-item/message.less renamed to src/message-item/message-item.less

@@ -1,4 +1,4 @@
-@import '../../common/style/index.less';
+@import '../common/style/index.less';
 
 @message-height: 96rpx;
 @message-horizontal-padding: 32rpx;

src/message/message-item/message.ts renamed to src/message-item/message-item.ts

@@ -1,8 +1,8 @@
-import { SuperComponent, wxComponent, ComponentsOptionsType } from '../../common/src/index';
-import config from '../../common/config';
-import { MessageProps } from '../message.interface';
-import props from '../props';
-import { getRect, unitConvert, calcIcon, isObject } from '../../common/utils';
+import { SuperComponent, wxComponent, ComponentsOptionsType } from '../common/src/index';
+import config from '../common/config';
+import { MessageProps } from '../message/message.interface';
+import props from '../message/props';
+import { getRect, unitConvert, calcIcon, isObject } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-message`;

src/message/message-item/message.wxml renamed to src/message-item/message-item.wxml

@@ -1,6 +1,6 @@
-<wxs src="./message.wxs" module="this"></wxs>
-<wxs src="../../common/utils.wxs" module="_" />
-<import src="../../common/template/icon.wxml" />
+<wxs src="./message-item.wxs" module="this"></wxs>
+<wxs src="../common/utils.wxs" module="_" />
+<import src="../common/template/icon.wxml" />
 <block wx:if="{{visible}}">
   <view
     class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{theme}} {{fadeClass}}"

src/message/message-item/message.wxs renamed to src/message-item/message-item.wxs

@@ -18,7 +18,7 @@ theme | String | info | options：info/success/warning/error。Typescript：`Mes
 visible | Boolean | false | \- | N
 default-visible | Boolean | false | uncontrolled property | N
 z-index | Number | 15000 | \- | N
-single | Boolean | false | Whether to display only one message. Note that when single=false, the three categories of link, scroll, and close will not be covered.| N
+single | Boolean | true | Whether to display only one message. Note that when single=false, the three categories of link, scroll, and close will not be covered.| N
 gap | String | 12 | The spacing between two messages, default 12px. Example: '12', '12px', '18rpx' | N
 
 ### Message Events

src/message/README.en-US.md

@@ -58,7 +58,7 @@ visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
 default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
 z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
 link | String / Object / Slot | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。 | N
-single | Boolean | false | 是否仅显示一条消息。注意 single=false 时带链接、滚动、带关闭此三类不会被覆盖 | N
+single | Boolean | true | 是否仅显示一条消息。注意 single=false 时带链接、滚动、带关闭此三类不会被覆盖 | N
 gap | String | 12 | 两条消息之间的间距，默认12px。示例：'12', '12px', '18rpx' | N
 ### Message Events
 

src/message/README.md

@@ -58,16 +58,6 @@ exports[`Message Message base demo works fine 1`] = `
     >
       带按钮的通知
     </t-button>
-    <t-button
-      block="{{true}}"
-      size="large"
-      tClass="external-class"
-      theme="primary"
-      variant="outline"
-      bind:tap="showSingleMessage"
-    >
-      纯文字的通知单例
-    </t-button>
   </wx-view>
 </base>
 `;

src/message/__test__/__snapshots__/demo.test.js.snap

@@ -6,15 +6,15 @@ exports[`message props : style && customStyle 1`] = `
     id="t-message"
   >
     <t-message-item
-      id="t-message_0"
+      id="t-message"
       bind:close-btn-click="handleClose"
       bind:link-click="handleLinkClick"
     >
       <wx-view
         animation="{{Array []}}"
         ariaRole="alert"
         class="t-message class t-class t-message--warning "
-        id="t-message_0"
+        id="t-message"
         style="z-index:15000;top:20px;left:32rpx;right:32rpx; color: red; font-size: 9px;"
       >
         <wx-view

src/message/__test__/__snapshots__/index.test.js.snap

@@ -206,6 +206,7 @@ describe('message', () => {
           content: `这是第${i}条消息通知`,
           duration: -1,
           gap: '16',
+          single: false,
         });
       };
       showMessageFn('1');

src/message/__test__/index.test.js

@@ -8,6 +8,7 @@ Component({
         offset: [90, 32],
         duration: 5000,
         icon: false,
+        // single: false, // 打开注释体验多个消息叠加效果
         content: '这是一条纯文字的消息通知 5s消失',
       });
     },

src/message/_example/base/index.js

@@ -20,8 +20,4 @@
   <t-button t-class="external-class" theme="primary" variant="outline" size="large" block bind:tap="showBtnMessage"
     >带按钮的通知</t-button
   >
-
-  <t-button t-class="external-class" theme="primary" variant="outline" size="large" block bind:tap="showSingleMessage"
-    >纯文字的通知单例</t-button
-  >
 </view>

src/message/_example/base/index.wxml

@@ -11,7 +11,9 @@ interface MessageActionOptionsType extends Optional<MessageProps> {
 const showMessage = function (options: MessageActionOptionsType, theme: MessageType = MessageType.info) {
   const { context, selector = '#t-message', ...otherOptions } = options;
   const instance = getInstance(context, selector);
-
+  if (typeof otherOptions.single !== 'boolean') {
+    otherOptions.single = true;
+  }
   if (instance) {
     instance.setMessage(otherOptions, theme);
     return instance;

src/message/index.ts

@@ -2,6 +2,6 @@
   "component": true,
   "styleIsolation": "apply-shared",
   "usingComponents": {
-    "t-message-item": "./message-item/message"
+    "t-message-item": "../message-item/message-item"
   }
 }

src/message/message.json

@@ -83,7 +83,7 @@ const props: TdMessageProps = {
    */
   single: {
     type: Boolean,
-    value: false,
+    value: true,
   },
 };