From 8816e421e86e240e8e104027fd9d53f18cce4a08 Mon Sep 17 00:00:00 2001
From: lethe <1443646652@qq.com>
Date: Mon, 16 Jul 2018 20:29:13 +0800
Subject: [PATCH] =?UTF-8?q?[improvement]cell:=E4=BC=98=E5=8C=96=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4slot=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0title=E5=8C=BA=E5=9F=9F=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89class=20(#360)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [improvement]cell:优化默认slot展示效果，添加title区域自定义class

* cell-group添加titleWidth实现整体控制title区域宽度
---
 example/pages/cell/index.js   |  9 ++++++++-
 example/pages/cell/index.wxml | 10 ++++++++++
 packages/cell-group/index.js  |  9 +++++++++
 packages/cell/README.md       |  4 +++-
 packages/cell/index.js        | 12 ++++++++++--
 packages/cell/index.pcss      |  9 +++++++++
 packages/cell/index.wxml      |  5 ++++-
 7 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/example/pages/cell/index.js b/example/pages/cell/index.js
index 8f3b7131..576cca2a 100644
--- a/example/pages/cell/index.js
+++ b/example/pages/cell/index.js
@@ -3,7 +3,8 @@ var Zan = require('../../dist/index');
 Page(Object.assign({}, Zan.Switch, {
   data: {
     checked: false,
-    show: true
+    show: true,
+    date: ''
   },
 
   onLoad() {
@@ -18,6 +19,12 @@ Page(Object.assign({}, Zan.Switch, {
     });
   },
 
+  bindDateChange(e) {
+    this.setData({
+      date: e.detail.value
+    });
+  },
+
   handleTap() {
     console.log('cell tapped');
   }
diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index a358922a..030d0995 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -18,6 +18,16 @@
     </zan-cell>
   </zan-panel>
 
+  <zan-panel class="cell-panel-demo">
+    <zan-cell title="单行列表">
+      <picker mode="date" value="{{date}}" start="2018-07-01" end="2018-09-01" bindchange="bindDateChange">
+        <view class="picker">
+          选择日期: {{date}}
+        </view>
+      </picker>
+    </zan-cell>
+  </zan-panel>
+
   <zan-panel class="cell-panel-demo" title="带箭头的 cell">
     <zan-cell title="只显示箭头" is-link></zan-cell>
   </zan-panel>
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
index ea805902..19150663 100644
--- a/packages/cell-group/index.js
+++ b/packages/cell-group/index.js
@@ -2,6 +2,12 @@ const CELL_PATH = '../cell/index';
 const FIELD_PATH = '../field/index'
 
 Component({
+  properties: {
+    titleWidth: {
+      type: Number,
+      value: null
+    }
+  },
   relations: {
     [CELL_PATH]: {
       type: 'child',
@@ -43,10 +49,13 @@ Component({
       const elementUpdateTimeout = setTimeout(() => {
         this.setData({ elementUpdateTimeout: 0 });
         let elements = this.getRelationNodes(childPath);
+        const { titleWidth } = this.properties;
+
         if (elements.length > 0) {
           let lastIndex = elements.length - 1;
 
           elements.forEach((cell, index) => {
+            titleWidth && cell.setTitleWidth(titleWidth)
             cell.updateIsLastElement(index === lastIndex);
           });
         }
diff --git a/packages/cell/README.md b/packages/cell/README.md
index db9f6ee9..5113c3a7 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -27,8 +27,9 @@
   }
 ```
 
+`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
 ```wxml
-  <zan-cell-group>
+  <zan-cell-group title-width="90">
     <zan-cell title="只显示箭头" is-link></zan-cell>
     <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
     <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
@@ -66,3 +67,4 @@
 | 类名       | 说明      |
 |-----------|-----------|
 | cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| title-class | title区域自定义样式 |
diff --git a/packages/cell/index.js b/packages/cell/index.js
index 9bf05606..25151ac8 100644
--- a/packages/cell/index.js
+++ b/packages/cell/index.js
@@ -4,7 +4,7 @@ const warn = (msg, getValue) => {
 };
 
 Component({
-  externalClasses: ['cell-class'],
+  externalClasses: ['cell-class', 'title-class'],
   options: {
     multipleSlots: true
   },
@@ -46,7 +46,8 @@ Component({
     }
   },
   data: {
-    isLastCell: true
+    isLastCell: true,
+    titleWidth: 'auto'
   },
   methods: {
     footerTap() {
@@ -72,6 +73,13 @@ Component({
     // 用于被 cell-group 更新，标志是否是最后一个 cell
     updateIsLastElement(isLastCell) {
       this.setData({ isLastCell });
+    },
+
+    // 设置统一的title区域宽度
+    setTitleWidth(titleWidth) {
+      this.setData({
+        titleWidth: `${titleWidth}px`
+      });
     }
   }
 });
diff --git a/packages/cell/index.pcss b/packages/cell/index.pcss
index 89dae463..13101913 100644
--- a/packages/cell/index.pcss
+++ b/packages/cell/index.pcss
@@ -24,6 +24,15 @@
   display: none
 }
 
+.zan-cell__title {
+  min-width: 65px;
+  padding-right: 10px;
+}
+
+.zan-cell__title:empty {
+  display: none;
+}
+
 .zan-cell__bd {
   flex: 1;
 }
diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml
index dc94e6a6..db6db63d 100644
--- a/packages/cell/index.wxml
+++ b/packages/cell/index.wxml
@@ -7,9 +7,12 @@
     <slot name="icon"></slot>
   </view>
 
-  <view class="zan-cell__bd">
+  <view class="title-class zan-cell__title" style="width: {{ titleWidth }}">
     <view wx:if="{{ title }}" class="zan-cell__text">{{ title }}</view>
     <view wx:if="{{ label }}" class="zan-cell__desc">{{ label }}</view>
+  </view>
+
+  <view class="zan-cell__bd">
     <slot></slot>
   </view>