diff --git a/.gitignore b/.gitignore index 1e31daa..12d449b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ .DS_Store +.idea/ +.yarnrc coverage/ node_modules/ dist/ diff --git a/.yarnrc b/.yarnrc new file mode 100644 index 0000000..f78a38d --- /dev/null +++ b/.yarnrc @@ -0,0 +1,5 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +lastUpdateCheck 1495138597547 diff --git a/README.md b/README.md index 6677d0b..07fc52c 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,8 @@ The notification object has the following properties: | Name | Type | Default | Description | |------------ |--------------- |--------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | string | null | Title of the notification | -| message | string | null | Message of the notification | +| message | string | null | Message of the notification | +| getContentComponent | function | null | Return a React component to display in the notification (override other settings) | | level | string | null | Level of the notification. Available: **success**, **error**, **warning** and **info** | | position | string | tr | Position of the notification. Available: **tr (top right)**, **tl (top left)**, **tc (top center)**, **br (bottom right)**, **bl (bottom left)**, **bc (bottom center)** | | autoDismiss | integer | 5 | Delay in seconds for the notification go away. Set this to **0** to not auto-dismiss the notification | diff --git a/package.json b/package.json index 31cc5a6..cdf9b4c 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ }, "homepage": "https://github.com/igorprado/react-notification-system", "dependencies": { + "classnames": "^2.2.5", "create-react-class": "^15.5.1", "object-assign": "^4.0.1", "prop-types": "^15.5.6" diff --git a/src/NotificationContainer.jsx b/src/NotificationContainer.jsx index 0b6e044..1d9b774 100644 --- a/src/NotificationContainer.jsx +++ b/src/NotificationContainer.jsx @@ -3,6 +3,7 @@ var createReactClass = require('create-react-class'); var PropTypes = require('prop-types'); var NotificationItem = require('./NotificationItem'); var Constants = require('./constants'); +var classnames = require('classnames'); var NotificationContainer = createReactClass({ @@ -26,28 +27,34 @@ var NotificationContainer = createReactClass({ render: function() { var self = this; var notifications; + var classNameContainer = this.props.classNameContainer; + + var classNameSelector = classnames( + 'notification-container', + 'notifications-' + this.props.position, { + [classNameContainer]: !!classNameContainer + } + ); if ([Constants.positions.bl, Constants.positions.br, Constants.positions.bc].indexOf(this.props.position) > -1) { this.props.notifications.reverse(); } - notifications = this.props.notifications.map(function(notification) { - return ( - - ); - }); + notifications = this.props.notifications.map(notification => ( + + )); return ( -
+
{ notifications }
); diff --git a/src/NotificationItem.jsx b/src/NotificationItem.jsx index 7c015b4..4432e01 100644 --- a/src/NotificationItem.jsx +++ b/src/NotificationItem.jsx @@ -5,6 +5,7 @@ var ReactDOM = require('react-dom'); var Constants = require('./constants'); var Helpers = require('./helpers'); var merge = require('object-assign'); +var classnames = require('classnames'); /* From Modernizr */ var whichTransitionEvent = function() { @@ -242,23 +243,20 @@ var NotificationItem = createReactClass({ render: function() { var notification = this.props.notification; - var className = 'notification notification-' + notification.level; var notificationStyle = merge({}, this._styles.notification); var cssByPos = this._getCssPropertyByPosition(); var dismiss = null; var actionButton = null; var title = null; var message = null; + var content = null; + var getContentComponent = notification.getContentComponent; - if (this.state.visible) { - className += ' notification-visible'; - } else if (this.state.visible === false) { - className += ' notification-hidden'; - } - - if (!notification.dismissible) { - className += ' notification-not-dismissible'; - } + var className = classnames('notification', 'notification-' + notification.level, { + 'notification-visible': this.state.visible, + 'notification-hidden': !this.state.visible, + 'notification-not-dismissible': !notification.dismissible + }); if (this.props.getStyles.overrideStyle) { if (!this.state.visible && !this.state.removed) { @@ -316,12 +314,26 @@ var NotificationItem = createReactClass({ actionButton = notification.children; } + if (getContentComponent) { + content = getContentComponent(); + } else { + content = [ + title, + message, + dismiss, + actionButton + ]; + } + return ( -
- { title } - { message } - { dismiss } - { actionButton } +
+ {content}
); } diff --git a/src/NotificationSystem.jsx b/src/NotificationSystem.jsx index f35c464..c6fb8a7 100644 --- a/src/NotificationSystem.jsx +++ b/src/NotificationSystem.jsx @@ -5,6 +5,7 @@ var merge = require('object-assign'); var NotificationContainer = require('./NotificationContainer'); var Constants = require('./constants'); var Styles = require('./styles'); +var classnames = require('classnames'); var NotificationSystem = createReactClass({ @@ -238,6 +239,13 @@ var NotificationSystem = createReactClass({ var self = this; var containers = null; var notifications = this.state.notifications; + var className = this.props.className; + + var classNameSelector = classnames( + 'notifications-wrapper', { + [className]: !!className + } + ); if (notifications.length) { containers = Object.keys(Constants.positions).map(function(position) { @@ -266,7 +274,7 @@ var NotificationSystem = createReactClass({ return ( -
+
{ containers }
); diff --git a/src/constants.js b/src/constants.js index 59538d5..db67b0d 100644 --- a/src/constants.js +++ b/src/constants.js @@ -26,7 +26,8 @@ var CONSTANTS = { position: 'tr', autoDismiss: 5, dismissible: true, - action: null + action: null, + getContentComponent: null } };