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

Toolbar updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-05-11 22:12:42 -03:00
parent 2619e9b61a
commit 75fef86f67
3 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/transitions/TransitionAnimation.tsx
View File

@ -1,3 +1,4 @@
import { useEffect, useState } from 'react';
import { Transition } from 'react-transition-group';
import { TransitionAnimationProps } from './TransitionAnimation.types';
import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
@ -6,11 +7,30 @@ export function TransitionAnimation(props: TransitionAnimationProps): JSX.Elemen
{
const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
const [ showChild, setShowChild ] = useState(false);
const [ timeoutInstance, setTimeoutInstance ] = useState<any>(null);
useEffect(() =>
{
if(inProp)
{
clearTimeout(timeoutInstance);
setShowChild(true);
}
else
{
setTimeoutInstance(setTimeout(() => {
setShowChild(false);
clearTimeout(timeoutInstance);
}, timeout));
}
}, [ inProp ])
return (
<Transition in={ inProp } timeout={ timeout }>
{state => (
<div className={ className + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
{ children }
{ showChild && children }
</div>
)}
</Transition>

2
src/views/toolbar/ToolbarView.scss
View File

@ -34,7 +34,7 @@
.avatar-image {
margin-left: -5px;
margin-top: -20px;
margin-top: -30px;
}
&:hover, &.active {

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

@ -59,9 +59,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
return (
<>
{ expandMeToolbar && <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ false } timeout={ 300 }>
{ <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ expandMeToolbar } timeout={ 300 }>
<ToolbarMeView />
</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">