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

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

"use client";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _portal=_interopRequireDefault(require("../portal"));function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=(0,_getPrototypeOf2.default)(derived);return(0,_possibleConstructorReturn2.default)(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],(0,_getPrototypeOf2.default)(_this).constructor):derived.apply(_this,args));}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){function RCModal(props){var _this2;(0,_classCallCheck2.default)(this,RCModal);_this2=_callSuper(this,RCModal,[props]);_this2.backHandlerSubscription=null;_this2.onBackAndroid=function(){var onRequestClose=_this2.props.onRequestClose;if(typeof onRequestClose==='function'){return onRequestClose();}return false;};_this2.animateMask=function(visible){_this2.stopMaskAnim();_this2.state.opacity.setValue(_this2.getOpacity(!visible));_this2.animMask=_reactNative.Animated.timing(_this2.state.opacity,{toValue:_this2.getOpacity(visible),duration:_this2.props.animationDuration,useNativeDriver:true});_this2.animMask.start(function(){_this2.animMask=null;});};_this2.stopMaskAnim=function(){if(_this2.animMask){_this2.animMask.stop();_this2.animMask=null;}};_this2.stopDialogAnim=function(){if(_this2.animDialog){_this2.animDialog.stop();_this2.animDialog=null;}};_this2.animateDialog=function(visible){var _a;_this2.stopDialogAnim();_this2.animateMask(visible);var _this2$props=_this2.props,animationType=_this2$props.animationType,animationDuration=_this2$props.animationDuration;animationDuration=animationDuration;if(animationType!=='none'){if(animationType==='slide-up'||animationType==='slide-down'){_this2.state.position.setValue(_this2.getPosition(!visible));_this2.animDialog=_reactNative.Animated.timing(_this2.state.position,{toValue:_this2.getPosition(visible),duration:animationDuration,easing:visible?_reactNative.Easing.elastic(0.8):undefined,useNativeDriver:true});}else if(animationType==='fade'){_this2.animDialog=_reactNative.Animated.parallel([_reactNative.Animated.timing(_this2.state.opacity,{toValue:_this2.getOpacity(visible),duration:animationDuration,easing:visible?_reactNative.Easing.elastic(0.8):undefined,useNativeDriver:true}),_reactNative.Animated.spring(_this2.state.scale,{toValue:_this2.getScale(visible),useNativeDriver:true})]);}_this2.animDialog.start(function(){var _a;_this2.animDialog=null;if(!visible){_this2.setState({modalVisible:false});(_a=_this2.backHandlerSubscription)===null||_a===void 0?void 0:_a.remove();}if(_this2.props.onAnimationEnd){_this2.props.onAnimationEnd(visible);}});}else{if(!visible){_this2.setState({modalVisible:false});(_a=_this2.backHandlerSubscription)===null||_a===void 0?void 0:_a.remove();}}};_this2.close=function(){_this2.animateDialog(false);};_this2.onMaskClose=function(){var _a;if(_this2.props.maskClosable&&_this2.props.onClose){_this2.props.onClose();(_a=_this2.backHandlerSubscription)===null||_a===void 0?void 0:_a.remove();}};_this2.getPosition=function(visible){if(visible){return 0;}return _this2.props.animationType==='slide-down'?-screen.height:screen.height;};_this2.getScale=function(visible){return visible?1:1.05;};_this2.getOpacity=function(visible){return visible?1:0;};var visible=props.visible;_this2.state={position:new _reactNative.Animated.Value(_this2.getPosition(visible)),scale:new _reactNative.Animated.Value(_this2.getScale(visible)),opacity:new _reactNative.Animated.Value(_this2.getOpacity(visible)),modalVisible:visible};return _this2;}(0,_inherits2.default)(RCModal,_React$Component);return(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'){this.backHandlerSubscription=_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(){var _a;(_a=this.backHandlerSubscription)===null||_a===void 0?void 0:_a.remove();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}};var Modal=_portal.default;switch(props.modalType){case'modal':Modal=function Modal(p){return _react.default.createElement(_reactNative.Modal,(0,_extends2.default)({visible:true,transparent:true},p));};break;case'view':Modal=function Modal(p){return _react.default.createElement(_reactNative.View,(0,_extends2.default)({style:_reactNative.StyleSheet.absoluteFill},p));};}return _react.default.createElement(Modal,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)));}}]);}(_react.default.Component);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){},modalType:'portal'};var _default=RCModal;exports.default=_default;