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

Add notification center

Browse Source
This commit is contained in:
Bill 2021-06-22 05:52:47 -04:00
parent 8e4437835a
commit d393ef25bc
17 changed files with 145 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
package-lock.json generated
View File

@ -1835,12 +1835,11 @@
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
},
"@restart/hooks": {
"version": "0.3.26",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
"integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
"version": "0.3.27",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
"integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
"requires": {
"lodash": "^4.17.20",
"lodash-es": "^4.17.20"
"dequal": "^2.0.2"
}
},
"@rollup/plugin-node-resolve": {
@ -2223,14 +2222,6 @@
"@babel/types": "^7.3.0"
}
},
"@types/classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
"requires": {
"classnames": "*"
}
},
"@types/eslint": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
@ -5159,6 +5150,11 @@
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
},
"dequal": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
"integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
},
"des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@ -10039,11 +10035,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -14780,28 +14771,46 @@
}
},
"react-bootstrap": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
"integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
"version": "2.0.0-beta.2",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-beta.2.tgz",
"integrity": "sha512-2WqlAj54LaSWtJ6rsNs/uKP8kzomNrELymaaekajkIE6jQXPRNFe9mSIKYP/MtqLQGc4MYPBB3rywZ7UIvbV/w==",
"requires": {
"@babel/runtime": "^7.13.8",
"@babel/runtime": "^7.14.0",
"@restart/context": "^2.1.4",
"@restart/hooks": "^0.3.26",
"@types/classnames": "^2.2.10",
"@types/invariant": "^2.2.33",
"@types/prop-types": "^15.7.3",
"@types/react": ">=16.9.35",
"@types/react": ">=16.14.8",
"@types/react-transition-group": "^4.4.1",
"@types/warning": "^3.0.0",
"classnames": "^2.2.6",
"dom-helpers": "^5.1.2",
"classnames": "^2.3.1",
"dom-helpers": "^5.2.1",
"invariant": "^2.2.4",
"prop-types": "^15.7.2",
"prop-types-extra": "^1.1.0",
"react-overlays": "^5.0.0",
"react-overlays": "^5.0.1",
"react-transition-group": "^4.4.1",
"uncontrollable": "^7.2.1",
"warning": "^4.0.3"
},
"dependencies": {
"@babel/runtime": {
"version": "7.14.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
"integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
}
}
},
"react-dev-utils": {

2
package.json
View File

@ -16,7 +16,7 @@
"nitro-renderer": "file:../nitro-renderer",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-bootstrap": "^2.0.0-alpha.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.3",
"react-google-recaptcha": "^2.1.0",

12
src/assets/styles/bootstrap/_variables.scss
View File

@ -40,10 +40,10 @@ $blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$red: #a81a12 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$green: #00800b !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
$muted: #B6BEC5 !default;
@ -75,17 +75,15 @@ $secondary: #185D79 !default;
$tertiary: #2DABC2 !default;
$quaternary: #2B91A7 !default;
$success: #008026 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: #C23027 !default;
$danger: $red !default;
$light: #DFDFDF !default;
$dark: #24211c !default;
$dark: #12191c !default;
$light-dark: $gray-800 !default;
// scss-docs-end theme-color-variables
.bg-tertiary-split {

1
src/events/index.ts
View File

@ -3,4 +3,5 @@ export * from './catalog';
export * from './friend-list';
export * from './inventory';
export * from './navigator';
export * from './notification-center';
export * from './room-widgets';

8
src/events/notification-center/NotificationCenterEvent.ts Normal file
View File

@ -0,0 +1,8 @@
import { NitroEvent } from 'nitro-renderer';
export class NotificationCenterEvent extends NitroEvent
{
public static SHOW_NOTIFICATION_CENTER: string = 'NCE_SHOW_NOTIFICATION_CENTER';
public static HIDE_NOTIFICATION_CENTER: string = 'NCE_HIDE_NOTIFICATION_CENTER';
public static TOGGLE_NOTIFICATION_CENTER: string = 'NCE_TOGGLE_NOTIFICATION_CENTER';
}

1
src/events/notification-center/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './NotificationCenterEvent';

1
src/index.scss
View File

@ -21,6 +21,7 @@ $toolbar-me-zindex: 90;
$chatinput-zindex: 80;
$toolbar-zindex: 70;
$rightside-zindex: 69;
$notification-center-zindex: 68;
$toolbar-memenu-zindex: 60;
$roomtools-zindex: 50;
$context-menu-zindex: 40;

2
src/layout/transitions/TransitionAnimation.tsx
View File

@ -35,7 +35,7 @@ export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
return (
<Transition in={ inProp } timeout={ timeout }>
{ state => (
<div className={ className + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
<div className={ (className ?? '') + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
{ isChildrenVisible && children }
</div>
)}

1
src/layout/transitions/TransitionAnimation.types.ts
View File

@ -10,6 +10,7 @@ export class TransitionAnimationTypes
{
public static BOUNCE: string = 'bounce';
public static SLIDE_LEFT: string = 'slideLeft';
public static SLIDE_RIGHT: string = 'slideRight';
public static FLIP_X: string = 'flipX';
public static FADE_IN: string = 'fadeIn';
public static FADE_DOWN: string = 'fadeDown';

16
src/layout/transitions/TransitionAnimationStyles.ts
View File

@ -39,6 +39,22 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.SLIDE_RIGHT:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: `slideInRight`,
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: `slideOutRight`,
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.FLIP_X:
switch(transition)
{

1
src/views/Styles.scss
View File

@ -13,6 +13,7 @@
@import './loading/LoadingView';
@import './main/MainView';
@import './navigator/NavigatorView';
@import './notification-center/NotificationCenterView';
@import './pet-image/PetImage';
@import './purse/PurseView';
@import './right-side/RightSideView';

6
src/views/main/MainView.tsx
View File

@ -1,5 +1,5 @@
import { Nitro, RoomSessionEvent } from 'nitro-renderer';
import { useCallback, useEffect, useState } from 'react';
import { FC, useCallback, useEffect, useState } from 'react';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
@ -9,12 +9,13 @@ import { FriendListView } from '../friend-list/FriendListView';
import { HotelView } from '../hotel-view/HotelView';
import { InventoryView } from '../inventory/InventoryView';
import { NavigatorView } from '../navigator/NavigatorView';
import { NotificationCenterView } from '../notification-center/NotificationCenterView';
import { RightSideView } from '../right-side/RightSideView';
import { RoomHostView } from '../room-host/RoomHostView';
import { ToolbarView } from '../toolbar/ToolbarView';
import { MainViewProps } from './MainView.types';
export function MainView(props: MainViewProps): JSX.Element
export const MainView: FC<MainViewProps> = props =>
{
const [ isReady, setIsReady ] = useState(false);
const [ landingViewVisible, setLandingViewVisible ] = useState(true);
@ -55,6 +56,7 @@ export function MainView(props: MainViewProps): JSX.Element
<CatalogView />
<FriendListView />
<RightSideView />
<NotificationCenterView />
</div>
);
}

13
src/views/notification-center/NotificationCenterView.scss Normal file
View File

@ -0,0 +1,13 @@
.nitro-notification-center-container {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: calc(100% - #{$toolbar-height});
z-index: $notification-center-zindex;
.nitro-notification-center {
background-color: $dark;
height: 100%;
}
}

40
src/views/notification-center/NotificationCenterView.tsx Normal file
View File

@ -0,0 +1,40 @@
import { FC, useCallback, useState } from 'react';
import { NotificationCenterEvent } from '../../events';
import { useUiEvent } from '../../hooks/events';
import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
import { NotificationCenterViewProps } from './NotificationCenterView.types';
export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) =>
{
switch(event.type)
{
case NotificationCenterEvent.SHOW_NOTIFICATION_CENTER:
setIsVisible(true);
return;
case NotificationCenterEvent.HIDE_NOTIFICATION_CENTER:
setIsVisible(false);
return;
case NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER:
setIsVisible(value => !value);
return;
}
}, []);
useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent);
useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent);
useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent);
return (
<TransitionAnimation className="nitro-notification-center-container" type={ TransitionAnimationTypes.SLIDE_RIGHT } inProp={ isVisible } timeout={ 300 }>
<div className="nitro-notification-center">
test
</div>
</TransitionAnimation>
);
}

4
src/views/notification-center/NotificationCenterView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export interface NotificationCenterViewProps
{
}

1
src/views/purse/PurseView.scss
View File

@ -8,6 +8,7 @@
color:lighten($dark,20);
cursor: pointer;
font-size: 0.9rem;
pointer-events: all;
}
}

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

@ -1,5 +1,7 @@
import { UserCurrencyComposer } from 'nitro-renderer';
import { FC, useEffect, useMemo, useReducer } from 'react';
import { FC, useCallback, useEffect, useMemo, useReducer } from 'react';
import { NotificationCenterEvent } from '../../events';
import { dispatchUiEvent } from '../../hooks/events';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { GetConfiguration } from '../../utils/GetConfiguration';
import { PurseContextProvider } from './context/PurseContext';
@ -26,6 +28,11 @@ export const PurseView: FC<PurseViewProps> = props =>
SetLastCurrencies(currencies);
const toggleNotificationCenter = useCallback(() =>
{
dispatchUiEvent(new NotificationCenterEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER));
}, []);
return (
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
<PurseMessageHandler />
@ -36,7 +43,9 @@ export const PurseView: FC<PurseViewProps> = props =>
return <CurrencyView key={ index } currency={ currency } />;
}) }
<div className="notification-button px-2"><i className="fas fa-bars"/></div>
<div className="notification-button px-2" onClick={ toggleNotificationCenter }>
<i className="fas fa-bars" />
</div>
</div>
</PurseContextProvider>
);