[improvement] Field: 优化在列表中输入框表现 (#296)

* 优化 field 实现

* field 使用cell来架构

* field 列表

example/pages/field/index.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "zan-button": "../../dist/btn/index",
     "zan-button-group": "../../dist/btn-group/index",
+    "zan-cell-group": "../../dist/cell-group/index",
     "zan-field": "../../dist/field/index",
     "zan-panel": "../../dist/panel/index",
     "doc-page": "../../components/doc-page/index"

example/pages/field/index.wxml

@@ -1,33 +1,35 @@
 <doc-page title="Field" without-padding>
   <!-- Field 基础用法 -->
   <zan-panel title="基础用法">
-    <zan-field
-      title="{{ config.base.name.title }}"
-      placeholder="{{ config.base.name.placeholder }}"
-      focus="{{ config.base.name.focus }}"
-      value="{{ value }}"
-    >
-    </zan-field>
-    <zan-field
-      title="{{ config.base.tel.title }}"
-      placeholder="{{ config.base.tel.placeholder }}"
-      error="{{ config.base.tel.error }}"
-      input-type="{{ config.base.tel.inputType }}"
-    >
-    </zan-field>
-    <zan-field
-      title="{{ config.base.address.title }}"
-      type="{{ config.base.address.type }}"
-      placeholder="{{ config.base.address.placeholder }}"
-      maxlength="50"
-    >
-    </zan-field>
-    <zan-field
-      title="{{ config.base.disabled.title }}"
-      value="{{ config.base.disabled.value }}"
-      disabled="{{ config.base.disabled.disabled }}"
-    >
-    </zan-field>
+    <zan-cell-group>
+      <zan-field
+        title="{{ config.base.name.title }}"
+        placeholder="{{ config.base.name.placeholder }}"
+        focus="{{ config.base.name.focus }}"
+        value="{{ value }}"
+      >
+      </zan-field>
+      <zan-field
+        title="{{ config.base.tel.title }}"
+        placeholder="{{ config.base.tel.placeholder }}"
+        error="{{ config.base.tel.error }}"
+        input-type="{{ config.base.tel.inputType }}"
+      >
+      </zan-field>
+      <zan-field
+        title="{{ config.base.address.title }}"
+        type="{{ config.base.address.type }}"
+        placeholder="{{ config.base.address.placeholder }}"
+        maxlength="50"
+      >
+      </zan-field>
+      <zan-field
+        title="{{ config.base.disabled.title }}"
+        value="{{ config.base.disabled.value }}"
+        disabled="{{ config.base.disabled.disabled }}"
+      >
+      </zan-field>
+    </zan-cell-group>
   </zan-panel>
   
   <zan-button-group>

packages/cell-group/index.js

@@ -1,44 +1,58 @@
+const CELL_PATH = '../cell/index';
+const FIELD_PATH = '../field/index'
+
 Component({
   relations: {
-    '../cell/index': {
+    [CELL_PATH]: {
       type: 'child',
       linked() {
-        this._updateIsLastCell();
+        this._updateIsLastElement(CELL_PATH);
       },
       linkChanged() {
-        this._updateIsLastCell();
+        this._updateIsLastElement(CELL_PATH);
       },
       unlinked() {
-        this._updateIsLastCell();
+        this._updateIsLastElement(CELL_PATH);
+      }
+    },
+    [FIELD_PATH]: {
+      type: 'child',
+      linked() {
+        this._updateIsLastElement(FIELD_PATH);
+      },
+      linkChanged() {
+        this._updateIsLastElement(FIELD_PATH);
+      },
+      unlinked() {
+        this._updateIsLastElement(FIELD_PATH);
       }
     }
   },
 
   data: {
-    cellUpdateTimeout: 0
+   elementUpdateTimeout: 0
   },
 
   methods: {
-    _updateIsLastCell() {
+    _updateIsLastElement(childPath) {
       // 用 setTimeout 减少计算次数
-      if (this.data.cellUpdateTimeout > 0) {
+      if (this.data.elementUpdateTimeout > 0) {
         return;
       }
 
-      const cellUpdateTimeout = setTimeout(() => {
-        this.setData({ cellUpdateTimeout: 0 });
-        let cells = this.getRelationNodes('../cell/index');
+      const elementUpdateTimeout = setTimeout(() => {
+        this.setData({ elementUpdateTimeout: 0 });
+        let elements = this.getRelationNodes(childPath);
+        if (elements.length > 0) {
+          let lastIndex = elements.length - 1;
 
-        if (cells.length > 0) {
-          let lastIndex = cells.length - 1;
-
-          cells.forEach((cell, index) => {
-            cell.updateIsLastCell(index === lastIndex);
+          elements.forEach((cell, index) => {
+            cell.updateIsLastElement(index === lastIndex);
           });
         }
       });
 
-      this.setData({ cellUpdateTimeout });
+      this.setData({ elementUpdateTimeout });
     }
   }
 });

packages/cell/index.js

@@ -70,7 +70,7 @@ Component({
     },
 
     // 用于被 cell-group 更新，标志是否是最后一个 cell
-    updateIsLastCell(isLastCell) {
+    updateIsLastElement(isLastCell) {
       this.setData({ isLastCell });
     }
   }

packages/field/README.md

@@ -38,6 +38,14 @@ Page({
 });
 ```
 
+#### Field 列表
+```html
+<zan-cell-group>
+  <zan-field title="姓名"></zan-field>
+  <zan-field title="邮件"></zan-field>
+</zan-cell-group>
+```
+
 #### 监听事件
 
 field会触发一些事件，当你需要监听这些事件时，可以绑定对应的事件。

packages/field/index.js

@@ -1,6 +1,14 @@
 Component({
   behaviors: ['wx://form-field'],
 
+  externalClasses: ['field-class'],
+
+  relations: {
+    '../cell-group/index': {
+      type: 'parent'
+    }
+  },
+
   properties: {
     title: String,
     type: {
@@ -8,12 +16,12 @@ Component({
       value: 'input'
     },
     disabled: Boolean,
+    focus: Boolean,
     inputType: {
       type: String,
       value: 'text'
     },
     placeholder: String,
-    focus: Boolean,
     mode: {
       type: String,
       value: 'normal'
@@ -26,6 +34,10 @@ Component({
     }
   },
 
+  data: {
+    showBorder: true
+  },
+
   methods: {
     handleFieldChange(event) {
       const { detail = {} } = event;
@@ -41,6 +53,17 @@ Component({
 
     handleFieldBlur(event) {
       this.triggerEvent('blur', event);
+    },
+
+    updateIsLastElement(isLastField) {
+      let showBorder = true;
+      if (isLastField && this.data.mode === 'normal') {
+        showBorder = false;
+      }
+
+      this.setData({
+        showBorder
+      });
     }
   }
 });

packages/field/index.json

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

packages/field/index.pcss

@@ -1,10 +1,26 @@
-@import '../cell/index';
+@import "../common/_mixins";
 
 .zan-field {
-  padding: 7px 15px;
+  display: block;
+  position: relative;
   color: #333;
 }
 
+.zan-field::after {
+  @mixin hairline;
+  border-bottom-width: 1px;
+  left: 15px;
+  right: 0;
+}
+
+.zan-field--no-border::after {
+  border-bottom-width: 0;
+}
+
+.zan-cell--field {
+  padding: 7px 15px;
+}
+
 .zan-field--wrapped {
   margin: 10px 15px;
   background-color: #fff;
@@ -17,7 +33,7 @@
 }
 
 /* 圆角输入框，强制展示边框 */
-.zan-field.zan-field--wrapped::after {
+.zan-field--wrapped::after {
   display: block;
 }
 

packages/field/index.wxml

@@ -1,5 +1,9 @@
-<view class="zan-cell zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }}">
+<zan-cell
+  class="field-class zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }} {{ !showBorder ? 'zan-field--no-border' : '' }}"
+  cell-class="zan-cell--field"
+>
   <view
+    slot="icon"
     wx:if="{{ title }}"
     class="zan-cell__hd zan-field__title">
     {{ title }}
@@ -32,4 +36,4 @@
     bindfocus="handleFieldFocus"
     bindblur="handleFieldBlur"
   />
-</view>
+</zan-cell>