@ant-design/react-native/lib/modal/ModalView.js

基于蚂蚁金服移动设计规范的 React Native 组件库

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));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=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _portal=_interopRequireDefault(require("../portal"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var styles=_reactNative.StyleSheet.create({wrap:{flex:1,backgroundColor:'rgba(0,0,0,0)'},mask:{backgroundColor:'black',opacity:0.5},content:{backgroundColor:'white'},absolute:{position:'absolute',top:0,bottom:0,left:0,right:0}});var screen=_reactNative.Dimensions.get('window');var RCModal=function(_React$Component){(0,_inherits2["default"])(RCModal,_React$Component);var _super=_createSuper(RCModal);function RCModal(props){var _this;(0,_classCallCheck2["default"])(this,RCModal);_this=_super.call(this,props);_this.onBackAndroid=function(){var onRequestClose=_this.props.onRequestClose;if(typeof onRequestClose==='function'){return onRequestClose();}return false;};_this.animateMask=function(visible){_this.stopMaskAnim();_this.state.opacity.setValue(_this.getOpacity(!visible));_this.animMask=_reactNative.Animated.timing(_this.state.opacity,{toValue:_this.getOpacity(visible),duration:_this.props.animationDuration,useNativeDriver:true});_this.animMask.start(function(){_this.animMask=null;});};_this.stopMaskAnim=function(){if(_this.animMask){_this.animMask.stop();_this.animMask=null;}};_this.stopDialogAnim=function(){if(_this.animDialog){_this.animDialog.stop();_this.animDialog=null;}};_this.animateDialog=function(visible){_this.stopDialogAnim();_this.animateMask(visible);var _this$props=_this.props,animationType=_this$props.animationType,animationDuration=_this$props.animationDuration;animationDuration=animationDuration;if(animationType!=='none'){if(animationType==='slide-up'||animationType==='slide-down'){_this.state.position.setValue(_this.getPosition(!visible));_this.animDialog=_reactNative.Animated.timing(_this.state.position,{toValue:_this.getPosition(visible),duration:animationDuration,easing:visible?_reactNative.Easing.elastic(0.8):undefined,useNativeDriver:true});}else if(animationType==='fade'){_this.animDialog=_reactNative.Animated.parallel([_reactNative.Animated.timing(_this.state.opacity,{toValue:_this.getOpacity(visible),duration:animationDuration,easing:visible?_reactNative.Easing.elastic(0.8):undefined,useNativeDriver:true}),_reactNative.Animated.spring(_this.state.scale,{toValue:_this.getScale(visible),useNativeDriver:true})]);}_this.animDialog.start(function(){_this.animDialog=null;if(!visible){_this.setState({modalVisible:false});_reactNative.BackHandler.removeEventListener('hardwareBackPress',_this.onBackAndroid);}if(_this.props.onAnimationEnd){_this.props.onAnimationEnd(visible);}});}else{if(!visible){_this.setState({modalVisible:false});_reactNative.BackHandler.removeEventListener('hardwareBackPress',_this.onBackAndroid);}}};_this.close=function(){_this.animateDialog(false);};_this.onMaskClose=function(){if(_this.props.maskClosable&&_this.props.onClose){_this.props.onClose();_reactNative.BackHandler.removeEventListener('hardwareBackPress',_this.onBackAndroid);}};_this.getPosition=function(visible){if(visible){return 0;}return _this.props.animationType==='slide-down'?-screen.height:screen.height;};_this.getScale=function(visible){return visible?1:1.05;};_this.getOpacity=function(visible){return visible?1:0;};var visible=props.visible;_this.state={position:new _reactNative.Animated.Value(_this.getPosition(visible)),scale:new _reactNative.Animated.Value(_this.getScale(visible)),opacity:new _reactNative.Animated.Value(_this.getOpacity(visible)),modalVisible:visible};return _this;}(0,_createClass2["default"])(RCModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.shouldComponentUpdate(nextProps,null)){this.setState({modalVisible:true});}}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){if(this.props.visible||this.props.visible!==nextProps.visible){return true;}if(nextState){if(nextState.modalVisible!==this.state.modalVisible){return true;}}return false;}},{key:"componentDidMount",value:function componentDidMount(){if(this.props.animateAppear&&this.props.animationType!=='none'){_reactNative.BackHandler.addEventListener('hardwareBackPress',this.onBackAndroid);this.componentDidUpdate({});}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var props=this.props;if(prevProps.visible!==props.visible){this.animateDialog(props.visible);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){_reactNative.BackHandler.removeEventListener('hardwareBackPress',this.onBackAndroid);this.stopDialogAnim();}},{key:"render",value:function render(){var props=this.props;if(!this.state.modalVisible){return null;}var animationStyleMap={none:{},'slide-up':{transform:[{translateY:this.state.position}]},'slide-down':{transform:[{translateY:this.state.position}]},fade:{transform:[{scale:this.state.scale}],opacity:this.state.opacity}};return _react["default"].createElement(_portal["default"],null,_react["default"].createElement(_reactNative.View,{style:[styles.wrap,props.wrapStyle]},_react["default"].createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.onMaskClose},_react["default"].createElement(_reactNative.Animated.View,{style:[styles.absolute,{opacity:this.state.opacity}]},_react["default"].createElement(_reactNative.View,{style:[styles.absolute,props.maskStyle]}))),_react["default"].createElement(_reactNative.Animated.View,{style:[styles.content,props.style,animationStyleMap[props.animationType]]},this.props.children)));}}]);return RCModal;}(_react["default"].Component);exports["default"]=RCModal;RCModal.defaultProps={wrapStyle:styles.wrap,maskStyle:styles.mask,animationType:'slide-up',animateAppear:false,animationDuration:300,visible:false,maskClosable:true,onClose:function onClose(){},onAnimationEnd:function onAnimationEnd(_visible){}};