diff --git a/lib/Slider.js b/lib/Slider.js index 896f2613..475f24d0 100644 --- a/lib/Slider.js +++ b/lib/Slider.js @@ -1 +1 @@ -var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/moriyuu/works/newn/react-native-slider/src/Slider.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i=this.x&&y>=this.y&&x<=this.x+this.width&&y<=this.y+this.height;};var DEFAULT_ANIMATION_CONFIGS={spring:{friction:7,tension:100},timing:{duration:150,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),delay:0}};var Slider=function(_PureComponent){(0,_inherits2.default)(Slider,_PureComponent);var _super=_createSuper(Slider);function Slider(){var _this;(0,_classCallCheck2.default)(this,Slider);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this.state={containerSize:{width:0,height:0},trackSize:{width:0,height:0},thumbSize:{width:0,height:0},allMeasured:false,value:new _reactNative.Animated.Value(_this.props.value)};_this._handleStartShouldSetPanResponder=function(e){return _this._thumbHitTest(e);};_this._handlePanResponderGrant=function(){_this._previousLeft=_this._getThumbLeft(_this._getCurrentValue());_this._fireChangeEvent('onSlidingStart');};_this._handlePanResponderMove=function(e,gestureState){if(_this.props.disabled){return;}_this._setCurrentValue(_this._getValue(gestureState));_this._fireChangeEvent('onValueChange');};_this._handlePanResponderEnd=function(e,gestureState){if(_this.props.disabled){return;}_this._setCurrentValue(_this._getValue(gestureState));_this._fireChangeEvent('onSlidingComplete');};_this._measureContainer=function(x){_this._handleMeasure('containerSize',x);};_this._measureTrack=function(x){_this._handleMeasure('trackSize',x);};_this._measureThumb=function(x){_this._handleMeasure('thumbSize',x);};_this._handleMeasure=function(name,x){var _x$nativeEvent$layout=x.nativeEvent.layout,width=_x$nativeEvent$layout.width,height=_x$nativeEvent$layout.height;var size={width:width,height:height};var storeName="_"+name;var currentSize=_this[storeName];if(currentSize&&width===currentSize.width&&height===currentSize.height){return;}_this[storeName]=size;if(_this._containerSize&&_this._trackSize&&_this._thumbSize){_this.setState({containerSize:_this._containerSize,trackSize:_this._trackSize,thumbSize:_this._thumbSize,allMeasured:true});}};_this._getRatio=function(value){return(value-_this.props.minimumValue)/(_this.props.maximumValue-_this.props.minimumValue);};_this._getThumbLeft=function(value){var nonRtlRatio=_this._getRatio(value);var ratio=_reactNative.I18nManager.isRTL?1-nonRtlRatio:nonRtlRatio;return ratio*(_this.state.containerSize.width-_this.state.thumbSize.width);};_this._getValue=function(gestureState){var length=_this.state.containerSize.width-_this.state.thumbSize.width;var thumbLeft=_this._previousLeft+gestureState.dx;var nonRtlRatio=thumbLeft/length;var ratio=_reactNative.I18nManager.isRTL?1-nonRtlRatio:nonRtlRatio;if(_this.props.step){return Math.max(_this.props.minimumValue,Math.min(_this.props.maximumValue,_this.props.minimumValue+Math.round(ratio*(_this.props.maximumValue-_this.props.minimumValue)/_this.props.step)*_this.props.step));}return Math.max(_this.props.minimumValue,Math.min(_this.props.maximumValue,ratio*(_this.props.maximumValue-_this.props.minimumValue)+_this.props.minimumValue));};_this._getCurrentValue=function(){return _this.state.value.__getValue();};_this._setCurrentValue=function(value){_this.state.value.setValue(value);};_this._setCurrentValueAnimated=function(value){var animationType=_this.props.animationType;var animationConfig=(0,_extends2.default)({},DEFAULT_ANIMATION_CONFIGS[animationType],_this.props.animationConfig,{toValue:value});_reactNative.Animated[animationType](_this.state.value,animationConfig).start();};_this._fireChangeEvent=function(event){if(_this.props[event]){_this.props[event](_this._getCurrentValue());}};_this._getTouchOverflowSize=function(){var state=_this.state;var props=_this.props;var size={};if(state.allMeasured===true){size.width=Math.max(0,props.thumbTouchSize.width-state.thumbSize.width);size.height=Math.max(0,props.thumbTouchSize.height-state.containerSize.height);}return size;};_this._getTouchOverflowStyle=function(){var _this$_getTouchOverfl=_this._getTouchOverflowSize(),width=_this$_getTouchOverfl.width,height=_this$_getTouchOverfl.height;var touchOverflowStyle={};if(width!==undefined&&height!==undefined){var verticalMargin=-height/2;touchOverflowStyle.marginTop=verticalMargin;touchOverflowStyle.marginBottom=verticalMargin;var horizontalMargin=-width/2;touchOverflowStyle.marginLeft=horizontalMargin;touchOverflowStyle.marginRight=horizontalMargin;}if(_this.props.debugTouchArea===true){touchOverflowStyle.backgroundColor='orange';touchOverflowStyle.opacity=0.5;}return touchOverflowStyle;};_this._thumbHitTest=function(e){var nativeEvent=e.nativeEvent;var thumbTouchRect=_this._getThumbTouchRect();return thumbTouchRect.containsPoint(nativeEvent.locationX,nativeEvent.locationY);};_this._getThumbTouchRect=function(){var state=_this.state;var props=_this.props;var touchOverflowSize=_this._getTouchOverflowSize();return new Rect(touchOverflowSize.width/2+_this._getThumbLeft(_this._getCurrentValue())+(state.thumbSize.width-props.thumbTouchSize.width)/2,touchOverflowSize.height/2+(state.containerSize.height-props.thumbTouchSize.height)/2,props.thumbTouchSize.width,props.thumbTouchSize.height);};_this._renderDebugThumbTouchRect=function(thumbLeft){var thumbTouchRect=_this._getThumbTouchRect();var positionStyle={left:thumbLeft,top:thumbTouchRect.y,width:thumbTouchRect.width,height:thumbTouchRect.height};return _react.default.createElement(_reactNative.Animated.View,{style:[defaultStyles.debugThumbTouchArea,positionStyle],pointerEvents:"none",__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:484,columnNumber:7}});};_this._renderThumbImage=function(){var thumbImage=_this.props.thumbImage;if(!thumbImage)return;return _react.default.createElement(_reactNative.Image,{source:thumbImage,__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:496,columnNumber:12}});};return _this;}(0,_createClass2.default)(Slider,[{key:"componentWillMount",value:function componentWillMount(){this._panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:this._handleStartShouldSetPanResponder,onMoveShouldSetPanResponder:this._handleMoveShouldSetPanResponder,onPanResponderGrant:this._handlePanResponderGrant,onPanResponderMove:this._handlePanResponderMove,onPanResponderRelease:this._handlePanResponderEnd,onPanResponderTerminationRequest:this._handlePanResponderRequestEnd,onPanResponderTerminate:this._handlePanResponderEnd});}},{key:"componentWillReceiveProps",value:function componentWillReceiveProps(nextProps){var newValue=nextProps.value;if(this.props.value!==newValue){if(this.props.animateTransitions){this._setCurrentValueAnimated(newValue);}else{this._setCurrentValue(newValue);}}}},{key:"render",value:function render(){var _this$props=this.props,minimumValue=_this$props.minimumValue,maximumValue=_this$props.maximumValue,minimumTrackTintColor=_this$props.minimumTrackTintColor,maximumTrackTintColor=_this$props.maximumTrackTintColor,thumbTintColor=_this$props.thumbTintColor,thumbImage=_this$props.thumbImage,style=_this$props.style,trackStyle=_this$props.trackStyle,thumbStyle=_this$props.thumbStyle,debugTouchArea=_this$props.debugTouchArea,onValueChange=_this$props.onValueChange,thumbTouchSize=_this$props.thumbTouchSize,animationType=_this$props.animationType,animateTransitions=_this$props.animateTransitions,other=(0,_objectWithoutProperties2.default)(_this$props,["minimumValue","maximumValue","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","thumbImage","style","trackStyle","thumbStyle","debugTouchArea","onValueChange","thumbTouchSize","animationType","animateTransitions"]);var _this$state=this.state,value=_this$state.value,containerSize=_this$state.containerSize,trackSize=_this$state.trackSize,thumbSize=_this$state.thumbSize,allMeasured=_this$state.allMeasured;var mainStyles=defaultStyles;var thumbLeft=value.interpolate({inputRange:[minimumValue,maximumValue],outputRange:_reactNative.I18nManager.isRTL?[0,-(containerSize.width-thumbSize.width)]:[0,containerSize.width-thumbSize.width]});var minimumTrackWidth=value.interpolate({inputRange:[minimumValue,maximumValue],outputRange:[0,containerSize.width-thumbSize.width]});var valueVisibleStyle={};if(!allMeasured){valueVisibleStyle.opacity=0;}var minimumTrackStyle=_objectSpread({position:'absolute',width:_reactNative.Animated.add(minimumTrackWidth,thumbSize.width/2),backgroundColor:minimumTrackTintColor},valueVisibleStyle);var touchOverflowStyle=this._getTouchOverflowStyle();var animationConfig=other.animationConfig,disabled=other.disabled,onSlidingStart=other.onSlidingStart,onSlidingComplete=other.onSlidingComplete,step=other.step,_=other.value,containerViewProps=(0,_objectWithoutProperties2.default)(other,["animationConfig","disabled","onSlidingStart","onSlidingComplete","step","value"]);return _react.default.createElement(_reactNative.View,(0,_extends2.default)({},containerViewProps,{style:[mainStyles.container,style],onLayout:this._measureContainer,__self:this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:7}}),_react.default.createElement(_reactNative.View,{style:[{backgroundColor:maximumTrackTintColor},mainStyles.track,trackStyle],renderToHardwareTextureAndroid:true,onLayout:this._measureTrack,__self:this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:9}}),_react.default.createElement(_reactNative.Animated.View,{renderToHardwareTextureAndroid:true,style:[mainStyles.track,trackStyle,minimumTrackStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:9}}),_react.default.createElement(_reactNative.Animated.View,{onLayout:this._measureThumb,renderToHardwareTextureAndroid:true,style:[{backgroundColor:thumbTintColor},mainStyles.thumb,thumbStyle,_objectSpread({transform:[{translateX:thumbLeft},{translateY:0}]},valueVisibleStyle)],__self:this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:9}},this._renderThumbImage()),_react.default.createElement(_reactNative.View,(0,_extends2.default)({renderToHardwareTextureAndroid:true,style:[defaultStyles.touchArea,touchOverflowStyle]},this._panResponder.panHandlers,{__self:this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:9}}),debugTouchArea===true&&this._renderDebugThumbTouchRect(minimumTrackWidth)));}},{key:"_getPropsForComponentUpdate",value:function _getPropsForComponentUpdate(props){var value=props.value,onValueChange=props.onValueChange,onSlidingStart=props.onSlidingStart,onSlidingComplete=props.onSlidingComplete,style=props.style,trackStyle=props.trackStyle,thumbStyle=props.thumbStyle,otherProps=(0,_objectWithoutProperties2.default)(props,["value","onValueChange","onSlidingStart","onSlidingComplete","style","trackStyle","thumbStyle"]);return otherProps;}},{key:"_handleMoveShouldSetPanResponder",value:function _handleMoveShouldSetPanResponder(){return false;}},{key:"_handlePanResponderRequestEnd",value:function _handlePanResponderRequestEnd(e,gestureState){return false;}}]);return Slider;}(_react.PureComponent);exports.default=Slider;Slider.defaultProps={value:0,minimumValue:0,maximumValue:1,step:0,minimumTrackTintColor:'#3f3f3f',maximumTrackTintColor:'#b3b3b3',thumbTintColor:'#343434',thumbTouchSize:{width:40,height:40},debugTouchArea:false,animationType:'timing'};var defaultStyles=_reactNative.StyleSheet.create({container:{height:40,justifyContent:'center'},track:{height:TRACK_SIZE,borderRadius:TRACK_SIZE/2},thumb:{position:'absolute',width:THUMB_SIZE,height:THUMB_SIZE,borderRadius:THUMB_SIZE/2},touchArea:{position:'absolute',backgroundColor:'transparent',top:0,left:0,right:0,bottom:0},debugThumbTouchArea:{position:'absolute',backgroundColor:'green',opacity:0.5}}); \ No newline at end of file +var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/yskoht/prg/react-native-slider/src/Slider.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i=this.x&&y>=this.y&&x<=this.x+this.width&&y<=this.y+this.height;};var DEFAULT_ANIMATION_CONFIGS={spring:{friction:7,tension:100},timing:{duration:150,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),delay:0}};var Slider=function(_PureComponent){(0,_inherits2.default)(Slider,_PureComponent);var _super=_createSuper(Slider);function Slider(_props){var _this;(0,_classCallCheck2.default)(this,Slider);_this=_super.call(this,_props);_this._handleStartShouldSetPanResponder=function(e){return _this._thumbHitTest(e);};_this._handlePanResponderGrant=function(){_this._previousLeft=_this._getThumbLeft(_this._getCurrentValue());_this._fireChangeEvent('onSlidingStart');};_this._handlePanResponderMove=function(e,gestureState){if(_this.props.disabled){return;}_this._setCurrentValue(_this._getValue(gestureState));_this._fireChangeEvent('onValueChange');};_this._handlePanResponderEnd=function(e,gestureState){if(_this.props.disabled){return;}_this._setCurrentValue(_this._getValue(gestureState));_this._fireChangeEvent('onSlidingComplete');};_this._measureContainer=function(x){_this._handleMeasure('containerSize',x);};_this._measureTrack=function(x){_this._handleMeasure('trackSize',x);};_this._measureThumb=function(x){_this._handleMeasure('thumbSize',x);};_this._handleMeasure=function(name,x){var _x$nativeEvent$layout=x.nativeEvent.layout,width=_x$nativeEvent$layout.width,height=_x$nativeEvent$layout.height;var size={width:width,height:height};var storeName="_"+name;var currentSize=_this[storeName];if(currentSize&&width===currentSize.width&&height===currentSize.height){return;}_this[storeName]=size;if(_this._containerSize&&_this._trackSize&&_this._thumbSize){_this.setState({containerSize:_this._containerSize,trackSize:_this._trackSize,thumbSize:_this._thumbSize,allMeasured:true});}};_this._getRatio=function(value){return(value-_this.props.minimumValue)/(_this.props.maximumValue-_this.props.minimumValue);};_this._getThumbLeft=function(value){var nonRtlRatio=_this._getRatio(value);var ratio=_reactNative.I18nManager.isRTL?1-nonRtlRatio:nonRtlRatio;return ratio*(_this.state.containerSize.width-_this.state.thumbSize.width);};_this._getValue=function(gestureState){var length=_this.state.containerSize.width-_this.state.thumbSize.width;var thumbLeft=_this._previousLeft+gestureState.dx;var nonRtlRatio=thumbLeft/length;var ratio=_reactNative.I18nManager.isRTL?1-nonRtlRatio:nonRtlRatio;if(_this.props.step){return Math.max(_this.props.minimumValue,Math.min(_this.props.maximumValue,_this.props.minimumValue+Math.round(ratio*(_this.props.maximumValue-_this.props.minimumValue)/_this.props.step)*_this.props.step));}return Math.max(_this.props.minimumValue,Math.min(_this.props.maximumValue,ratio*(_this.props.maximumValue-_this.props.minimumValue)+_this.props.minimumValue));};_this._getCurrentValue=function(){return _this.state.value.__getValue();};_this._setCurrentValue=function(value){_this.state.value.setValue(value);};_this._setCurrentValueAnimated=function(value){var animationType=_this.props.animationType;var animationConfig=(0,_extends2.default)({},DEFAULT_ANIMATION_CONFIGS[animationType],_this.props.animationConfig,{toValue:value});_reactNative.Animated[animationType](_this.state.value,animationConfig).start();};_this._fireChangeEvent=function(event){if(_this.props[event]){_this.props[event](_this._getCurrentValue());}};_this._getTouchOverflowSize=function(){var state=_this.state;var props=_this.props;var size={};if(state.allMeasured===true){size.width=Math.max(0,props.thumbTouchSize.width-state.thumbSize.width);size.height=Math.max(0,props.thumbTouchSize.height-state.containerSize.height);}return size;};_this._getTouchOverflowStyle=function(){var _this$_getTouchOverfl=_this._getTouchOverflowSize(),width=_this$_getTouchOverfl.width,height=_this$_getTouchOverfl.height;var touchOverflowStyle={};if(width!==undefined&&height!==undefined){var verticalMargin=-height/2;touchOverflowStyle.marginTop=verticalMargin;touchOverflowStyle.marginBottom=verticalMargin;var horizontalMargin=-width/2;touchOverflowStyle.marginLeft=horizontalMargin;touchOverflowStyle.marginRight=horizontalMargin;}if(_this.props.debugTouchArea===true){touchOverflowStyle.backgroundColor='orange';touchOverflowStyle.opacity=0.5;}return touchOverflowStyle;};_this._thumbHitTest=function(e){var nativeEvent=e.nativeEvent;var thumbTouchRect=_this._getThumbTouchRect();return thumbTouchRect.containsPoint(nativeEvent.locationX,nativeEvent.locationY);};_this._getThumbTouchRect=function(){var state=_this.state;var props=_this.props;var touchOverflowSize=_this._getTouchOverflowSize();return new Rect(touchOverflowSize.width/2+_this._getThumbLeft(_this._getCurrentValue())+(state.thumbSize.width-props.thumbTouchSize.width)/2,touchOverflowSize.height/2+(state.containerSize.height-props.thumbTouchSize.height)/2,props.thumbTouchSize.width,props.thumbTouchSize.height);};_this._renderDebugThumbTouchRect=function(thumbLeft){var thumbTouchRect=_this._getThumbTouchRect();var positionStyle={left:thumbLeft,top:thumbTouchRect.y,width:thumbTouchRect.width,height:thumbTouchRect.height};return _react.default.createElement(_reactNative.Animated.View,{style:[defaultStyles.debugThumbTouchArea,positionStyle],pointerEvents:"none",__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:484,columnNumber:7}});};_this._renderThumbImage=function(){var thumbImage=_this.props.thumbImage;if(!thumbImage)return;return _react.default.createElement(_reactNative.Image,{source:thumbImage,__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:496,columnNumber:12}});};_this.state={containerSize:{width:0,height:0},trackSize:{width:0,height:0},thumbSize:{width:0,height:0},allMeasured:false,value:new _reactNative.Animated.Value(_props.value)};_this._panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:_this._handleStartShouldSetPanResponder,onMoveShouldSetPanResponder:_this._handleMoveShouldSetPanResponder,onPanResponderGrant:_this._handlePanResponderGrant,onPanResponderMove:_this._handlePanResponderMove,onPanResponderRelease:_this._handlePanResponderEnd,onPanResponderTerminationRequest:_this._handlePanResponderRequestEnd,onPanResponderTerminate:_this._handlePanResponderEnd});return _this;}(0,_createClass2.default)(Slider,[{key:"componentDidUpdate",value:function componentDidUpdate(_ref){var value=_ref.value;if(this.props.value!==value){if(this.props.animateTransitions){this._setCurrentValueAnimated(this.props.value);}else{this._setCurrentValue(this.props.value);}}}},{key:"render",value:function render(){var _this$props=this.props,minimumValue=_this$props.minimumValue,maximumValue=_this$props.maximumValue,minimumTrackTintColor=_this$props.minimumTrackTintColor,maximumTrackTintColor=_this$props.maximumTrackTintColor,thumbTintColor=_this$props.thumbTintColor,thumbImage=_this$props.thumbImage,style=_this$props.style,trackStyle=_this$props.trackStyle,thumbStyle=_this$props.thumbStyle,debugTouchArea=_this$props.debugTouchArea,onValueChange=_this$props.onValueChange,thumbTouchSize=_this$props.thumbTouchSize,animationType=_this$props.animationType,animateTransitions=_this$props.animateTransitions,other=(0,_objectWithoutProperties2.default)(_this$props,["minimumValue","maximumValue","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","thumbImage","style","trackStyle","thumbStyle","debugTouchArea","onValueChange","thumbTouchSize","animationType","animateTransitions"]);var _this$state=this.state,value=_this$state.value,containerSize=_this$state.containerSize,trackSize=_this$state.trackSize,thumbSize=_this$state.thumbSize,allMeasured=_this$state.allMeasured;var mainStyles=defaultStyles;var thumbLeft=value.interpolate({inputRange:[minimumValue,maximumValue],outputRange:_reactNative.I18nManager.isRTL?[0,-(containerSize.width-thumbSize.width)]:[0,containerSize.width-thumbSize.width]});var minimumTrackWidth=value.interpolate({inputRange:[minimumValue,maximumValue],outputRange:[0,containerSize.width-thumbSize.width]});var valueVisibleStyle={};if(!allMeasured){valueVisibleStyle.opacity=0;}var minimumTrackStyle=_objectSpread({position:'absolute',width:_reactNative.Animated.add(minimumTrackWidth,thumbSize.width/2),backgroundColor:minimumTrackTintColor},valueVisibleStyle);var touchOverflowStyle=this._getTouchOverflowStyle();var animationConfig=other.animationConfig,disabled=other.disabled,onSlidingStart=other.onSlidingStart,onSlidingComplete=other.onSlidingComplete,step=other.step,_=other.value,containerViewProps=(0,_objectWithoutProperties2.default)(other,["animationConfig","disabled","onSlidingStart","onSlidingComplete","step","value"]);return _react.default.createElement(_reactNative.View,(0,_extends2.default)({},containerViewProps,{style:[mainStyles.container,style],onLayout:this._measureContainer,__self:this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:7}}),_react.default.createElement(_reactNative.View,{style:[{backgroundColor:maximumTrackTintColor},mainStyles.track,trackStyle],renderToHardwareTextureAndroid:true,onLayout:this._measureTrack,__self:this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:9}}),_react.default.createElement(_reactNative.Animated.View,{renderToHardwareTextureAndroid:true,style:[mainStyles.track,trackStyle,minimumTrackStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:9}}),_react.default.createElement(_reactNative.Animated.View,{onLayout:this._measureThumb,renderToHardwareTextureAndroid:true,style:[{backgroundColor:thumbTintColor},mainStyles.thumb,thumbStyle,_objectSpread({transform:[{translateX:thumbLeft},{translateY:0}]},valueVisibleStyle)],__self:this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:9}},this._renderThumbImage()),_react.default.createElement(_reactNative.View,(0,_extends2.default)({renderToHardwareTextureAndroid:true,style:[defaultStyles.touchArea,touchOverflowStyle]},this._panResponder.panHandlers,{__self:this,__source:{fileName:_jsxFileName,lineNumber:233,columnNumber:9}}),debugTouchArea===true&&this._renderDebugThumbTouchRect(minimumTrackWidth)));}},{key:"_getPropsForComponentUpdate",value:function _getPropsForComponentUpdate(props){var value=props.value,onValueChange=props.onValueChange,onSlidingStart=props.onSlidingStart,onSlidingComplete=props.onSlidingComplete,style=props.style,trackStyle=props.trackStyle,thumbStyle=props.thumbStyle,otherProps=(0,_objectWithoutProperties2.default)(props,["value","onValueChange","onSlidingStart","onSlidingComplete","style","trackStyle","thumbStyle"]);return otherProps;}},{key:"_handleMoveShouldSetPanResponder",value:function _handleMoveShouldSetPanResponder(){return false;}},{key:"_handlePanResponderRequestEnd",value:function _handlePanResponderRequestEnd(e,gestureState){return false;}}]);return Slider;}(_react.PureComponent);exports.default=Slider;Slider.defaultProps={value:0,minimumValue:0,maximumValue:1,step:0,minimumTrackTintColor:'#3f3f3f',maximumTrackTintColor:'#b3b3b3',thumbTintColor:'#343434',thumbTouchSize:{width:40,height:40},debugTouchArea:false,animationType:'timing'};var defaultStyles=_reactNative.StyleSheet.create({container:{height:40,justifyContent:'center'},track:{height:TRACK_SIZE,borderRadius:TRACK_SIZE/2},thumb:{position:'absolute',width:THUMB_SIZE,height:THUMB_SIZE,borderRadius:THUMB_SIZE/2},touchArea:{position:'absolute',backgroundColor:'transparent',top:0,left:0,right:0,bottom:0},debugThumbTouchArea:{position:'absolute',backgroundColor:'green',opacity:0.5}}); \ No newline at end of file diff --git a/src/Slider.js b/src/Slider.js index 68574f38..f830ef8d 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -100,15 +100,17 @@ export default class Slider extends PureComponent { _thumbSize: any _previousLeft: number - state = { - containerSize: { width: 0, height: 0 }, - trackSize: { width: 0, height: 0 }, - thumbSize: { width: 0, height: 0 }, - allMeasured: false, - value: new Animated.Value(this.props.value), - }; + constructor(props: Props) { + super(props); + + this.state = { + containerSize: { width: 0, height: 0 }, + trackSize: { width: 0, height: 0 }, + thumbSize: { width: 0, height: 0 }, + allMeasured: false, + value: new Animated.Value(props.value), + }; - componentWillMount() { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder, onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder, @@ -120,14 +122,12 @@ export default class Slider extends PureComponent { }); } - componentWillReceiveProps(nextProps: Props) { - const newValue = nextProps.value; - - if (this.props.value !== newValue) { + componentDidUpdate({value}: Props) { + if (this.props.value !== value) { if (this.props.animateTransitions) { - this._setCurrentValueAnimated(newValue); + this._setCurrentValueAnimated(this.props.value); } else { - this._setCurrentValue(newValue); + this._setCurrentValue(this.props.value); } } }