├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── README.md
├── dist
├── fonts
│ ├── notification.eot
│ ├── notification.svg
│ ├── notification.ttf
│ └── notification.woff
├── react-notifications.css
└── react-notifications.js
├── example
├── src
│ ├── app.js
│ ├── assets
│ │ ├── fonts
│ │ │ └── .gitkeep
│ │ ├── images
│ │ │ └── logo.svg
│ │ └── styles
│ │ │ ├── _animations.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _variables.scss
│ │ │ ├── app.scss
│ │ │ ├── components
│ │ │ ├── _footer.scss
│ │ │ ├── _header.scss
│ │ │ ├── _page.scss
│ │ │ └── _pre-render.scss
│ │ │ └── pages
│ │ │ └── _home.scss
│ ├── components
│ │ ├── App.js
│ │ ├── Document.js
│ │ ├── Footer.js
│ │ └── Header.js
│ ├── index.html
│ └── pages
│ │ ├── Home
│ │ └── index.js
│ │ ├── NotFound
│ │ └── index.js
│ │ └── TransitionAnimation
│ │ ├── index.js
│ │ └── notifications.scss
├── webpack.config.babel.js
└── webpack.server.js
├── gulpfile.babel.js
├── lib
├── Notification.js
├── NotificationContainer.js
├── NotificationManager.js
├── Notifications.js
├── fonts
│ ├── notification.eot
│ ├── notification.svg
│ ├── notification.ttf
│ └── notification.woff
├── index.js
└── notifications.css
├── package-lock.json
├── package.json
├── postcss.config.js
├── screenshot.png
├── src
├── Notification.js
├── NotificationContainer.js
├── NotificationManager.js
├── Notifications.js
├── _variables.scss
├── fonts
│ ├── notification.eot
│ ├── notification.svg
│ ├── notification.ttf
│ └── notification.woff
├── index.js
└── notifications.scss
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "targets": {
7 | "browsers": [
8 | "last 2 versions"
9 | ]
10 | }
11 | }
12 | ],
13 | "@babel/preset-react"
14 | ],
15 | "plugins": [
16 | "@babel/plugin-proposal-object-rest-spread",
17 | "@babel/plugin-proposal-class-properties"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | dist/*
3 | example/dist/*
4 | lib/*
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "env": {
5 | "browser": true,
6 | "node": true
7 | },
8 | "rules": {
9 | "comma-dangle": "off",
10 | "global-require": "off",
11 | "import/no-extraneous-dependencies": "off",
12 | "import/no-unresolved": "off",
13 | "import/extensions": "off",
14 | "react/jsx-filename-extension": "off",
15 | "react/prefer-stateless-function": ["error", {"ignorePureComponents": true}],
16 | "react/jsx-tag-spacing": "off",
17 | "react/forbid-prop-types": "off",
18 | "react/no-array-index-key": "off",
19 | "react/static-property-placement": ["off"],
20 | "react/state-in-constructor": ["off"],
21 | "react/destructuring-assignment": ["off"],
22 | "jsx-a11y/click-events-have-key-events": ["off"],
23 | "jsx-a11y/no-static-element-interactions": "off",
24 | "no-alert": "off",
25 | "no-bitwise": "off"
26 | },
27 | "globals": {
28 | "jQuery": false,
29 | "$": false
30 | },
31 | "settings": {
32 | "react": {
33 | "version": "16.0"
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | example/dist
3 |
4 | # Environment files to ignore
5 | .DS_Store
6 | .vscode
7 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | example
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Notifications
2 |
3 | [
](http://minhtranite.github.io/react-notifications)
4 |
5 | ## Installation
6 |
7 | ```
8 | npm install --save react-notifications
9 | ```
10 |
11 | ## Usage
12 |
13 | ### Note
14 |
15 | **Use only one 'NotificationContainer' component in the app.**
16 |
17 | ### CSS
18 |
19 | #### Webpack:
20 | ```js
21 | import 'react-notifications/lib/notifications.css';
22 | ```
23 |
24 | #### Other
25 | ```html
26 |
27 | ```
28 |
29 | ### JS
30 |
31 | ```js
32 | import React from 'react';
33 | import {NotificationContainer, NotificationManager} from 'react-notifications';
34 |
35 | class Example extends React.Component {
36 | createNotification = (type) => {
37 | return () => {
38 | switch (type) {
39 | case 'info':
40 | NotificationManager.info('Info message');
41 | break;
42 | case 'success':
43 | NotificationManager.success('Success message', 'Title here');
44 | break;
45 | case 'warning':
46 | NotificationManager.warning('Warning message', 'Close after 3000ms', 3000);
47 | break;
48 | case 'error':
49 | NotificationManager.error('Error message', 'Click me!', 5000, () => {
50 | alert('callback');
51 | });
52 | break;
53 | }
54 | };
55 | };
56 |
57 | render() {
58 | return (
59 |
60 |
63 |
64 |
67 |
68 |
71 |
72 |
75 |
76 |
77 |
78 | );
79 | }
80 | }
81 |
82 | export default Example;
83 | ```
84 |
85 | ### UMD
86 |
87 | ```html
88 |
89 |
90 | ```
91 |
92 | ```js
93 | const NotificationContainer = window.ReactNotifications.NotificationContainer;
94 | const NotificationManager = window.ReactNotifications.NotificationManager;
95 | ```
96 |
97 | ## NotificationContainer Props
98 |
99 | | Name | Type | Default | Required |
100 | |------|------|---------|----------|
101 | | enterTimeout | number | 400 | false |
102 | | leaveTimeout | number | 400 | false |
103 |
104 | ## NotificationManager API
105 |
106 | - NotificationManager.info(message, title, timeOut, callback, priority);
107 | - NotificationManager.success(message, title, timeOut, callback, priority);
108 | - NotificationManager.warning(message, title, timeOut, callback, priority);
109 | - NotificationManager.error(message, title, timeOut, callback, priority);
110 |
111 | | Name | Type | Description |
112 | |------|------|-------------|
113 | | message | string | The message string |
114 | | title | string | The title string |
115 | | timeOut | integer | The popup timeout in milliseconds |
116 | | callback | function | A function that gets fired when the popup is clicked |
117 | | priority | boolean | If true, the message gets inserted at the top |
118 |
119 | ## Example
120 | View [demo](http://minhtranite.github.io/react-notifications) or example folder.
121 |
122 | ## Contributing
123 |
124 | When contributing to this reposity, please first open an issue and discuss intended changes with maintainers. If there is already an issue open for the feature you are looking to develop, please just coordinate with maintainers before assigning issue to yourself.
125 |
126 | ### Branches
127 |
128 | `master` is the main branch from which we publish packages. `next` is the branch from which we will publish the next release. All `issue` branches should be branched from `master`, unless specifically told by the maintainers to use a different branch. All pull requests should be submitted to merge with `next` in order to make the next release.
129 |
130 | ### Workflow
131 |
132 | - Fork repo
133 | - Create an issue branch
134 | - Commit your changes
135 | - Open a PR against `next`.
136 | - Link the Issue to your PR.
137 |
138 | ### Pull Request Guidelines
139 |
140 | - PRs should be submitted to merge with `next`.
141 | - PRs should be small in scope, work on 1 issue in a single PR.
142 | - Link the Issue you are working to your PR.
143 |
144 | You can add as many commits to your PR as you would like. All commits will be squashed into a single commit when merging PR.
--------------------------------------------------------------------------------
/dist/fonts/notification.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/dist/fonts/notification.eot
--------------------------------------------------------------------------------
/dist/fonts/notification.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/dist/fonts/notification.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/dist/fonts/notification.ttf
--------------------------------------------------------------------------------
/dist/fonts/notification.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/dist/fonts/notification.woff
--------------------------------------------------------------------------------
/dist/react-notifications.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";@font-face{font-family:Notification;src:url(fonts/notification.eot?s3g3t9);src:url(fonts/notification.eot?#iefixs3g3t9) format("embedded-opentype"),url(fonts/notification.woff?s3g3t9) format("woff"),url(fonts/notification.ttf?s3g3t9) format("truetype"),url(fonts/notification.svg?s3g3t9#notification) format("svg");font-weight:400;font-style:normal}.notification-container{position:fixed;top:0;right:0;z-index:999999;width:320px;padding:0 15px;max-height:calc(100% - 30px);overflow-x:hidden;overflow-y:auto}.notification,.notification-container{-webkit-box-sizing:border-box;box-sizing:border-box}.notification{padding:15px 15px 15px 58px;border-radius:2px;color:#fff;background-color:#ccc;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;cursor:pointer;font-size:1em;line-height:1.2em;position:relative;opacity:.9;margin-top:15px}.notification .title{font-size:1em;line-height:1.2em;font-weight:700;margin:0 0 5px}.notification:focus,.notification:hover{opacity:1}.notification-enter{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.notification-enter.notification-enter-active{-webkit-transition:all .4s;transition:all .4s}.notification-enter.notification-enter-active,.notification-exit{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}.notification-exit.notification-exit-active{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition:all .4s;transition:all .4s}.notification:before{position:absolute;top:50%;left:15px;margin-top:-14px;display:block;font-family:Notification;width:28px;height:28px;font-size:28px;text-align:center;line-height:28px}.notification-info{background-color:#2f96b4}.notification-info:before{content:""}.notification-success{background-color:#51a351}.notification-success:before{content:""}.notification-warning{background-color:#f89406}.notification-warning:before{content:""}.notification-error{background-color:#bd362f}.notification-error:before{content:""}
--------------------------------------------------------------------------------
/dist/react-notifications.js:
--------------------------------------------------------------------------------
1 | (function webpackUniversalModuleDefinition(root, factory) {
2 | if(typeof exports === 'object' && typeof module === 'object')
3 | module.exports = factory(require("react"), require("prop-types"), require("react-transition-group"));
4 | else if(typeof define === 'function' && define.amd)
5 | define(["react", "prop-types", "react-transition-group"], factory);
6 | else if(typeof exports === 'object')
7 | exports["ReactNotifications"] = factory(require("react"), require("prop-types"), require("react-transition-group"));
8 | else
9 | root["ReactNotifications"] = factory(root["React"], root["PropTypes"], root["ReactTransitionGroup"]);
10 | })(window, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__1__, __WEBPACK_EXTERNAL_MODULE__3__) {
11 | return /******/ (function(modules) { // webpackBootstrap
12 | /******/ // The module cache
13 | /******/ var installedModules = {};
14 | /******/
15 | /******/ // The require function
16 | /******/ function __webpack_require__(moduleId) {
17 | /******/
18 | /******/ // Check if module is in cache
19 | /******/ if(installedModules[moduleId]) {
20 | /******/ return installedModules[moduleId].exports;
21 | /******/ }
22 | /******/ // Create a new module (and put it into the cache)
23 | /******/ var module = installedModules[moduleId] = {
24 | /******/ i: moduleId,
25 | /******/ l: false,
26 | /******/ exports: {}
27 | /******/ };
28 | /******/
29 | /******/ // Execute the module function
30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31 | /******/
32 | /******/ // Flag the module as loaded
33 | /******/ module.l = true;
34 | /******/
35 | /******/ // Return the exports of the module
36 | /******/ return module.exports;
37 | /******/ }
38 | /******/
39 | /******/
40 | /******/ // expose the modules object (__webpack_modules__)
41 | /******/ __webpack_require__.m = modules;
42 | /******/
43 | /******/ // expose the module cache
44 | /******/ __webpack_require__.c = installedModules;
45 | /******/
46 | /******/ // define getter function for harmony exports
47 | /******/ __webpack_require__.d = function(exports, name, getter) {
48 | /******/ if(!__webpack_require__.o(exports, name)) {
49 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
50 | /******/ }
51 | /******/ };
52 | /******/
53 | /******/ // define __esModule on exports
54 | /******/ __webpack_require__.r = function(exports) {
55 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
56 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
57 | /******/ }
58 | /******/ Object.defineProperty(exports, '__esModule', { value: true });
59 | /******/ };
60 | /******/
61 | /******/ // create a fake namespace object
62 | /******/ // mode & 1: value is a module id, require it
63 | /******/ // mode & 2: merge all properties of value into the ns
64 | /******/ // mode & 4: return value when already ns object
65 | /******/ // mode & 8|1: behave like require
66 | /******/ __webpack_require__.t = function(value, mode) {
67 | /******/ if(mode & 1) value = __webpack_require__(value);
68 | /******/ if(mode & 8) return value;
69 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
70 | /******/ var ns = Object.create(null);
71 | /******/ __webpack_require__.r(ns);
72 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
73 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
74 | /******/ return ns;
75 | /******/ };
76 | /******/
77 | /******/ // getDefaultExport function for compatibility with non-harmony modules
78 | /******/ __webpack_require__.n = function(module) {
79 | /******/ var getter = module && module.__esModule ?
80 | /******/ function getDefault() { return module['default']; } :
81 | /******/ function getModuleExports() { return module; };
82 | /******/ __webpack_require__.d(getter, 'a', getter);
83 | /******/ return getter;
84 | /******/ };
85 | /******/
86 | /******/ // Object.prototype.hasOwnProperty.call
87 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
88 | /******/
89 | /******/ // __webpack_public_path__
90 | /******/ __webpack_require__.p = "";
91 | /******/
92 | /******/
93 | /******/ // Load entry module and return exports
94 | /******/ return __webpack_require__(__webpack_require__.s = 5);
95 | /******/ })
96 | /************************************************************************/
97 | /******/ ([
98 | /* 0 */
99 | /***/ (function(module, exports) {
100 |
101 | module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
102 |
103 | /***/ }),
104 | /* 1 */
105 | /***/ (function(module, exports) {
106 |
107 | module.exports = __WEBPACK_EXTERNAL_MODULE__1__;
108 |
109 | /***/ }),
110 | /* 2 */
111 | /***/ (function(module, exports, __webpack_require__) {
112 |
113 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
114 | Copyright (c) 2018 Jed Watson.
115 | Licensed under the MIT License (MIT), see
116 | http://jedwatson.github.io/classnames
117 | */
118 | /* global define */
119 |
120 | (function () {
121 | 'use strict';
122 |
123 | var hasOwn = {}.hasOwnProperty;
124 |
125 | function classNames() {
126 | var classes = [];
127 |
128 | for (var i = 0; i < arguments.length; i++) {
129 | var arg = arguments[i];
130 | if (!arg) continue;
131 |
132 | var argType = typeof arg;
133 |
134 | if (argType === 'string' || argType === 'number') {
135 | classes.push(arg);
136 | } else if (Array.isArray(arg)) {
137 | if (arg.length) {
138 | var inner = classNames.apply(null, arg);
139 | if (inner) {
140 | classes.push(inner);
141 | }
142 | }
143 | } else if (argType === 'object') {
144 | if (arg.toString === Object.prototype.toString) {
145 | for (var key in arg) {
146 | if (hasOwn.call(arg, key) && arg[key]) {
147 | classes.push(key);
148 | }
149 | }
150 | } else {
151 | classes.push(arg.toString());
152 | }
153 | }
154 | }
155 |
156 | return classes.join(' ');
157 | }
158 |
159 | if ( true && module.exports) {
160 | classNames.default = classNames;
161 | module.exports = classNames;
162 | } else if (true) {
163 | // register as 'classnames', consistent with npm package name
164 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
165 | return classNames;
166 | }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
167 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
168 | } else {}
169 | }());
170 |
171 |
172 | /***/ }),
173 | /* 3 */
174 | /***/ (function(module, exports) {
175 |
176 | module.exports = __WEBPACK_EXTERNAL_MODULE__3__;
177 |
178 | /***/ }),
179 | /* 4 */
180 | /***/ (function(module, exports, __webpack_require__) {
181 |
182 | "use strict";
183 | // Copyright Joyent, Inc. and other Node contributors.
184 | //
185 | // Permission is hereby granted, free of charge, to any person obtaining a
186 | // copy of this software and associated documentation files (the
187 | // "Software"), to deal in the Software without restriction, including
188 | // without limitation the rights to use, copy, modify, merge, publish,
189 | // distribute, sublicense, and/or sell copies of the Software, and to permit
190 | // persons to whom the Software is furnished to do so, subject to the
191 | // following conditions:
192 | //
193 | // The above copyright notice and this permission notice shall be included
194 | // in all copies or substantial portions of the Software.
195 | //
196 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
197 | // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
198 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
199 | // NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
200 | // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
201 | // OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
202 | // USE OR OTHER DEALINGS IN THE SOFTWARE.
203 |
204 |
205 |
206 | var R = typeof Reflect === 'object' ? Reflect : null
207 | var ReflectApply = R && typeof R.apply === 'function'
208 | ? R.apply
209 | : function ReflectApply(target, receiver, args) {
210 | return Function.prototype.apply.call(target, receiver, args);
211 | }
212 |
213 | var ReflectOwnKeys
214 | if (R && typeof R.ownKeys === 'function') {
215 | ReflectOwnKeys = R.ownKeys
216 | } else if (Object.getOwnPropertySymbols) {
217 | ReflectOwnKeys = function ReflectOwnKeys(target) {
218 | return Object.getOwnPropertyNames(target)
219 | .concat(Object.getOwnPropertySymbols(target));
220 | };
221 | } else {
222 | ReflectOwnKeys = function ReflectOwnKeys(target) {
223 | return Object.getOwnPropertyNames(target);
224 | };
225 | }
226 |
227 | function ProcessEmitWarning(warning) {
228 | if (console && console.warn) console.warn(warning);
229 | }
230 |
231 | var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
232 | return value !== value;
233 | }
234 |
235 | function EventEmitter() {
236 | EventEmitter.init.call(this);
237 | }
238 | module.exports = EventEmitter;
239 | module.exports.once = once;
240 |
241 | // Backwards-compat with node 0.10.x
242 | EventEmitter.EventEmitter = EventEmitter;
243 |
244 | EventEmitter.prototype._events = undefined;
245 | EventEmitter.prototype._eventsCount = 0;
246 | EventEmitter.prototype._maxListeners = undefined;
247 |
248 | // By default EventEmitters will print a warning if more than 10 listeners are
249 | // added to it. This is a useful default which helps finding memory leaks.
250 | var defaultMaxListeners = 10;
251 |
252 | function checkListener(listener) {
253 | if (typeof listener !== 'function') {
254 | throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
255 | }
256 | }
257 |
258 | Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
259 | enumerable: true,
260 | get: function() {
261 | return defaultMaxListeners;
262 | },
263 | set: function(arg) {
264 | if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
265 | throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
266 | }
267 | defaultMaxListeners = arg;
268 | }
269 | });
270 |
271 | EventEmitter.init = function() {
272 |
273 | if (this._events === undefined ||
274 | this._events === Object.getPrototypeOf(this)._events) {
275 | this._events = Object.create(null);
276 | this._eventsCount = 0;
277 | }
278 |
279 | this._maxListeners = this._maxListeners || undefined;
280 | };
281 |
282 | // Obviously not all Emitters should be limited to 10. This function allows
283 | // that to be increased. Set to zero for unlimited.
284 | EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
285 | if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
286 | throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
287 | }
288 | this._maxListeners = n;
289 | return this;
290 | };
291 |
292 | function _getMaxListeners(that) {
293 | if (that._maxListeners === undefined)
294 | return EventEmitter.defaultMaxListeners;
295 | return that._maxListeners;
296 | }
297 |
298 | EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
299 | return _getMaxListeners(this);
300 | };
301 |
302 | EventEmitter.prototype.emit = function emit(type) {
303 | var args = [];
304 | for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
305 | var doError = (type === 'error');
306 |
307 | var events = this._events;
308 | if (events !== undefined)
309 | doError = (doError && events.error === undefined);
310 | else if (!doError)
311 | return false;
312 |
313 | // If there is no 'error' event listener then throw.
314 | if (doError) {
315 | var er;
316 | if (args.length > 0)
317 | er = args[0];
318 | if (er instanceof Error) {
319 | // Note: The comments on the `throw` lines are intentional, they show
320 | // up in Node's output if this results in an unhandled exception.
321 | throw er; // Unhandled 'error' event
322 | }
323 | // At least give some kind of context to the user
324 | var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
325 | err.context = er;
326 | throw err; // Unhandled 'error' event
327 | }
328 |
329 | var handler = events[type];
330 |
331 | if (handler === undefined)
332 | return false;
333 |
334 | if (typeof handler === 'function') {
335 | ReflectApply(handler, this, args);
336 | } else {
337 | var len = handler.length;
338 | var listeners = arrayClone(handler, len);
339 | for (var i = 0; i < len; ++i)
340 | ReflectApply(listeners[i], this, args);
341 | }
342 |
343 | return true;
344 | };
345 |
346 | function _addListener(target, type, listener, prepend) {
347 | var m;
348 | var events;
349 | var existing;
350 |
351 | checkListener(listener);
352 |
353 | events = target._events;
354 | if (events === undefined) {
355 | events = target._events = Object.create(null);
356 | target._eventsCount = 0;
357 | } else {
358 | // To avoid recursion in the case that type === "newListener"! Before
359 | // adding it to the listeners, first emit "newListener".
360 | if (events.newListener !== undefined) {
361 | target.emit('newListener', type,
362 | listener.listener ? listener.listener : listener);
363 |
364 | // Re-assign `events` because a newListener handler could have caused the
365 | // this._events to be assigned to a new object
366 | events = target._events;
367 | }
368 | existing = events[type];
369 | }
370 |
371 | if (existing === undefined) {
372 | // Optimize the case of one listener. Don't need the extra array object.
373 | existing = events[type] = listener;
374 | ++target._eventsCount;
375 | } else {
376 | if (typeof existing === 'function') {
377 | // Adding the second element, need to change to array.
378 | existing = events[type] =
379 | prepend ? [listener, existing] : [existing, listener];
380 | // If we've already got an array, just append.
381 | } else if (prepend) {
382 | existing.unshift(listener);
383 | } else {
384 | existing.push(listener);
385 | }
386 |
387 | // Check for listener leak
388 | m = _getMaxListeners(target);
389 | if (m > 0 && existing.length > m && !existing.warned) {
390 | existing.warned = true;
391 | // No error code for this since it is a Warning
392 | // eslint-disable-next-line no-restricted-syntax
393 | var w = new Error('Possible EventEmitter memory leak detected. ' +
394 | existing.length + ' ' + String(type) + ' listeners ' +
395 | 'added. Use emitter.setMaxListeners() to ' +
396 | 'increase limit');
397 | w.name = 'MaxListenersExceededWarning';
398 | w.emitter = target;
399 | w.type = type;
400 | w.count = existing.length;
401 | ProcessEmitWarning(w);
402 | }
403 | }
404 |
405 | return target;
406 | }
407 |
408 | EventEmitter.prototype.addListener = function addListener(type, listener) {
409 | return _addListener(this, type, listener, false);
410 | };
411 |
412 | EventEmitter.prototype.on = EventEmitter.prototype.addListener;
413 |
414 | EventEmitter.prototype.prependListener =
415 | function prependListener(type, listener) {
416 | return _addListener(this, type, listener, true);
417 | };
418 |
419 | function onceWrapper() {
420 | if (!this.fired) {
421 | this.target.removeListener(this.type, this.wrapFn);
422 | this.fired = true;
423 | if (arguments.length === 0)
424 | return this.listener.call(this.target);
425 | return this.listener.apply(this.target, arguments);
426 | }
427 | }
428 |
429 | function _onceWrap(target, type, listener) {
430 | var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener };
431 | var wrapped = onceWrapper.bind(state);
432 | wrapped.listener = listener;
433 | state.wrapFn = wrapped;
434 | return wrapped;
435 | }
436 |
437 | EventEmitter.prototype.once = function once(type, listener) {
438 | checkListener(listener);
439 | this.on(type, _onceWrap(this, type, listener));
440 | return this;
441 | };
442 |
443 | EventEmitter.prototype.prependOnceListener =
444 | function prependOnceListener(type, listener) {
445 | checkListener(listener);
446 | this.prependListener(type, _onceWrap(this, type, listener));
447 | return this;
448 | };
449 |
450 | // Emits a 'removeListener' event if and only if the listener was removed.
451 | EventEmitter.prototype.removeListener =
452 | function removeListener(type, listener) {
453 | var list, events, position, i, originalListener;
454 |
455 | checkListener(listener);
456 |
457 | events = this._events;
458 | if (events === undefined)
459 | return this;
460 |
461 | list = events[type];
462 | if (list === undefined)
463 | return this;
464 |
465 | if (list === listener || list.listener === listener) {
466 | if (--this._eventsCount === 0)
467 | this._events = Object.create(null);
468 | else {
469 | delete events[type];
470 | if (events.removeListener)
471 | this.emit('removeListener', type, list.listener || listener);
472 | }
473 | } else if (typeof list !== 'function') {
474 | position = -1;
475 |
476 | for (i = list.length - 1; i >= 0; i--) {
477 | if (list[i] === listener || list[i].listener === listener) {
478 | originalListener = list[i].listener;
479 | position = i;
480 | break;
481 | }
482 | }
483 |
484 | if (position < 0)
485 | return this;
486 |
487 | if (position === 0)
488 | list.shift();
489 | else {
490 | spliceOne(list, position);
491 | }
492 |
493 | if (list.length === 1)
494 | events[type] = list[0];
495 |
496 | if (events.removeListener !== undefined)
497 | this.emit('removeListener', type, originalListener || listener);
498 | }
499 |
500 | return this;
501 | };
502 |
503 | EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
504 |
505 | EventEmitter.prototype.removeAllListeners =
506 | function removeAllListeners(type) {
507 | var listeners, events, i;
508 |
509 | events = this._events;
510 | if (events === undefined)
511 | return this;
512 |
513 | // not listening for removeListener, no need to emit
514 | if (events.removeListener === undefined) {
515 | if (arguments.length === 0) {
516 | this._events = Object.create(null);
517 | this._eventsCount = 0;
518 | } else if (events[type] !== undefined) {
519 | if (--this._eventsCount === 0)
520 | this._events = Object.create(null);
521 | else
522 | delete events[type];
523 | }
524 | return this;
525 | }
526 |
527 | // emit removeListener for all listeners on all events
528 | if (arguments.length === 0) {
529 | var keys = Object.keys(events);
530 | var key;
531 | for (i = 0; i < keys.length; ++i) {
532 | key = keys[i];
533 | if (key === 'removeListener') continue;
534 | this.removeAllListeners(key);
535 | }
536 | this.removeAllListeners('removeListener');
537 | this._events = Object.create(null);
538 | this._eventsCount = 0;
539 | return this;
540 | }
541 |
542 | listeners = events[type];
543 |
544 | if (typeof listeners === 'function') {
545 | this.removeListener(type, listeners);
546 | } else if (listeners !== undefined) {
547 | // LIFO order
548 | for (i = listeners.length - 1; i >= 0; i--) {
549 | this.removeListener(type, listeners[i]);
550 | }
551 | }
552 |
553 | return this;
554 | };
555 |
556 | function _listeners(target, type, unwrap) {
557 | var events = target._events;
558 |
559 | if (events === undefined)
560 | return [];
561 |
562 | var evlistener = events[type];
563 | if (evlistener === undefined)
564 | return [];
565 |
566 | if (typeof evlistener === 'function')
567 | return unwrap ? [evlistener.listener || evlistener] : [evlistener];
568 |
569 | return unwrap ?
570 | unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
571 | }
572 |
573 | EventEmitter.prototype.listeners = function listeners(type) {
574 | return _listeners(this, type, true);
575 | };
576 |
577 | EventEmitter.prototype.rawListeners = function rawListeners(type) {
578 | return _listeners(this, type, false);
579 | };
580 |
581 | EventEmitter.listenerCount = function(emitter, type) {
582 | if (typeof emitter.listenerCount === 'function') {
583 | return emitter.listenerCount(type);
584 | } else {
585 | return listenerCount.call(emitter, type);
586 | }
587 | };
588 |
589 | EventEmitter.prototype.listenerCount = listenerCount;
590 | function listenerCount(type) {
591 | var events = this._events;
592 |
593 | if (events !== undefined) {
594 | var evlistener = events[type];
595 |
596 | if (typeof evlistener === 'function') {
597 | return 1;
598 | } else if (evlistener !== undefined) {
599 | return evlistener.length;
600 | }
601 | }
602 |
603 | return 0;
604 | }
605 |
606 | EventEmitter.prototype.eventNames = function eventNames() {
607 | return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
608 | };
609 |
610 | function arrayClone(arr, n) {
611 | var copy = new Array(n);
612 | for (var i = 0; i < n; ++i)
613 | copy[i] = arr[i];
614 | return copy;
615 | }
616 |
617 | function spliceOne(list, index) {
618 | for (; index + 1 < list.length; index++)
619 | list[index] = list[index + 1];
620 | list.pop();
621 | }
622 |
623 | function unwrapListeners(arr) {
624 | var ret = new Array(arr.length);
625 | for (var i = 0; i < ret.length; ++i) {
626 | ret[i] = arr[i].listener || arr[i];
627 | }
628 | return ret;
629 | }
630 |
631 | function once(emitter, name) {
632 | return new Promise(function (resolve, reject) {
633 | function errorListener(err) {
634 | emitter.removeListener(name, resolver);
635 | reject(err);
636 | }
637 |
638 | function resolver() {
639 | if (typeof emitter.removeListener === 'function') {
640 | emitter.removeListener('error', errorListener);
641 | }
642 | resolve([].slice.call(arguments));
643 | };
644 |
645 | eventTargetAgnosticAddListener(emitter, name, resolver, { once: true });
646 | if (name !== 'error') {
647 | addErrorHandlerIfEventEmitter(emitter, errorListener, { once: true });
648 | }
649 | });
650 | }
651 |
652 | function addErrorHandlerIfEventEmitter(emitter, handler, flags) {
653 | if (typeof emitter.on === 'function') {
654 | eventTargetAgnosticAddListener(emitter, 'error', handler, flags);
655 | }
656 | }
657 |
658 | function eventTargetAgnosticAddListener(emitter, name, listener, flags) {
659 | if (typeof emitter.on === 'function') {
660 | if (flags.once) {
661 | emitter.once(name, listener);
662 | } else {
663 | emitter.on(name, listener);
664 | }
665 | } else if (typeof emitter.addEventListener === 'function') {
666 | // EventTarget does not have `error` event semantics like Node
667 | // EventEmitters, we do not listen for `error` events here.
668 | emitter.addEventListener(name, function wrapListener(arg) {
669 | // IE does not have builtin `{ once: true }` support so we
670 | // have to do it manually.
671 | if (flags.once) {
672 | emitter.removeEventListener(name, wrapListener);
673 | }
674 | listener(arg);
675 | });
676 | } else {
677 | throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type ' + typeof emitter);
678 | }
679 | }
680 |
681 |
682 | /***/ }),
683 | /* 5 */
684 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
685 |
686 | "use strict";
687 | // ESM COMPAT FLAG
688 | __webpack_require__.r(__webpack_exports__);
689 |
690 | // EXPORTS
691 | __webpack_require__.d(__webpack_exports__, "Notifications", function() { return /* reexport */ src_Notifications; });
692 | __webpack_require__.d(__webpack_exports__, "NotificationContainer", function() { return /* reexport */ src_NotificationContainer; });
693 | __webpack_require__.d(__webpack_exports__, "NotificationManager", function() { return /* reexport */ src_NotificationManager; });
694 |
695 | // EXTERNAL MODULE: external {"root":"React","commonjs":"react","commonjs2":"react","amd":"react"}
696 | var external_root_React_commonjs_react_commonjs2_react_amd_react_ = __webpack_require__(0);
697 | var external_root_React_commonjs_react_commonjs2_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs_react_commonjs2_react_amd_react_);
698 |
699 | // EXTERNAL MODULE: external {"root":"PropTypes","commonjs":"prop-types","commonjs2":"prop-types","amd":"prop-types"}
700 | var external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_ = __webpack_require__(1);
701 | var external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_);
702 |
703 | // EXTERNAL MODULE: external {"root":["ReactTransitionGroup"],"commonjs":"react-transition-group","commonjs2":"react-transition-group","amd":"react-transition-group"}
704 | var external_root_ReactTransitionGroup_commonjs_react_transition_group_commonjs2_react_transition_group_amd_react_transition_group_ = __webpack_require__(3);
705 |
706 | // EXTERNAL MODULE: ./node_modules/classnames/index.js
707 | var classnames = __webpack_require__(2);
708 | var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
709 |
710 | // CONCATENATED MODULE: ./src/Notification.js
711 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
712 |
713 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
714 |
715 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
716 |
717 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
718 |
719 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
720 |
721 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
722 |
723 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
724 |
725 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
726 |
727 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
728 |
729 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
730 |
731 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
732 |
733 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
734 |
735 |
736 |
737 |
738 |
739 | var Notification_Notification = /*#__PURE__*/function (_React$Component) {
740 | _inherits(Notification, _React$Component);
741 |
742 | var _super = _createSuper(Notification);
743 |
744 | function Notification() {
745 | var _this;
746 |
747 | _classCallCheck(this, Notification);
748 |
749 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
750 | args[_key] = arguments[_key];
751 | }
752 |
753 | _this = _super.call.apply(_super, [this].concat(args));
754 |
755 | _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
756 | var timeOut = _this.props.timeOut;
757 |
758 | if (timeOut !== 0) {
759 | _this.timer = setTimeout(_this.requestHide, timeOut);
760 | }
761 | });
762 |
763 | _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
764 | if (_this.timer) {
765 | clearTimeout(_this.timer);
766 | }
767 | });
768 |
769 | _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
770 | var onClick = _this.props.onClick;
771 |
772 | if (onClick) {
773 | onClick();
774 | }
775 |
776 | _this.requestHide();
777 | });
778 |
779 | _defineProperty(_assertThisInitialized(_this), "requestHide", function () {
780 | var onRequestHide = _this.props.onRequestHide;
781 |
782 | if (onRequestHide) {
783 | onRequestHide();
784 | }
785 | });
786 |
787 | return _this;
788 | }
789 |
790 | _createClass(Notification, [{
791 | key: "render",
792 | value: function render() {
793 | var _this$props = this.props,
794 | type = _this$props.type,
795 | message = _this$props.message;
796 | var title = this.props.title;
797 | var className = classnames_default()(['notification', "notification-".concat(type)]);
798 | title = title ? /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement("h4", {
799 | className: "title"
800 | }, title) : null;
801 | return /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement("div", {
802 | className: className,
803 | onClick: this.handleClick
804 | }, /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement("div", {
805 | className: "notification-message",
806 | role: "alert"
807 | }, title, /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement("div", {
808 | className: "message"
809 | }, message)));
810 | }
811 | }]);
812 |
813 | return Notification;
814 | }(external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.Component);
815 |
816 | _defineProperty(Notification_Notification, "propTypes", {
817 | type: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.oneOf(['info', 'success', 'warning', 'error']),
818 | title: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.node,
819 | message: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.node,
820 | timeOut: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.number,
821 | onClick: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.func,
822 | onRequestHide: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.func
823 | });
824 |
825 | _defineProperty(Notification_Notification, "defaultProps", {
826 | type: 'info',
827 | title: null,
828 | message: null,
829 | timeOut: 5000,
830 | onClick: function onClick() {},
831 | onRequestHide: function onRequestHide() {}
832 | });
833 |
834 | /* harmony default export */ var src_Notification = (Notification_Notification);
835 | // CONCATENATED MODULE: ./src/Notifications.js
836 | function Notifications_typeof(obj) { "@babel/helpers - typeof"; return Notifications_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, Notifications_typeof(obj); }
837 |
838 | function Notifications_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
839 |
840 | function Notifications_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
841 |
842 | function Notifications_createClass(Constructor, protoProps, staticProps) { if (protoProps) Notifications_defineProperties(Constructor.prototype, protoProps); if (staticProps) Notifications_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
843 |
844 | function Notifications_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) Notifications_setPrototypeOf(subClass, superClass); }
845 |
846 | function Notifications_setPrototypeOf(o, p) { Notifications_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Notifications_setPrototypeOf(o, p); }
847 |
848 | function Notifications_createSuper(Derived) { var hasNativeReflectConstruct = Notifications_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Notifications_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Notifications_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Notifications_possibleConstructorReturn(this, result); }; }
849 |
850 | function Notifications_possibleConstructorReturn(self, call) { if (call && (Notifications_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return Notifications_assertThisInitialized(self); }
851 |
852 | function Notifications_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
853 |
854 | function Notifications_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
855 |
856 | function Notifications_getPrototypeOf(o) { Notifications_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Notifications_getPrototypeOf(o); }
857 |
858 | function Notifications_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
859 |
860 |
861 |
862 |
863 |
864 |
865 |
866 | var Notifications_Notifications = /*#__PURE__*/function (_React$Component) {
867 | Notifications_inherits(Notifications, _React$Component);
868 |
869 | var _super = Notifications_createSuper(Notifications);
870 |
871 | function Notifications() {
872 | var _this;
873 |
874 | Notifications_classCallCheck(this, Notifications);
875 |
876 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
877 | args[_key] = arguments[_key];
878 | }
879 |
880 | _this = _super.call.apply(_super, [this].concat(args));
881 |
882 | Notifications_defineProperty(Notifications_assertThisInitialized(_this), "handleRequestHide", function (notification) {
883 | return function () {
884 | var onRequestHide = _this.props.onRequestHide;
885 |
886 | if (onRequestHide) {
887 | onRequestHide(notification);
888 | }
889 | };
890 | });
891 |
892 | return _this;
893 | }
894 |
895 | Notifications_createClass(Notifications, [{
896 | key: "render",
897 | value: function render() {
898 | var _this2 = this;
899 |
900 | var _this$props = this.props,
901 | notifications = _this$props.notifications,
902 | enterTimeout = _this$props.enterTimeout,
903 | leaveTimeout = _this$props.leaveTimeout;
904 | var className = classnames_default()('notification-container', {
905 | 'notification-container-empty': notifications.length === 0
906 | });
907 | var items = notifications.map(function (notification) {
908 | var key = notification.id || new Date().getTime();
909 | return /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement(external_root_ReactTransitionGroup_commonjs_react_transition_group_commonjs2_react_transition_group_amd_react_transition_group_["CSSTransition"], {
910 | key: key,
911 | classNames: "notification",
912 | timeout: {
913 | enter: enterTimeout,
914 | exit: leaveTimeout
915 | }
916 | }, /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement(src_Notification, {
917 | type: notification.type,
918 | title: notification.title,
919 | message: notification.message,
920 | timeOut: notification.timeOut,
921 | onClick: notification.onClick,
922 | onRequestHide: _this2.handleRequestHide(notification)
923 | }));
924 | });
925 | return /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement("div", {
926 | className: className
927 | }, /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement(external_root_ReactTransitionGroup_commonjs_react_transition_group_commonjs2_react_transition_group_amd_react_transition_group_["TransitionGroup"], null, items));
928 | }
929 | }]);
930 |
931 | return Notifications;
932 | }(external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.Component);
933 |
934 | Notifications_defineProperty(Notifications_Notifications, "propTypes", {
935 | notifications: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.array,
936 | onRequestHide: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.func,
937 | enterTimeout: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.number,
938 | leaveTimeout: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.number
939 | });
940 |
941 | Notifications_defineProperty(Notifications_Notifications, "defaultProps", {
942 | notifications: [],
943 | onRequestHide: function onRequestHide() {},
944 | enterTimeout: 400,
945 | leaveTimeout: 400
946 | });
947 |
948 | /* harmony default export */ var src_Notifications = (Notifications_Notifications);
949 | // EXTERNAL MODULE: ./node_modules/events/events.js
950 | var events = __webpack_require__(4);
951 |
952 | // CONCATENATED MODULE: ./src/NotificationManager.js
953 | function NotificationManager_typeof(obj) { "@babel/helpers - typeof"; return NotificationManager_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, NotificationManager_typeof(obj); }
954 |
955 | function NotificationManager_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
956 |
957 | function NotificationManager_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
958 |
959 | function NotificationManager_createClass(Constructor, protoProps, staticProps) { if (protoProps) NotificationManager_defineProperties(Constructor.prototype, protoProps); if (staticProps) NotificationManager_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
960 |
961 | function NotificationManager_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) NotificationManager_setPrototypeOf(subClass, superClass); }
962 |
963 | function NotificationManager_setPrototypeOf(o, p) { NotificationManager_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return NotificationManager_setPrototypeOf(o, p); }
964 |
965 | function NotificationManager_createSuper(Derived) { var hasNativeReflectConstruct = NotificationManager_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = NotificationManager_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = NotificationManager_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return NotificationManager_possibleConstructorReturn(this, result); }; }
966 |
967 | function NotificationManager_possibleConstructorReturn(self, call) { if (call && (NotificationManager_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return NotificationManager_assertThisInitialized(self); }
968 |
969 | function NotificationManager_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
970 |
971 | function NotificationManager_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
972 |
973 | function NotificationManager_getPrototypeOf(o) { NotificationManager_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return NotificationManager_getPrototypeOf(o); }
974 |
975 |
976 |
977 | var createUUID = function createUUID() {
978 | var pattern = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
979 | return pattern.replace(/[xy]/g, function (c) {
980 | var r = Math.random() * 16 | 0;
981 | var v = c === 'x' ? r : r & 0x3 | 0x8;
982 | return v.toString(16);
983 | });
984 | };
985 |
986 | var Constants = {
987 | CHANGE: 'change',
988 | INFO: 'info',
989 | SUCCESS: 'success',
990 | WARNING: 'warning',
991 | ERROR: 'error'
992 | };
993 |
994 | var NotificationManager = /*#__PURE__*/function (_EventEmitter) {
995 | NotificationManager_inherits(NotificationManager, _EventEmitter);
996 |
997 | var _super = NotificationManager_createSuper(NotificationManager);
998 |
999 | function NotificationManager() {
1000 | var _this;
1001 |
1002 | NotificationManager_classCallCheck(this, NotificationManager);
1003 |
1004 | _this = _super.call(this);
1005 | _this.listNotify = [];
1006 | return _this;
1007 | }
1008 |
1009 | NotificationManager_createClass(NotificationManager, [{
1010 | key: "create",
1011 | value: function create(notify) {
1012 | var defaultNotify = {
1013 | id: createUUID(),
1014 | type: 'info',
1015 | title: null,
1016 | message: null,
1017 | timeOut: 5000
1018 | };
1019 |
1020 | if (notify.priority) {
1021 | this.listNotify.unshift(Object.assign(defaultNotify, notify));
1022 | } else {
1023 | this.listNotify.push(Object.assign(defaultNotify, notify));
1024 | }
1025 |
1026 | this.emitChange();
1027 | }
1028 | }, {
1029 | key: "info",
1030 | value: function info(message, title, timeOut, onClick, priority) {
1031 | this.create({
1032 | type: Constants.INFO,
1033 | message: message,
1034 | title: title,
1035 | timeOut: timeOut,
1036 | onClick: onClick,
1037 | priority: priority
1038 | });
1039 | }
1040 | }, {
1041 | key: "success",
1042 | value: function success(message, title, timeOut, onClick, priority) {
1043 | this.create({
1044 | type: Constants.SUCCESS,
1045 | message: message,
1046 | title: title,
1047 | timeOut: timeOut,
1048 | onClick: onClick,
1049 | priority: priority
1050 | });
1051 | }
1052 | }, {
1053 | key: "warning",
1054 | value: function warning(message, title, timeOut, onClick, priority) {
1055 | this.create({
1056 | type: Constants.WARNING,
1057 | message: message,
1058 | title: title,
1059 | timeOut: timeOut,
1060 | onClick: onClick,
1061 | priority: priority
1062 | });
1063 | }
1064 | }, {
1065 | key: "error",
1066 | value: function error(message, title, timeOut, onClick, priority) {
1067 | this.create({
1068 | type: Constants.ERROR,
1069 | message: message,
1070 | title: title,
1071 | timeOut: timeOut,
1072 | onClick: onClick,
1073 | priority: priority
1074 | });
1075 | }
1076 | }, {
1077 | key: "remove",
1078 | value: function remove(notification) {
1079 | this.listNotify = this.listNotify.filter(function (n) {
1080 | return notification.id !== n.id;
1081 | });
1082 | this.emitChange();
1083 | }
1084 | }, {
1085 | key: "removeAll",
1086 | value: function removeAll() {
1087 | this.listNotify.length = 0;
1088 | this.emitChange();
1089 | }
1090 | }, {
1091 | key: "emitChange",
1092 | value: function emitChange() {
1093 | this.emit(Constants.CHANGE, this.listNotify);
1094 | }
1095 | }, {
1096 | key: "addChangeListener",
1097 | value: function addChangeListener(callback) {
1098 | this.addListener(Constants.CHANGE, callback);
1099 | }
1100 | }, {
1101 | key: "removeChangeListener",
1102 | value: function removeChangeListener(callback) {
1103 | this.removeListener(Constants.CHANGE, callback);
1104 | }
1105 | }]);
1106 |
1107 | return NotificationManager;
1108 | }(events["EventEmitter"]);
1109 |
1110 | /* harmony default export */ var src_NotificationManager = (new NotificationManager());
1111 | // CONCATENATED MODULE: ./src/NotificationContainer.js
1112 | function NotificationContainer_typeof(obj) { "@babel/helpers - typeof"; return NotificationContainer_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, NotificationContainer_typeof(obj); }
1113 |
1114 | function NotificationContainer_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1115 |
1116 | function NotificationContainer_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
1117 |
1118 | function NotificationContainer_createClass(Constructor, protoProps, staticProps) { if (protoProps) NotificationContainer_defineProperties(Constructor.prototype, protoProps); if (staticProps) NotificationContainer_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
1119 |
1120 | function NotificationContainer_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) NotificationContainer_setPrototypeOf(subClass, superClass); }
1121 |
1122 | function NotificationContainer_setPrototypeOf(o, p) { NotificationContainer_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return NotificationContainer_setPrototypeOf(o, p); }
1123 |
1124 | function NotificationContainer_createSuper(Derived) { var hasNativeReflectConstruct = NotificationContainer_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = NotificationContainer_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = NotificationContainer_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return NotificationContainer_possibleConstructorReturn(this, result); }; }
1125 |
1126 | function NotificationContainer_possibleConstructorReturn(self, call) { if (call && (NotificationContainer_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return NotificationContainer_assertThisInitialized(self); }
1127 |
1128 | function NotificationContainer_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
1129 |
1130 | function NotificationContainer_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
1131 |
1132 | function NotificationContainer_getPrototypeOf(o) { NotificationContainer_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return NotificationContainer_getPrototypeOf(o); }
1133 |
1134 | function NotificationContainer_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
1135 |
1136 |
1137 |
1138 |
1139 |
1140 |
1141 | var NotificationContainer_NotificationContainer = /*#__PURE__*/function (_React$Component) {
1142 | NotificationContainer_inherits(NotificationContainer, _React$Component);
1143 |
1144 | var _super = NotificationContainer_createSuper(NotificationContainer);
1145 |
1146 | function NotificationContainer() {
1147 | var _this;
1148 |
1149 | NotificationContainer_classCallCheck(this, NotificationContainer);
1150 |
1151 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1152 | args[_key] = arguments[_key];
1153 | }
1154 |
1155 | _this = _super.call.apply(_super, [this].concat(args));
1156 |
1157 | NotificationContainer_defineProperty(NotificationContainer_assertThisInitialized(_this), "state", {
1158 | notifications: []
1159 | });
1160 |
1161 | NotificationContainer_defineProperty(NotificationContainer_assertThisInitialized(_this), "componentDidMount", function () {
1162 | src_NotificationManager.addChangeListener(_this.handleStoreChange);
1163 | });
1164 |
1165 | NotificationContainer_defineProperty(NotificationContainer_assertThisInitialized(_this), "componentWillUnmount", function () {
1166 | src_NotificationManager.removeChangeListener(_this.handleStoreChange);
1167 | });
1168 |
1169 | NotificationContainer_defineProperty(NotificationContainer_assertThisInitialized(_this), "handleStoreChange", function (notifications) {
1170 | _this.setState({
1171 | notifications: notifications
1172 | });
1173 | });
1174 |
1175 | NotificationContainer_defineProperty(NotificationContainer_assertThisInitialized(_this), "handleRequestHide", function (notification) {
1176 | src_NotificationManager.remove(notification);
1177 | });
1178 |
1179 | return _this;
1180 | }
1181 |
1182 | NotificationContainer_createClass(NotificationContainer, [{
1183 | key: "render",
1184 | value: function render() {
1185 | var notifications = this.state.notifications;
1186 | var _this$props = this.props,
1187 | enterTimeout = _this$props.enterTimeout,
1188 | leaveTimeout = _this$props.leaveTimeout;
1189 | return /*#__PURE__*/external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.createElement(src_Notifications, {
1190 | enterTimeout: enterTimeout,
1191 | leaveTimeout: leaveTimeout,
1192 | notifications: notifications,
1193 | onRequestHide: this.handleRequestHide
1194 | });
1195 | }
1196 | }]);
1197 |
1198 | return NotificationContainer;
1199 | }(external_root_React_commonjs_react_commonjs2_react_amd_react_default.a.Component);
1200 |
1201 | NotificationContainer_defineProperty(NotificationContainer_NotificationContainer, "propTypes", {
1202 | enterTimeout: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.number,
1203 | leaveTimeout: external_root_PropTypes_commonjs_prop_types_commonjs2_prop_types_amd_prop_types_default.a.number
1204 | });
1205 |
1206 | NotificationContainer_defineProperty(NotificationContainer_NotificationContainer, "defaultProps", {
1207 | enterTimeout: 400,
1208 | leaveTimeout: 400
1209 | });
1210 |
1211 | /* harmony default export */ var src_NotificationContainer = (NotificationContainer_NotificationContainer);
1212 | // CONCATENATED MODULE: ./src/index.js
1213 |
1214 |
1215 |
1216 |
1217 | /* harmony default export */ var src = __webpack_exports__["default"] = (src_Notifications);
1218 |
1219 | /***/ })
1220 | /******/ ]);
1221 | });
--------------------------------------------------------------------------------
/example/src/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './components/App';
4 |
5 | import 'bootstrap/dist/css/bootstrap.css';
6 | import '../../src/notifications.scss';
7 | import './assets/styles/app.scss';
8 |
9 | const run = () => {
10 | ReactDOM.render(, document.getElementById('app'));
11 | };
12 |
13 | window.addEventListener('DOMContentLoaded', run);
14 |
--------------------------------------------------------------------------------
/example/src/assets/fonts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/example/src/assets/fonts/.gitkeep
--------------------------------------------------------------------------------
/example/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
22 |
--------------------------------------------------------------------------------
/example/src/assets/styles/_animations.scss:
--------------------------------------------------------------------------------
1 | @keyframes spinner {
2 | 0% {
3 | transform: rotate(0deg);
4 | }
5 | 100% {
6 | transform: rotate(360deg);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/example/src/assets/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix() {
2 | &:before,
3 | &:after {
4 | content: " ";
5 | display: table;
6 | }
7 | &:after {
8 | clear: both;
9 | }
10 | }
11 |
12 | @function str-replace($string, $search, $replace: "") {
13 | $index: str-index($string, $search);
14 | @if $index {
15 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
16 | }
17 | @return $string;
18 | }
19 |
20 | @mixin font-face($name, $path, $weight: null, $style: null, $extensions: eot woff2 woff ttf svg) {
21 | $src: null;
22 | $extensionMods: (
23 | eot: "?",
24 | svg: "#" + str-replace($name, " ", "_")
25 | );
26 | $formats: (
27 | otf: "opentype",
28 | ttf: "truetype"
29 | );
30 | @each $extension in $extensions {
31 | $extensionMod: if(map-has-key($extensionMods, $extension), $extension + map-get($extensionMods, $extension), $extension);
32 | $format: if(map-has-key($formats, $extension), map-get($formats, $extension), $extension);
33 | $src: append($src, url(quote($path + "." + $extensionMod)) format(quote($format)), comma);
34 | }
35 | @font-face {
36 | font-family: quote($name);
37 | font-style: $style;
38 | font-weight: $weight;
39 | src: $src;
40 | }
41 | }
42 |
43 | @mixin placeholder {
44 | &::-webkit-input-placeholder {
45 | @content;
46 | }
47 | &::-moz-placeholder {
48 | @content;
49 | }
50 | &:-ms-input-placeholder {
51 | @content;
52 | }
53 | }
54 |
55 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
56 | $n: index($breakpoint-names, $name);
57 | @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
58 | }
59 |
60 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
61 | $min: map-get($breakpoints, $name);
62 | @return if($min != 0, $min, null);
63 | }
64 |
65 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
66 | $next: breakpoint-next($name, $breakpoints);
67 | @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
68 | }
69 |
70 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
71 | $min: breakpoint-min($name, $breakpoints);
72 | @if $min {
73 | @media (min-width: $min) {
74 | @content;
75 | }
76 | } @else {
77 | @content;
78 | }
79 | }
80 |
81 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
82 | $max: breakpoint-max($name, $breakpoints);
83 | @if $max {
84 | @media (max-width: $max) {
85 | @content;
86 | }
87 | } @else {
88 | @content;
89 | }
90 | }
91 |
92 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
93 | @include media-breakpoint-up($name, $breakpoints) {
94 | @include media-breakpoint-down($name, $breakpoints) {
95 | @content;
96 | }
97 | }
98 | }
99 |
100 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
101 | @include media-breakpoint-up($lower, $breakpoints) {
102 | @include media-breakpoint-down($upper, $breakpoints) {
103 | @content;
104 | }
105 | }
106 | }
107 |
108 | @mixin ellipsis() {
109 | display: block;
110 | max-width: 100%;
111 | text-overflow: ellipsis;
112 | white-space: nowrap;
113 | overflow: hidden;
114 | }
115 |
--------------------------------------------------------------------------------
/example/src/assets/styles/_variables.scss:
--------------------------------------------------------------------------------
1 | // Grid
2 | $grid-breakpoints: (xs: 0, sm: 540px, md: 768px, lg: 992px, xl: 1200px);
3 |
4 | // Colors
5 | $primary: #222;
6 |
--------------------------------------------------------------------------------
/example/src/assets/styles/app.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | React flux starter
3 | ========================================================================== */
4 | @import "variables";
5 | @import "mixins";
6 | @import "animations";
7 | @import "components/pre-render";
8 | @import "components/page";
9 | @import "components/header";
10 | @import "components/footer";
11 | @import "pages/home";
12 |
--------------------------------------------------------------------------------
/example/src/assets/styles/components/_footer.scss:
--------------------------------------------------------------------------------
1 | /* Footer
2 | ========================================================================== */
3 | .footer {
4 | background-color: #f8f8f8;
5 | padding: 20px 0;
6 | }
7 |
--------------------------------------------------------------------------------
/example/src/assets/styles/components/_header.scss:
--------------------------------------------------------------------------------
1 | /* Header
2 | ========================================================================== */
3 | .navbar {
4 | border-radius: 0;
5 | margin: 0;
6 | }
7 |
--------------------------------------------------------------------------------
/example/src/assets/styles/components/_page.scss:
--------------------------------------------------------------------------------
1 | /* Page
2 | ========================================================================== */
3 | html,
4 | body,
5 | #app {
6 | height: 100%;
7 | }
8 |
9 | .page {
10 | display: flex;
11 | flex-flow: column;
12 | min-height: 100vh;
13 | &__wrapper {
14 | flex-grow: 1;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/example/src/assets/styles/components/_pre-render.scss:
--------------------------------------------------------------------------------
1 | /* Pre-render
2 | ========================================================================== */
3 | .pre-render {
4 | background: rgba(255, 255, 255, .7);
5 | position: fixed;
6 | top: 0;
7 | left: 0;
8 | width: 100%;
9 | height: 100%;
10 | z-index: 99999;
11 | &__spinner {
12 | width: 48px;
13 | height: 48px;
14 | border: 1px solid lighten($primary, 40%);
15 | border-left-color: darken($primary, 10%);
16 | border-radius: 50%;
17 | animation: spinner 700ms infinite linear;
18 | position: absolute;
19 | top: 50%;
20 | left: 50%;
21 | margin-left: -24px;
22 | margin-top: -24px;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/example/src/assets/styles/pages/_home.scss:
--------------------------------------------------------------------------------
1 | /* Home
2 | ========================================================================== */
3 |
--------------------------------------------------------------------------------
/example/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 | import Header from './Header';
4 | import Footer from './Footer';
5 | import Home from '../pages/Home';
6 | import NotFound from '../pages/NotFound';
7 | import TransitionAnimation from '../pages/TransitionAnimation';
8 | import pkg from '../../../package.json';
9 |
10 | const DEV = process && process.env && process.env.NODE_ENV === 'development';
11 |
12 | const App = () => (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
Simple sample
33 |
34 |
37 |
38 |
41 |
42 |
45 |
46 |
49 |
50 |
51 |
Page Not Found
7 |
8 | );
9 |
10 | export default NotFoundPage;
11 |
--------------------------------------------------------------------------------
/example/src/pages/TransitionAnimation/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Document from '../../components/Document';
3 | import { NotificationContainer, NotificationManager } from '../../../../dist/react-notifications';
4 |
5 | import './notifications.scss';
6 |
7 | class TransitionAnimationPage extends React.Component {
8 | createNotification = (type) => () => {
9 | switch (type) {
10 | case 'info':
11 | NotificationManager.info('Info message');
12 | break;
13 | case 'success':
14 | NotificationManager.success('Success message', 'Title here');
15 | break;
16 | case 'warning':
17 | NotificationManager.warning('Warning message', 'Close after 3000ms', 3000);
18 | break;
19 | case 'error':
20 | NotificationManager.error('Error message', 'Click me!', 5000, () => {
21 | alert('callback');
22 | });
23 | break;
24 | default:
25 | break;
26 | }
27 | };
28 |
29 | render() {
30 | return (
31 |
35 |
36 |
37 |
Transition & animation
38 |
39 |
42 |
43 |
46 |
47 |
50 |
51 |
54 |
55 |
56 | {title}
) : null;
59 | return (
60 |
61 |
62 | {title}
63 |
{message}
64 |
65 |
57 |
58 | {items}
59 |
60 |
61 | );
62 | }
63 | }
64 |
65 | export default Notifications;
66 |
--------------------------------------------------------------------------------
/src/_variables.scss:
--------------------------------------------------------------------------------
1 | $react-notifications-font-base-path: './fonts' !default;
2 |
3 | $react-notifications-transition-time: 0.4s !default;
4 |
5 | $react-notifications-container-top: 0 !default;
6 | $react-notifications-container-right: 0 !default;
7 | $react-notifications-container-z-index: 999999 !default;
8 | $react-notifications-container-width: 320px !default;
9 | $react-notifications-container-top-padding: 0px !default;
10 | $react-notifications-container-max-height: calc(100% - 30px) !default;
11 | $react-notifications-container-right-padding: 15px !default;
12 |
13 | $react-notifications-border-radius: 2px !default;
14 | $react-notifications-padding-top: 15px !default;
15 | $react-notifications-padding-right: 15px !default;
16 | $react-notifications-padding-bottom: 15px !default;
17 | $react-notifications-padding-left: 58px !default;
18 | $react-notifications-color: #fff !default;
19 | $react-notifications-background-color: #ccc !default;
20 | $react-notifications-box-shadow: 0 0 12px #999 !default;
21 | $react-notifications-cursor: pointer !default;
22 | $react-notifications-font-size: 1em !default;
23 | $react-notifications-line-height: 1.2em !default;
24 | $react-notifications-opacity: 0.9 !default;
25 | $react-notifications-margin-top: 15px !default;
26 |
27 | $react-notifications-icon-top: 50% !default;
28 | $react-notifications-icon-left: 15px !default;
29 | $react-notifications-icon-margin-top: -14px !default;
30 | $react-notifications-icon-width: 28px !default;
31 | $react-notifications-icon-height: 28px !default;
32 | $react-notifications-icon-font-size: 28px !default;
33 | $react-notifications-icon-line-height: 28px !default;
34 |
35 | $react-notifications-hover-opacity: 1 !default;
36 |
37 | $react-notifications-title-font-size: 1em !default;
38 | $react-notifications-title-line-height: 1.2em !default;
39 | $react-notifications-title-font-weight: bold !default;
40 | $react-notifications-title-margin: 0 0 5px 0 !default;
41 |
42 | $react-notifications-info-background-color: #2f96b4 !default;
43 | $react-notifications-info-content: "\f05a" !default;
44 | $react-notifications-success-background-color: #51a351 !default;
45 | $react-notifications-success-content: "\f058" !default;
46 | $react-notifications-warning-background-color: #f89406 !default;
47 | $react-notifications-warning-content: "\f06a" !default;
48 | $react-notifications-error-background-color: #bd362f !default;
49 | $react-notifications-error-content: "\f057" !default;
50 |
--------------------------------------------------------------------------------
/src/fonts/notification.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/src/fonts/notification.eot
--------------------------------------------------------------------------------
/src/fonts/notification.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/fonts/notification.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/src/fonts/notification.ttf
--------------------------------------------------------------------------------
/src/fonts/notification.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjrexer/react-notifications/4157e5e6b7874612b7db389b4c7b5c60c76ab192/src/fonts/notification.woff
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Notifications from './Notifications.js';
2 | import NotificationContainer from './NotificationContainer';
3 | import NotificationManager from './NotificationManager';
4 |
5 | export { Notifications, NotificationContainer, NotificationManager };
6 | export default Notifications;
7 |
--------------------------------------------------------------------------------
/src/notifications.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 | @font-face {
4 | font-family: 'Notification';
5 | src: url('#{$react-notifications-font-base-path}/notification.eot?s3g3t9');
6 | src: url('#{$react-notifications-font-base-path}/notification.eot?#iefixs3g3t9') format('embedded-opentype'),
7 | url('#{$react-notifications-font-base-path}/notification.woff?s3g3t9') format('woff'),
8 | url('#{$react-notifications-font-base-path}/notification.ttf?s3g3t9') format('truetype'),
9 | url('#{$react-notifications-font-base-path}/notification.svg?s3g3t9#notification') format('svg');
10 | font-weight: normal;
11 | font-style: normal;
12 | }
13 |
14 | .notification-container {
15 | box-sizing: border-box;
16 | position: fixed;
17 | top: $react-notifications-container-top;
18 | right: $react-notifications-container-right;
19 | z-index: $react-notifications-container-z-index;
20 | width: $react-notifications-container-width;
21 | padding: $react-notifications-container-top-padding $react-notifications-container-right-padding;
22 | max-height: $react-notifications-container-max-height;
23 | overflow-x: hidden;
24 | overflow-y: auto;
25 | }
26 |
27 | .notification {
28 | box-sizing: border-box;
29 | padding: $react-notifications-padding-top $react-notifications-padding-right $react-notifications-padding-bottom $react-notifications-padding-left;
30 | border-radius: $react-notifications-border-radius;
31 | color: $react-notifications-color;
32 | background-color: $react-notifications-background-color;
33 | box-shadow: $react-notifications-box-shadow;
34 | cursor: $react-notifications-cursor;
35 | font-size: $react-notifications-font-size;
36 | line-height: $react-notifications-line-height;
37 | position: relative;
38 | opacity: $react-notifications-opacity;
39 | margin-top: $react-notifications-margin-top;
40 | .title {
41 | font-size: $react-notifications-title-font-size;
42 | line-height: $react-notifications-title-line-height;
43 | font-weight: $react-notifications-title-font-weight;
44 | margin: $react-notifications-title-margin;
45 | }
46 | &:hover, &:focus {
47 | opacity: $react-notifications-hover-opacity;
48 | }
49 | }
50 |
51 | .notification-enter {
52 | visibility: hidden;
53 | transform: translate3d(100%, 0, 0);
54 | }
55 |
56 | .notification-enter.notification-enter-active {
57 | visibility: visible;
58 | transform: translate3d(0, 0, 0);
59 | transition: all $react-notifications-transition-time;
60 | }
61 |
62 | .notification-exit {
63 | visibility: visible;
64 | transform: translate3d(0, 0, 0);
65 | }
66 |
67 | .notification-exit.notification-exit-active {
68 | visibility: hidden;
69 | transform: translate3d(100%, 0, 0);
70 | transition: all $react-notifications-transition-time;
71 | }
72 |
73 | .notification {
74 | &:before {
75 | position: absolute;
76 | top: $react-notifications-icon-top;
77 | left: $react-notifications-icon-left;
78 | margin-top: $react-notifications-icon-margin-top;
79 | display: block;
80 | font-family: 'Notification';
81 | width: $react-notifications-icon-width;
82 | height: $react-notifications-icon-height;
83 | font-size: $react-notifications-icon-font-size;
84 | text-align: center;
85 | line-height: $react-notifications-icon-line-height;
86 | }
87 | }
88 |
89 | .notification-info {
90 | background-color: $react-notifications-info-background-color;
91 | &:before {
92 | content: $react-notifications-info-content;
93 | }
94 | }
95 |
96 | .notification-success {
97 | background-color: $react-notifications-success-background-color;
98 | &:before {
99 | content: $react-notifications-success-content;
100 | }
101 | }
102 |
103 | .notification-warning {
104 | background-color: $react-notifications-warning-background-color;
105 | &:before {
106 | content: $react-notifications-warning-content;
107 | }
108 | }
109 |
110 | .notification-error {
111 | background-color: $react-notifications-error-background-color;
112 | &:before {
113 | content: $react-notifications-error-content;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import path from 'path';
3 | import camelCase from 'camelcase';
4 | import pkg from './package.json';
5 |
6 | const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
7 |
8 | const webpackConfig = {
9 | mode: 'production',
10 | optimization: {
11 | minimize: false
12 | },
13 | output: {
14 | filename: `${pkg.name}.js`,
15 | library: capitalizeFirstLetter(camelCase(pkg.name)),
16 | libraryTarget: 'umd'
17 | },
18 | externals: {
19 | react: {
20 | root: 'React',
21 | commonjs: 'react',
22 | commonjs2: 'react',
23 | amd: 'react'
24 | },
25 | 'react-transition-group': {
26 | root: ['ReactTransitionGroup'],
27 | commonjs: 'react-transition-group',
28 | commonjs2: 'react-transition-group',
29 | amd: 'react-transition-group'
30 | },
31 | 'prop-types': {
32 | root: 'PropTypes',
33 | commonjs: 'prop-types',
34 | commonjs2: 'prop-types',
35 | amd: 'prop-types'
36 | }
37 | },
38 | module: {
39 | rules: [
40 | {
41 | test: /\.(js|jsx)$/,
42 | exclude: /node_modules/,
43 | use: {
44 | loader: 'eslint-loader',
45 | options: {
46 | configFile: path.join(__dirname, '.eslintrc'),
47 | failOnError: true,
48 | emitError: true
49 | }
50 | },
51 | enforce: 'pre'
52 | },
53 | {
54 | test: /\.(js|jsx)$/,
55 | exclude: /node_modules/,
56 | loader: 'babel-loader'
57 | }
58 | ]
59 | },
60 | resolve: {
61 | modules: ['node_modules'],
62 | extensions: ['.jsx', '.js']
63 | },
64 | plugins: [
65 | new webpack.DefinePlugin({
66 | 'process.env': {
67 | NODE_ENV: JSON.stringify(process.env.NODE_ENV)
68 | }
69 | })
70 | ]
71 | };
72 |
73 | export default webpackConfig;
74 |
--------------------------------------------------------------------------------