#56, #52, #46 fixes and refactoring

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 → 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;

src/react-notification.js → src/components/Notification.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Timer from './utils/timer';
+import Timer from '../utils/timer';
 import {
   getTransition,
   hasFullySwiped,
   getHtmlClassesForType,
   shouldNotificationHaveSliding
-} from './utils/helpers';
-import { REMOVAL } from './utils/constants';
+} from '../utils/helpers';
+import { REMOVAL } from '../utils/constants';
 
-export default class ReactNotification extends React.Component {
+class Notification extends React.Component {
   constructor(props) {
     super(props);
     this.rootElementRef = React.createRef();
@@ -20,15 +20,13 @@ export default class ReactNotification extends React.Component {
     this.onMouseEnter = this.onMouseEnter.bind(this);
     this.onMouseLeave = this.onMouseLeave.bind(this);
 
-    const {
-      notification: { width }
-    } = props;
+    const { notification: { width } } = props;
 
     this.state = {
       parentStyle: {
         height: 0,
         overflow: 'hidden',
-        width: width ? `${width}px` : 'auto'
+        width: width ? `${width}px` : '100%'
       },
       htmlClassList: getHtmlClassesForType(props.notification),
       animationPlayState: 'running',
@@ -162,10 +160,11 @@ export default class ReactNotification extends React.Component {
 
     const [{ pageX }] = touches;
     const distance = pageX - startX;
-    const swipeTo = window.innerWidth * 2;
+    const { offsetWidth: width } = this.rootElementRef.current;
+    const swipeTo = window.innerWidth + width;
     const left = `${pageX - startX >= 0 ? swipeTo : -swipeTo}px`;
 
-    if (hasFullySwiped(distance)) {
+    if (hasFullySwiped(distance, width)) {
       const t1 = getTransition(swipe, 'left');
       const t2 = getTransition(fade, 'opacity');
       const onTransitionEnd = () => {
@@ -203,9 +202,7 @@ export default class ReactNotification extends React.Component {
   }
 
   onTouchEnd() {
-    const {
-      notification: { touchRevert }
-    } = this.props;
+    const { notification: { touchRevert } } = this.props;
 
     this.setState(({ parentStyle }) => ({
       parentStyle: {
@@ -321,7 +318,7 @@ export default class ReactNotification extends React.Component {
       <div
         ref={this.rootElementRef}
         onClick={click ? this.onClick : null}
-        className="n-parent"
+        className="notification-parent"
         style={parentStyle}
         onAnimationEnd={onAnimationEnd}
         onTransitionEnd={onTransitionEnd}
@@ -334,3 +331,5 @@ export default class ReactNotification extends React.Component {
     );
   }
 }
+
+export default Notification;

src/index.js

@@ -0,0 +1,6 @@
+import store from './store';
+import container from './components/Container';
+
+export { store };
+
+export default container;

src/scss/_containers.scss

@@ -3,22 +3,43 @@
 .notification-container-top-right,
 .notification-container-bottom-center,
 .notification-container-bottom-left,
-.notification-container-bottom-right {
+.notification-container-bottom-right,
+.notification-container-center {
   width: 325px;
   position: absolute;
   pointer-events: all;
 }
 
-.notification-container-top-center {
-  transform: translateX(-50%);
+.notification-container-center,
+.notification-container-top-center,
+.notification-container-bottom-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: calc(50% - 162.5px);
+}
+
+.notification-container-center {
   top: 20px;
-  left: 50%;
+  height: 100%;
+  pointer-events: none;
+
+  .center-inner {
+    width: 325px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    pointer-events: all;
+  }
 }
 
+.notification-container-top-center {
+  top: 20px;
+}
 .notification-container-bottom-center {
-  transform: translateX(-50%);
   bottom: 20px;
-  left: 50%;
 }
 
 .notification-container-top-left {
@@ -58,4 +79,4 @@
   left: 20px;
   bottom: 20px;
   margin-bottom: -15px;
-}
+}

src/scss/notification.scss

@@ -79,30 +79,26 @@
   }
 }
 
-.n-parent { 
-  width: 275px;
-}
-
 .notification-container-mobile-top .notification-item,
 .notification-container-mobile-bottom .notification-item,
-.notification-container-mobile-top .n-parent,
-.notification-container-mobile-bottom .n-parent {
+.notification-container-mobile-top .notification-parent,
+.notification-container-mobile-bottom .notification-parent {
   max-width: 100%;
   width: 100%;
 }
 
-.notification-container-top-right .n-parent,
-.notification-container-bottom-right .n-parent {
+.notification-container-top-right .notification-parent,
+.notification-container-bottom-right .notification-parent {
   margin-left: auto;
 }
 
-.notification-container-top-left .n-parent,
-.notification-container-bottom-left .n-parent {
+.notification-container-top-left .notification-parent,
+.notification-container-bottom-left .notification-parent {
   margin-right: auto;
 }
 
-.notification-container-mobile-top .n-parent,
-.notification-container-mobile-bottom .n-parent {
+.notification-container-mobile-top .notification-parent,
+.notification-container-mobile-bottom .notification-parent {
   margin-left: auto;
   margin-right: auto;
 }

src/store.js → src/store/index.js

@@ -1,8 +1,9 @@
-import { parseNotification } from './utils/helpers';
-import { validateTransition, validators } from './utils/validators';
+import { parseNotification } from '../utils/helpers';
+import { validateTransition, validators } from '../utils/validators';
 
 function Store() {
   this.types = null;
+  this.counter = 0;
   this.add = () => {};
 
   this.addNotification = notification => {
@@ -14,6 +15,7 @@ function Store() {
       validators.forEach(validator => validator(notification, types));
     }
 
+    this.counter += 1;
     return this.add(parseNotification(notification, types));
   };
 

src/utils/constants.js

@@ -6,7 +6,8 @@ export const CONTAINER = {
   BOTTOM_CENTER: 'bottom-center',
   TOP_LEFT: 'top-left',
   TOP_RIGHT: 'top-right',
-  TOP_CENTER: 'top-center'
+  TOP_CENTER: 'top-center',
+  CENTER: 'center'
 };
 
 export const INSERTION = {