@cake-fxd/rn-case/lib/CaseBackground/index.js

ReactNative Case

"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _lib=require("@cake-fxd/rn-elements/lib");var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _config=require("../util/config");var _px2dp=_interopRequireDefault(require("../util/px2dp"));var caseBgs=[require("../../assets/imgs/caseBg.png"),require("../../assets/imgs/caseBg2.png"),require("../../assets/imgs/caseBg3.png"),require("../../assets/imgs/caseBg4.png")];var BG_HEIGHT=(0,_px2dp["default"])(280);var CaseBackground=function CaseBackground(props){var imgSource=(0,_react.useMemo)(function(){return caseBgs[Math.floor(Math.random()*caseBgs.length)];},[]);var area=(0,_reactNativeSafeAreaContext.useSafeArea)();var _useState=(0,_react.useState)(new _reactNative.Animated.Value(BG_HEIGHT)),_useState2=(0,_slicedToArray2["default"])(_useState,1),translateY=_useState2[0];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2["default"])(_useState3,2),isLeave=_useState4[0],setLeaveStatus=_useState4[1];(0,_react.useEffect)(function(){_reactNative.Animated.timing(translateY,{toValue:1,duration:300,useNativeDriver:false,easing:_reactNative.Easing.ease}).start();},[]);function handleNextPress(){setLeaveStatus(true);_reactNative.DeviceEventEmitter.emit(_config.CASE_LEAVE_EVENT,true);}return _react["default"].createElement(_reactNative.View,{style:[styles.bgContainer,{paddingTop:(0,_px2dp["default"])(124)+area.top}]},_react["default"].createElement(_reactNative.View,{style:{zIndex:1,flex:1}},props.children,props.showNextButton&&isLeave===false&&_react["default"].createElement(_reactNative.View,{style:styles.nextButtonContainer},_react["default"].createElement(_lib.ScaleAnimate,null,_react["default"].createElement(_lib.NextButton,{onPress:handleNextPress})))),props.showCoverBg&&_react["default"].createElement(_reactNative.Animated.Image,{source:imgSource,resizeMode:"cover",style:[styles.imgBg,{transform:[{translateY:translateY}]}]}));};CaseBackground.defaultProps={showCoverBg:true,showNextButton:false};var styles=_reactNative.StyleSheet.create({bgContainer:{flex:1,backgroundColor:'#FFF4D2',flexDirection:'column',width:_config.WIDTH},imgBg:{width:_config.WIDTH,height:(0,_px2dp["default"])(280),position:'absolute',bottom:0,left:0,zIndex:0},nextButtonContainer:{position:'absolute',bottom:(0,_px2dp["default"])(60),width:_config.WIDTH,justifyContent:'center',alignItems:'center',zIndex:10}});var _default=_react["default"].memo(CaseBackground);exports["default"]=_default;