From b2fbf5a7de6158e25690db121952af49219d9ff8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 29 Aug 2018 16:19:14 +0800
Subject: [PATCH] [improvement] Stepper: support form-field (#477)

---
 packages/field/README.md    |  2 +-
 packages/stepper/README.md  |  1 +
 packages/stepper/index.js   | 25 +++++++++----------------
 packages/stepper/index.wxml |  6 +++---
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/field/README.md b/packages/field/README.md
index 653bebd4..a54c6125 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -123,7 +123,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|-------------|
-| name | 标识符 | `String` | - |
+| name | 在表单内提交时的标识符 | `String` | - |
 | label | 输入框左侧文本 | `String` | - |
 | value | 当前输入的值 | `String | Number` | - |
 | type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | `String` | `text` |
diff --git a/packages/stepper/README.md b/packages/stepper/README.md
index 27bfca75..84e07a51 100644
--- a/packages/stepper/README.md
+++ b/packages/stepper/README.md
@@ -44,6 +44,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
+| name | 在表单内提交时的标识符 | `String` | - |
 | value | 输入值 | `String | Number` | 最小值 |
 | min | 最小值 | `String | Number` | `1` |
 | max | 最大值 | `String | Number` | - |
diff --git a/packages/stepper/index.js b/packages/stepper/index.js
index db85d79b..35eeb2e0 100644
--- a/packages/stepper/index.js
+++ b/packages/stepper/index.js
@@ -3,6 +3,8 @@
 const MAX = 2147483647;
 
 Component({
+  behaviors: ['wx://form-field'],
+
   options: {
     addGlobalClass: true
   },
@@ -15,14 +17,6 @@ Component({
   ],
 
   properties: {
-    value: {
-      type: null,
-      observer(val) {
-        if (val !== this.currentValue) {
-          this.setData({ currentValue: this.range(val) });
-        }
-      }
-    },
     integer: Boolean,
     disabled: Boolean,
     disableInput: Boolean,
@@ -42,7 +36,7 @@ Component({
 
   attached() {
     this.setData({
-      currentValue: this.range(this.data.value)
+      value: this.range(this.data.value)
     });
   },
 
@@ -64,14 +58,14 @@ Component({
       }
 
       const diff = type === 'minus' ? -this.data.step : +this.data.step;
-      const value = Math.round((this.data.currentValue + diff) * 100) / 100;
+      const value = Math.round((this.data.value + diff) * 100) / 100;
       this.triggerInput(this.range(value));
       this.triggerEvent(type);
     },
 
     onBlur(event) {
-      const currentValue = this.range(this.data.currentValue);
-      this.triggerInput(currentValue);
+      const value = this.range(this.data.value);
+      this.triggerInput(value);
       this.triggerEvent('blur', event);
     },
 
@@ -83,10 +77,9 @@ Component({
       this.onChange('plus');
     },
 
-    triggerInput(currentValue) {
-      this.setData({ currentValue });
-      this.triggerEvent('input', currentValue);
-      this.triggerEvent('change', currentValue);
+    triggerInput(value) {
+      this.setData({ value });
+      this.triggerEvent('change', value);
     }
   }
 });
diff --git a/packages/stepper/index.wxml b/packages/stepper/index.wxml
index 478d25e9..7e40674d 100644
--- a/packages/stepper/index.wxml
+++ b/packages/stepper/index.wxml
@@ -1,18 +1,18 @@
 <view class="van-stepper custom-class">
   <view
-    class="minus-class van-stepper__minus {{ disabled || currentValue <= min ? 'van-stepper__minus--disabled' : '' }}"
+    class="minus-class van-stepper__minus {{ disabled || value <= min ? 'van-stepper__minus--disabled' : '' }}"
     bind:tap="onMinus"
   />
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
-    value="{{ currentValue }}"
+    value="{{ value }}"
     disabled="{{ disabled || disableInput }}"
     bindinput="onInput"
     bind:blur="onBlur"
   />
   <view
-    class="plus-class van-stepper__plus {{ disabled || currentValue >= max ? 'van-stepper__plus--disabled' : '' }}"
+    class="plus-class van-stepper__plus {{ disabled || value >= max ? 'van-stepper__plus--disabled' : '' }}"
     bind:tap="onPlus"
   />
 </view>