modal-react-native-web/dist/index.js

React native modal implementation for web

Object.defineProperty(exports,"__esModule",{value:true});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 _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _reactNativeWeb=require('react-native-web');var _Portal=require('./Portal');var _Portal2=_interopRequireDefault(_Portal);var _ariaAppHider=require('./ariaAppHider');var ariaAppHider=_interopRequireWildcard(_ariaAppHider);var _utils=require('./utils');var _styles=require('./styles');var _styles2=_interopRequireDefault(_styles);function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}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 ariaHiddenInstances=0;var Modal=function(_Component){_inherits(Modal,_Component);_createClass(Modal,null,[{key:'setAppElement',value:function setAppElement(element){ariaAppHider.setElement(element);}}]);function Modal(props){_classCallCheck(this,Modal);var _this=_possibleConstructorReturn(this,(Modal.__proto__||Object.getPrototypeOf(Modal)).call(this,props));_this.animateFadeIn=function(callback){if(_this.state.animationFade){_this.state.animationFade.stop();}var animationFade=_reactNativeWeb.Animated.timing(_this.state.opacityFade,{toValue:1,duration:300});_this.setState({animationFade:animationFade},function(){requestAnimationFrame(function(){_this.setState({styleFade:{display:'flex'}},function(){return _this.state.animationFade.start(callback);});});});};_this.animateFadeOut=function(callback){if(_this.state.animationFade){_this.state.animationFade.stop();}var animationFade=_reactNativeWeb.Animated.timing(_this.state.opacityFade,{toValue:0,duration:300});_this.setState({animationFade:animationFade},function(){requestAnimationFrame(function(){_this.state.animationFade.start(function(){_this.setState({styleFade:{display:'none'}},callback);});});});};_this.animateSlideIn=function(callback){if(_this.state.animationSlide){_this.state.animationSlide.stop();}var animationSlide=_reactNativeWeb.Animated.timing(_this.state.slideTranslation,{toValue:1,easing:_reactNativeWeb.Easing.out(_reactNativeWeb.Easing.poly(4)),duration:300});_this.setState({animationSlide:animationSlide},function(){requestAnimationFrame(function(){_this.setState({styleFade:{display:'flex'}},function(){return _this.state.animationSlide.start(callback);});});});};_this.animateSlideOut=function(callback){if(_this.state.animationSlide){_this.state.animationSlide.stop();}var animationSlide=_reactNativeWeb.Animated.timing(_this.state.slideTranslation,{toValue:0,easing:_reactNativeWeb.Easing.in(_reactNativeWeb.Easing.poly(4)),duration:300});_this.setState({animationSlide:animationSlide},function(){requestAnimationFrame(function(){_this.state.animationSlide.start(function(){_this.setState({styleFade:{display:'none'}},callback);});});});};_this.state={animationSlide:null,animationFade:null,styleFade:{display:props.visible?'flex':'none'},opacityFade:new _reactNativeWeb.Animated.Value(0),slideTranslation:new _reactNativeWeb.Animated.Value(0)};return _this;}_createClass(Modal,[{key:'componentDidMount',value:function componentDidMount(){if(this.props.visible)this.handleShow();}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(_ref){var visible=_ref.visible;if(visible&&!this.props.visible)this.handleShow();if(!visible&&this.props.visible)this.handleClose();}},{key:'handleShow',value:function handleShow(){var _props=this.props,animationType=_props.animationType,onShow=_props.onShow,ariaHideApp=_props.ariaHideApp,appElement=_props.appElement;if(ariaHideApp){ariaHiddenInstances+=1;ariaAppHider.hide(appElement);}if(animationType==='slide'){this.animateSlideIn(onShow);}else if(animationType==='fade'){this.animateFadeIn(onShow);}else{onShow();}}},{key:'handleClose',value:function handleClose(){var _props2=this.props,animationType=_props2.animationType,onDismiss=_props2.onDismiss,ariaHideApp=_props2.ariaHideApp,appElement=_props2.appElement;if(animationType==='slide'){this.animateSlideOut(onDismiss);}else if(animationType==='fade'){this.animateFadeOut(onDismiss);}else{onDismiss();}if(ariaHideApp&&ariaHiddenInstances>0){ariaHiddenInstances-=1;if(ariaHiddenInstances===0){ariaAppHider.show(appElement);}}}},{key:'getAnimationStyle',value:function getAnimationStyle(){var _props3=this.props,visible=_props3.visible,animationType=_props3.animationType;var styleFade=this.state.styleFade;if(animationType==='slide'){return[{transform:[{translateY:this.state.slideTranslation.interpolate({inputRange:[0,1],outputRange:[_reactNativeWeb.Dimensions.get('window').height,0],extrapolate:'clamp'})}]},styleFade];}if(animationType==='fade'){return[{opacity:this.state.opacityFade},styleFade];}return[_styles2.default[visible?'visible':'hidden']];}},{key:'render',value:function render(){var _props4=this.props,transparent=_props4.transparent,children=_props4.children;var transparentStyle=transparent?_styles2.default.bgTransparent:_styles2.default.bgNotTransparent;var animationStyle=this.getAnimationStyle();return _react2.default.createElement(_Portal2.default,null,_react2.default.createElement(_reactNativeWeb.Animated.View,{'aria-modal':'true',style:[_styles2.default.baseStyle,transparentStyle,animationStyle]},children));}}]);return Modal;}(_react.Component);Modal.defaultProps={animationType:'none',transparent:false,visible:true,onShow:function onShow(){},onRequestClose:function onRequestClose(){},onDismiss:function onDismiss(){},ariaHideApp:true,appElement:null};exports.default=Modal;Modal.propTypes=process.env.NODE_ENV!=="production"?{animationType:_propTypes2.default.oneOf(['none','slide','fade']),transparent:_propTypes2.default.bool,visible:_propTypes2.default.bool,onRequestClose:_reactNativeWeb.Platform.isTV||_reactNativeWeb.Platform.OS==='android'?_propTypes2.default.func.isRequired:_propTypes2.default.func,onShow:_propTypes2.default.func,onDismiss:_propTypes2.default.func,children:_propTypes2.default.node.isRequired,ariaHideApp:_propTypes2.default.bool,appElement:_propTypes2.default.instanceOf(_utils.SafeHTMLElement)}:{};module.exports=exports.default;