feat(notice-bar): support direction attr (#1036)

Tencent · Dec 8, 2022 · 7d7433f · 7d7433f
1 parent 1964bde
commit 7d7433f
Show file tree

Hide file tree

Showing 19 changed files with 291 additions and 139 deletions.
diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
@@ -5,13 +5,14 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-content | String / Slot | - | \- | N
+content | String / Array / Slot | - | \- | N
 custom-style `v0.25.0` | String | - | \- | N
+direction | String | horizontal | options：horizontal/vertical | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | \- | N
 marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
-prefix-icon | String | - | \- | N
-suffix-icon | String | - | \- | N
+prefix-icon | String / Boolean/ Object / Slot | - | \- | N
+suffix-icon | String / Boolean / Object / Slot | - | \- | N
 theme | String | info | options：info/success/warning/error | N
 visible | Boolean | false | \- | N
 default-visible | Boolean | false | uncontrolled property | N

diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
@@ -18,47 +18,54 @@ isComponent: true
 
 ## 代码演示
 
-### 基础静态公告栏
+### 组件类型
+
+纯文字的公告栏
 
 {{ base }}
 
-### 带图标静态公告栏
+带图标的公告栏
 
 {{ iconDemo }}
 
-### 带操作公告栏
+带操作的公告栏
 
 {{ event }}
 
-### 滚动公告栏
+自定义样式的公告栏
 
-{{ scrolling }}
+{{ custom }}
 
-### 自定义样式
+自定义内容的公告栏
 
-{{ custom }}
+{{ customization }}
+
+### 组件状态
 
-### 不同状态的公告栏
 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
 
 {{ theme }}
 
-### 多行文字消息栏
+### 可滚动公告栏
+
+可滚动公告栏有水平（horizontal）和垂直（vertical）
+
+{{ scrolling }}
 
-{{ customization }}
 
 ## API
 ### NoticeBar Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | String / Slot | - | 文本内容 | N
+content | String / Array / Slot | - | 文本内容 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | 右侧额外信息 | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
-prefix-icon | String | - | 前缀图标 | N
-suffix-icon | String | - | 后缀图标 | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N
+suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
 visible | Boolean | false | 显示/隐藏 | N
 default-visible | Boolean | false | 显示/隐藏。非受控属性 | N

diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
@@ -3,8 +3,8 @@
 exports[`NoticeBar NoticeBar base demo works fine 1`] = `
 <base>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
-    prefixIcon="null"
+    content="这是一条普通的通知信息"
+    prefixIcon="{{false}}"
     visible="{{true}}"
   />
 </base>
@@ -15,28 +15,16 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
   <t-notice-bar
     content="提示文字描述提示文字描述提示文字描述"
     prefixIcon="sound"
+    suffixIcon="chevron-right"
     tClass="external-class"
+    tClassPrefixIcon="external-class-prefix-icon"
     visible="{{true}}"
   />
 </custom>
 `;
 
 exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 <customization>
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    prefixIcon="null"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    suffixIcon="chevron-right"
-    visible="{{true}}"
-  />
   <t-notice-bar
     visible="{{true}}"
   >
@@ -58,6 +46,7 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
     >
       <t-icon
         name="close"
+        size="44rpx"
       />
     </wx-view>
   </t-notice-bar>
@@ -67,11 +56,33 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 exports[`NoticeBar NoticeBar event demo works fine 1`] = `
 <event>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
+    content="这是一条普通的通知信息"
+    suffixIcon="close"
+    visible="{{true}}"
+    bind:click="click"
+  />
+  <t-notice-bar
+    content="这是一条普通的通知信息"
     suffixIcon="chevron-right"
     visible="{{true}}"
     bind:click="click"
   />
+  <t-notice-bar
+    visible="{{true}}"
+    bind:click="click"
+  >
+    <wx-view
+      slot="content"
+    >
+       这是一条普通的通知信息 
+    </wx-view>
+    <wx-view
+      class="extra"
+      slot="extra"
+    >
+      文字按钮
+    </wx-view>
+  </t-notice-bar>
   <t-notice-bar
     suffixIcon="close"
     visible="{{true}}"
@@ -80,7 +91,7 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     <wx-view
       slot="content"
     >
-       提示文字描述提示文字描述 
+       这是一条普通的通知信息 
     </wx-view>
     <wx-view
       class="extra"
@@ -134,6 +145,21 @@ exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
     }}"
     visible="{{true}}"
   />
+  <t-notice-bar
+    content="{{
+      Array [
+        "君不见",
+        "高堂明镜悲白发",
+        "朝如青丝暮成雪",
+        "人生得意须尽欢",
+        "莫使金樽空对月",
+      ]
+    }}"
+    direction="vertical"
+    prefixIcon="sound"
+    visible="{{true}}"
+    bind:click="click"
+  />
 </scrolling>
 `;
 

diff --git a/src/notice-bar/__test__/__snapshots__/index.test.js.snap b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
@@ -10,10 +10,14 @@ exports[`notice-bar props : marquee 1`] = `
       style=""
     >
       <wx-view
-        class="t-notice-bar__prefix-icon t-class-prefix-icon"
+        class="t-notice-bar__prefix-icon"
         bind:tap="clickPrefixIcon"
       >
-        <t-icon>
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click="onTplClick"
+        >
           <wx-view
             ariaHidden="{{false}}"
             ariaLabel=""
@@ -45,10 +49,6 @@ exports[`notice-bar props : marquee 1`] = `
         class="t-notice-bar__extra t-class-extra"
         bind:tap="clickExtra"
       />
-      <wx-view
-        class="t-notice-bar__suffix-icon t-class-suffix-icon"
-        bind:tap="clickSuffixIcon"
-      />
     </wx-view>
   </t-notice-bar>
 </main>

diff --git a/src/notice-bar/__test__/index.test.js b/src/notice-bar/__test__/index.test.js
@@ -137,7 +137,7 @@ describe('notice-bar', () => {
           prefixIcon="{{prefixIcon}}"></t-notice-bar>`,
         data: {
           visible: true,
-          prefixIcon: 'null',
+          prefixIcon: false,
         },
         usingComponents: {
           't-notice-bar': noticeBar,
@@ -146,8 +146,7 @@ describe('notice-bar', () => {
 
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
-      const $prefixIcon = comp.querySelector('.base >>> .t-notice-bar__prefix-icon');
-      expect($prefixIcon.dom.innerHTML).toBe('');
+      expect(comp.querySelector('.base >>> .t-notice-bar__prefix-icon')).toBeUndefined();
 
       comp.setData({
         prefixIcon: 'add',
@@ -163,7 +162,9 @@ describe('notice-bar', () => {
         },
       });
       const iconComp = simulate.render(iconId);
-      expect($prefixIcon.dom.innerHTML).toContain(iconComp.dom.innerHTML);
+      expect(comp.querySelector('.base >>> .t-notice-bar__prefix-icon').dom.innerHTML).toContain(
+        iconComp.dom.innerHTML,
+      );
     });
 
     const delay = 7100;

diff --git a/src/notice-bar/_example/base/index.wxml b/src/notice-bar/_example/base/index.wxml
@@ -1 +1 @@
-<t-notice-bar visible="{{true}}" prefixIcon="null" content="提示文字描述提示文字描述提示文字描述"></t-notice-bar>
+<t-notice-bar visible="{{true}}" prefixIcon="{{false}}" content="这是一条普通的通知信息"></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxml b/src/notice-bar/_example/custom/index.wxml
@@ -1,6 +1,8 @@
 <t-notice-bar
   visible="{{true}}"
   prefixIcon="sound"
+  suffixIcon="chevron-right"
   content="提示文字描述提示文字描述提示文字描述"
   t-class="external-class"
+  t-class-prefix-icon="external-class-prefix-icon"
 ></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxss b/src/notice-bar/_example/custom/index.wxss
@@ -1,4 +1,8 @@
 .external-class {
-  color: #ffffff !important;
-  background-color: #a6a6a6 !important;
+  opacity: 1 !important;
+  background: rgba(243, 243, 243, 1) !important;
+}
+
+.external-class-prefix-icon {
+  color: rgba(0, 0, 0, 0.9) !important;
 }
diff --git a/src/notice-bar/_example/customization/index.wxml b/src/notice-bar/_example/customization/index.wxml
@@ -1,27 +1,10 @@
-<t-notice-bar
-  visible="{{true}}"
-  prefixIcon="null"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
 <!-- slot实现自定义content内容 -->
 <t-notice-bar visible="{{true}}">
   <view slot="content">
     提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
     <view class="extra" bind:tap="clickDetail"> 详情 </view>
   </view>
   <view slot="suffixIcon">
-    <t-icon name="close"></t-icon>
+    <t-icon name="close" size="44rpx"></t-icon>
   </view>
 </t-notice-bar>
diff --git a/src/notice-bar/_example/customization/index.wxss b/src/notice-bar/_example/customization/index.wxss
@@ -1,5 +1,6 @@
 .extra {
-  display: inline-block !important;
-  font-weight: 700 !important;
-  border-bottom: 2rpx solid !important;
+  display: inline-block;
+  font-weight: 700;
+  border-bottom: 2rpx solid;
+  color: #0052d9;
 }
diff --git a/src/notice-bar/_example/event/index.wxml b/src/notice-bar/_example/event/index.wxml
@@ -1,11 +1,23 @@
+<t-notice-bar
+  visible="{{visible}}"
+  suffixIcon="close"
+  content="这是一条普通的通知信息"
+  bind:click="click"
+></t-notice-bar>
+
 <t-notice-bar
   visible="{{visible}}"
   suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述"
+  content="这是一条普通的通知信息"
   bind:click="click"
 ></t-notice-bar>
 
+<t-notice-bar visible="{{visible}}" bind:click="click">
+  <view slot="content"> 这是一条普通的通知信息 </view>
+  <view slot="extra" class="extra">文字按钮</view>
+</t-notice-bar>
+
 <t-notice-bar visible="{{visible}}" suffixIcon="close" bind:click="click">
-  <view slot="content"> 提示文字描述提示文字描述 </view>
+  <view slot="content"> 这是一条普通的通知信息 </view>
   <view slot="extra" class="extra">详情</view>
 </t-notice-bar>