feat(AtInputNumber): 为AtInputNumber添加错误提示回调

jd-opensource · Mar 7, 2019 · 3b2dd28 · 3b2dd28
1 parent 308dd49
commit 3b2dd28
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/@types/input-number.d.ts b/@types/input-number.d.ts
@@ -3,6 +3,11 @@ import { CommonEventFunction } from '@tarojs/components/types/common'
 
 import AtComponent from './base'
 
+interface InputError {
+  type: 'OVER' | 'LOW' | 'DISABLED',
+  errorValue: number,
+}
+
 export interface AtInputNumberProps extends AtComponent{
   type: 'number' | 'digit'
 
@@ -25,6 +30,8 @@ export interface AtInputNumberProps extends AtComponent{
   onChange: (value: number) => void
 
   onBlur?: CommonEventFunction
+
+  onErrorInput?: (errCb: InputError) => void
 }
 
 declare const AtInputNumber: ComponentClass<AtInputNumberProps>

diff --git a/docs/markdown/input-number.md b/docs/markdown/input-number.md
@@ -135,3 +135,4 @@ export default class Index extends Taro.Component {
 |------- |---  |----- |---- | -------- |
 | onChange | √ | √ | 输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，onChange 函数必填  | 输入框当前值 value  |
 | onBlur | √ | √ | 输入框值失去焦点时触发的事件 | event |
+| onErrorInput | √ | √ | 输入框尝试输入错误数组触发的事件 | `({ type: 'OVER' | 'LOW' | 'DISABLED', errorValue:number})` |
diff --git a/src/components/input-number/index.js b/src/components/input-number/index.js
@@ -42,11 +42,24 @@ initTestEnv()
 class AtInputNumber extends AtComponent {
   handleClick (clickType) {
     const { disabled, value, min, max, step } = this.props
-    if (
-      disabled
-      || (clickType === 'minus' && value <= min)
-      || (clickType === 'plus' && value >= max)
-    ) return
+    const lowThanMin = (clickType === 'minus' && value <= min)
+    const OverThanMax = (clickType === 'plus' && value >= max)
+    if (lowThanMin || OverThanMax || disabled) {
+      const deltaValue = clickType === 'minus' ? -step : step
+      const errorValue = addNum(value, deltaValue)
+      if (disabled) {
+        this.handleError({
+          type: 'DISABLED',
+          errorValue,
+        })
+      } else {
+        this.handleError({
+          type: lowThanMin ? 'LOW' : 'OVER',
+          errorValue,
+        })
+      }
+      return
+    }
     const deltaValue = clickType === 'minus' ? -step : step
     let newValue = addNum(value, deltaValue)
     newValue = this.handleValue(newValue)
@@ -59,9 +72,17 @@ class AtInputNumber extends AtComponent {
     // 此处不能使用 Math.max，会是字符串变数字，并丢失 .
     if (resultValue > max) {
       resultValue = max
+      this.handleError({
+        type: 'OVER',
+        errorValue: resultValue,
+      })
     }
     if (resultValue < min) {
       resultValue = min
+      this.handleError({
+        type: 'LOW',
+        errorValue: resultValue,
+      })
     }
     resultValue = parseValue(resultValue)
     return resultValue
@@ -79,6 +100,11 @@ class AtInputNumber extends AtComponent {
 
   handleBlur = (...arg) => this.props.onBlur(...arg)
 
+  handleError = errorValue => {
+    if (!this.props.onErrorInput) { return }
+    this.props.onErrorInput(errorValue)
+  }
+
   render () {
     const {
       customStyle,
@@ -163,6 +189,7 @@ AtInputNumber.propTypes = {
   size: PropTypes.string,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
+  onErrorInput: PropTypes.func,
 }
 
 export default AtInputNumber