react-native-slider - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

lib/Slider.js

@@ -15,5 +15,6 @@ 'use strict';var _jsxFileName="src/Slider.js";var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};
 
-var shallowCompare=require('react-addons-shallow-compare');
-var styleEqual=require('style-equal');
 
+var shallowCompare=require('react-addons-shallow-compare'),
+styleEqual=require('style-equal');
+
 var TRACK_SIZE=4;
@@ -36,2 +37,18 @@ var THUMB_SIZE=20;
 
+var DEFAULT_ANIMATION_CONFIGS={
+spring:{
+friction:7,
+tension:100},
+
+timing:{
+duration:150,
+easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),
+delay:0}};
+
+// decay : { // This has a serious bug
+//   velocity     : 1,
+//   deceleration : 0.997
+// }
+
+
 var Slider=_react2.default.createClass({displayName:"Slider",
@@ -134,4 +151,19 @@ propTypes:{
      */
-debugTouchArea:_react.PropTypes.bool},
+debugTouchArea:_react.PropTypes.bool,
 
+/**
+    * Set to true to animate values with default 'timing' animation type
+    */
+animateTransitions:_react.PropTypes.bool,
+
+/**
+    * Custom Animation type. 'spring' or 'timing'.
+    */
+animationType:_react.PropTypes.oneOf(['spring','timing']),
+
+/**
+    * Used to configure the animation parameters.  These are the same parameters in the Animated library.
+    */
+animationConfig:_react.PropTypes.object},
+
 getInitialState:function getInitialState(){
@@ -156,3 +188,4 @@ return {
 thumbTouchSize:{width:40,height:40},
-debugTouchArea:false};},
+debugTouchArea:false,
+animationType:'timing'};},
 
@@ -172,8 +205,13 @@
 componentWillReceiveProps:function componentWillReceiveProps(nextProps){
-var oldValue=this.props.value;
 var newValue=nextProps.value;
-if(oldValue!==newValue){
-this._setCurrentValue(nextProps.value);}},
 
+if(this.props.value!==newValue){
+if(this.props.animateTransitions){
+this._setCurrentValueAnimated(newValue);}else 
 
+{
+this._setCurrentValue(newValue);}}},
+
+
+
 shouldComponentUpdate:function shouldComponentUpdate(nextProps,nextState){
@@ -230,7 +268,7 @@ // We don't want to re-render in the following cases:
 return (
-_react2.default.createElement(_reactNative.View,_extends({},other,{style:[mainStyles.container,style],onLayout:this._measureContainer,__source:{fileName:_jsxFileName,lineNumber:225}}),
+_react2.default.createElement(_reactNative.View,_extends({},other,{style:[mainStyles.container,style],onLayout:this._measureContainer,__source:{fileName:_jsxFileName,lineNumber:263}}),
 _react2.default.createElement(_reactNative.View,{
 style:[{backgroundColor:maximumTrackTintColor},mainStyles.track,trackStyle],
-onLayout:this._measureTrack,__source:{fileName:_jsxFileName,lineNumber:226}}),
-_react2.default.createElement(_reactNative.Animated.View,{style:[mainStyles.track,trackStyle,minimumTrackStyle],__source:{fileName:_jsxFileName,lineNumber:229}}),
+onLayout:this._measureTrack,__source:{fileName:_jsxFileName,lineNumber:264}}),
+_react2.default.createElement(_reactNative.Animated.View,{style:[mainStyles.track,trackStyle,minimumTrackStyle],__source:{fileName:_jsxFileName,lineNumber:267}}),
 _react2.default.createElement(_reactNative.Animated.View,{
@@ -240,3 +278,3 @@ onLayout:this._measureThumb,
 {backgroundColor:thumbTintColor,marginTop:-(trackSize.height+thumbSize.height)/2},
-mainStyles.thumb,thumbStyle,_extends({left:thumbLeft},valueVisibleStyle)],__source:{fileName:_jsxFileName,lineNumber:230}}),
+mainStyles.thumb,thumbStyle,_extends({left:thumbLeft},valueVisibleStyle)],__source:{fileName:_jsxFileName,lineNumber:268}}),
 
@@ -246,3 +284,3 @@
 style:[defaultStyles.touchArea,touchOverflowStyle]},
-this._panResponder.panHandlers,{__source:{fileName:_jsxFileName,lineNumber:237}}),
+this._panResponder.panHandlers,{__source:{fileName:_jsxFileName,lineNumber:275}}),
 debugTouchArea===true&&this._renderDebugThumbTouchRect(thumbLeft))));},
@@ -375,2 +413,14 @@
 
+_setCurrentValueAnimated:function _setCurrentValueAnimated(value){
+var animationType=this.props.animationType;
+var animationConfig=_extends(
+{},
+DEFAULT_ANIMATION_CONFIGS[animationType],
+this.props.animationConfig,
+{toValue:value});
+
+
+_reactNative.Animated[animationType](this.state.value,animationConfig).start();},
+
+
 _fireChangeEvent:function _fireChangeEvent(event){
@@ -448,3 +498,3 @@ if(this.props[event]){
 style:[defaultStyles.debugThumbTouchArea,positionStyle],
-pointerEvents:"none",__source:{fileName:_jsxFileName,lineNumber:437}}));}});
+pointerEvents:"none",__source:{fileName:_jsxFileName,lineNumber:487}}));}});
 
@@ -451,0 +501,0 @@

package.json

 {
   "name": "react-native-slider",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A pure JavaScript <Slider /> component for react-native",
@@ -5,0 +5,0 @@ "main": "lib/Slider.js",

README.md

@@ -96,5 +96,9 @@ ## react-native-slider
 debugTouchArea        | bool     | Yes      | false                     | Set this to true to visually see the thumb touch rect in green.
+animateTransitions    | bool     | Yes      | false                     | Set to true if you want to use the default 'spring' animation
+animationType         | string   | Yes      | 'timing'                  | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).
+animationConfig       | object   | Yes      | undefined                 | Used to configure the animation parameters.  These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). 
 
+
 ---
 
 **MIT Licensed**

src/Slider.js

 'use strict';
 
 import React, {
-  Component, 
+  Component,
   PropTypes
@@ -12,7 +12,8 @@ } from "react";
   PanResponder,
-  View
+  View,
+  Easing
 } from "react-native";
 
-var shallowCompare = require('react-addons-shallow-compare');
-var styleEqual = require('style-equal');
+const shallowCompare = require('react-addons-shallow-compare'),
+      styleEqual = require('style-equal');
 
@@ -36,2 +37,18 @@ var TRACK_SIZE = 4;
 
+var DEFAULT_ANIMATION_CONFIGS = {
+  spring : {
+    friction : 7,
+    tension  : 100
+  },
+  timing : {
+    duration : 150,
+    easing   : Easing.inOut(Easing.ease),
+    delay    : 0
+  },
+  // decay : { // This has a serious bug
+  //   velocity     : 1,
+  //   deceleration : 0.997
+  // }
+};
+
 var Slider = React.createClass({
@@ -135,2 +152,17 @@ propTypes: {
     debugTouchArea: PropTypes.bool,
+
+    /**
+    * Set to true to animate values with default 'timing' animation type
+    */
+    animateTransitions : PropTypes.bool,
+
+    /**
+    * Custom Animation type. 'spring' or 'timing'.
+    */
+    animationType : PropTypes.oneOf(['spring', 'timing']),
+
+    /**
+    * Used to configure the animation parameters.  These are the same parameters in the Animated library.
+    */
+    animationConfig : PropTypes.object,
   },
@@ -157,2 +189,3 @@ getInitialState() {
       debugTouchArea: false,
+      animationType: 'timing'
     };
@@ -172,6 +205,11 @@ },
   componentWillReceiveProps: function(nextProps) {
-    var oldValue = this.props.value;
     var newValue = nextProps.value;
-    if (oldValue !== newValue) {
-      this._setCurrentValue(nextProps.value);
+
+    if (this.props.value !== newValue) {
+      if (this.props.animateTransitions) {
+        this._setCurrentValueAnimated(newValue);
+      }
+      else {
+        this._setCurrentValue(newValue);
+      }
     }
@@ -213,3 +251,3 @@ },
         //extrapolate: 'clamp',
-      })
+      });
     var valueVisibleStyle = {};
@@ -233,3 +271,3 @@ if (!allMeasured) {
         <View
-          style={[{backgroundColor: maximumTrackTintColor}, mainStyles.track, trackStyle]}
+          style={[{backgroundColor: maximumTrackTintColor,}, mainStyles.track, trackStyle]}
           onLayout={this._measureTrack} />
@@ -374,2 +412,14 @@ <Animated.View style={[mainStyles.track, trackStyle, minimumTrackStyle]} />
 
+  _setCurrentValueAnimated(value: number) {
+    var animationType   = this.props.animationType;
+    var animationConfig = Object.assign(
+          {},
+          DEFAULT_ANIMATION_CONFIGS[animationType],
+          this.props.animationConfig,
+          {toValue : value}
+        );
+
+    Animated[animationType](this.state.value, animationConfig).start();
+  },
+
   _fireChangeEvent(event) {
@@ -376,0 +426,0 @@ if (this.props[event]) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36914

increased by8.49%

Lines of code

811

increased by10.64%

Number of lines in readme file

104

increased by4%

No dependency changes