nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Bill 2021-05-12 04:34:40 -04:00
parent 39f7b0ce06
commit b1f8ab3c9f
7 changed files with 95 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/transitions/TransitionAnimation.tsx
View File

@ -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 [ timeoutInstance, setTimeoutInstance ] = useState<any>(null);
const [ isChildrenVisible, setChildrenVisible ] = useState(false);
useEffect(() =>
{
let timeoutData: ReturnType<typeof setTimeout> = null;
if(inProp)
{
clearTimeout(timeoutInstance);
setShowChild(true);
setChildrenVisible(true);
}
else
{
setTimeoutInstance(setTimeout(() => {
setShowChild(false);
clearTimeout(timeoutInstance);
}, timeout));
timeoutData = setTimeout(() =>
{
setChildrenVisible(false);
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>

3
src/transitions/TransitionAnimation.types.ts
View File

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

2
src/views/purse/PurseView.tsx
View File

@ -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>

22
src/views/purse/currency/CurrencyView.tsx
View File

@ -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="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="icon px-1"><CurrencyIcon type={ currency.type } /></div>
<div className="col pe-1 pb-1">
<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="icon px-1">
<CurrencyIcon type={ currency.type } />
</div>
</div>
</TransitionAnimation>
</div>
);
}

20
src/views/toolbar/ToolbarView.tsx
View File

@ -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 [ expandMeToolbar, setExpandMeToolbar ] = useState(false);
const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
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 }>
<ToolbarMeView />
</TransitionAnimation> }
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<ToolbarMeView setMeExpanded={ setMeExpanded } />
</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>

80
src/views/toolbar/me/ToolbarMeView.tsx
View File

@ -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">
<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>
const { setMeExpanded = null } = props;
const elementRef = useRef<HTMLDivElement>();
useEffect(() =>
{
function onClick(event: MouseEvent): void
{
const element = elementRef.current;
if((event.target !== element) && !element.contains((event.target as Node)))
{
setMeExpanded(false);
}
}
document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
return () =>
{
document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
}
}, [ elementRef, setMeExpanded ]);
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>);
);
}

6
src/views/toolbar/me/ToolbarMeView.types.ts
View File

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