Merge remote-tracking branch 'origin/master'

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.0.0
+
+### Changes
+
+* TS support
+* Added full-sized containers for top and bottom
+* Changed SASS style to match BEM - *breaking change*
+* Limit center containers to 350px
+* Allow dynamic expansion of containers based on each notification's width
+* Adedd new API call `removeAllNotifications`
+* Removed `prop-types` package, props are now defaulted internally
+
+### Fixes
+
+* #82, #69, #67, #65, #63, #61
+
 ## 2.4.1
 
 ### Changes

README.md

@@ -1,8 +1,6 @@
 [![npm version](https://badgen.net/npm/v/react-notifications-component)](https://www.npmjs.com/package/react-notifications-component) [![npm](https://img.shields.io/npm/dm/react-notifications-component.svg)](https://www.npmjs.com/package/react-notifications-component) [![Minified & Gzipped size](https://badgen.net/bundlephobia/minzip/react-notifications-component)](https://bundlephobia.com/result?p=react-notifications-component)
 # react-notifications-component
 
-![Logo](https://raw.githubusercontent.com/teodosii/react-notifications-component/master/new-logo.png "Logo")
-
 A delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup, just beautiful notifications!
 
 > :fire: :fire: :fire: Interested in an animation library for React? I just launched `react-tweenful`, check it out here https://github.com/teodosii/react-tweenful

package.json

@@ -53,7 +53,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "bootstrap": "^4.3.1",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.3",
+    "copy-webpack-plugin": "^6.1.1",
     "css-loader": "^4.2.1",
     "css-select-base-adapter": "^0.1.1",
     "eslint": "^7.7.0",
@@ -92,8 +92,5 @@
   },
   "peerDependencies": {
     "react": "^16.0.0"
-  },
-  "dependencies": {
-    "prop-types": "^15.6.2"
   }
 }

samples/js/components/App.tsx

@@ -10,7 +10,7 @@ export default function App() {
       <ReactNotification
         types={[
           {
-            htmlClasses: ['notification-awesome'],
+            htmlClasses: ['notification__item--awesome'],
             name: 'awesome'
           }
         ]}

samples/js/components/Content.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { store } from 'src';
 import ContainerExample from 'components/examples/ContainerExample';
 import TypeExample from 'components/examples/TypeExample';
 import InsertExample from 'components/examples/InsertExample';
@@ -10,6 +11,9 @@ function ExampleHeading() {
     <div className="row">
       <div className="col-lg-6 offset-lg-3 column col-md-10 offset-md-1 col-sm-12 heading">
         <h2 className="text-center">Examples</h2>
+        <button type="button" className="btn btn-outline-danger" onClick={() => store.removeAllNotifications()}>
+          Remove All Notifications
+        </button>
         <div className="alert alert-warning alert-small">
           <i className="fa fa-info-circle"></i>
           All notifications have been set to be automatically dismissed after{' '}

samples/js/components/examples/ContainerExample.tsx

@@ -25,52 +25,59 @@ export default function ContainerExample() {
             onClick={() => add('top-left')}
           >
             Top Left
-          </button>
-          {' '}
+          </button>{' '}
           <button
             type="button"
             className="btn btn-outline-secondary"
             onClick={() => add('top-right')}
           >
             Top Right
-          </button>
-          {' '}
+          </button>{' '}
           <button
             type="button"
             className="btn btn-outline-secondary"
             onClick={() => add('top-center')}
           >
             Top Center
-          </button>
-          {' '}
+          </button>{' '}
           <button type="button" className="btn btn-outline-secondary" onClick={() => add('center')}>
             Center
-          </button>
-          {' '}
+          </button>{' '}
           <button
             type="button"
             className="btn btn-outline-secondary"
             onClick={() => add('bottom-left')}
           >
             Bottom Left
-          </button>
-          {' '}
+          </button>{' '}
           <button
             type="button"
             className="btn btn-outline-secondary"
             onClick={() => add('bottom-right')}
           >
             Bottom Right
-          </button>
-          {' '}
+          </button>{' '}
           <button
             type="button"
             className="btn btn-outline-secondary"
             onClick={() => add('bottom-center')}
           >
             Bottom Center
+          </button>{' '}
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => add('top-full')}
+          >
+            Top Full
+          </button>{' '}
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => add('bottom-full')}
+          >
+            Bottom Full
           </button>
-          {' '}
         </div>
       </div>
     </div>
@@ -81,10 +88,12 @@ function add(container: string): string {
   const type = getType();
   const object: iNotification = {};
 
-  return store.addNotification(Object.assign(object, notification, {
-    title: getTitle(type),
-    message: getMessage(type),
-    container,
-    type
-  }));
+  return store.addNotification(
+    Object.assign(object, notification, {
+      title: getTitle(type),
+      message: getMessage(type),
+      container,
+      type
+    })
+  );
 }

samples/js/components/examples/CustomContentExample.tsx

@@ -84,12 +84,12 @@ function addCustomIcon(type: string, iconClassName: string): void {
       width: 275,
       container: getContainer(),
       content: (
-        <div className={`notification-custom-${type}`}>
-          <div className="notification-custom-icon">
+        <div className={`notification__custom--${type}`}>
+          <div className="notification__custom-icon">
             <i className={iconClassName} />
           </div>
-          <div className="notification-custom-content">
-            <p className="notification-message">{message}</p>
+          <div className="notification__custom">
+            <p className="notification__message">{message}</p>
           </div>
         </div>
       )

samples/js/components/examples/TypeExample.tsx

@@ -43,7 +43,7 @@ export default function TypeExample() {
           <button type="button" className="btn btn-outline-secondary" onClick={() => add('danger')}>
             Danger
           </button>{' '}
-          <button type="button" className="btn btn-primary" onClick={() => this.add('awesome')}>
+          <button type="button" className="btn btn-primary" onClick={() => add('awesome')}>
             Custom
           </button>
         </div>

samples/js/helpers/notification.ts

@@ -40,7 +40,7 @@ export default {
   },
 
   dismiss: {
-    duration: 5000,
+    duration: 0,
     onScreen: false,
     pauseOnHover: true,
     waitForAnimation: false,

samples/styles/_customTypes.scss

@@ -1,4 +1,4 @@
-.notification-custom-icon {
+.notification__custom-icon {
   flex-basis: 20%;
   position: relative;
   padding: 8px 8px 8px 12px;
@@ -12,58 +12,58 @@
   }
 }
 
-.notification-custom-content {
+.notification__custom {
   flex-basis: 80%;
   padding: 12px 12px 12px 8px;
   display: inline-block;
 }
 
-.notification-custom-success {
+.notification__custom--success {
   width: 100%;
   display: flex;
   background-color: #28a745;
 
-  .notification-custom-icon {
+  .notification__custom-icon {
     border-left: 8px solid darken(#28a745, 15%);
   }
 }
 
-.notification-custom-default {
+.notification__custom--default {
   width: 100%;
   display: flex;
   background-color: #007bff;
 
-  .notification-custom-icon {
+  .notification__custom-icon {
     border-left: 8px solid darken(#007bff, 15%);
   }
 }
 
-.notification-custom-danger {
+.notification__custom--danger {
   width: 100%;
   display: flex;
   background-color: #dc3545;
 
-  .notification-custom-icon {
+  .notification__custom-icon {
     border-left: 8px solid darken(#dc3545, 15%);
   }
 }
 
-.notification-custom-info {
+.notification__custom--info {
   width: 100%;
   display: flex;
   background-color: #17a2b8;
 
-  .notification-custom-icon {
+  .notification__custom-icon {
     border-left: 8px solid darken(#17a2b8, 15%);
   }
 }
 
-.notification-custom-warning {
+.notification__custom--warning {
   width: 100%;
   display: flex;
   background-color: #eab000;
 
-  .notification-custom-icon {
+  .notification__custom-icon {
     border-left: 8px solid darken(#eab000, 15%);
   }
 }

samples/styles/stylesheet.scss

@@ -13,10 +13,10 @@ body {
 
 html,
 body,
-.notification-parent,
-.notification-title,
-.notification-message,
-.notification-item {
+.notification,
+.notification__title,
+.notification__message,
+.notification__item {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
 }