Skip to content

Commit

Permalink
## New Features
Browse files Browse the repository at this point in the history 
- 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`
  • Loading branch information
@KBLNY
KBLNY committed Mar 29, 2016
1 parent a340d4c commit d075470
Show file tree
Hide file tree
Showing 7 changed files with 197 additions and 210 deletions.
202 changes: 80 additions & 122 deletions AppTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,118 +26,70 @@ class MessageBar extends Component {

this.state = {
callbackButton: 'Show Alert with Avatar and Callback (Error Type)',

alertTitle: 'null',
alertMessage: null,
alertIconUrl: null,
alertType: 'info',
alertDuration: null,
alertCallback: null,
}
}


componentDidMount() {
// Register the alert located on this master page
MessageBarManager.setCurrentMessageBarAlert(this.refs.alert);
MessageBarManager.registerMessageBar(this.refs.alert);
}


componentWillUnmount() {
// Remove the alert located on this master page from te manager
MessageBarManager.removeCurrentMessageBarAlert();
MessageBarManager.unregisterMessageBar();
}


showSimpleAlertMessage() {
// Title or Message is at least Mandatory
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
this.setState({
alertTitle: null,
alertMessage: "This is a simple alert with a message.",
alertIconUrl: null,
// alertType is not Mandatory, but if no alertType provided, 'info' (blue color) will picked for you

// Simple show the alert with the manager
MessageBarManager.showCurrentAlert({
message: "This is a simple alert with a message.",
alertType: 'extra',
alertDuration: null,
alertCallback: null,
});

// Simple show the alert by its reference
// this.refs.alert.showMessageBarAlert();

// Or with the manager
MessageBarManager.showCurrentAlert();
}

showSimpleAlert() {
// Title or Message is at least Mandatory
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
this.setState({
alertTitle: "This is a simple alert",
alertMessage: null,
alertIconUrl: null,
// Simple show the alert with the manager
MessageBarManager.showCurrentAlert({
title: "This is a simple alert",
alertType: 'success',
alertDuration: null,
alertCallback: null,
});

// Simple show the alert by its reference
// this.refs.alert.showMessageBarAlert();

// Or with the manager
MessageBarManager.showCurrentAlert();
}

showSimpleAlertWithMessage() {
// Title or Message is at least Mandatory
// type is Mandatory too, otherwise 'info' (blue color) will picked for you
this.setState({
alertTitle: "Caution !",
alertMessage: "This is a simple alert with a title",
alertIconUrl: null,
// Simple show the alert with the manager
MessageBarManager.showCurrentAlert({
title: "Caution !",
message: "This is a simple alert with a title",
alertType: 'warning',
alertDuration: null,
alertCallback: null,
});

// Simple show the alert by its reference
// this.refs.alert.showMessageBarAlert();

// Or with the manager
MessageBarManager.showCurrentAlert();
}

showAlertWithAvatar() {
this.setState({
alertTitle: "John Doe",
alertMessage: "Hello, how are you?",
alertIconUrl: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
// Simple show the alert with the manager
MessageBarManager.showCurrentAlert({
title: "John Doe",
message: "Hello, how are you?",
avatarUrl: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
alertType: 'info',
alertDuration: null,
alertCallback: null,
});

// Simple show the alert by its reference
// this.refs.alert.showMessageBarAlert();

// Or with the manager
MessageBarManager.showCurrentAlert();
}

showAlertWithCallback() {
this.setState({
alertTitle: "This is an alert with a callback function",
alertMessage: "Tap on the alert to execute the callback you passed in parameter",
alertIconUrl: "http://www.icon100.com/up/4250/128/83-circle-error.png",
// Simple show the alert with the manager
MessageBarManager.showCurrentAlert({
title: "This is an alert with a callback function",
message: "Tap on the alert to execute the callback you passed in parameter",
avatarUrl: "http://www.icon100.com/up/4250/128/83-circle-error.png",
alertType: 'error',
alertDuration: 5000,
alertCallback: this.customCallback.bind(this),
duration: 5000,
onTapped: this.customCallback.bind(this),
});

// Simple show the alert by its reference
// this.refs.alert.showMessageBarAlert();

// Or with the manager
MessageBarManager.showCurrentAlert();
}

showAlertFromThrowError() {
Expand All @@ -154,7 +106,7 @@ class MessageBar extends Component {
title: "Error",
message: error.message,
type: 'error',
avatarUrl: null,
messageNumberOfLines: 0,
});
}

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

<MessageBarAlert ref="alert"
/* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
title={this.state.alertTitle} // Title of the alert
message={this.state.alertMessage} // Message of the alert
avatarUrl={this.state.alertIconUrl} // Avatar/Icon URL of the alert
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'
duration={this.state.alertDuration} // Number of ms the alert is displayed. Default is 3000 ms (3 seconds)

/* Hide setters */
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
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

/* Callbacks method on Alert Tapped, on Alert Show, on Alert Hide */
onTapped={this.state.alertCallback} // This function is executed on alert tap
onShow={this.alertShow.bind(this)} // This function is executed when alert is shown
onHide={this.alertHide.bind(this)} // This function is executed when alert is hidden

/* Customize the stylesheets and/or provide an additional one 'extra' */
stylesheetInfo = {{ backgroundColor : '#007bff', strokeColor : '#006acd' }}// Default are blue colors
stylesheetSuccess = {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }} // Default are Green colors
stylesheetWarning = {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }} // Default are orange colors
stylesheetError = {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }} // Default are red colors
stylesheetExtra = {{ backgroundColor : 'black', strokeColor : 'gray' }} // Default are blue colors, same as info

/* Customize the duration of the animation */
durationToShow = {500} // Default is 350
durationToHide = {300} // Default is 350

/* 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 */
viewTopOffset = {0} // Default is 0
viewLeftOffset = {0} // Default is 0
viewRightOffset = {0} // Default is 0

/* Inset of the view, useful if you want to apply a padding at your alert content */
viewTopInset = {15} // Default is 0
viewLeftInset = {0} // Default is 0
viewRightInset = {0} // Default is 0

/* Number of Lines for Title and Message */
titleNumberOfLines={1}
messageNumberOfLines={0} // Unlimited number of lines

/* Style for the text elements and the avatar */
titleStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}
messageStyle={{ color: 'white', fontSize: 16 }}
avatarStyle={{ height: 40, width: 40, borderRadius: 20 }}
/>
<MessageBarAlert ref="alert" />

{
// Otherwise, You can directly declare a MessageBar alert with its properties and display it by using its reference this.refs.alert.showMessageBarAlert()

// <MessageBarAlert ref="alert"
// /* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
// title={this.state.alertTitle} // Title of the alert
// message={this.state.alertMessage} // Message of the alert
// avatarUrl={this.state.alertIconUrl} // Avatar/Icon URL of the alert
// 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'
// duration={this.state.alertDuration} // Number of ms the alert is displayed. Default is 3000 ms (3 seconds)
//
// /* Hide setters */
// 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
// 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
//
// /* Callbacks method on Alert Tapped, on Alert Show, on Alert Hide */
// onTapped={this.state.alertCallback} // This function is executed on alert tap
// onShow={this.alertShow.bind(this)} // This function is executed when alert is shown
// onHide={this.alertHide.bind(this)} // This function is executed when alert is hidden
//
// /* Customize the stylesheets and/or provide an additional one 'extra' */
// stylesheetInfo = {{ backgroundColor : '#007bff', strokeColor : '#006acd' }}// Default are blue colors
// stylesheetSuccess = {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }} // Default are Green colors
// stylesheetWarning = {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }} // Default are orange colors
// stylesheetError = {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }} // Default are red colors
// stylesheetExtra = {{ backgroundColor : 'black', strokeColor : 'gray' }} // Default are blue colors, same as info
//
// /* Customize the duration of the animation */
// durationToShow = {500} // Default is 350
// durationToHide = {300} // Default is 350
//
// /* 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 */
// viewTopOffset = {0} // Default is 0
// viewLeftOffset = {0} // Default is 0
// viewRightOffset = {0} // Default is 0
//
// /* Inset of the view, useful if you want to apply a padding at your alert content */
// viewTopInset = {15} // Default is 0
// viewLeftInset = {0} // Default is 0
// viewRightInset = {0} // Default is 0
//
// /* Number of Lines for Title and Message */
// titleNumberOfLines={1}
// messageNumberOfLines={0} // Unlimited number of lines
//
// /* Style for the text elements and the avatar */
// titleStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}
// messageStyle={{ color: 'white', fontSize: 16 }}
// avatarStyle={{ height: 40, width: 40, borderRadius: 20 }}
// />
}

<TouchableOpacity style={styles.buttonContainer} onPress={()=>{this.showSimpleAlert()}}>
<Text style={[styles.button, {backgroundColor: 'darkgreen'}]}>Show Simple Alert, title only (Success Type)</Text>
Expand Down
7 changes: 3 additions & 4 deletions CustomChildComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,12 @@ class CustomChildComponent extends Component {
// the classic method showCurrentAlert(state) where state is the new state of the message bar alert

// Declare the new state of the parent's message bar alert
var newState = {
MessageBarManager.showCurrentAlert({
title: 'Alert triggered from child component',
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",
avatarUrl: null,
type: 'success',
};
MessageBarManager.showCurrentAlert(newState);
alertType: 'success',
});
}


Expand Down
30 changes: 17 additions & 13 deletions MessageBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,31 @@ class MessageBar extends Component {
this.notifyAlertHiddenCallback = null;
this.alertShown = false;

this.state = this.setStateByProps(props);
this.state = this.getStateByProps(props);
}

componentWillReceiveProps(nextProps) {
this.setNewState(nextProps);
}

setNewState(state) {
// Set the new state, this is triggered when the props of this MessageBar changed
this.setState(this.setStateByProps(nextProps));
this.setState(this.getStateByProps(state));

// Apply the colors of the alert depending on its type
this._applyAlertStylesheet(nextProps.type);
// Apply the colors of the alert depending on its alertType
this._applyAlertStylesheet(state.alertType);
}

setStateByProps(props) {
getStateByProps(props) {
return {
backgroundColor: '#007bff', // default value : blue
strokeColor: '#006acd', // default value : blue

/* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
/* Cusomisation of the alert: Title, Message, Icon URL, Alert alertType (error, success, warning, info), Duration for Alert keep shown */
title: props.title,
message: props.message,
avatarUrl: props.avatarUrl,
type: props.type || 'info',
alertType: props.alertType || 'info',
duration: props.duration || 3000,

/* Hide setters */
Expand Down Expand Up @@ -215,17 +219,17 @@ class MessageBar extends Component {


/*
* Change the background color and the line stroke color depending on the Type
* If the type is not recognized, the 'info' one (blue colors) is selected for you
* Change the background color and the line stroke color depending on the alertType
* If the alertType is not recognized, the 'info' one (blue colors) is selected for you
*/
_applyAlertStylesheet(type) {
// Set the Background color and the line stroke color of the alert depending on its type
// Set to blue-info if no type or if the type is not recognized
_applyAlertStylesheet(alertType) {
// Set the Background color and the line stroke color of the alert depending on its alertType
// Set to blue-info if no alertType or if the alertType is not recognized

let backgroundColor;
let strokeColor;

switch (type) {
switch (alertType) {
case 'success':
backgroundColor = this.state.stylesheetSuccess.backgroundColor;
strokeColor = this.state.stylesheetSuccess.strokeColor;
Expand Down
Loading

0 comments on commit d075470

Please sign in to comment.