Merge pull request #142 from simpleTechs/feature/more-style-props

allow overrides of the wrapperStyle
testshallpass · Sep 29, 2018 · 089586b · 089586b
2 parents 9493d18 + 47aab49
commit 089586b
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 86 deletions.
diff --git a/DropdownAlert.js b/DropdownAlert.js
@@ -21,6 +21,7 @@ export default class DropdownAlert extends Component {
     closeInterval: PropTypes.number,
     startDelta: PropTypes.number,
     endDelta: PropTypes.number,
+    wrapperStyle: PropTypes.object,
     containerStyle: PropTypes.object,
     safeAreaStyle: PropTypes.object,
     titleStyle: PropTypes.object,
@@ -74,6 +75,7 @@ export default class DropdownAlert extends Component {
     tapToCloseEnabled: true,
     panResponderEnabled: true,
     replaceEnabled: true,
+    wrapperStyle: null,
     containerStyle: {
       padding: 16,
       flexDirection: 'row',
@@ -474,7 +476,7 @@ export default class DropdownAlert extends Component {
       };
       if (this.props.zIndex != null) wrapperStyle['zIndex'] = this.props.zIndex;
       return (
-        <Animated.View ref={ref => this.mainView = ref} {...this._panResponder.panHandlers} style={wrapperStyle}>
+        <Animated.View ref={ref => this.mainView = ref} {...this._panResponder.panHandlers} style={[wrapperStyle, this.props.wrapperStyle]}>
           <TouchableOpacity
             activeOpacity={!this.props.tapToCloseEnabled || showCancel ? 1 : 0.95}
             onPress={!this.props.tapToCloseEnabled ? null : () => this.close('tap')}

diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ export default class Example extends Component {
 | ```activeStatusBarBackgroundColor``` | String | StatusBar backgroundColor when alert is open | It takes on the backgroundColor of alert if predefined else default or provided prop
 | ```inactiveStatusBarStyle``` | String  | StatusBar barStyle when alert dismisses | `StatusBar._defaultProps.barStyle.value`
 | ```inactiveStatusBarBackgroundColor``` | String  | StatusBar backgroundColor when alert dismisses | `StatusBar._defaultProps.backgroundColor.value`
+| ```wrapperStyle``` | Object  | styles for the view that wraps the container. For [React Native Web](https://github.com/necolas/react-native-web) support you might want to set this to `{ position: 'fixed' }` | ```null```
 | ```containerStyle``` | Object  | styles for container for custom type only | ```{ padding: 16, flexDirection: 'row' }```
 | ```zIndex``` | Number  | zIndex attribute on outermost container | null
 | ```titleStyle``` | Object | styles for title for all types | ```{       fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }```

diff --git a/__tests__/__snapshots__/DropdownAlert-test.js.snap b/__tests__/__snapshots__/DropdownAlert-test.js.snap
@@ -15,19 +15,22 @@ exports[`renders alert with zIndex correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-      "zIndex": 99,
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+        "zIndex": 99,
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -132,18 +135,21 @@ exports[`renders custom alert correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -245,18 +251,21 @@ exports[`renders custom alert with cancel correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -386,18 +395,21 @@ exports[`renders error alert correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -502,18 +514,21 @@ exports[`renders info alert correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -618,18 +633,21 @@ exports[`renders success alert correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity
@@ -734,18 +752,21 @@ exports[`renders warn alert correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
   style={
-    Object {
-      "elevation": 1,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "transform": Array [
-        Object {
-          "translateY": -100,
-        },
-      ],
-    }
+    Array [
+      Object {
+        "elevation": 1,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": -100,
+          },
+        ],
+      },
+      null,
+    ]
   }
 >
   <TouchableOpacity