react-native-animated-overlay
Version:
React Native Animated Overlay support IOS & Android.
110 lines (55 loc) • 4.67 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/AnimatedOverlay.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();
var _react=require('react');var _react2=_interopRequireDefault(_react);
var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}
var styles=_reactNative.StyleSheet.create({
overlay:{
flex:1,
top:0,
left:0,
position:'absolute'}});var
AnimatedOverlay=function(_Component){_inherits(AnimatedOverlay,_Component);
function AnimatedOverlay(props){_classCallCheck(this,AnimatedOverlay);var _this=_possibleConstructorReturn(this,(AnimatedOverlay.__proto__||Object.getPrototypeOf(AnimatedOverlay)).call(this,
props));
_this.state={
opacity:new _reactNative.Animated.Value(props.initValue),
overlayShow:props.overlayShow};return _this;
}_createClass(AnimatedOverlay,[{key:'componentDidMount',value:function componentDidMount()
{
this.doAnimation();
}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(
nextProps){
if(this.props.overlayShow!==nextProps.overlayShow){
this.setState({overlayShow:nextProps.overlayShow});
}
}},{key:'componentDidUpdate',value:function componentDidUpdate()
{
this.doAnimation();
}},{key:'doAnimation',value:function doAnimation()
{var _props=
this.props,overlayShow=_props.overlayShow,opacity=_props.opacity,duration=_props.duration,onAnimationFinished=_props.onAnimationFinished,useNativeDriver=_props.useNativeDriver;
var toValue=overlayShow?opacity:0;
_reactNative.Animated.timing(this.state.opacity,{
toValue:toValue,
duration:duration,
useNativeDriver:useNativeDriver}).
start(function(){
onAnimationFinished(toValue);
});
}},{key:'render',value:function render()
{var
pointerEvents=this.props.pointerEvents;var _props2=
this.props,onPress=_props2.onPress,style=_props2.style,children=_props2.children;
var backgroundColor={backgroundColor:this.props.backgroundColor};
var opacity={opacity:this.state.opacity};
var size={
width:_reactNative.Dimensions.get('window').width,
height:_reactNative.Dimensions.get('window').height};
if(!pointerEvents)pointerEvents=this.state.overlayShow?'auto':'none';
return(
_react2.default.createElement(_reactNative.Animated.View,{
pointerEvents:pointerEvents,
style:[styles.overlay,backgroundColor,size,style,opacity],__source:{fileName:_jsxFileName,lineNumber:99}},
_react2.default.createElement(_reactNative.TouchableOpacity,{onPress:onPress,style:[styles.overlay,size],__source:{fileName:_jsxFileName,lineNumber:103}}),
children));
}}]);return AnimatedOverlay;}(_react.Component);AnimatedOverlay.defaultProps={onPress:function onPress(){},pointerEvents:null,backgroundColor:'#000',opacity:0.5,duration:200,overlayShow:false,initValue:0,onAnimationFinished:function onAnimationFinished(){},style:null,useNativeDriver:false,children:null};AnimatedOverlay.propTypes={onPress:require('prop-types').func,backgroundColor:require('prop-types').string,opacity:require('prop-types').number,duration:require('prop-types').number,overlayShow:require('prop-types').bool,pointerEvents:require('prop-types').string,initValue:require('prop-types').number,onAnimationFinished:require('prop-types').func,style:require('prop-types').any,useNativeDriver:require('prop-types').bool.isRequired,children:require('prop-types').any};exports.default=
AnimatedOverlay;