PROD-1086 click outside - dev

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/styles/_cards.scss → src/lib/card/Card.module.scss

@@ -1,10 +1,9 @@
-@import './palette';
-@import './typography';
+@import '../styles';
 
 .card {
-    padding: 16px 16px 32px 16px;
-    border: solid 1px $black-10;
-    border-radius: 8px;
+    padding: $pad-lg $pad-lg $pad-xxxxl $pad-lg;
+    border: solid $border-xs $black-10;
+    border-radius: $pad-sm;
 
     .card-title {
         @include font-weight-semi-bold;

src/lib/button/Buttons.test.tsx → src/lib/card/Card.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('<Button />', () => {
+describe('<Card />', () => {
 
     test('it should render the content', () => { })
 })

src/lib/card/Card.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode, SVGProps } from 'react'
+
+import styles from './Card.module.scss'
+
+export interface CardProps {
+    children: ReactNode
+    icon?: FC<SVGProps<SVGSVGElement>>
+    title: string
+}
+
+const Card: FC<CardProps> = (props: CardProps) => {
+
+    const Icon: FC<SVGProps<SVGSVGElement>> | undefined = props.icon
+
+    return (
+        <div className={styles.card}>
+
+            <div className={styles['card-title']}>
+                <div>
+                    {props.title}
+                </div>
+                {!!Icon && <Icon />}
+            </div>
+
+            {props.children}
+
+        </div>
+    )
+}
+
+export default Card

src/lib/card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card'

src/lib/content-layout/ContentLayout.module.scss

@@ -7,10 +7,6 @@
     grid-template-columns: 1fr;
     justify-content: center;
 
-    @include xxl {
-        padding: 0;
-    }
-
     @include md {
         padding: 0 $pad-xxl;
     }

src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss

@@ -1,7 +1,6 @@
 @import '../../../styles';
 
 $form-pad-top: calc($pad-md - $border);
-$border-xs: 1px;
 $error-line-height: 14px;
 
 .form-field-wrapper {

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

@@ -1,5 +1,6 @@
 export * from './avatar'
 export * from './button'
+export * from './card'
 export * from './content-layout'
 export * from './form'
 export * from './global-config.model'
@@ -12,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'
 
 /*

src/lib/styles/_layout.scss

@@ -8,6 +8,7 @@ $left-col-width-xl: calc(1.3 * $header-height);
 /* TODO: determine which UI library to use and replace below */
 
 /* Padding */
+$border-xs: 1px;
 $border: 2px;
 $pad-xs: calc(2 * $border); // 4
 $pad-sm: calc(2 * $pad-xs); // 8

src/lib/styles/index.scss

@@ -2,7 +2,6 @@
 
 @import 'breakpoints';
 @import 'buttons';
-@import 'cards';
 @import 'fonts';
 @import 'icons';
 @import 'layout';

src/utils/settings/Settings.tsx

@@ -8,6 +8,7 @@ import {
     authUrlLogin,
     Avatar,
     Button,
+    Card,
     ContentLayout,
     IconOutline,
     profileContext,
@@ -74,52 +75,38 @@ const Settings: FC<{}> = () => {
 
                 <div className={styles['page-content']}>
 
-                    <div className='card'>
-
-                        <div className='card-title'>
-                            <div>
-                                Basic Information
-                            </div>
-                            <IconOutline.UserIcon />
-                        </div>
-
+                    <Card
+                        icon={IconOutline.UserIcon}
+                        title='Basic Information'
+                    >
                         <Button
                             label='edit'
                             onClick={toggleEditProfile}
                             tabIndex={1}
                             buttonStyle='link'
                         />
-
-                    </div>
+                    </Card>
 
                     <Modal
-                        center
                         open={editProfileOpen}
                         onClose={toggleEditProfile}
                     >
                         <ProfileUpdate onClose={toggleEditProfile} />
                     </Modal>
 
-                    <div className='card'>
-
-                        <div className='card-title'>
-                            <div>
-                                Reset Password
-                            </div>
-                            <IconOutline.LockClosedIcon />
-                        </div>
-
+                    <Card
+                        icon={IconOutline.LockClosedIcon}
+                        title='Reset Password'
+                    >
                         <Button
                             label='edit'
                             onClick={toggleResetPassword}
                             tabIndex={2}
                             buttonStyle='link'
                         />
-
-                    </div>
+                    </Card>
 
                     <Modal
-                        center
                         open={resetPasswordOpen}
                         onClose={toggleResetPassword}
                     >