[breaking change] Select: move check_label to select (#36)

* move check label to new component

* select 整理

* 整理文档 && 支持 componentId

* delete project config json

* 内部命名修改

* remove form/check_label

app.json

@@ -20,7 +20,8 @@
     "example/switch/index",
     "example/tab/index",
     "example/toptips/index",
-    "example/toast/index"
+    "example/toast/index",
+    "example/select/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#FAFAFA",

dist/form/check_label.wxml

@@ -1,23 +0,0 @@
-<template name="zan-check-label">
-  <radio-group class="zan-check-label__list" bindchange="_handleZanCheckLabelSelect">
-    <label wx:for="{{ items }}" wx:key="value">
-      <view class="zan-cell" wx:if="{{ item.value === checkedValue }}">
-        <radio class="zan-check-label__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
-        <view class="zan-cell__bd zan-check-label__selected" style="padding-left:{{ item.padding * 10 }}px">{{ item.name }}</view>
-        <view class="zan-cell__ft">
-          <icon type="success_no_circle" color="#ff4444" size="14"></icon>
-        </view>
-      </view>
-      <view class="zan-cell" wx:else>
-        <radio class="zan-check-label__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
-        <view
-          class="zan-cell__bd"
-          style="padding-left:{{ item.padding * 10 }}px"
-        >{{ item.name }}</view>
-      </view>
-    </label>
-    <label wx:if="{{ !ignoreDefault }}" class="hidden">
-      <radio class="zan-check-label__radio" value="-1" checked="{{ checkedValue === '-1' }}"/>
-    </label>
-  </radio-group>
-</template>

dist/form/check_label.wxss

@@ -1,6 +0,0 @@
-.zan-check-label__list .zan-check-label__radio{
-  display: none;
-}
-.zan-check-label__selected{
-  color: #ff4444;
-}

dist/index.js

@@ -1,4 +1,4 @@
-exports.CheckLabel = require('./form/check_label');
+exports.CheckLabel = require('./select/index');
 exports.NoticeBar = require('./noticebar/index');
 exports.Quantity = require('./quantity/index');
 exports.Switch = require('./switch/index');

dist/index.wxss

@@ -6,7 +6,6 @@
 @import "color/index.wxss";
 @import "dialog/index.wxss";
 @import "form/index.wxss";
-@import "form/check_label.wxss";
 @import "helper/index.wxss";
 @import "icon/index.wxss";
 @import "label/index.wxss";
@@ -15,6 +14,7 @@
 @import "panel/index.wxss";
 @import "popup/index.wxss";
 @import "quantity/index.wxss";
+@import "select/index.wxss";
 @import "steps/index.wxss";
 @import "switch/index.wxss";
 @import "tab/index.wxss";

dist/select/index.js

@@ -8,19 +8,19 @@ function handle(e) {
 
 function callback(componentId, value) {
   var e = { componentId, value };
-  console.info('[zan:CheckLabel:select]', e);
+  console.info('[zan:Select:change]', e);
 
-  if (this.handleZanCheckLabelSelect) {
+  if (this.handleZanSelectChange) {
-    this.handleZanCheckLabelSelect(e);
+    this.handleZanSelectChange(e);
   } else {
-    console.warn('页面缺少 handleZanCheckLabelSelect 回调函数');
+    console.warn('页面缺少 handleZanSelectChange 回调函数');
   }
 }
 
-var CheckLabel = {
+var Select = {
-  _handleZanCheckLabelSelect(e) {
+  _handleZanSelectChange(e) {
     handle.call(this, e);
   },
 };
 
-module.exports = CheckLabel;
+module.exports = Select;

dist/select/index.wxml

@@ -0,0 +1,38 @@
+<template name="zan-select">
+  <radio-group class="zan-select__list" bindchange="_handleZanSelectChange" data-component-id="{{ componentId }}">
+    <label wx:for="{{ items }}" wx:key="value">
+      <view class="zan-cell">
+        <radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
+        <view
+          class="zan-cell__bd"
+          style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}"
+        >{{ item.name }}</view>
+        <view wx:if="{{ item.value === checkedValue }}" class="zan-cell__ft">
+          <icon type="success_no_circle" color="{{ parse.getColor(activeColor) }}" size="14"></icon>
+        </view>
+      </view>
+    </label>
+  </radio-group>
+</template>
+
+<wxs module="parse">
+function getColor(color) {
+  color = color || '#ff4444'
+  return color;
+}
+
+module.exports = {
+  getColor: getColor,
+  getItemStyle: function(item, checkedValue, activeColor) {
+    var padding = item.padding * 10;
+    var style = 'padding-left: ' + padding + 'px;';
+
+    // 如果为选中状态，则高亮
+    if (item.value === checkedValue) {
+      style += 'color: ' + getColor(activeColor);
+    }
+
+    return style;
+  }
+};
+</wxs>

dist/select/index.wxss

@@ -0,0 +1,3 @@
+.zan-select__list .zan-select__radio{
+  display: none;
+}

example/dashboard/config.js

@@ -44,6 +44,9 @@ export default {
       }, {
         name: 'Quantity 计数器',
         path: '/example/quantity/index'
+      }, {
+        name: 'Select 选择',
+        path: '/example/select/index'
       }, {
         name: 'Steps 步骤条',
         path: '/example/steps/index'

example/form/index.js

@@ -3,38 +3,19 @@ var Zan = require('../../dist/index');
 Page(Object.assign({}, Zan.CheckLabel, {
   data: {
     area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
-    areaIndex: 0,
+    areaIndex: 0
-    items: [
-      {
-        padding: 0,
-        value: '1',
-        name: '选项一',
-      },
-      {
-        padding: 0,
-        value: '2',
-        name: '选项二',
-      },
-    ],
-    checkedValue: -1,
   },
 
-  onLoad: function () {
+  onLoad() {
 
   },
 
-  onShow: function () {
+  onShow() {
   },
 
-  onAreaChange: function (e) {
+  onAreaChange(e) {
     this.setData({
       areaIndex: e.detail.value
     });
-  },
-
-  handleZanCheckLabelSelect: function (e) {
-    this.setData({
-      checkedValue: e.value
-    });
   }
 }));

example/form/index.wxml

@@ -1,5 +1,3 @@
-<import src="/dist/form/check_label.wxml" />
-
 <view class="container">
 
   <view class="doc-title">FORM</view>
@@ -53,9 +51,4 @@
     </view>
   </view>
 
-  <view class="zan-panel">
-    <view>
-      <template is="zan-check-label" data="{{items, checkedValue}}" />
-    </view>
-  </view>
 </view>

example/select/index.js

@@ -0,0 +1,32 @@
+var Zan = require('../../dist/index');
+
+Page(Object.assign({}, Zan.CheckLabel, {
+
+  data: {
+    items: [
+      {
+        padding: 0,
+        value: '1',
+        name: '选项一',
+      },
+      {
+        padding: 0,
+        value: '2',
+        name: '选项二',
+      },
+    ],
+
+    checked: {
+      base: -1,
+      color: -1
+    },
+
+    activeColor: '#4b0'
+  },
+
+  handleZanSelectChange({ componentId, value }) {
+    this.setData({
+      [`checked.${componentId}`]: value
+    });
+  }
+}));

example/select/index.wxml

@@ -0,0 +1,20 @@
+<import src="/dist/select/index.wxml" />
+
+<view class="container">
+
+  <view class="doc-title">SELECT</view>
+
+  <view class="zan-panel-title">基础用法</view>
+  <view class="zan-panel">
+    <view>
+      <template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
+    </view>
+  </view>
+
+  <view class="zan-panel-title">自定义高亮颜色</view>
+  <view class="zan-panel">
+    <view>
+      <template is="zan-select" data="{{ items, checkedValue: checked.color, activeColor, componentId: 'color' }}" ></template>
+    </view>
+  </view>
+</view>