Skip to content

Commit 172ddb2

Browse files
testshallpasstestshallpass
authored
Merge pull request #273 from testshallpass/bugfix-padding-title-message-text
fix padding when title or message text is not provided
2 parents e1c1984 + 20d0ff8 commit 172ddb2

File tree

5 files changed

+75
-92
lines changed

5 files changed

+75
-92
lines changed

‎DropdownAlert.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export default class DropdownAlert extends Component {
167167
},
168168
defaultTextContainer: {
169169
flex: 1,
170-
paddingHorizontal: 8,
170+
padding: 8,
171171
},
172172
translucent: false,
173173
activeStatusBarStyle: 'light-content',
@@ -194,7 +194,6 @@ export default class DropdownAlert extends Component {
194194
constructor(props) {
195195
super(props);
196196
this.state = {
197-
animationValue: new Animated.Value(0),
198197
isOpen: false,
199198
topValue: 0,
200199
height: 0,
@@ -209,6 +208,7 @@ export default class DropdownAlert extends Component {
209208
};
210209
this.panResponder = this.getPanResponder();
211210
this.queue = new Queue();
211+
this.animationValue = new Animated.Value(0);
212212
}
213213
componentWillUnmount() {
214214
if (this.state.isOpen) {
@@ -386,7 +386,7 @@ export default class DropdownAlert extends Component {
386386
};
387387
animate = (toValue, duration = 450, onComplete = () => {}) => {
388388
const {useNativeDriver, isInteraction} = this.props;
389-
Animated.spring(this.state.animationValue, {
389+
Animated.spring(this.animationValue, {
390390
toValue: toValue,
391391
duration: duration,
392392
friction: 9,
@@ -512,31 +512,37 @@ export default class DropdownAlert extends Component {
512512
const src = isRemote ? {uri: source} : source;
513513
return <Image style={style} source={src} />;
514514
};
515-
_renderTitle = () => {
515+
_renderTitle = (title) => {
516516
if (this.props.renderTitle) {
517517
return this.props.renderTitle(this.props, this.alertData);
518518
}
519+
if (!title || title.length === 0) {
520+
return null;
521+
}
519522
const {titleTextProps, titleStyle, titleNumOfLines} = this.props;
520523
return (
521524
<Text
522525
{...titleTextProps}
523526
style={titleStyle}
524527
numberOfLines={titleNumOfLines}>
525-
{this.alertData.title}
528+
{title}
526529
</Text>
527530
);
528531
};
529-
_renderMessage = () => {
532+
_renderMessage = (message) => {
530533
if (this.props.renderMessage) {
531534
return this.props.renderMessage(this.props, this.alertData);
532535
}
536+
if (!message || message.length === 0) {
537+
return null;
538+
}
533539
const {messageTextProps, messageStyle, messageNumOfLines} = this.props;
534540
return (
535541
<Text
536542
{...messageTextProps}
537543
style={messageStyle}
538544
numberOfLines={messageNumOfLines}>
539-
{this.alertData.message}
545+
{message}
540546
</Text>
541547
);
542548
};
@@ -583,8 +589,8 @@ export default class DropdownAlert extends Component {
583589
showCancel,
584590
imageStyle,
585591
} = this.props;
586-
const {animationValue, topValue, height} = this.state;
587-
const {type, payload} = this.alertData;
592+
const {topValue, height} = this.state;
593+
const {type, payload, title, message} = this.alertData;
588594
let style = this.getStyleForType(type);
589595
let imageSrc = this.getSourceForType(type);
590596
// imageSrc is overridden when payload has source property
@@ -605,7 +611,7 @@ export default class DropdownAlert extends Component {
605611
let wrapperAnimStyle = {
606612
transform: [
607613
{
608-
translateY: animationValue.interpolate({
614+
translateY: this.animationValue.interpolate({
609615
inputRange: [0, 1],
610616
outputRange,
611617
}),
@@ -645,8 +651,8 @@ export default class DropdownAlert extends Component {
645651
<ContentView style={StyleSheet.flatten(contentContainerStyle)}>
646652
{this._renderImage(imageSrc, imageStyle)}
647653
<View style={StyleSheet.flatten(defaultTextContainer)}>
648-
{this._renderTitle()}
649-
{this._renderMessage()}
654+
{this._renderTitle(title)}
655+
{this._renderMessage(message)}
650656
</View>
651657
{this._renderCancel(showCancel)}
652658
</ContentView>

‎Example/App.js‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,56 @@
11
import React, {useRef, useState, useEffect} from 'react';
22
import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
3-
import {
4-
PURPLE_COLOR,
5-
WHITE_COLOR,
6-
ITEMS,
7-
ReactNativeLogo,
8-
InfoIcon,
9-
} from './constants';
103
import List from './List';
114
import DropdownAlert from 'react-native-dropdownalert';
5+
const Color = {
6+
info: '#2B73B6',
7+
warn: '#cd853f',
8+
success: '#32A54A',
9+
error: '#cc3232',
10+
purple: '#6441A4',
11+
white: 'whitesmoke',
12+
};
13+
const InfoIcon = require('./assets/info.png');
1214

1315
const App = () => {
16+
const items = [
17+
{
18+
color: Color.info,
19+
type: 'info',
20+
message:
21+
'System maintenance starts at midnight. System will be down for approximately 3 hours.',
22+
},
23+
{
24+
color: Color.warn,
25+
type: 'warn',
26+
message:
27+
'Warning: Low disk space. Please add more at your earliest convenience.',
28+
},
29+
{
30+
color: Color.error,
31+
type: 'error',
32+
message:
33+
'Sorry, we are having some technical difficulties. Please try again.',
34+
},
35+
{
36+
color: Color.success,
37+
type: 'success',
38+
message: 'Order complete. Please check your email for further details.',
39+
},
40+
{
41+
color: Color.purple,
42+
type: 'custom',
43+
message: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
44+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
45+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
46+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
47+
},
48+
{type: 'close', title: 'close'},
49+
{type: 'show', title: 'enqueue all alerts'},
50+
{type: 'clear', title: 'clear queue'},
51+
];
52+
const reactNativeLogo = 'https://reactnative.dev/docs/assets/favicon.png';
53+
1454
const [queueSize, setQueueSize] = useState(0);
1555
let dropDownAlertRef = useRef();
1656

@@ -27,6 +67,8 @@ const App = () => {
2767
throw 'Error fetch data'; // example thrown error
2868
} catch (error) {
2969
dropDownAlertRef.alertWithType('error', 'Error', error);
70+
} finally {
71+
_updateQueueSize();
3072
}
3173
};
3274

@@ -65,13 +107,13 @@ const App = () => {
65107
_showAlertQueue();
66108
break;
67109
default:
68-
const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
110+
const inMilliSeconds = Math.floor(Math.random() * 6000 + 1);
69111
const inSeconds = (inMilliSeconds / 1000).toFixed(2);
70112
const title = `${item.type} closes in ${inSeconds}s`;
71113
let payload;
72114
if (item.type === 'custom') {
73115
// example using remote image source in payload
74-
payload = {source: ReactNativeLogo};
116+
payload = {source: reactNativeLogo};
75117
} else if (item.type === 'info') {
76118
// example using local image source in payload
77119
payload = {source: InfoIcon};
@@ -114,7 +156,7 @@ const App = () => {
114156
<View style={styles.container}>
115157
<SafeAreaView>
116158
<Text style={styles.size}>{`Alert queue size: ${queueSize}`}</Text>
117-
<List items={ITEMS} onSelect={_onSelect} />
159+
<List items={items} onSelect={_onSelect} />
118160
</SafeAreaView>
119161
<DropdownAlert
120162
ref={ref => {
@@ -137,11 +179,11 @@ const App = () => {
137179
const styles = StyleSheet.create({
138180
container: {
139181
flex: 1,
140-
backgroundColor: WHITE_COLOR,
182+
backgroundColor: Color.white,
141183
justifyContent: 'center',
142184
},
143185
content: {
144-
backgroundColor: PURPLE_COLOR,
186+
backgroundColor: Color.purple,
145187
},
146188
size: {
147189
textAlign: 'center',

‎Example/constants.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -65,35 +65,10 @@ exports[`DropdownAlert component Snapshots expect to render 1`] = `
6565
style={
6666
Object {
6767
"flex": 1,
68-
"paddingHorizontal": 8,
68+
"padding": 8,
6969
}
7070
}
71-
>
72-
<Text
73-
numberOfLines={1}
74-
style={
75-
Object {
76-
"backgroundColor": "transparent",
77-
"color": "white",
78-
"fontSize": 16,
79-
"fontWeight": "bold",
80-
"textAlign": "left",
81-
}
82-
}
83-
/>
84-
<Text
85-
numberOfLines={3}
86-
style={
87-
Object {
88-
"backgroundColor": "transparent",
89-
"color": "white",
90-
"fontSize": 14,
91-
"fontWeight": "normal",
92-
"textAlign": "left",
93-
}
94-
}
95-
/>
96-
</View>
71+
/>
9772
</ForwardRef(SafeAreaView)>
9873
</View>
9974
</TouchableOpacity>

‎docs/PROPS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
| Name | Type | Description | Default |
6464
| ----------------------- | :----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
6565
| `defaultContainer` | Object | Style for inner view container (**override paddingTop with this**) | `{ flexDirection: 'row', padding: 8 }` |
66-
| `defaultTextContainer` | Object | Style for inner text container (holds title and message) | `{ flex: 1, paddingHorizontal: 8 }` |
66+
| `defaultTextContainer` | Object | Style for inner text container (holds title and message) | `{ flex: 1, padding: 8 }` |
6767
| `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` |
6868
| `containerStyle` | Object | styles for container for custom type only | `{ flexDirection: 'row', backgroundColor: '#202020' }` |
6969
| `contentContainerStyle` | Object | styles for ContentView | `{ flex: 1, flexDirection: 'row' }` |

0 commit comments

Comments
 (0)