[refactor] Actionsheet: 升级到自定义组件 (#175)

* fix: temp commit

* fix: temp commit

* fix: add custom actionsheet

example/pages/actionsheet/index.js

@@ -1,12 +1,7 @@
-const { Actionsheet, extend } = require('../../dist/index');
+Page({
-
-Page(extend({}, Actionsheet, {
   data: {
-    baseActionsheet: {
     show: false,
-      cancelText: '关闭 Action',
+    cancelWithMask: true,
-      closeOnClickOverlay: true,
-      componentId: 'baseActionsheet',
     actions: [{
       name: '选项1',
       subname: '选项描述语1',
@@ -20,8 +15,8 @@ Page(extend({}, Actionsheet, {
     }, {
       name: '去分享',
       openType: 'share'
-      }]
+    }],
-    }
+    cancelText: '关闭 Action'
   },
 
   onShareAppMessage() {
@@ -31,36 +26,32 @@ Page(extend({}, Actionsheet, {
     };
   },
 
-  toggleActionsheet() {
+  openActionsheet() {
     this.setData({
-      'baseActionsheet.show': true
+      'show': true
     });
   },
 
-  handleZanActionsheetCancel({ componentId }) {
+  closeActionSheet() {
     this.setData({
-      [`${componentId}.show`]: false
+      'show': false
     });
   },
 
-  handleZanActionsheetClick({ componentId, index }) {
+  clickAction({ detail }) {
-    console.log(`item index ${index} clicked`);
-
     // 如果是分享按钮被点击, 不处理关闭
+    const { index } = detail;
     if (index === 2) {
       return;
     }
-
     this.setData({
-      [`${componentId}.actions[${index}].loading`]: true
+      [`actions[${index}].loading`]: true
     });
-
     setTimeout(() => {
       this.setData({
-        [`${componentId}.show`]: false,
+        [`show`]: false,
-        [`${componentId}.actions[${index}].loading`]: false
+        [`actions[${index}].loading`]: false
       });
     }, 1500);
   }
-
+});
-}));

example/pages/actionsheet/index.json

@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "Actionsheet 行动按钮"
+  "navigationBarTitleText": "Actionsheet 行动按钮",
+  "usingComponents": {
+    "zan-actionsheet": "../../dist/actionsheet/index",
+    "zan-btn": "../../dist/btn/index"
+  }
 }

example/pages/actionsheet/index.wxml

@@ -1,15 +1,17 @@
-<import src="/dist/actionsheet/index.wxml" />
-
 <view class="container">
-
   <view class="doc-title zan-hairline--bottom zan-hairline--bottom">ACTIONSHEET</view>
-
   <view class="zan-btns" style="margin-top: 30vh;">
-    <button class="zan-btn" bindtap="toggleActionsheet">
+    <button class="zan-btn" bindtap="openActionsheet">
       Actionsheet
     </button>
+    <zan-actionsheet
+      show="{{ show }}"
+      actions="{{ actions }}"
+      cancel-text="{{ cancelText }}"
+      cancel-with-mask="{{ cancelWithMask }}"
+      bind:cancel="closeActionSheet"
+      bind:actionclick="clickAction"
+      mask-class="tiny"
+    />
   </view>
-
-  <template is="zan-actionsheet" data="{{ ...baseActionsheet }}"></template>
-
 </view>

example/pages/actionsheet/index.wxss

@@ -0,0 +1,3 @@
+.tiny {
+  background: rgba(30, 30, 40, 0.7) !important;
+}

packages/actionsheet/README.md

@@ -1,65 +1,80 @@
 ## Actionsheet 行动按钮
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+{
+  "usingComponents": {
+    "zan-actionsheet": "path/to/zanui-weapp/dist/actionsheet/index"
+  }
+}
 ```
 
-在需要使用的页面里引入组件库模板和脚本
+### 使用指南
+
 ```html
-<import src="/dist/actionsheet/index.wxml" />
+<button bindtap="openActionSheet">Open ActionSheet</button>
-<!-- 直接使用 zan-actionsheet 模板，并且直接传入参数配置 -->
+<view class="actionsheet-container">
-<template is="zan-actionsheet" data="{{ ...actionsheet }}"></template>
+  <!-- 监听自定义事件 cancel 和 actionclick，绑定回调函数 -->
+  <zan-actionsheet
+    show="{{ show }}"
+    actions="{{ actions }}"
+    cancel-text="{{ cancelText }}"
+    cancel-with-mask="{{ cancelWithMask }}"
+    bind:cancel="closeActionSheet"
+    bind:actionclick="handleActionClick"
+  >
+  </zan-actionsheet>
+</view>
 ```
-```js
-const { Actionsheet, extend } = require('path/to/zanui-weapp/dist/index');
 
+```js
 // 在 Page 中混入 Actionsheet 里面声明的方法
-Page(extend({}, Actionsheet, {
-  data: {
-    actionsheet: {
-      show: false,
-      actions: []
-    }
-  }
-  // ...
-}));
-```
-
-### 代码演示
-#### 基础功能
-在 js 中设置传入的 show 为 true，即可展示出 actionsheet。actionsheet 会根据传入的 actions 展示按钮。
-```js
-this.setData({
-  'actionsheet.show': true
-})
-```
-
-当行动按钮被点击或者弹层被关掉时，都可以在可以在页面中注册 `handleZanActionsheetClick` 和 `handleZanActionsheetCancel` 方法来监听。
-```js
 Page({
-  // 当行动按钮被关闭时，触发该函数
+  data: {
-  // componentId 即为在模板中传入的 componentId
+    show: false,
-  // 用于在一个页面上使用多个 actionsheet 时，进行区分
+    cancelWithMask: true,
-  handleZanActionsheetCancel({ componentId }) {
+    actions: [{
+      name: '选项1',
+      subname: '选项描述语1',
+      loading: false
+    }, {
+      name: '选项2',
+      subname: '选项描述语2',
+      loading: false
+    }, {
+      name: '去分享',
+      openType: 'share'
+    }],
+    cancelText: '关闭 Action'
   },
-
+  openActionSheet() {
-  // 当行动按钮中有一个被点击时触发
+    this.setData({
-  // index 代表被点击按钮在传入参数 actions 中的位置
+      'show': true
-  handleZanActionsheetClick({ componentId, index }) {
+    });
+  },
+  closeActionSheet() {
+    this.setData({
+      'show': false
+    });
+  },
+  handleActionClick({ detail }) {
+    // 获取被点击的按钮 index
+    const { index } = detail;
   }
 });
 ```
 
-#### `Actionsheet` 支持的具体参数如下
+
+#### `Actionsheet` 支持的具体参数如下（ 传入时使用分隔线写法 ）
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
 | show | 用来表示是否展示行动按钮 | Boolean | false | |
+| actions | 指定弹层里的按钮 | Array  | [] | |
 | cancelText | 行动按钮底部取消按钮的文案，不传则不显示取消按钮 | String  | | |
-| closeOnClickOverlay | 是否在点击背景时，关闭行动按钮 | Boolean  | false | |
+| cancelWithMask | 是否在点击背景时，关闭行动按钮 | Boolean  | false | |
-| componentId | 用于区分行动按钮之间的唯一名称 | String  | | |
+| mask-class | 用于控制蒙层样式的外部类 | String  | | |
-| actions | 行动按钮的按钮显示配置 | Array  | [] | |
+| container-class | 用于控制容器样式的外部类 | String  | | |
 
 actions 的具体数据结构
 ```js
@@ -69,8 +84,6 @@ actions 的具体数据结构
   name: '选项1',
   // 按钮描述文案，不传就不显示
   subname: '选项描述语1',
-  // 按钮特殊类，可以通过传入这个，为按钮增加特殊样式
-  className: 'action-class',
   // 按钮是否显示为 loading
   loading: false,
   // 按钮的微信开放能力

packages/actionsheet/index.js

@@ -1,41 +1,36 @@
-const { extractComponentId } = require('../common/helper');
+Component({
-
+  externalClasses: ['mask-class', 'container-class'],
-module.exports = {
+  properties: {
-  _handleZanActionsheetMaskClick({ currentTarget = {} }) {
+    actions: {
-    const dataset = currentTarget.dataset || {};
+      type: Array,
-    const { componentId, closeOnClickOverlay } = dataset;
+      value: []
-
-    // 判断是否在点击背景时需要关闭弹层
-    if (!closeOnClickOverlay) {
-      return;
-    }
-
-    resolveCancelClick.call(this, { componentId });
     },
-
+    show: {
-  _handleZanActionsheetCancelBtnClick(e) {
+      type: Boolean,
-    const componentId = extractComponentId(e);
+      value: false
-
-    resolveCancelClick.call(this, { componentId });
     },
-
+    cancelWithMask: {
-  _handleZanActionsheetBtnClick({ currentTarget = {} }) {
+      type: Boolean,
+      value: true
+    },
+    cancelText: {
+      type: String,
+      value: ''
+    }
+  },
+  methods: {
+    onMaskClick() {
+      if (this.data.cancelWithMask) {
+        this.cancelClick();
+      }
+    },
+    cancelClick() {
+      this.triggerEvent('cancel');
+    },
+    handleBtnClick({ currentTarget = {} }) {
       const dataset = currentTarget.dataset || {};
-    const { componentId, index } = dataset;
+      const { index } = dataset;
-
+      this.triggerEvent('actionclick', { index });
-    if (this.handleZanActionsheetClick) {
-      this.handleZanActionsheetClick({ componentId, index });
-    } else {
-      console.warn('页面缺少 handleZanActionsheetClick 回调函数');
     }
   }
-};
+});
-
-function resolveCancelClick({ componentId }) {
-  console.info('[zan:actionsheet:cancel]');
-  if (this.handleZanActionsheetCancel) {
-    this.handleZanActionsheetCancel({ componentId });
-  } else {
-    console.warn('页面缺少 handleZanActionsheetCancel 回调函数');
-  }
-}

packages/actionsheet/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-btn": "../btn/index"
+  }
+}

packages/actionsheet/index.pcss

@@ -30,17 +30,31 @@
   visibility: hidden;
 }
 
-.zan-actionsheet__btn.zan-btn {
+.zan-actionsheet__btn {
-  height: 50px;
+  margin-bottom: 0 !important;
-  line-height: 50px;
-  margin-bottom: 0;
-
-  &::after {
-    border-width: 0;
-    border-bottom-width: 1px;
-  }
 }
 
+.zan-actionsheet__footer .zan-actionsheet__btn {
+  background: #fff;
+}
+
+.zan-actionsheet__btn-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.zan-actionsheet__subname {
+  color: $gray-dark;
+}
+
+.zan-actionsheet__subname,
+.zan-actionsheet__name {
+  height: 45px;
+  line-height: 45px;
+}
+
+
 .zan-actionsheet__btn.zan-btn:last-child {
   &::after {
     border-bottom-width: 0;
@@ -50,7 +64,6 @@
 .zan-actionsheet__subname {
   margin-left: 2px;
   font-size: 12px;
-  color: $gray-darker;
 }
 
 .zan-actionsheet__footer {
@@ -58,7 +71,7 @@
 }
 
 /* btn-loading 状态 */
-.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname {
+.zan-actionsheet__btn--loading .zan-actionsheet__subname {
   color: transparent;
 }
 

packages/actionsheet/index.wxml

@@ -1,40 +1,39 @@
-<template name="zan-actionsheet">
+<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
-  <view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
   <view
-      class="zan-actionsheet__mask"
+    class="mask-class zan-actionsheet__mask"
-      catchtap="_handleZanActionsheetMaskClick"
+    bindtap="onMaskClick"
-      data-close-on-click-overlay="{{ closeOnClickOverlay }}"
+  ></view>
-      data-component-id="{{ componentId }}"></view>
+  <view class="container-class zan-actionsheet__container">
-    <view class="zan-actionsheet__container">
+    <!-- 选项按钮 -->
-      <!-- 实际按钮显示 -->
+    <zan-btn
-      <button
       wx:for="{{ actions }}"
-        wx:for-index="index"
-        wx:for-item="item"
       wx:key="{{ index }}-{{ item.name }}"
-        catchtap="_handleZanActionsheetBtnClick"
+      bind:btnclick="handleBtnClick"
-        data-component-id="{{ componentId }}"
       data-index="{{ index }}"
       open-type="{{ item.openType }}"
-        class="zan-btn zan-actionsheet__btn {{ item.loading ? 'zan-btn--loading' : '' }} {{ item.className }}"
+      custom-class="zan-actionsheet__btn"
+      loading="{{ item.loading }}"
     >
-        <text>{{ item.name }}</text>
+      <!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
-        <text
+      <view class="zan-actionsheet__btn-content {{ item.loading ? 'zan-actionsheet__btn--loading' : '' }}">
+        <view class="zan-actionsheet__name">{{ item.name }}</view>
+        <view
           wx:if="{{ item.subname }}"
-          class="zan-actionsheet__subname">{{ item.subname }}</text>
+          class="zan-actionsheet__subname">
-      </button>
+          {{ item.subname }}
+        </view>
+      </view>
+    </zan-btn>
 
     <!-- 关闭按钮 -->
     <view
       wx:if="{{ cancelText }}"
       class="zan-actionsheet__footer"
     >
-        <button
+      <zan-btn
-          class="zan-btn zan-actionsheet__btn"
+        custom-class="zan-actionsheet__btn"
-          catchtap="_handleZanActionsheetCancelBtnClick"
+        catchtap="cancelClick"
-          data-component-id="{{ componentId }}"
+      >{{ cancelText }}</zan-btn>
-        >{{ cancelText }}</button>
     </view>
   </view>
-  </view>
+</view>
-</template>

packages/btn/index.js

@@ -22,5 +22,14 @@ Component({
       type: Boolean,
       value: false,
     },
+    openType: {
+      type: String,
+      value: ''
+    }
   },
+  methods: {
+    handleTap() {
+      this.triggerEvent('btnclick');
+    }
+  }
 });

packages/btn/index.wxml

@@ -1,7 +1,9 @@
 
 <button 
   class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
-  disabled="{{disabled}}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  bindtap="handleTap"
 >
   <slot></slot>
 </button>