Merge pull request #1 from m4ttheweric/m4ttheweric/cover-screen

Added support for "coverScreen" option.
m4ttheweric · Apr 13, 2021 · eafdbd3 · eafdbd3
2 parents eca008f + 02dd352
commit eafdbd3
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 49 deletions.
diff --git a/packages/modal-enhanced-react-native-web/.babelrc b/packages/modal-enhanced-react-native-web/.babelrc
@@ -1,36 +1,52 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 1 versions", "ie >= 10"]
-      },
-      "modules": false,
-      "loose": true,
-      "useBuiltIns": true
-    }],
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 1 versions", "ie >= 10"]
+        },
+        "modules": false,
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
     "stage-0",
     "react",
     "react-native"
   ],
   "plugins": [
-    ["babel-plugin-transform-class-properties", {
-      "loose": true
-    }],
-    ["transform-object-rest-spread", {
-      "useBuiltIns": true
-    }],
-    ["transform-react-remove-prop-types", {
-      "mode": "wrap"
-    }],
-    ["module-resolver", {
-      "alias": {
-        "react-native": ["react-native-web"]
+    [
+      "babel-plugin-transform-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "transform-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    [
+      "transform-react-remove-prop-types",
+      {
+        "mode": "remove"
+        // had to change this to remove to avoid build errors
+      }
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "react-native": ["react-native-web"]
+        }
       }
-    }]
+    ]
   ],
   "env": {
     "commonjs": {
       "plugins": ["add-module-exports"]
     }
   }
-}
+}
diff --git a/packages/modal-enhanced-react-native-web/src/index.js b/packages/modal-enhanced-react-native-web/src/index.js
@@ -287,8 +287,8 @@ class ReactNativeModal extends Component {
 
   // User can define custom react-native-animatable animations, see PR #72
   buildAnimations = (props) => {
-    let animationIn = props.animationIn;
-    let animationOut = props.animationOut;
+    let { animationIn } = props;
+    let { animationOut } = props;
 
     if (isObject(animationIn)) {
       const animationName = JSON.stringify(animationIn);
@@ -373,7 +373,7 @@ class ReactNativeModal extends Component {
       );
     }
 
-    let animationOut = this.animationOut;
+    let { animationOut } = this;
 
     if (this.inSwipeClosingState) {
       this.inSwipeClosingState = false;

diff --git a/packages/modal-react-native-web/.babelrc b/packages/modal-react-native-web/.babelrc
@@ -1,36 +1,52 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 1 versions", "ie >= 10"]
-      },
-      "modules": false,
-      "loose": true,
-      "useBuiltIns": true
-    }],
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 1 versions", "ie >= 10"]
+        },
+        "modules": false,
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
     "stage-0",
     "react",
     "react-native"
   ],
   "plugins": [
-    ["transform-class-properties", {
-      "loose": true
-    }],
-    ["transform-object-rest-spread", {
-      "useBuiltIns": true
-    }],
-    ["transform-react-remove-prop-types", {
-      "mode": "wrap"
-    }],
-    ["module-resolver", {
-      "alias": {
-        "react-native": ["react-native-web"]
+    [
+      "transform-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "transform-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    [
+      "transform-react-remove-prop-types",
+      {
+        "mode": "remove"
+        // had to change this to remove to avoid build errors
+      }
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "react-native": ["react-native-web"]
+        }
       }
-    }]
+    ]
   ],
   "env": {
     "commonjs": {
       "plugins": ["add-module-exports"]
     }
   }
-}
+}
diff --git a/packages/modal-react-native-web/src/index.js b/packages/modal-react-native-web/src/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Dimensions, Easing, Platform } from 'react-native';
+import { View, Animated, Dimensions, Easing, Platform } from 'react-native';
 
 import ModalPortal from './Portal';
 import * as ariaAppHider from './ariaAppHider';
@@ -27,6 +27,7 @@ export default class Modal extends Component {
     children: PropTypes.node.isRequired,
     ariaHideApp: PropTypes.bool,
     appElement: PropTypes.instanceOf(SafeHTMLElement),
+    coverScreen: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -38,6 +39,7 @@ export default class Modal extends Component {
     onDismiss: () => {},
     ariaHideApp: true,
     appElement: null,
+    coverScreen: true,
   };
 
   constructor(props) {
@@ -245,7 +247,7 @@ export default class Modal extends Component {
       : styles.bgNotTransparent;
     const animationStyle = this.getAnimationStyle();
 
-    return (
+    return this.props.coverScreen ? (
       <ModalPortal>
         <Animated.View
           aria-modal="true"
@@ -254,6 +256,15 @@ export default class Modal extends Component {
           {children}
         </Animated.View>
       </ModalPortal>
+    ) : (
+      <View>
+        <Animated.View
+          aria-modal="true"
+          style={[styles.baseStyle, transparentStyle, animationStyle]}
+        >
+          {children}
+        </Animated.View>
+      </View>
     );
   }
 }