#56, #52, #46 fixes and refactoring

Author: teodosii

README.md

@@ -126,6 +126,7 @@ You have in total 6 containers for desktop and 2 for mobile, if component is set
 * `top-left`
 * `top-right`
 * `top-center`
+* `center`
 * `bottom-left`
 * `bottom-right`
 * `bottom-center`

samples/js/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactNotification from 'rc-notifications/react-notification-component';
+import ReactNotification from 'rc-notifications';
 import Header from 'components/Header';
 import Content from 'components/Content';
 import GithubCorner from 'react-github-corner';

samples/js/components/examples/AnimationExample.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import notification from 'helpers/notification';
-import { store } from 'rc-notifications/react-notification-component';
+import { store } from 'rc-notifications';
 import { getContainer, getType, getMessage } from 'helpers/randomize';
 
 function AnimationInExample() {

samples/js/components/examples/ContainerExample.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import notification from 'helpers/notification';
-import { store } from 'rc-notifications/react-notification-component';
+import { store } from 'rc-notifications';
 import { getType, getMessage, getTitle } from 'helpers/randomize';
 
 export default class ContainerExample extends React.Component {
@@ -58,6 +58,13 @@ export default class ContainerExample extends React.Component {
             >
               Top Center
             </button>{' '}
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              onClick={() => this.add('center')}
+            >
+              Center
+            </button>{' '}
             <button
               type="button"
               className="btn btn-outline-secondary"

samples/js/components/examples/CustomContentExample.js

@@ -2,7 +2,7 @@ import React from 'react';
 import notification from 'helpers/notification';
 import reactImage from 'images/react.png';
 import { getContainer } from 'helpers/randomize';
-import { store } from 'rc-notifications/react-notification-component';
+import { store } from 'rc-notifications';
 
 export default class CustomContentExample extends React.Component {
   constructor(props) {

samples/js/components/examples/InsertExample.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import notification from 'helpers/notification';
-import { store } from 'rc-notifications/react-notification-component';
+import { store } from 'rc-notifications';
 import { getType, getMessage, getTitle } from 'helpers/randomize';
 
 export default function InsertExample() {

samples/js/components/examples/TypeExample.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import notification from 'helpers/notification';
-import { store } from 'rc-notifications/react-notification-component';
+import { store } from 'rc-notifications';
 import { getContainer, getMessage, getTitle } from 'helpers/randomize';
 
 export default class TypeExample extends React.Component {

samples/js/helpers/randomize.js

@@ -2,6 +2,7 @@ const containers = [
   'top-left',
   'top-right',
   'top-center',
+  'center',
   'bottom-left',
   'bottom-right',
   'bottom-center'

samples/styles/stylesheet.scss

@@ -13,7 +13,7 @@ body {
 
 html,
 body,
-.n-parent,
+.notification-parent,
 .notification-title,
 .notification-message,
 .notification-item {

src/react-notification-component.js renamed to src/components/Container.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import store from './store';
-import ReactNotification from './react-notification';
-import { getNotificationsForEachContainer, getNotificationsForMobileView } from './utils/helpers';
+import store from '../store';
+import ReactNotification from './Notification';
+import { getNotificationsForEachContainer, getNotificationsForMobileView } from '../utils/helpers';
 
 import 'src/scss/notification.scss';
 
-export default class ReactNotificationComponent extends React.Component {
+class Container extends React.Component {
   constructor(props) {
     super(props);
 
@@ -107,11 +107,7 @@ export default class ReactNotificationComponent extends React.Component {
     const bottom = this.renderNotifications(mobileNotifications.bottom);
 
     return (
-      <div
-        id={id}
-        key='mobile'
-        className={`react-notification-root ${className || ''}`}
-      >
+      <div id={id} key="mobile" className={`react-notification-root ${className || ''}`}>
         <div className="notification-container-mobile-top">{top}</div>
         <div className="notification-container-mobile-bottom">{bottom}</div>
       </div>
@@ -121,25 +117,25 @@ export default class ReactNotificationComponent extends React.Component {
   renderScreenNotifications(props) {
     const { className, id } = props;
     const { notifications } = this.state;
-    const notificationsPerContainer = getNotificationsForEachContainer(notifications);
-    const topLeft = this.renderNotifications(notificationsPerContainer.topLeft);
-    const topRight = this.renderNotifications(notificationsPerContainer.topRight);
-    const topCenter = this.renderNotifications(notificationsPerContainer.topCenter);
-    const bottomLeft = this.renderNotifications(notificationsPerContainer.bottomLeft);
-    const bottomRight = this.renderNotifications(notificationsPerContainer.bottomRight);
-    const bottomCenter = this.renderNotifications(notificationsPerContainer.bottomCenter);
+    const items = getNotificationsForEachContainer(notifications);
+    const topLeft = this.renderNotifications(items.topLeft);
+    const topRight = this.renderNotifications(items.topRight);
+    const topCenter = this.renderNotifications(items.topCenter);
+    const bottomLeft = this.renderNotifications(items.bottomLeft);
+    const bottomRight = this.renderNotifications(items.bottomRight);
+    const bottomCenter = this.renderNotifications(items.bottomCenter);
+    const center = this.renderNotifications(items.center);
 
     return (
-      <div
-        id={id}
-        key='screen'
-        className={`react-notification-root ${className || ''}`}
-      >
+      <div id={id} key="screen" className={`react-notification-root ${className || ''}`}>
         <div className="notification-container-top-left">{topLeft}</div>
         <div className="notification-container-top-right">{topRight}</div>
         <div className="notification-container-bottom-left">{bottomLeft}</div>
         <div className="notification-container-bottom-right">{bottomRight}</div>
         <div className="notification-container-top-center">{topCenter}</div>
+        <div className="notification-container-center">
+          <div className="center-inner">{center}</div>
+        </div>
         <div className="notification-container-bottom-center">{bottomCenter}</div>
       </div>
     );
@@ -157,4 +153,4 @@ export default class ReactNotificationComponent extends React.Component {
   }
 }
 
-export { store };
+export default Container;