ELECTRON-1344 - Add logic to persist notification on mouse over (#718)

src/renderer/components/notification-comp.tsx

@@ -24,6 +24,8 @@ export default class NotificationComp extends React.Component<{}, IState> {
         onClose: (winKey) => (_event: mouseEventButton) => this.close(winKey),
         onClick: (data) => (_event: mouseEventButton) => this.click(data),
         onContextMenu: (event) => this.contextMenu(event),
+        onMouseOver: (winKey) => (_event: mouseEventButton) => this.onMouseOver(winKey),
+        onMouseLeave: (winKey) => (_event: mouseEventButton) => this.onMouseLeave(winKey),
     };
 
     constructor(props) {
@@ -60,7 +62,14 @@ export default class NotificationComp extends React.Component<{}, IState> {
         const bgColor = { backgroundColor: colorHex || '#ffffff' };
 
         return (
-            <div className='container' onContextMenu={this.eventHandlers.onContextMenu} role='alert' style={bgColor} onClick={this.eventHandlers.onClick(id)}>
+            <div className='container'
+                 role='alert'
+                 style={bgColor}
+                 onContextMenu={this.eventHandlers.onContextMenu}
+                 onClick={this.eventHandlers.onClick(id)}
+                 onMouseOver={this.eventHandlers.onMouseOver(id)}
+                 onMouseLeave={this.eventHandlers.onMouseLeave(id)}
+            >
                 <div className='logo-container'>
                     <img className={`logo ${theme}`} alt='symphony logo'/>
                 </div>
@@ -87,7 +96,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
      *
      * @param id {number}
      */
-    private click(id: number) {
+    private click(id: number): void {
         ipcRenderer.send('notification-clicked', id);
     }
 
@@ -96,7 +105,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
      *
      * @param id {number}
      */
-    private close(id: number) {
+    private close(id: number): void {
         ipcRenderer.send('close-notification', id);
     }
 
@@ -105,10 +114,28 @@ export default class NotificationComp extends React.Component<{}, IState> {
      *
      * @param event
      */
-    private contextMenu(event) {
+    private contextMenu(event): void {
         event.preventDefault();
     }
 
+    /**
+     * Handle mouse over
+     *
+     * @param id {number}
+     */
+    private onMouseOver(id: number): void {
+        ipcRenderer.send('notification-mouseover', id);
+    }
+
+    /**
+     * Handle mouse over
+     *
+     * @param id {number}
+     */
+    private onMouseLeave(id: number): void {
+        ipcRenderer.send('notification-mouseleave', id);
+    }
+
     /**
      * Sets the About app state
      *

src/renderer/notification.ts

@@ -49,6 +49,8 @@ class Notification extends NotificationHandler {
     private readonly funcHandlers = {
         onCleanUpInactiveNotification: () => this.cleanUpInactiveNotification(),
         onCreateNotificationWindow: (data: INotificationData) => this.createNotificationWindow(data),
+        onMouseOver: (_event, windowId) => this.onMouseOver(windowId),
+        onMouseLeave: (_event, windowId) => this.onMouseLeave(windowId),
     };
     private activeNotifications: Electron.BrowserWindow[] = [];
     private inactiveWindows: Electron.BrowserWindow[] = [];
@@ -68,6 +70,8 @@ class Notification extends NotificationHandler {
         ipcMain.on('notification-clicked', (_event, windowId) => {
             this.notificationClicked(windowId);
         });
+        ipcMain.on('notification-mouseover', this.funcHandlers.onMouseOver);
+        ipcMain.on('notification-mouseleave', this.funcHandlers.onMouseLeave);
         // Update latest notification settings from config
         app.on('ready', () => this.updateNotificationSettings());
         this.cleanUpTimer = setInterval(this.funcHandlers.onCleanUpInactiveNotification, CLEAN_UP_INTERVAL);
@@ -341,6 +345,39 @@ class Notification extends NotificationHandler {
         }
     }
 
+    /**
+     * Clears the timer for a specific notification window
+     *
+     * @param windowId {number} - Id associated with the window
+     */
+    private onMouseOver(windowId: number): void {
+        const notificationWindow = this.getNotificationWindow(windowId);
+        if (!notificationWindow || !windowExists(notificationWindow)) {
+            return;
+        }
+        clearTimeout(notificationWindow.displayTimer);
+    }
+
+    /**
+     * Start a new timer to close the notification
+     *
+     * @param windowId
+     */
+    private onMouseLeave(windowId: number): void {
+        const notificationWindow = this.getNotificationWindow(windowId);
+        if (!notificationWindow || !windowExists(notificationWindow)) {
+            return;
+        }
+        const displayTime = (notificationWindow.notificationData && notificationWindow.notificationData.displayTime)
+            ? notificationWindow.notificationData.displayTime
+            : notificationSettings.displayTime;
+        if (notificationWindow && windowExists(notificationWindow)) {
+            notificationWindow.displayTimer = setTimeout(async () => {
+                await this.hideNotification(notificationWindow.clientId);
+            }, displayTime);
+        }
+    }
+
     /**
      * notification window opts
      */