Merge pull request #10 from AmrAhmedA/dev

Release 1.3.0
AmrAhmedA · Sep 2, 2023 · 922d9f2 · 922d9f2
2 parents c3d9529 + ba7f7ae
commit 922d9f2
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 4,997 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+analyse.html
diff --git a/analyse.html b/analyse.html
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,19 +1,15 @@
-import {
-  OnlineStatusNotification,
-  Position,
-  useOnlineStatus
-} from '../../src/nsn'
-import './App.css'
-import { AppBarContainer } from './components/AppBar'
-import { InfoModal } from './components/InfoModal'
-import { DarkModeContainer } from './components/darkMode'
-import { PositionContainer } from './components/position'
 import Alert from '@mui/material/Alert'
 import Container from '@mui/material/Container'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 import Stack from '@mui/material/Stack'
 import { useReducer, useState } from 'react'
+import { OnlineStatusNotification, useOnlineStatus } from '../../src/nsn'
+import './App.css'
+import { AppBarContainer } from './components/AppBar'
+import { InfoModal } from './components/InfoModal'
+import { DarkModeContainer } from './components/darkMode'
+import { PositionContainer } from './components/position'
 
 type ReducerActions = {
   type:
@@ -23,7 +19,7 @@ type ReducerActions = {
     | 'offlineStatusText'
     | 'duration'
   payload: {
-    position?: Position
+    position?: any
     darkMode?: boolean
     statusText?: { online?: string; offline?: string }
     duration?: number
@@ -33,7 +29,7 @@ type ReducerActions = {
 export type State = {
   darkMode: boolean
   duration: number
-  position: Position
+  position: any
   statusText: {
     online?: string
     offline?: string

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-nsn",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "private": false,
   "description": "A very lightweight and customizable online network status notification built for react apps.",
   "license": "MIT",

diff --git a/src/OnlineStatusNotification.tsx b/src/OnlineStatusNotification.tsx
@@ -1,15 +1,15 @@
+import React, { forwardRef, useEffect } from 'react'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import './App.css'
 import { useFirstRender } from './hooks'
 import { closeIcon, offlineIcon, onlineIcon } from './icons'
-import React, { forwardRef, useEffect } from 'react'
-import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 type StatusText = {
   online?: string
   offline?: string
 }
 
-export type Position =
+type Position =
   | 'topLeft'
   | 'topRight'
   | 'topCenter'
@@ -22,7 +22,7 @@ type EventsCallback = {
   onCloseClick: () => void
 }
 
-interface OnlineStatusNotificationType {
+interface OnlineStatusNotificationProps {
   darkMode?: boolean
   destoryOnClose?: boolean
   duration?: number
@@ -59,7 +59,7 @@ const DefaultOfflineText = 'You are currently offline.'
  */
 const OnlineStatusNotificationComponent = forwardRef<
   HTMLDivElement,
-  OnlineStatusNotificationType
+  OnlineStatusNotificationProps
 >((props, ref): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState(false)
 
@@ -128,63 +128,61 @@ const OnlineStatusNotificationComponent = forwardRef<
   if (isFirstRender && isOnline) return null
 
   return (
-    <>
-      <CSSTransition
-        in={isOpen}
-        timeout={260}
-        nodeRef={nodeRef}
-        appear={true}
-        classNames={'fade'}
-        unmountOnExit={destoryOnClose}
-      >
-        <SwitchTransition mode={'out-in'}>
-          <CSSTransition
-            key={isOnline ? 'Online' : 'Offline'}
-            nodeRef={nodeRef}
-            addEndListener={(done: () => void) => {
-              nodeRef.current?.addEventListener('transitionend', done, false)
+    <CSSTransition
+      in={isOpen}
+      timeout={260}
+      nodeRef={nodeRef}
+      appear={true}
+      classNames={'fade'}
+      unmountOnExit={destoryOnClose}
+    >
+      <SwitchTransition mode={'out-in'}>
+        <CSSTransition
+          key={isOnline ? 'Online' : 'Offline'}
+          nodeRef={nodeRef}
+          addEndListener={(done: () => void) => {
+            nodeRef.current?.addEventListener('transitionend', done, false)
+          }}
+          classNames='fade'
+        >
+          <div
+            className={classNames(
+              'statusNotification',
+              darkMode ? 'darkColor' : 'defaultColor',
+              position
+            )}
+            ref={nodeRef}
+            onMouseEnter={() => {
+              setHovering(true)
+            }}
+            onMouseLeave={() => {
+              setHovering(false)
             }}
-            classNames='fade'
           >
+            <div className='statusNotificationIcon'>
+              {isOnline ? onlineIcon : offlineIcon}
+            </div>
+            <div>{getStatusText(isOnline, statusText)}</div>
+            {/* refresh link */}
+            {!isOnline && (
+              <div className='statusNotificationRefresh'>
+                <span onClick={handleRefreshButtonClick}>Refresh</span>
+              </div>
+            )}
+            {/* close icon */}
             <div
               className={classNames(
-                'statusNotification',
-                darkMode ? 'darkColor' : 'defaultColor',
-                position
+                'statusNotificationCloseIcon',
+                darkMode ? 'darkColor' : 'defaultColor'
               )}
-              ref={nodeRef}
-              onMouseEnter={() => {
-                setHovering(true)
-              }}
-              onMouseLeave={() => {
-                setHovering(false)
-              }}
+              onClick={handleCloseButtonClick}
             >
-              <div className='statusNotificationIcon'>
-                {isOnline ? onlineIcon : offlineIcon}
-              </div>
-              <div>{getStatusText(isOnline, statusText)}</div>
-              {/* refresh link */}
-              {!isOnline && (
-                <div className='statusNotificationRefresh'>
-                  <span onClick={handleRefreshButtonClick}>Refresh</span>
-                </div>
-              )}
-              {/* close icon */}
-              <div
-                className={classNames(
-                  'statusNotificationCloseIcon',
-                  darkMode ? 'darkColor' : 'defaultColor'
-                )}
-                onClick={handleCloseButtonClick}
-              >
-                {closeIcon}
-              </div>
+              {closeIcon}
             </div>
-          </CSSTransition>
-        </SwitchTransition>
-      </CSSTransition>
-    </>
+          </div>
+        </CSSTransition>
+      </SwitchTransition>
+    </CSSTransition>
   )
 })
 
@@ -197,4 +195,4 @@ const getStatusText = (isOnline: boolean, statusText: StatusText): string =>
     ? statusText?.online ?? DefaultOnlineText
     : statusText?.offline ?? DefaultOfflineText
 
-const classNames = (...classes: unknown[]) => classes.filter(Boolean).join(' ')
+const classNames = (...classes: string[]) => classes.filter(Boolean).join(' ')