PROD-1086 hide profile panel on click outside - PROD-1069_re-style

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -2,10 +2,12 @@ import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
 import {
     Avatar,
+    ComponentVisible,
     IconOutline,
     logInfo,
     profileContext,
     ProfileContextData,
+    useHideClickOutside,
 } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
@@ -20,18 +22,33 @@ const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps)
     const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const {
+        isComponentVisible,
+        ref,
+        setIsComponentVisible,
+    }: ComponentVisible = useHideClickOutside(false)
+
     if (!profile) {
         logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
     function toggleProfilePanel(): void {
-        setProfilePanelOpen(!profilePanelOpen)
+        const toggleTo: boolean = !profilePanelOpen
+        setProfilePanelOpen(toggleTo)
+        setIsComponentVisible(toggleTo)
+    }
+
+    if (!isComponentVisible && profilePanelOpen) {
+        setProfilePanelOpen(isComponentVisible)
     }
 
     return (
         <>
-            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
+            <div
+                className={styles['profile-avatar']}
+                onClick={toggleProfilePanel}
+            >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}
@@ -47,6 +64,7 @@ const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps)
             </div>
             {profilePanelOpen && (
                 <ProfilePanel
+                    refObject={ref}
                     settingsTitle={props.settingsTitle}
                     toggleProfilePanel={toggleProfilePanel}
                 />

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react'
+import { FC, MutableRefObject, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
@@ -12,6 +12,7 @@ import {
 import styles from './ProfilePanel.module.scss'
 
 interface ProfilePanelProps {
+    refObject: MutableRefObject<any>
     settingsTitle: string
     toggleProfilePanel: () => void
 }
@@ -27,7 +28,10 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
     }
 
     return (
-        <div className={styles['profile-panel']}>
+        <div
+            className={styles['profile-panel']}
+            ref={props.refObject}
+        >
             <div className={styles.handle}>
                 {profile.handle}
             </div>

src/lib/functions/component-visible-functions/component-visible.functions.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('component visible functions', () => {
+
+    test('it should determine if components are visible', () => { })
+})

src/lib/functions/component-visible-functions/component-visible.functions.tsx

@@ -0,0 +1,28 @@
+import { Dispatch, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
+
+export interface ComponentVisible {
+    isComponentVisible: boolean
+    ref: MutableRefObject<any>
+    setIsComponentVisible: Dispatch<SetStateAction<boolean>>
+}
+
+export function useHideClickOutside(isVisible: boolean): ComponentVisible {
+
+    const [isComponentVisible, setIsComponentVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState(isVisible)
+
+    const ref: MutableRefObject<any> = useRef(undefined)
+
+    function onClick(event: globalThis.MouseEvent): void {
+        setIsComponentVisible(!!ref.current?.contains(event.target))
+    }
+
+    useEffect(() => {
+        document.addEventListener('click', onClick, true)
+        return () => {
+            document.removeEventListener('click', onClick, true)
+        }
+    }, [])
+
+    return { ref, isComponentVisible, setIsComponentVisible }
+}

src/lib/functions/component-visible-functions/index.ts

@@ -0,0 +1 @@
+export * from './component-visible.functions'

src/lib/functions/index.ts

@@ -4,6 +4,7 @@ export {
     authUrlLogout,
     authUrlSignup,
 } from './authentication-functions'
+export * from './component-visible-functions'
 export * from './logging-functions'
 export * from './user-functions'
 export * from './xhr-functions'

src/lib/index.ts

@@ -13,7 +13,11 @@ export {
     logError,
     logInitialize,
     logInfo,
+    useHideClickOutside,
 } from './functions'
+export
+    // tslint:disable-next-line: no-unused-expression
+type { ComponentVisible } from './functions'
 export * from './svgs'
 
 /*