Updates

src/transitions/TransitionAnimation.tsx

@@ -1,36 +1,42 @@
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { TransitionAnimationProps } from './TransitionAnimation.types';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
 
-export function TransitionAnimation(props: TransitionAnimationProps): JSX.Element
+export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
 {
     const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
 
-    const [ showChild, setShowChild ] = useState(false);
+    const [ isChildrenVisible, setChildrenVisible ] = useState(false);
-    const [ timeoutInstance, setTimeoutInstance ] = useState<any>(null);
 
     useEffect(() =>
     {
+        let timeoutData: ReturnType<typeof setTimeout> = null;
+
         if(inProp)
         {
-            clearTimeout(timeoutInstance);
+            setChildrenVisible(true);
-            setShowChild(true);
         }
         else
         {
-            setTimeoutInstance(setTimeout(() => {
+            timeoutData = setTimeout(() =>
-                setShowChild(false);
+            {
-                clearTimeout(timeoutInstance);
+                setChildrenVisible(false);
-            }, timeout));
+                clearTimeout(timeout);
+            }, timeout);
         }
-    }, [ inProp ])
+
+        return () =>
+        {
+            if(timeoutData) clearTimeout(timeoutData);
+        }
+    }, [ inProp, timeout ]);
 
     return (
         <Transition in={ inProp } timeout={ timeout }>
-            {state => (
+            { state => (
                 <div className={ className + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
-                    { showChild && children }
+                    { isChildrenVisible && children }
                 </div>
             )}
         </Transition>

src/transitions/TransitionAnimation.types.ts

@@ -1,12 +1,9 @@
-import { ReactNode } from 'react';
-
 export interface TransitionAnimationProps
 {
     type: string;
     inProp: boolean;
     timeout?: number;
     className?: string;
-    children?: ReactNode;
 }
 
 export class TransitionAnimationTypes

src/views/purse/PurseView.tsx

@@ -34,7 +34,7 @@ export const PurseView: FC<PurseViewProps> = props =>
                     {
                         if(displayedCurrencies.indexOf(currency.type) === -1) return null;
 
-                        return <CurrencyView key={ index } currency={ currency } />
+                        return <CurrencyView key={ index } currency={ currency } />;
                     }) }
             </div>
         </PurseContextProvider>

src/views/purse/currency/CurrencyView.tsx

@@ -1,6 +1,3 @@
-import { useEffect, useState } from 'react';
-import { TransitionAnimation } from '../../../transitions/TransitionAnimation';
-import { TransitionAnimationTypes } from '../../../transitions/TransitionAnimation.types';
 import { CurrencyIcon } from '../../../utils/currency-icon/CurrencyIcon';
 import { CurrencyViewProps } from './CurrencyView.types';
 
@@ -8,21 +5,14 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
 {
     const { currency = null } = props;
 
-    const [ showUp, setShowUp ] = useState(false);
-
-    useEffect(() =>
-    {
-        setShowUp(true);
-    }, [ currency ])
-
     return (
-        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
+        <div className="col pe-1 pb-1">
-            <div className="col pe-1 pb-1">
+            <div className="nitro-currency p-1 d-flex rounded overflow-hidden">
-                <div className="nitro-currency p-1 d-flex rounded overflow-hidden">
+                <div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
-                    <div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
+                <div className="icon px-1">
-                    <div className="icon px-1"><CurrencyIcon type={ currency.type } /></div>
+                    <CurrencyIcon type={ currency.type } />
                 </div>
             </div>
-        </TransitionAnimation>
+        </div>
     );
 }

src/views/toolbar/ToolbarView.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/incoming/user/data/UserInfoEvent';
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { MouseEvent, useCallback, useState } from 'react';
@@ -15,8 +14,8 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 {
     const { isInRoom } = props;
 
-    const [ userInfo, setUserInfo ]                 = useState<UserInfoDataParser>(null);
+    const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
-    const [ expandMeToolbar, setExpandMeToolbar ]   = useState(false);
+    const [ isMeExpanded, setMeExpanded ] = useState(false);
 
     const unseenInventoryCount = 0;
     const unseenFriendListCount = 0;
@@ -31,8 +30,6 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 
     function handleToolbarItemClick(event: MouseEvent, item: string): void
     {
-        event.preventDefault();
-
         switch(item)
         {
             case ToolbarViewItems.NAVIGATOR_ITEM:
@@ -52,20 +49,23 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 
     function toggleMeToolbar(): void
     {
-        setExpandMeToolbar((value) => !value);
+        setMeExpanded(prevValue =>
+            {
+                return !prevValue;
+            });
     }
 
     CreateMessageHook(UserInfoEvent, onUserInfoEvent);
 
     return (
         <>
-            { <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_IN } inProp={ expandMeToolbar } timeout={ 300 }>
+            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
-                <ToolbarMeView />
+                <ToolbarMeView setMeExpanded={ setMeExpanded } />
-            </TransitionAnimation> }
+            </TransitionAnimation>
             <div className="d-flex nitro-toolbar py-1 px-3">
                 <div className="navigation-items navigation-avatar pe-1 me-2">
                     <div className="navigation-item">
-                        <div className={"toolbar-avatar" + classNames({ ' active': expandMeToolbar })} onClick={ toggleMeToolbar }>
+                        <div className={ 'toolbar-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ toggleMeToolbar }>
                             { userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
                         </div>
                     </div>

src/views/toolbar/me/ToolbarMeView.tsx

@@ -1,33 +1,61 @@
+import { MouseEventType } from 'nitro-renderer';
+import { useEffect, useRef } from 'react';
 import { ToolbarMeViewProps } from './ToolbarMeView.types';
 
 export function ToolbarMeView(props: ToolbarMeViewProps): JSX.Element
 {
-    return (<div className="d-flex nitro-toolbar-me px-1 py-2">
+    const { setMeExpanded = null } = props;
-        <div className="navigation-items">
+
-            <div className="navigation-item">
+    const elementRef = useRef<HTMLDivElement>();
-                <i className="icon icon-me-talents"></i>
+
-            </div>
+    useEffect(() =>
-            <div className="navigation-item">
+    {
-                <i className="icon icon-me-helper-tool"></i>
+        function onClick(event: MouseEvent): void
-            </div>
+        {
-            <div className="navigation-item">
+            const element = elementRef.current;
-                <i className="icon icon-me-achievements"></i>
+
-            </div>
+            if((event.target !== element) && !element.contains((event.target as Node)))
-            <div className="navigation-item">
+            {
-                <i className="icon icon-me-profile"></i>
+                setMeExpanded(false);
-            </div>
+            }
-            <div className="navigation-item">
+        }
-                <i className="icon icon-me-rooms"></i>
+
-            </div>
+        document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
-            <div className="navigation-item">
+
-                <i className="icon icon-me-clothing"></i>
+        return () =>
-            </div>
+        {
-            <div className="navigation-item">
+            document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
-                <i className="icon icon-me-forums"></i>
+        }
-            </div>
+    }, [ elementRef, setMeExpanded ]);
-            <div className="navigation-item">
+
-                <i className="icon icon-me-settings"></i>
+    return (
+        <div ref={ elementRef } className="d-flex nitro-toolbar-me px-1 py-2">
+            <div className="navigation-items">
+                <div className="navigation-item">
+                    <i className="icon icon-me-talents"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-helper-tool"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-achievements"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-profile"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-rooms"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-clothing"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-forums"></i>
+                </div>
+                <div className="navigation-item">
+                    <i className="icon icon-me-settings"></i>
+                </div>
             </div>
         </div>
-    </div>);
+    );
 }

src/views/toolbar/me/ToolbarMeView.types.ts

@@ -1,2 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+
 export interface ToolbarMeViewProps
-{}
+{
+    setMeExpanded: Dispatch<SetStateAction<boolean>>;
+}