nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update NotificationBubbleView

Browse Source
This commit is contained in:
Bill 2022-03-02 18:57:01 -05:00
parent da8b401279
commit 841d50b90c
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/layout/notification-bubble/NotificationBubbleView.tsx
View File

@ -1,21 +1,27 @@
import { FC, useEffect, useMemo, useState } from 'react';
import { NitroLayoutBase } from '../base';
import { Base, BaseProps } from '../../common';
import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
import { NotificationBubbleViewProps } from './NotificationBubbleView.types';
interface NotificationBubbleViewProps extends BaseProps<HTMLDivElement>
{
fadesOut?: boolean;
timeoutMs?: number;
close: () => void;
}
export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
{
const { fadesOut = true, timeoutMs = 8000, close = null, className = '', ...rest } = props;
const { fadesOut = true, timeoutMs = 8000, close = null, classNames = [], ...rest } = props;
const [ isVisible, setIsVisible ] = useState(false);
const getClassName = useMemo(() =>
const getClassNames = useMemo(() =>
{
let newClassName = 'nitro-notification-bubble rounded';
const newClassNames: string[] = [ 'nitro-notification-bubble', 'rounded' ];
if(className && className.length) newClassName += ` ${ className }`;
if(classNames.length) newClassNames.push(...classNames);
return newClassName;
}, [ className ]);
return newClassNames;
}, [ classNames ]);
useEffect(() =>
{
@ -40,7 +46,7 @@ export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isVisible } timeout={ 300 }>
<NitroLayoutBase className={ getClassName } onClick={ close } { ...rest } />
<Base classNames={ getClassNames } onClick={ close } { ...rest } />
</TransitionAnimation>
);
}