Skip to content

Commit d075470

Browse files
KBLNYKBLNY
committed
## New Features
- New property `shouldHideAfterDelay` : Tell the MessageBar whether or not it should hide after a delay defined in the `duration` property. If `false`, the MessageBar remain shown - New property `shouldHideOnTap` : Tell the MessageBar whether or not it should hide or not when the user tap the alert. If `false`, the MessageBar will not hide, but the `onTapped` function is triggered, if defined. In addition, if `false`, the `onHide` function will not be triggered. The property `shouldHideAfterDelay` take precedence over `shouldHideOnTap`. That means if `shouldHideAfterDelay` is `false`, the value of `shouldHideOnTap` is not taken into account, since the MessageBar will not ever be hidden - New property `titleNumberOfLines` : Number of lines of the title. `0` means unlimited - New property `messageNumberOfLines` : Number of lines of the message. `0` means unlimited - New property `titleStyle` : Style of the title - New property `messageStyle` : Style of the message - New property `avatarStyle` : Style of the icon/avatar ## Bug Fixes - When a MessageBar alert is shown it hide the existing one and display a new one, instead of replacing the existing one with its new state (formerly using properties) ## Breaking Changes - Property `type` renamed to `alertType`
1 parent a340d4c commit d075470

File tree

7 files changed

+197
-210
lines changed

7 files changed

+197
-210
lines changed

‎AppTest.js‎

Lines changed: 80 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -26,118 +26,70 @@ class MessageBar extends Component {
2626

2727
this.state = {
2828
callbackButton: 'Show Alert with Avatar and Callback (Error Type)',
29-
30-
alertTitle: 'null',
31-
alertMessage: null,
32-
alertIconUrl: null,
33-
alertType: 'info',
34-
alertDuration: null,
35-
alertCallback: null,
3629
}
3730
}
3831

3932

4033
componentDidMount() {
4134
// Register the alert located on this master page
42-
MessageBarManager.setCurrentMessageBarAlert(this.refs.alert);
35+
MessageBarManager.registerMessageBar(this.refs.alert);
4336
}
4437

4538

4639
componentWillUnmount() {
4740
// Remove the alert located on this master page from te manager
48-
MessageBarManager.removeCurrentMessageBarAlert();
41+
MessageBarManager.unregisterMessageBar();
4942
}
5043

5144

5245
showSimpleAlertMessage() {
5346
// Title or Message is at least Mandatory
54-
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
55-
this.setState({
56-
alertTitle: null,
57-
alertMessage: "This is a simple alert with a message.",
58-
alertIconUrl: null,
47+
// alertType is not Mandatory, but if no alertType provided, 'info' (blue color) will picked for you
48+
49+
// Simple show the alert with the manager
50+
MessageBarManager.showCurrentAlert({
51+
message: "This is a simple alert with a message.",
5952
alertType: 'extra',
60-
alertDuration: null,
61-
alertCallback: null,
6253
});
63-
64-
// Simple show the alert by its reference
65-
// this.refs.alert.showMessageBarAlert();
66-
67-
// Or with the manager
68-
MessageBarManager.showCurrentAlert();
6954
}
7055

7156
showSimpleAlert() {
72-
// Title or Message is at least Mandatory
73-
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
74-
this.setState({
75-
alertTitle: "This is a simple alert",
76-
alertMessage: null,
77-
alertIconUrl: null,
57+
// Simple show the alert with the manager
58+
MessageBarManager.showCurrentAlert({
59+
title: "This is a simple alert",
7860
alertType: 'success',
79-
alertDuration: null,
80-
alertCallback: null,
8161
});
82-
83-
// Simple show the alert by its reference
84-
// this.refs.alert.showMessageBarAlert();
85-
86-
// Or with the manager
87-
MessageBarManager.showCurrentAlert();
8862
}
8963

9064
showSimpleAlertWithMessage() {
91-
// Title or Message is at least Mandatory
92-
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
93-
this.setState({
94-
alertTitle: "Caution !",
95-
alertMessage: "This is a simple alert with a title",
96-
alertIconUrl: null,
65+
// Simple show the alert with the manager
66+
MessageBarManager.showCurrentAlert({
67+
title: "Caution !",
68+
message: "This is a simple alert with a title",
9769
alertType: 'warning',
98-
alertDuration: null,
99-
alertCallback: null,
10070
});
101-
102-
// Simple show the alert by its reference
103-
// this.refs.alert.showMessageBarAlert();
104-
105-
// Or with the manager
106-
MessageBarManager.showCurrentAlert();
10771
}
10872

10973
showAlertWithAvatar() {
110-
this.setState({
111-
alertTitle: "John Doe",
112-
alertMessage: "Hello, how are you?",
113-
alertIconUrl: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
74+
// Simple show the alert with the manager
75+
MessageBarManager.showCurrentAlert({
76+
title: "John Doe",
77+
message: "Hello, how are you?",
78+
avatarUrl: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
11479
alertType: 'info',
115-
alertDuration: null,
116-
alertCallback: null,
11780
});
118-
119-
// Simple show the alert by its reference
120-
// this.refs.alert.showMessageBarAlert();
121-
122-
// Or with the manager
123-
MessageBarManager.showCurrentAlert();
12481
}
12582

12683
showAlertWithCallback() {
127-
this.setState({
128-
alertTitle: "This is an alert with a callback function",
129-
alertMessage: "Tap on the alert to execute the callback you passed in parameter",
130-
alertIconUrl: "http://www.icon100.com/up/4250/128/83-circle-error.png",
84+
// Simple show the alert with the manager
85+
MessageBarManager.showCurrentAlert({
86+
title: "This is an alert with a callback function",
87+
message: "Tap on the alert to execute the callback you passed in parameter",
88+
avatarUrl: "http://www.icon100.com/up/4250/128/83-circle-error.png",
13189
alertType: 'error',
132-
alertDuration: 5000,
133-
alertCallback: this.customCallback.bind(this),
90+
duration: 5000,
91+
onTapped: this.customCallback.bind(this),
13492
});
135-
136-
// Simple show the alert by its reference
137-
// this.refs.alert.showMessageBarAlert();
138-
139-
// Or with the manager
140-
MessageBarManager.showCurrentAlert();
14193
}
14294

14395
showAlertFromThrowError() {
@@ -154,7 +106,7 @@ class MessageBar extends Component {
154106
title: "Error",
155107
message: error.message,
156108
type: 'error',
157-
avatarUrl: null,
109+
messageNumberOfLines: 0,
158110
});
159111
}
160112

@@ -185,53 +137,59 @@ class MessageBar extends Component {
185137
return (
186138
<View style={styles.container}>
187139

188-
<MessageBarAlert ref="alert"
189-
/* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
190-
title={this.state.alertTitle} // Title of the alert
191-
message={this.state.alertMessage} // Message of the alert
192-
avatarUrl={this.state.alertIconUrl} // Avatar/Icon URL of the alert
193-
type={this.state.alertType} // Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). Default is 'info'
194-
duration={this.state.alertDuration} // Number of ms the alert is displayed. Default is 3000 ms (3 seconds)
195-
196-
/* Hide setters */
197-
shouldHideAfterDelay={true} // Define if the MessabeBar should hidden after the `duration`. Please refer yourself to the documentation for component behaviour outputs by setting these 2 properties
198-
shouldHideOnTap={true} // Define if the MessabeBar should be hidden when user tap the alert. Please refer yourself to the documentation for component behaviour outputs by setting these 2 properties
199-
200-
/* Callbacks method on Alert Tapped, on Alert Show, on Alert Hide */
201-
onTapped={this.state.alertCallback} // This function is executed on alert tap
202-
onShow={this.alertShow.bind(this)} // This function is executed when alert is shown
203-
onHide={this.alertHide.bind(this)} // This function is executed when alert is hidden
204-
205-
/* Customize the stylesheets and/or provide an additional one 'extra' */
206-
stylesheetInfo = {{ backgroundColor : '#007bff', strokeColor : '#006acd' }}// Default are blue colors
207-
stylesheetSuccess = {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }} // Default are Green colors
208-
stylesheetWarning = {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }} // Default are orange colors
209-
stylesheetError = {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }} // Default are red colors
210-
stylesheetExtra = {{ backgroundColor : 'black', strokeColor : 'gray' }} // Default are blue colors, same as info
211-
212-
/* Customize the duration of the animation */
213-
durationToShow = {500} // Default is 350
214-
durationToHide = {300} // Default is 350
215-
216-
/* Offset of the View, useful if you have a navigation bar or if you want the alert be shown below another component instead of the top of the screen */
217-
viewTopOffset = {0} // Default is 0
218-
viewLeftOffset = {0} // Default is 0
219-
viewRightOffset = {0} // Default is 0
220-
221-
/* Inset of the view, useful if you want to apply a padding at your alert content */
222-
viewTopInset = {15} // Default is 0
223-
viewLeftInset = {0} // Default is 0
224-
viewRightInset = {0} // Default is 0
225-
226-
/* Number of Lines for Title and Message */
227-
titleNumberOfLines={1}
228-
messageNumberOfLines={0} // Unlimited number of lines
229-
230-
/* Style for the text elements and the avatar */
231-
titleStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}
232-
messageStyle={{ color: 'white', fontSize: 16 }}
233-
avatarStyle={{ height: 40, width: 40, borderRadius: 20 }}
234-
/>
140+
<MessageBarAlert ref="alert" />
141+
142+
{
143+
// Otherwise, You can directly declare a MessageBar alert with its properties and display it by using its reference this.refs.alert.showMessageBarAlert()
144+
145+
// <MessageBarAlert ref="alert"
146+
// /* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
147+
// title={this.state.alertTitle} // Title of the alert
148+
// message={this.state.alertMessage} // Message of the alert
149+
// avatarUrl={this.state.alertIconUrl} // Avatar/Icon URL of the alert
150+
// type={this.state.alertType} // Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). Default is 'info'
151+
// duration={this.state.alertDuration} // Number of ms the alert is displayed. Default is 3000 ms (3 seconds)
152+
//
153+
// /* Hide setters */
154+
// shouldHideAfterDelay={true} // Define if the MessabeBar should hidden after the `duration`. Please refer yourself to the documentation for component behaviour outputs by setting these 2 properties
155+
// shouldHideOnTap={true} // Define if the MessabeBar should be hidden when user tap the alert. Please refer yourself to the documentation for component behaviour outputs by setting these 2 properties
156+
//
157+
// /* Callbacks method on Alert Tapped, on Alert Show, on Alert Hide */
158+
// onTapped={this.state.alertCallback} // This function is executed on alert tap
159+
// onShow={this.alertShow.bind(this)} // This function is executed when alert is shown
160+
// onHide={this.alertHide.bind(this)} // This function is executed when alert is hidden
161+
//
162+
// /* Customize the stylesheets and/or provide an additional one 'extra' */
163+
// stylesheetInfo = {{ backgroundColor : '#007bff', strokeColor : '#006acd' }}// Default are blue colors
164+
// stylesheetSuccess = {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }} // Default are Green colors
165+
// stylesheetWarning = {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }} // Default are orange colors
166+
// stylesheetError = {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }} // Default are red colors
167+
// stylesheetExtra = {{ backgroundColor : 'black', strokeColor : 'gray' }} // Default are blue colors, same as info
168+
//
169+
// /* Customize the duration of the animation */
170+
// durationToShow = {500} // Default is 350
171+
// durationToHide = {300} // Default is 350
172+
//
173+
// /* Offset of the View, useful if you have a navigation bar or if you want the alert be shown below another component instead of the top of the screen */
174+
// viewTopOffset = {0} // Default is 0
175+
// viewLeftOffset = {0} // Default is 0
176+
// viewRightOffset = {0} // Default is 0
177+
//
178+
// /* Inset of the view, useful if you want to apply a padding at your alert content */
179+
// viewTopInset = {15} // Default is 0
180+
// viewLeftInset = {0} // Default is 0
181+
// viewRightInset = {0} // Default is 0
182+
//
183+
// /* Number of Lines for Title and Message */
184+
// titleNumberOfLines={1}
185+
// messageNumberOfLines={0} // Unlimited number of lines
186+
//
187+
// /* Style for the text elements and the avatar */
188+
// titleStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}
189+
// messageStyle={{ color: 'white', fontSize: 16 }}
190+
// avatarStyle={{ height: 40, width: 40, borderRadius: 20 }}
191+
// />
192+
}
235193

236194
<TouchableOpacity style={styles.buttonContainer} onPress={()=>{this.showSimpleAlert()}}>
237195
<Text style={[styles.button, {backgroundColor: 'darkgreen'}]}>Show Simple Alert, title only (Success Type)</Text>

‎CustomChildComponent.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,12 @@ class CustomChildComponent extends Component {
2929
// the classic method showCurrentAlert(state) where state is the new state of the message bar alert
3030

3131
// Declare the new state of the parent's message bar alert
32-
var newState = {
32+
MessageBarManager.showCurrentAlert({
3333
title: 'Alert triggered from child component',
3434
message: "You can show an alert which is located on its parent's page. You can then declare only one MessageBar. This is useful to fix absolute position in child component",
3535
avatarUrl: null,
36-
type: 'success',
37-
};
38-
MessageBarManager.showCurrentAlert(newState);
36+
alertType: 'success',
37+
});
3938
}
4039

4140

‎MessageBar.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,27 +30,31 @@ class MessageBar extends Component {
3030
this.notifyAlertHiddenCallback = null;
3131
this.alertShown = false;
3232

33-
this.state = this.setStateByProps(props);
33+
this.state = this.getStateByProps(props);
3434
}
3535

3636
componentWillReceiveProps(nextProps) {
37+
this.setNewState(nextProps);
38+
}
39+
40+
setNewState(state) {
3741
// Set the new state, this is triggered when the props of this MessageBar changed
38-
this.setState(this.setStateByProps(nextProps));
42+
this.setState(this.getStateByProps(state));
3943

40-
// Apply the colors of the alert depending on its type
41-
this._applyAlertStylesheet(nextProps.type);
44+
// Apply the colors of the alert depending on its alertType
45+
this._applyAlertStylesheet(state.alertType);
4246
}
4347

44-
setStateByProps(props) {
48+
getStateByProps(props) {
4549
return {
4650
backgroundColor: '#007bff', // default value : blue
4751
strokeColor: '#006acd', // default value : blue
4852

49-
/* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
53+
/* Cusomisation of the alert: Title, Message, Icon URL, Alert alertType (error, success, warning, info), Duration for Alert keep shown */
5054
title: props.title,
5155
message: props.message,
5256
avatarUrl: props.avatarUrl,
53-
type: props.type || 'info',
57+
alertType: props.alertType || 'info',
5458
duration: props.duration || 3000,
5559

5660
/* Hide setters */
@@ -215,17 +219,17 @@ class MessageBar extends Component {
215219

216220

217221
/*
218-
* Change the background color and the line stroke color depending on the Type
219-
* If the type is not recognized, the 'info' one (blue colors) is selected for you
222+
* Change the background color and the line stroke color depending on the alertType
223+
* If the alertType is not recognized, the 'info' one (blue colors) is selected for you
220224
*/
221-
_applyAlertStylesheet(type) {
222-
// Set the Background color and the line stroke color of the alert depending on its type
223-
// Set to blue-info if no type or if the type is not recognized
225+
_applyAlertStylesheet(alertType) {
226+
// Set the Background color and the line stroke color of the alert depending on its alertType
227+
// Set to blue-info if no alertType or if the alertType is not recognized
224228

225229
let backgroundColor;
226230
let strokeColor;
227231

228-
switch (type) {
232+
switch (alertType) {
229233
case 'success':
230234
backgroundColor = this.state.stylesheetSuccess.backgroundColor;
231235
strokeColor = this.state.stylesheetSuccess.strokeColor;

0 commit comments

Comments
 (0)