[refactor]Toptips：升级为自定义组件 (#169)

* [improvement] Tab：升级到自定义组件

* fix: 去除冗余example代码

* [refactor] 重构badge为自定义组件 (#160)

* fix: 去除tab组件使用对象入参方式，修改example用例

* refactor: 重构noticebar组件

* fix: 去除tab组件冗余属性字段

* refactor: 重构toptips为自定义组件

example/pages/toptips/index.js

@@ -1,9 +1,44 @@
-var Zan = require('../../dist/index');
+const Toptips = require('../../dist/toptips/index');
 
-Page(Object.assign({}, Zan.TopTips, {
+Page({
-  data: {},
+  data: {
+    content: '测试toptips',
+    duration: 2000,
+    $zanui: {
+      toptips: {
+        show: false
+      }
+    }
+  },
 
   showTopTips() {
-    this.showZanTopTips('toptips的内容');
+    this.setData({
+      $zanui: {
+        toptips: {
+          show: true
+        }
+      }
+    });
+
+    setTimeout(() => {
+      this.setData({
+        $zanui: {
+          toptips: {
+            show: false
+          }
+        }
+      });
+    },this.data.duration);
+  },
+
+  showTopTips2() {
+    Toptips('测试内容');
+  },
+
+  showTopTips3() {
+    Toptips({
+      duration: 1000,
+      content: '测试时间1秒'
+    })
   }
-}));
+});

example/pages/toptips/index.json

@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Toptips 顶部提示"
+  "navigationBarTitleText": "Toptips 顶部提示",
+  "usingComponents": {
+    "zan-toptips": "../../dist/toptips/index"
+  }
 }

example/pages/toptips/index.wxml

@@ -6,9 +6,25 @@
 
   <view class="zan-btns" style="margin-top: 30vh;">
     <button class="zan-btn" bindtap="showTopTips">
-      显示toptips
+      显示toptips，声明式调用
+    </button>
+  </view>
+
+  <view class="zan-btns" style="margin-top: 30px;">
+    <button class="zan-btn" bindtap="showTopTips2">
+      显示toptips，命令式调用
+    </button>
+  </view>
+
+  <view class="zan-btns" style="margin-top: 30px;">
+    <button class="zan-btn" bindtap="showTopTips3">
+      显示toptips，持续一秒
     </button>
   </view>
 </view>
 
-<template is="zan-toptips" data="{{ zanTopTips }}"></template>
+<zan-toptips
+  id="zan-toptips"
+  content="{{ content }}"
+  is-show="{{ $zanui.toptips.show }}"
+/>

packages/noticebar/index.js

@@ -66,6 +66,11 @@ Component({
     }
   },
 
+  detached() {
+    const { timer } = this.data;
+    timer && clearTimeout(timer);
+  },
+
   ready() {
     this._init();
   },
@@ -105,7 +110,6 @@ Component({
 
             if (scrollable && wrapWidth < width) {
               const elapse = width / speed * 1000;
-              console.log(`delay: ${delay}`)
               const animation = wx.createAnimation({
                 duration: elapse,
                 timeingFunction: 'linear',
@@ -162,4 +166,4 @@ Component({
       });
     }
   }
-})
+})

packages/tab/index.js

@@ -20,31 +20,16 @@ Component({
     },
     selectedId: {
       type: [String, Number],
-      value: '',
+      value: ''
-      observer(newVal) {
-        this.setData({
-          currentTab: newVal
-        });
-      }
     }
   },
 
-  data: {
-    currentTab: ''
-  },
-
-  attached() {
-    this.setData({
-      currentTab: this.data.selectedId
-    });
-  },
-
   methods: {
     _handleZanTabChange(e) {
       const selectedId = e.currentTarget.dataset.itemId;
 
       this.setData({
-        currentTab: selectedId
+        selectedId
       });
 
       console.info('[zan:tab:change] selectedId:', selectedId);

packages/tab/index.wxml

@@ -10,7 +10,7 @@
     >
       <template
         is="zan-tab-list"
-        data="{{ list, currentTab, height }}"
+        data="{{ list, selectedId, height }}"
       />
     </scroll-view>
   </block>
@@ -21,7 +21,7 @@
     >
       <template
         is="zan-tab-list"
-        data="{{ list, currentTab, height }}"
+        data="{{ list, selectedId, height }}"
       />
     </view>
   </block>
@@ -33,7 +33,7 @@
   <view
     wx:for="{{ list }}"
     wx:key="id"
-    class="zan-tab__item {{ currentTab == item.id ? 'zan-tab__item--selected' : '' }}"
+    class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
     data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >

packages/toptips/README.md

@@ -1,29 +1,129 @@
 ## TopTips 顶部提示
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+{
+  "usingComponents": {
+    "zan-toptips": "path/to/zanui-weapp/dist/toptips/index"
+  }
+}
 ```
 
-在需要使用的页面里引入组件库模板和脚本
+在 index.js 中声明组件数据
-```html
-<import src="path/to/zanui-weapp/dist/toptips/index.wxml" />
 
-<!-- 直接使用 zan-toptips 模板，并且直接传入 zanTopTips -->
+**toptips提供了声明式和命令式2种调用方式，但是由于小程序本身限制，会有一定使用的要求**
-<template is="zan-toptips" data="{{ zanTopTips }}"></template>
-```
 ```js
-const { TopTips, extend } = require('path/to/zanui-weapp/dist/index');
+// 使用声明式调用的方式， 必须在Page中声明 $zanui对象， 结构如下
+// 同时在其他触发toptips显示的函数中，需要手动改变对应的数值
+Page({
+  data: {
+    duration: 1000,
+    content: 'xxx',
+    $zanui: {
+      toptips: {
+        show: false
+      }
+    }
+  }
+})
+
+// 使用命令式调用的方式，必须在 wxml 模板中声明组件id，
+// 默认我们使用了 zan-toptips， 如果使用者要更换，可以手动传入
+
+const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
+Page({
+  customCallback() {
+    Toptips('只穿文案展示');
+  }
+})
 
-// 在 Page 中混入 TopTips 里面声明的方法
-Page(extend({}, TopTips, {
-  // ...
-}));
 ```
 
+
 ### 代码演示
-在 js 中直接调用 this.showZanTopTips 即可
+
+### 声明式调用
+使用声明式调用
 ```js
-this.showZanTopTips('toptips的内容');
+Page({
+  data: {
+    duration: 1000,
+    content: 'xxx',
+    $zanui: {
+      toptips: {
+        show: false
+      }
+    }
+  },
+
+  customCallback() {
+    this.setData({
+      $zanui: {
+        toptips: {
+          show: true
+        }
+      }
+    });
+
+    setTimeout(() => {
+      this.setData({
+        $zanui: {
+          toptips: {
+            show: false
+          }
+        }
+      })
+    }, this.data.duration);
+  }
+})
 ```
+```html
+<zan-toptips
+  content="tip内容"
+  duration="{{ duration }}"
+  is-show="{{ $zanui.toptips.show }}"
+/>
+```
+
+### 命令式调用
+```js
+Page({
+  customCallback() {
+    Toptips('我只改文案')
+  }
+})
+```
+```html
+<zan-toptips
+  id="zan-toptips"
+  contetn="{{ content }}"
+/>
+```
+
+### 修改组件id
+```js
+Page({
+  customCallback() {
+    Toptips({
+      content: '传入其他参数',
+      selector: '#other-id',
+      duration: 5000
+    })
+  }
+})
+```
+```html
+<zan-toptips
+  id="other-id"
+  contetn="{{ content }}"
+/>
+```
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值     |
+|-----------|-----------|-----------|-------------|-------------|
+| content | 展示文案 | String | - | |
+| duration | 弹层持续时间 | Number | 3000 | |
+| isShow | 弹层是否展示 | Boolean | false | |
+| color | 字体颜色 | String | `#fff` | |
+| backgroundColor | 提示背景色 | String | `#e64340` |

packages/toptips/index.js

@@ -1,39 +1,74 @@
-module.exports = {
+const FONT_COLOR = '#fff';
-  showZanTopTips(content = '', options = {}) {
+const BG_COLOR = '#e64340';
-    let zanTopTips = this.data.zanTopTips || {};
+
-    // 如果已经有一个计时器在了，就清理掉先
+Component({
-    if (zanTopTips.timer) {
+  properties: {
-      clearTimeout(zanTopTips.timer);
+    content: String,
-      zanTopTips.timer = 0;
+    color: {
+      type: String,
+      value: FONT_COLOR
+    },
+    backgroundColor: {
+      type: String,
+      value: BG_COLOR
+    },
+    isShow: {
+      type: Boolean,
+      value: false
+    },
+    duration: {
+      type: Number,
+      value: 3000
     }
+  },
 
-    if (typeof options === 'number') {
+  methods: {
-      options = {
+    show() {
-        duration: options
+      const duration = this.data.duration;
-      };
-    }
 
-    // options参数默认参数扩展
+      this._timer && clearTimeout(this._timer);
-    options = Object.assign({
-      duration: 3000
-    }, options);
-
-    // 设置定时器，定时关闭topTips
-    let timer = setTimeout(() => {
       this.setData({
-        'zanTopTips.show': false,
+        isShow: true
-        'zanTopTips.timer': 0
       });
-    }, options.duration);
 
-    // 展示出topTips
+      if (duration > 0 && duration !== Infinity) {
-    this.setData({
+        this._timer = setTimeout(() => {
-      zanTopTips: {
+          this.hide();
-        show: true,
+        }, duration);
-        content,
-        options,
-        timer
       }
-    });
+    },
+
+    hide() {
+      this._timer = clearTimeout(this._timer);
+
+      this.setData({
+        isShow: false
+      });
+    }
   }
-};
+});
+
+function Toptips(options = {}) {
+  const pages = getCurrentPages();
+  const ctx = pages[pages.length - 1];
+  const defaultOptions = {
+    selector: '#zan-toptips',
+    duration: 3000
+  };
+
+  options = Object.assign(defaultOptions,parseParam(options));
+
+  const $toptips = ctx.selectComponent(options.selector);
+  delete options.selector;
+
+  $toptips.setData({
+    ...options
+  });
+  $toptips && $toptips.show();
+}
+
+function parseParam(params) {
+  return typeof params === 'object' ? params : { content: params };
+}
+
+module.exports = Toptips;

packages/toptips/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/toptips/index.wxml

@@ -1,3 +1 @@
-<template name="zan-toptips">
+<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}">{{ content }}</view>
-  <view class="zan-toptips {{ zanTopTips.show ? 'zan-toptips--show' : '' }}">{{ zanTopTips.content }}</view>
-</template>