fix Switch thumb transition bug

Author: xinthink

lib/mdl/Switch.js

@@ -205,15 +205,19 @@ class Switch extends Component {
   }
 
   componentWillMount() {
-    this.setState({ checked: this.props.checked });
-    this._layoutThumb(this.props);
+    const nextState = this._layoutThumb(this.props.checked,
+      this.props.thumbRadius,
+      this.props.trackLength,
+      this.props.trackSize);
+    this.setState(Object.assign(nextState, { checked: this.props.checked }));
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.checked !== this.props.checked) {
-      this.setState({ checked: nextProps.checked });
-    }
-    this._layoutThumb(nextProps);
+    const nextState = this._layoutThumb(nextProps.checked,
+      nextProps.thumbRadius,
+      nextProps.trackLength,
+      nextProps.trackSize);
+    this.setState(Object.assign(nextState, { checked: nextProps.checked }));
   }
 
   // Un-boxing the `Thumb` node from `AnimatedComponent`,
@@ -249,14 +253,15 @@ class Switch extends Component {
   // property initializers end
 
   // Layout the thumb according to the size of the track
-  _layoutThumb({ trackLength, trackSize }) {
+  _layoutThumb(checked, thumbRadius, trackLength, trackSize) {
     const trackRadii = trackSize / 2;
-    const thumbRadii = this.props.thumbRadius;
+    const thumbRadii = thumbRadius;
     const rippleRadii = trackLength - trackSize;
     const trackMargin = rippleRadii - trackRadii;  // make room for ripple
-    const thumbLeft = this.state.checked ? trackMargin + trackRadii : 0;
+    const thumbLeft = checked ? trackMargin + trackRadii : 0;
     this._animatedThumbLeft.setValue(thumbLeft);
-    this.setState({
+
+    return {
       trackSize,
       trackLength,
       trackRadii,
@@ -267,7 +272,7 @@ class Switch extends Component {
         r: thumbRadii,
         padding: rippleRadii - thumbRadii,
       },
-    });
+    };
   }
 
   // Move the thumb left or right according to the current state