@expo/react-native-action-sheet/lib/commonjs/ActionSheet/CustomActionSheet.js

A cross-platform ActionSheet for React Native

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");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 _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));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=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _ActionGroup=_interopRequireDefault(require("./ActionGroup"));var _jsxFileName="/home/runner/work/react-native-action-sheet/react-native-action-sheet/src/ActionSheet/CustomActionSheet.tsx";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{Date.prototype.toString.call(Reflect.construct(Date,[],function(){}));return true;}catch(e){return false;}}var OPACITY_ANIMATION_IN_TIME=225;var OPACITY_ANIMATION_OUT_TIME=195;var EASING_OUT=_reactNative.Easing.bezier(0.25,0.46,0.45,0.94);var EASING_IN=_reactNative.Easing.out(EASING_OUT);var ESCAPE_KEY='Escape';var CustomActionSheet=function(_React$Component){(0,_inherits2.default)(CustomActionSheet,_React$Component);var _super=_createSuper(CustomActionSheet);function CustomActionSheet(){var _this;(0,_classCallCheck2.default)(this,CustomActionSheet);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_this._actionSheetHeight=360;_this.state={isVisible:false,isAnimating:false,options:null,onSelect:null,overlayOpacity:new _reactNative.Animated.Value(0),sheetOpacity:new _reactNative.Animated.Value(0)};_this._deferAfterAnimation=undefined;_this._handleWebKeyDown=function(event){if(event.key===ESCAPE_KEY&&_this.state.isVisible){event.preventDefault();_this._selectCancelButton();}};_this._setActionSheetHeight=function(_ref){var nativeEvent=_ref.nativeEvent;return _this._actionSheetHeight=nativeEvent.layout.height;};_this.showActionSheetWithOptions=function(options,onSelect){var _this$state=_this.state,isVisible=_this$state.isVisible,overlayOpacity=_this$state.overlayOpacity,sheetOpacity=_this$state.sheetOpacity;var _this$props$useNative=_this.props.useNativeDriver,useNativeDriver=_this$props$useNative===void 0?true:_this$props$useNative;if(isVisible){_this._deferAfterAnimation=_this.showActionSheetWithOptions.bind((0,_assertThisInitialized2.default)(_this),options,onSelect);return;}_this.setState({options:options,onSelect:onSelect,isVisible:true,isAnimating:true});overlayOpacity.setValue(0);sheetOpacity.setValue(0);_reactNative.Animated.parallel([_reactNative.Animated.timing(overlayOpacity,{toValue:0.32,easing:EASING_OUT,duration:OPACITY_ANIMATION_IN_TIME,useNativeDriver:useNativeDriver}),_reactNative.Animated.timing(sheetOpacity,{toValue:1,easing:EASING_OUT,duration:OPACITY_ANIMATION_IN_TIME,useNativeDriver:useNativeDriver})]).start(function(result){if(result.finished){_this.setState({isAnimating:false});_this._deferAfterAnimation=undefined;}});_reactNative.BackHandler.addEventListener('actionSheetHardwareBackPress',_this._selectCancelButton);};_this._selectCancelButton=function(){var options=_this.state.options;if(!options){return false;}if(typeof options.cancelButtonIndex==='undefined'){return false;}else if(typeof options.cancelButtonIndex==='number'){return _this._onSelect(options.cancelButtonIndex);}else{return _this._animateOut();}};_this._onSelect=function(index){var _this$state2=_this.state,isAnimating=_this$state2.isAnimating,onSelect=_this$state2.onSelect;if(isAnimating){return false;}if(onSelect){_this._deferAfterAnimation=onSelect.bind((0,_assertThisInitialized2.default)(_this),index);}return _this._animateOut();};_this._animateOut=function(){var _this$state3=_this.state,isAnimating=_this$state3.isAnimating,overlayOpacity=_this$state3.overlayOpacity,sheetOpacity=_this$state3.sheetOpacity;var _this$props$useNative2=_this.props.useNativeDriver,useNativeDriver=_this$props$useNative2===void 0?true:_this$props$useNative2;if(isAnimating){return false;}_reactNative.BackHandler.removeEventListener('actionSheetHardwareBackPress',_this._selectCancelButton);_this.setState({isAnimating:true});_reactNative.Animated.parallel([_reactNative.Animated.timing(overlayOpacity,{toValue:0,easing:EASING_IN,duration:OPACITY_ANIMATION_OUT_TIME,useNativeDriver:useNativeDriver}),_reactNative.Animated.timing(sheetOpacity,{toValue:0,easing:EASING_IN,duration:OPACITY_ANIMATION_OUT_TIME,useNativeDriver:useNativeDriver})]).start(function(result){if(result.finished){_this.setState({isVisible:false,isAnimating:false});if(_this._deferAfterAnimation){_this._deferAfterAnimation();}}});return true;};return _this;}(0,_createClass2.default)(CustomActionSheet,[{key:"componentDidMount",value:function componentDidMount(){if(_reactNative.Platform.OS==='web'){document.addEventListener('keydown',this._handleWebKeyDown);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(_reactNative.Platform.OS==='web'){document.removeEventListener('keydown',this._handleWebKeyDown);}}},{key:"render",value:function render(){var _this$state4=this.state,isVisible=_this$state4.isVisible,overlayOpacity=_this$state4.overlayOpacity,options=_this$state4.options;var useModal=options?options.autoFocus||options.useModal===true:false;var overlay=isVisible?React.createElement(_reactNative.Animated.View,{style:[styles.overlay,{opacity:overlayOpacity}],__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}}):null;var appContent=React.createElement(_reactNative.View,{style:styles.flexContainer,importantForAccessibility:isVisible?'no-hide-descendants':'auto',__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:7}},React.Children.only(this.props.children));return React.createElement(_reactNative.View,{pointerEvents:this.props.pointerEvents,style:styles.flexContainer,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:7}},appContent,isVisible&&!useModal&&React.createElement(React.Fragment,null,overlay,this._renderSheet()),isVisible&&useModal&&React.createElement(_reactNative.Modal,{animationType:"none",transparent:true,onRequestClose:this._selectCancelButton,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:11}},overlay,this._renderSheet()));}},{key:"_renderSheet",value:function _renderSheet(){var _this$state5=this.state,options=_this$state5.options,isAnimating=_this$state5.isAnimating,sheetOpacity=_this$state5.sheetOpacity;if(!options){return null;}var optionsArray=options.options,icons=options.icons,tintIcons=options.tintIcons,destructiveButtonIndex=options.destructiveButtonIndex,disabledButtonIndices=options.disabledButtonIndices,destructiveColor=options.destructiveColor,textStyle=options.textStyle,tintColor=options.tintColor,title=options.title,titleTextStyle=options.titleTextStyle,message=options.message,messageTextStyle=options.messageTextStyle,autoFocus=options.autoFocus,showSeparators=options.showSeparators,containerStyle=options.containerStyle,separatorStyle=options.separatorStyle,cancelButtonIndex=options.cancelButtonIndex,cancelButtonTintColor=options.cancelButtonTintColor;return React.createElement(_reactNative.TouchableWithoutFeedback,{importantForAccessibility:"yes",onPress:this._selectCancelButton,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:7}},React.createElement(_reactNative.Animated.View,{needsOffscreenAlphaCompositing:isAnimating,style:[styles.sheetContainer,{opacity:sheetOpacity,transform:[{translateY:sheetOpacity.interpolate({inputRange:[0,1],outputRange:[this._actionSheetHeight,0]})}]}],__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:9}},React.createElement(_reactNative.View,{style:styles.sheet,onLayout:this._setActionSheetHeight,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:11}},React.createElement(_ActionGroup.default,{options:optionsArray,icons:icons,tintIcons:tintIcons===undefined?true:tintIcons,cancelButtonIndex:cancelButtonIndex,cancelButtonTintColor:cancelButtonTintColor,destructiveButtonIndex:destructiveButtonIndex,destructiveColor:destructiveColor,disabledButtonIndices:disabledButtonIndices,onSelect:this._onSelect,startIndex:0,length:optionsArray.length,textStyle:textStyle||{},tintColor:tintColor,title:title||undefined,titleTextStyle:titleTextStyle,message:message||undefined,messageTextStyle:messageTextStyle,autoFocus:autoFocus,showSeparators:showSeparators,containerStyle:containerStyle,separatorStyle:separatorStyle,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:13}}))));}}]);return CustomActionSheet;}(React.Component);exports.default=CustomActionSheet;var styles=_reactNative.StyleSheet.create({flexContainer:{flex:1},overlay:{position:'absolute',top:0,right:0,bottom:0,left:0,backgroundColor:'black'},sheetContainer:{position:'absolute',left:0,right:0,bottom:0,top:0,backgroundColor:'transparent',alignItems:'flex-end',justifyContent:'center',flexDirection:'row'},sheet:{flex:1,backgroundColor:'transparent'}});
//# sourceMappingURL=CustomActionSheet.js.map