WIP: support landscape orientation and switching between orientations

Author: a-golovanov

lib/components/overlay.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Animated, StyleSheet, Text } from "react-native";
+
+export const styles = StyleSheet.create( {
+    overlay: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: "#000"
+    },
+
+    overlayInner: {
+        top: 0,
+        right: 0,
+        height: "100%",
+        width: "100%"
+    }
+
+} );
+
+
+export default props => {
+
+    const { opacity, onPress } = props;
+
+    return (
+        <Animated.View
+            style={ [
+                styles.overlay,
+                {
+                    opacity: opacity.interpolate( {
+                        inputRange: [ 0, 1 ],
+                        outputRange: [ 0, 0.4 ]
+                    } )
+                }
+            ] }
+        >
+            <Text style={ styles.overlayInner } onPress={ onPress }/>
+        </Animated.View>
+    );
+
+}

lib/power-action-sheet-styles.js

@@ -5,28 +5,6 @@ const hairlineWidth = StyleSheet.hairlineWidth;
 
 const base = {
 
-    overlay: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        backgroundColor: "#000"
-    },
-
-    overlayInner: {
-        top: 0,
-        right: 0,
-        height: "100%",
-        width: "100%"
-    },
-
-    wrapper: {
-        flex: 1,
-        flexDirection: "row",
-        backgroundColor: "transparent",
-    },
-
     sheet: {
         position: "absolute",
         display: "flex",

lib/power-action-sheet.js

@@ -1,15 +1,16 @@
 import createStyles from "./power-action-sheet-styles";
+import Overlay from "./components/overlay";
 import CancelButton from "./components/cancel-button";
 
 import getWindowHeight from "./window-height";
 
 import React, { Component } from "react";
 import { element, func, number, object, oneOfType, string } from "prop-types";
-import { Animated, LayoutAnimation, Modal, Platform, ScrollView, Text, View } from "react-native";
+import { Animated, Dimensions, LayoutAnimation, Modal, Platform, ScrollView, View } from "react-native";
 
 
 const defaultOptions = {
-    maxHeightRatio: 0.9,
+    maxHeightRatio: .9,
     sheetView: () => null,
     onClose: () => {}
 };
@@ -49,9 +50,16 @@ class PowerActionSheet extends Component {
         visible: false,
         stage: Stage.closed,
         overlayOpacity: new Animated.Value( 0 ),
-        styles: {}
+        styles: null
     };
 
+    componentDidMount() {
+        Dimensions.addEventListener( "change", this._onDimensionsChange );
+    }
+
+    componentWillUnmount() {
+        Dimensions.removeEventListener( "change", this._onDimensionsChange );
+    }
 
     open = async ( options = {} ) => {
         if ( this.state.stage !== Stage.closed )
@@ -78,7 +86,7 @@ class PowerActionSheet extends Component {
             duration: easeInEaseOut.duration,
             useNativeDriver: true
         } ).start( async () => {
-            await this._promiseState( { stage: Stage.closed } );
+            await this._promiseState( { stage: Stage.closed, styles: null } );
             await this._promiseState( { visible: false, result } );
             if ( Platform.OS === "android" )
                 this._onDismiss();
@@ -121,21 +129,48 @@ class PowerActionSheet extends Component {
     async _promiseSheet( options ) {
         options = { ...pickDefaultOptions( this.props ), ...options };
 
-        const maxHeight = getWindowHeight() * options.maxHeightRatio;
-
         return this._promiseState( {
             options,
-            maxHeight,
             overflowing: false,
             visible: true,
-            stage: Stage.opening,
+            stage: Stage.opening
+        } );
+    }
+
+    _calcStyles() {
+        const maxHeight = getWindowHeight() * this.state.options.maxHeightRatio;
+
+        return {
+            maxHeight,
             styles: {
                 ...createStyles( this.props.styles ),
                 buttonUnderlayColor: this.props.buttonUnderlayColor
             }
-        } );
+        };
     }
 
+
+    _onDimensionsChange = () => {
+        switch ( this.state.stage ) {
+            case Stage.opened:
+            case Stage.opening:
+                this.setState( {
+                    stage: Stage.closed
+                }, () => {
+                    this.setState( {
+                        ...this._calcStyles(),
+                        stage: Stage.opening
+                    } );
+                } );
+                break;
+        }
+    };
+
+    _onShow = () => {
+        return this.setState( this._calcStyles() );
+    };
+
+
     _onLayout = event => {
         if ( this.state.stage !== Stage.opening )
             return;
@@ -154,70 +189,44 @@ class PowerActionSheet extends Component {
 
 
     render() {
-        const { visible } = this.state;
+        const { overlayOpacity, visible } = this.state;
 
         return (
             <Modal
                 visible={ visible }
                 transparent={ true }
                 animationType="none"
+                supportedOrientations={ [ "portrait", "landscape" ] }
                 onRequestClose={ this.cancel }
+                onShow={ this._onShow }
                 onDismiss={ this._onDismiss }
             >
-                { this._renderContent() }
+                <Overlay opacity={ overlayOpacity } onPress={ this.cancel }/>
+                { this._renderSheet() }
             </Modal>
         )
     }
 
-    _renderContent() {
-        const { stage, styles } = this.state;
 
-        if ( stage === Stage.closed )
-            return null;
+    _renderSheet() {
+        const { maxHeight, height, overflowing, stage, styles, options } = this.state;
 
-        return (
-            <View style={ styles.wrapper }>
-                { this._renderOverlay( styles ) }
-                { this._renderSheet( styles ) }
-            </View>
-        );
-    }
-
-    _renderOverlay( styles ) {
-        const { overlayOpacity } = this.state;
+        if ( !styles || stage === Stage.closed )
+            return null;
 
-        return (
-            <Animated.View
-                style={ [
-                    styles.overlay,
-                    {
-                        opacity: overlayOpacity.interpolate( {
-                            inputRange: [ 0, 1 ],
-                            outputRange: [ 0, 0.4 ]
-                        } )
-                    }
-                ] }
-            >
-                <Text style={ styles.overlayInner } onPress={ this.cancel }/>
-            </Animated.View>
-        );
-    }
 
+        const calculating = stage === Stage.opening;
+        const scrollEnabled = !calculating && overflowing;
 
-    _renderSheet( styles ) {
-        const { maxHeight, height, overflowing, stage, options } = this.state;
 
-        const calculating = stage === Stage.opening;
+        const sheetStyle = [ styles.sheet ];
 
-        const sheetStyle = [
-            styles.sheet
-        ];
         switch ( stage ) {
             case Stage.opened:
-                sheetStyle.push( { bottom: 0, height } );
+                sheetStyle.push( { bottom: 0, maxHeight: height } );
                 break;
             case Stage.closing:
-                sheetStyle.push( { top: "100%", height } );
+                sheetStyle.push( { top: "100%", maxHeight: height } );
                 break;
             case Stage.opening:
             case Stage.closed:
@@ -226,9 +235,9 @@ class PowerActionSheet extends Component {
         }
 
         const ScrollableContent = ( props ) => {
-            const scrollEnabled = !calculating && overflowing;
             return (
                 <ScrollView
+                    key="ScrollableContent"
                     { ...props }
                     scrollEnabled={ scrollEnabled }
                     showsHorizontalScrollIndicator={ scrollEnabled }
@@ -245,7 +254,7 @@ class PowerActionSheet extends Component {
                 <Sheet
                     styles={ styles }
                     calculating={ calculating }
-                    overflowing={ overflowing }
+                    overflowing={ scrollEnabled }
                     open={ this.open }
                     close={ this.close }
                     ScrollableContent={ ScrollableContent }