Skip to content

Commit 089586b

Browse files
testshallpasstestshallpass
authored
Merge pull request #142 from simpleTechs/feature/more-style-props
allow overrides of the wrapperStyle
2 parents 9493d18 + 47aab49 commit 089586b

File tree

3 files changed

+110
-86
lines changed

3 files changed

+110
-86
lines changed

‎DropdownAlert.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default class DropdownAlert extends Component {
2121
closeInterval: PropTypes.number,
2222
startDelta: PropTypes.number,
2323
endDelta: PropTypes.number,
24+
wrapperStyle: PropTypes.object,
2425
containerStyle: PropTypes.object,
2526
safeAreaStyle: PropTypes.object,
2627
titleStyle: PropTypes.object,
@@ -74,6 +75,7 @@ export default class DropdownAlert extends Component {
7475
tapToCloseEnabled: true,
7576
panResponderEnabled: true,
7677
replaceEnabled: true,
78+
wrapperStyle: null,
7779
containerStyle: {
7880
padding: 16,
7981
flexDirection: 'row',
@@ -474,7 +476,7 @@ export default class DropdownAlert extends Component {
474476
};
475477
if (this.props.zIndex != null) wrapperStyle['zIndex'] = this.props.zIndex;
476478
return (
477-
<Animated.View ref={ref => this.mainView = ref} {...this._panResponder.panHandlers} style={wrapperStyle}>
479+
<Animated.View ref={ref => this.mainView = ref} {...this._panResponder.panHandlers} style={[wrapperStyle, this.props.wrapperStyle]}>
478480
<TouchableOpacity
479481
activeOpacity={!this.props.tapToCloseEnabled || showCancel ? 1 : 0.95}
480482
onPress={!this.props.tapToCloseEnabled ? null : () => this.close('tap')}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export default class Example extends Component {
8686
| ```activeStatusBarBackgroundColor``` | String | StatusBar backgroundColor when alert is open | It takes on the backgroundColor of alert if predefined else default or provided prop
8787
| ```inactiveStatusBarStyle``` | String | StatusBar barStyle when alert dismisses | `StatusBar._defaultProps.barStyle.value`
8888
| ```inactiveStatusBarBackgroundColor``` | String | StatusBar backgroundColor when alert dismisses | `StatusBar._defaultProps.backgroundColor.value`
89+
| ```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```
8990
| ```containerStyle``` | Object | styles for container for custom type only | ```{ padding: 16, flexDirection: 'row' }```
9091
| ```zIndex``` | Number | zIndex attribute on outermost container | null
9192
| ```titleStyle``` | Object | styles for title for all types | ```{ fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' }```

‎__tests__/__snapshots__/DropdownAlert-test.js.snap‎

Lines changed: 106 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,22 @@ exports[`renders alert with zIndex correctly 1`] = `
1515
onStartShouldSetResponder={[Function]}
1616
onStartShouldSetResponderCapture={[Function]}
1717
style={
18-
Object {
19-
"elevation": 1,
20-
"left": 0,
21-
"position": "absolute",
22-
"right": 0,
23-
"top": 0,
24-
"transform": Array [
25-
Object {
26-
"translateY": -100,
27-
},
28-
],
29-
"zIndex": 99,
30-
}
18+
Array [
19+
Object {
20+
"elevation": 1,
21+
"left": 0,
22+
"position": "absolute",
23+
"right": 0,
24+
"top": 0,
25+
"transform": Array [
26+
Object {
27+
"translateY": -100,
28+
},
29+
],
30+
"zIndex": 99,
31+
},
32+
null,
33+
]
3134
}
3235
>
3336
<TouchableOpacity
@@ -132,18 +135,21 @@ exports[`renders custom alert correctly 1`] = `
132135
onStartShouldSetResponder={[Function]}
133136
onStartShouldSetResponderCapture={[Function]}
134137
style={
135-
Object {
136-
"elevation": 1,
137-
"left": 0,
138-
"position": "absolute",
139-
"right": 0,
140-
"top": 0,
141-
"transform": Array [
142-
Object {
143-
"translateY": -100,
144-
},
145-
],
146-
}
138+
Array [
139+
Object {
140+
"elevation": 1,
141+
"left": 0,
142+
"position": "absolute",
143+
"right": 0,
144+
"top": 0,
145+
"transform": Array [
146+
Object {
147+
"translateY": -100,
148+
},
149+
],
150+
},
151+
null,
152+
]
147153
}
148154
>
149155
<TouchableOpacity
@@ -245,18 +251,21 @@ exports[`renders custom alert with cancel correctly 1`] = `
245251
onStartShouldSetResponder={[Function]}
246252
onStartShouldSetResponderCapture={[Function]}
247253
style={
248-
Object {
249-
"elevation": 1,
250-
"left": 0,
251-
"position": "absolute",
252-
"right": 0,
253-
"top": 0,
254-
"transform": Array [
255-
Object {
256-
"translateY": -100,
257-
},
258-
],
259-
}
254+
Array [
255+
Object {
256+
"elevation": 1,
257+
"left": 0,
258+
"position": "absolute",
259+
"right": 0,
260+
"top": 0,
261+
"transform": Array [
262+
Object {
263+
"translateY": -100,
264+
},
265+
],
266+
},
267+
null,
268+
]
260269
}
261270
>
262271
<TouchableOpacity
@@ -386,18 +395,21 @@ exports[`renders error alert correctly 1`] = `
386395
onStartShouldSetResponder={[Function]}
387396
onStartShouldSetResponderCapture={[Function]}
388397
style={
389-
Object {
390-
"elevation": 1,
391-
"left": 0,
392-
"position": "absolute",
393-
"right": 0,
394-
"top": 0,
395-
"transform": Array [
396-
Object {
397-
"translateY": -100,
398-
},
399-
],
400-
}
398+
Array [
399+
Object {
400+
"elevation": 1,
401+
"left": 0,
402+
"position": "absolute",
403+
"right": 0,
404+
"top": 0,
405+
"transform": Array [
406+
Object {
407+
"translateY": -100,
408+
},
409+
],
410+
},
411+
null,
412+
]
401413
}
402414
>
403415
<TouchableOpacity
@@ -502,18 +514,21 @@ exports[`renders info alert correctly 1`] = `
502514
onStartShouldSetResponder={[Function]}
503515
onStartShouldSetResponderCapture={[Function]}
504516
style={
505-
Object {
506-
"elevation": 1,
507-
"left": 0,
508-
"position": "absolute",
509-
"right": 0,
510-
"top": 0,
511-
"transform": Array [
512-
Object {
513-
"translateY": -100,
514-
},
515-
],
516-
}
517+
Array [
518+
Object {
519+
"elevation": 1,
520+
"left": 0,
521+
"position": "absolute",
522+
"right": 0,
523+
"top": 0,
524+
"transform": Array [
525+
Object {
526+
"translateY": -100,
527+
},
528+
],
529+
},
530+
null,
531+
]
517532
}
518533
>
519534
<TouchableOpacity
@@ -618,18 +633,21 @@ exports[`renders success alert correctly 1`] = `
618633
onStartShouldSetResponder={[Function]}
619634
onStartShouldSetResponderCapture={[Function]}
620635
style={
621-
Object {
622-
"elevation": 1,
623-
"left": 0,
624-
"position": "absolute",
625-
"right": 0,
626-
"top": 0,
627-
"transform": Array [
628-
Object {
629-
"translateY": -100,
630-
},
631-
],
632-
}
636+
Array [
637+
Object {
638+
"elevation": 1,
639+
"left": 0,
640+
"position": "absolute",
641+
"right": 0,
642+
"top": 0,
643+
"transform": Array [
644+
Object {
645+
"translateY": -100,
646+
},
647+
],
648+
},
649+
null,
650+
]
633651
}
634652
>
635653
<TouchableOpacity
@@ -734,18 +752,21 @@ exports[`renders warn alert correctly 1`] = `
734752
onStartShouldSetResponder={[Function]}
735753
onStartShouldSetResponderCapture={[Function]}
736754
style={
737-
Object {
738-
"elevation": 1,
739-
"left": 0,
740-
"position": "absolute",
741-
"right": 0,
742-
"top": 0,
743-
"transform": Array [
744-
Object {
745-
"translateY": -100,
746-
},
747-
],
748-
}
755+
Array [
756+
Object {
757+
"elevation": 1,
758+
"left": 0,
759+
"position": "absolute",
760+
"right": 0,
761+
"top": 0,
762+
"transform": Array [
763+
Object {
764+
"translateY": -100,
765+
},
766+
],
767+
},
768+
null,
769+
]
749770
}
750771
>
751772
<TouchableOpacity

0 commit comments

Comments
 (0)