fix(slider): 修复 AtSlider 变更 value 无效的问题 (#135)

jd-opensource · Oct 23, 2018 · b25e996 · b25e996
1 parent 7d007e3
commit b25e996
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/slider/__snapshots__/index.test.js.snap b/src/components/slider/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ exports[`AtSlider Snap render AtSlider -- props disabled 1`] = `"<div class=\\"a
 
 exports[`AtSlider Snap render AtSlider -- props max 1`] = `"<div class=\\"at-slider\\"><div class=\\"at-slider__inner\\"><div class=\\"weui-slider-box\\"><div class=\\"weui-slider\\"><div class=\\"weui-slider__inner\\" style=\\"background-color:#e9e9e9;\\"><div style=\\"width:0%;background-color:#6190e8;\\" class=\\"weui-slider__track\\"></div><div style=\\"left:0%;width:28px;height:28px;background-color:#ffffff;margin-top:-14px;margin-left:-14px;\\" class=\\"weui-slider__handler\\"></div><input type=\\"hidden\\" name=\\"\\" value=\\"0\\"/></div></div>undefined</div></div>undefined</div>"`;
 
-exports[`AtSlider Snap render AtSlider -- props min 1`] = `"<div class=\\"at-slider\\"><div class=\\"at-slider__inner\\"><div class=\\"weui-slider-box\\"><div class=\\"weui-slider\\"><div class=\\"weui-slider__inner\\" style=\\"background-color:#e9e9e9;\\"><div style=\\"width:0%;background-color:#6190e8;\\" class=\\"weui-slider__track\\"></div><div style=\\"left:0%;width:28px;height:28px;background-color:#ffffff;margin-top:-14px;margin-left:-14px;\\" class=\\"weui-slider__handler\\"></div><input type=\\"hidden\\" name=\\"\\" value=\\"0\\"/></div></div>undefined</div></div>undefined</div>"`;
+exports[`AtSlider Snap render AtSlider -- props min 1`] = `"<div class=\\"at-slider\\"><div class=\\"at-slider__inner\\"><div class=\\"weui-slider-box\\"><div class=\\"weui-slider\\"><div class=\\"weui-slider__inner\\" style=\\"background-color:#e9e9e9;\\"><div style=\\"width:100%;background-color:#6190e8;\\" class=\\"weui-slider__track\\"></div><div style=\\"left:100%;width:28px;height:28px;background-color:#ffffff;margin-top:-14px;margin-left:-14px;\\" class=\\"weui-slider__handler\\"></div><input type=\\"hidden\\" name=\\"\\" value=\\"50\\"/></div></div>undefined</div></div>undefined</div>"`;
 
 exports[`AtSlider Snap render AtSlider -- props showValue 1`] = `"<div class=\\"at-slider\\"><div class=\\"at-slider__inner\\"><div class=\\"weui-slider-box\\"><div class=\\"weui-slider\\"><div class=\\"weui-slider__inner\\" style=\\"background-color:#e9e9e9;\\"><div style=\\"width:0%;background-color:#6190e8;\\" class=\\"weui-slider__track\\"></div><div style=\\"left:0%;width:28px;height:28px;background-color:#ffffff;margin-top:-14px;margin-left:-14px;\\" class=\\"weui-slider__handler\\"></div><input type=\\"hidden\\" name=\\"\\" value=\\"0\\"/></div></div>undefined</div></div><div class=\\"at-slider__text\\">0</div></div>"`;
 

diff --git a/src/components/slider/index.js b/src/components/slider/index.js
@@ -10,9 +10,9 @@ export default class AtSlider extends AtComponent {
   constructor (props) {
     super(...arguments)
 
-    const { value } = props
+    const { value, min, max } = props
     this.state = {
-      _value: value
+      _value: AtSlider.clampNumber(value, min, max)
     }
   }
 
@@ -56,6 +56,10 @@ export default class AtSlider extends AtComponent {
     onChanging: PropTypes.func
   }
 
+  static clampNumber (value, lower, upper) {
+    return Math.max(lower, Math.min(upper, value))
+  }
+
   handleChanging (e) {
     const { _value } = this.state
     const { value } = e.detail
@@ -73,6 +77,13 @@ export default class AtSlider extends AtComponent {
     this.props.onChange({ value })
   }
 
+  componentWillReceiveProps (props) {
+    const { value, min, max } = props
+    this.setState({
+      _value: AtSlider.clampNumber(value, min, max)
+    })
+  }
+
   render () {
     const { _value } = this.state
     const {