3.2.4 + fixes

Author: Rares Mardare

package-lock.json

@@ -1,9 +1,10 @@
 {
   "name": "react-notifications-component",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "homepage": "http://teodosii.github.io/react-notifications-component",
   "description": "React component for creating notifications on the fly",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "npm run build:library:dev && npm run build:library:prod",
     "build:library:dev": "webpack --config webpack.dev.js",
@@ -75,6 +76,7 @@
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.5.2",
     "node-sass": "^7.0.1",
+    "npm-dts-webpack-plugin": "^1.3.10",
     "object-assign": "^4.1.1",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "prettier": "^2.5.1",

package.json

@@ -1,5 +1,5 @@
 import React from 'react'
-import { store } from 'src'
+import { Store } from 'src'
 import ContainerExample from 'components/examples/ContainerExample'
 import TypeExample from 'components/examples/TypeExample'
 import InsertExample from 'components/examples/InsertExample'
@@ -11,7 +11,7 @@ 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()}>
+        <button type="button" className="btn btn-outline-danger" onClick={() => Store.removeAllNotifications()}>
           Remove All Notifications
         </button>
         <div className="alert alert-warning alert-small">

samples/js/components/Content.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import notification from 'samples/js/helpers/notification'
 import { getContainer, getMessage, getType } from 'samples/js/helpers/randomize'
-import { store } from 'src'
-import { iNotification } from 'src/components/Notification'
+import { Store } from 'src'
+import { iNotification } from 'src/types'
 
 function AnimationInExample() {
   return (
@@ -136,7 +136,7 @@ function add(isEntranceAnimation: boolean, htmlClasses: string[]) {
   const object: iNotification = {}
 
   if (isEntranceAnimation) {
-    return store.addNotification(
+    return Store.addNotification(
       Object.assign(object, notification, {
         animationIn: htmlClasses,
         container: getContainer(),
@@ -146,7 +146,7 @@ function add(isEntranceAnimation: boolean, htmlClasses: string[]) {
     )
   }
 
-  return store.addNotification(
+  return Store.addNotification(
     Object.assign(object, notification, {
       slidingExit: { delay: 300 },
       animationOut: htmlClasses,

samples/js/components/examples/AnimationExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import notification from 'samples/js/helpers/notification'
 import { getMessage, getTitle, getType } from 'samples/js/helpers/randomize'
-import { store } from 'src'
-import { iNotification } from 'src/components/Notification'
+import { Store } from 'src'
+import { iNotification } from 'src/types'
 
 export default function ContainerExample() {
   return (
@@ -88,7 +88,7 @@ function add(container: string): string {
   const type = getType()
   const object: iNotification = {}
 
-  return store.addNotification(
+  return Store.addNotification(
     Object.assign(object, notification, {
       title: getTitle(type),
       message: getMessage(type),

samples/js/components/examples/ContainerExample.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
 import notification from 'samples/js/helpers/notification'
 import reactImage from 'samples/images/react.png'
 import { getContainer } from 'samples/js/helpers/randomize'
-import { store } from 'src'
-import { iNotification } from 'src/components/Notification'
+import { Store } from 'src'
+import { iNotification } from 'src/types'
 
 export default function CustomContentExample() {
   const [cachedImage] = useState(new Image())
@@ -53,7 +53,7 @@ export default function CustomContentExample() {
 function add(cachedImage: HTMLImageElement): void {
   const object: iNotification = {}
 
-  store.addNotification(
+  Store.addNotification(
     Object.assign(object, notification, {
       width: 325,
       container: getContainer(),
@@ -78,7 +78,7 @@ function addCustomIcon(type: string, iconClassName: string): void {
 
   const object: iNotification = {}
 
-  store.addNotification(
+  Store.addNotification(
     Object.assign(object, notification, {
       width: 275,
       container: getContainer(),

samples/js/components/examples/CustomContentExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { store } from 'src'
+import { Store } from 'src'
 import notification from 'samples/js/helpers/notification'
 import { getType, getMessage, getTitle } from 'samples/js/helpers/randomize'
-import { iNotification } from 'src/components/Notification'
+import { iNotification } from 'src/types'
 
 export default function InsertExample() {
   return (
@@ -30,7 +30,7 @@ export default function InsertExample() {
 function add(insert: string) {
   const type = getType()
   const object: iNotification = {}
-  return store.addNotification(
+  return Store.addNotification(
     Object.assign(object, notification, {
       type,
       insert,

samples/js/components/examples/InsertExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { store } from 'src'
+import { Store } from 'src'
 import notification from 'samples/js/helpers/notification'
 import { getContainer, getMessage, getTitle } from 'samples/js/helpers/randomize'
-import { iNotification } from 'src/components/Notification'
+import { iNotification } from 'src/types'
 
 export default function TypeExample() {
   return (
@@ -54,7 +54,7 @@ export default function TypeExample() {
 
 function add(type: string) {
   const object: iNotification = {}
-  return store.addNotification(
+  return Store.addNotification(
     Object.assign(object, notification, {
       type,
       title: getTitle(type),

samples/js/components/examples/TypeExample.tsx

@@ -1,29 +1,15 @@
 import React from 'react'
+import { iContainerProps, iContainerState, iNotification } from 'src'
 import ReactNotification from 'src/components/Notification'
 import 'src/scss/notification.scss'
 import store from 'src/store'
 import { DEFAULT_CONTAINER_VALUES as DCV } from 'src/utils/constants'
-import type { iNotification, iNotificationCustomType } from 'src/components/Notification'
 import {
   getNotificationsForEachContainer,
   getNotificationsForMobileView,
   isNullOrUndefined
 } from 'src/utils/helpers'
 
-interface iContainerProps {
-  isMobile?: boolean
-  breakpoint?: number
-  types?: iNotificationCustomType[]
-  defaultNotificationWidth?: number
-}
-
-interface iContainerState {
-  isMobile: boolean
-  breakpoint: number
-  notifications: iNotification[]
-  windowWidth: number
-}
-
 class Container extends React.Component<iContainerProps, iContainerState> {
   constructor(props: iContainerProps) {
     super(props)

src/components/Container.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { REMOVAL, INSERTION, NOTIFICATION_CONTAINER, NOTIFICATION_TYPE } from 'src/utils/constants'
+import { iNotificationProps, iNotificationState, iNotificationParentStyle, NOTIFICATION_REMOVAL_SOURCE } from 'src'
 import {
   getHtmlClassesForType,
   getTransition,
@@ -8,92 +8,6 @@ import {
 } from 'src/utils/helpers'
 import Timer from 'src/utils/timer'
 
-export type { iNotification, iTransition, iTouchTransition, iDismiss, iNotificationCustomType }
-
-interface iNotification {
-  id?: string
-  onRemoval?: (id: string, removalFlag: string) => void
-  title?: NotificationTitleMessage
-  message?: NotificationTitleMessage
-  content?: NotificationContent
-  type?: NOTIFICATION_TYPE
-  container?: NOTIFICATION_CONTAINER
-  insert?: INSERTION
-  dismiss?: iDismiss
-  animationIn?: string[]
-  animationOut?: string[]
-  slidingEnter?: iTransition
-  slidingExit?: iTransition
-  touchRevert?: iTransition
-  touchSlidingExit?: {
-    fade: iTransition
-    swipe: iTransition
-  }
-  userDefinedTypes?: iNotificationCustomType[]
-  width?: number
-  hasBeenRemoved?: boolean
-}
-
-export type NotificationTitleMessage = string | React.ReactNode | React.FunctionComponent
-export type NotificationContent =
-  | React.ComponentClass<any, any>
-  | React.FunctionComponent<any>
-  | React.ReactElement
-
-interface iTransition {
-  duration: number
-  timingFunction: string
-  delay: number
-}
-
-interface iTouchTransition {
-  swipe: iTransition
-  fade: iTransition
-}
-
-interface iDismiss {
-  duration: number
-  onScreen: boolean
-  pauseOnHover: boolean
-  waitForAnimation: boolean
-  click: boolean
-  touch: boolean
-  showIcon: boolean
-}
-
-interface iNotificationCustomType {
-  htmlClasses: string[]
-  name: string
-}
-
-class iNotificationProps {
-  id: string
-  notification: iNotification
-  defaultNotificationWidth: number
-  notificationsCount: number
-  isMobile: boolean
-  hasBeenRemoved: boolean
-  toggleRemoval: (id: string, callback: () => void) => void
-}
-
-interface iNotificationState {
-  parentStyle?: iParentStyle
-  htmlClassList?: string[]
-  animationPlayState?: string
-  touchEnabled?: boolean
-  onTransitionEnd?: (event: React.TransitionEvent<HTMLDivElement>) => void
-  onAnimationEnd?: (event: React.AnimationEvent<HTMLDivElement>) => void
-  startX?: number
-  currentX?: number
-}
-
-interface iParentStyle {
-  height?: string
-  overflow?: string
-  width?: string
-  transition?: string
-}
-
 class Notification extends React.Component<iNotificationProps, iNotificationState> {
   constructor(props: iNotificationProps) {
     super(props)
@@ -137,7 +51,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
 
     const onTransitionEnd = () => {
       if (!duration || onScreen) return
-      const callback = () => this.removeNotification(REMOVAL.TIMEOUT)
+      const callback = () => this.removeNotification(NOTIFICATION_REMOVAL_SOURCE.TIMEOUT)
       this.timer = new Timer(callback, duration)
     }
 
@@ -164,7 +78,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
 
   componentDidUpdate(prevProps: iNotificationProps) {
     if (this.props.hasBeenRemoved && !prevProps.hasBeenRemoved) {
-      this.removeNotification(REMOVAL.MANUAL)
+      this.removeNotification(NOTIFICATION_REMOVAL_SOURCE.MANUAL)
     }
 
     if (prevProps !== this.props) {
@@ -190,7 +104,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
 
     const htmlClassList = [...notification.animationOut, ...getHtmlClassesForType(notification)]
     const onTransitionEnd = () => toggleRemoval(id, () => onRemoval(id, removalFlag))
-    const parentStyle: iParentStyle = {
+    const parentStyle: iNotificationParentStyle = {
       height: `0px`,
       overflow: 'hidden',
       transition: getTransition(notification.slidingExit, 'height')
@@ -226,7 +140,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
       notification: { dismiss }
     } = this.props
     if (dismiss.click || dismiss.showIcon) {
-      this.removeNotification(REMOVAL.CLICK)
+      this.removeNotification(NOTIFICATION_REMOVAL_SOURCE.CLICK)
     }
   }
 
@@ -265,7 +179,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
       const t1 = getTransition(swipe, 'left')
       const t2 = getTransition(fade, 'opacity')
       const onTransitionEnd = () => {
-        toggleRemoval(id, () => onRemoval(id, REMOVAL.TOUCH))
+        toggleRemoval(id, () => onRemoval(id, NOTIFICATION_REMOVAL_SOURCE.TOUCH))
       }
 
       return this.setState(({ parentStyle }) => ({
@@ -349,7 +263,7 @@ class Notification extends React.Component<iNotificationProps, iNotificationStat
       animationPlayState
     }
 
-    const onAnimationEnd = () => this.removeNotification(REMOVAL.TIMEOUT)
+    const onAnimationEnd = () => this.removeNotification(NOTIFICATION_REMOVAL_SOURCE.TIMEOUT)
     return (
       <div className="rnc__notification-timer">
         <div