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

Update LayoutItemCount

Browse Source
This commit is contained in:
Bill 2022-03-03 12:09:41 -05:00
parent 8bef2096f1
commit 4bf146d4ab
11 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/card/tabs/NitroCardTabsItemView.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'classnames';
import { FC, MouseEventHandler } from 'react';
import { ItemCountView } from '../../../views/shared/item-count/ItemCountView';
import { LayoutItemCountView } from '../../layout';
interface NitroCardTabsItemViewProps
{
@ -17,7 +17,7 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
<li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
{ children }
{ (count > 0) &&
<ItemCountView count={ count } /> }
<LayoutItemCountView count={ count } /> }
</li>
);
}

8
src/common/index.scss
View File

@ -260,4 +260,12 @@
height: 15px;
}
.nitro-item-count {
top: 2px;
right: 2px;
font-size: 8px;
z-index: 1;
}
@import './card/NitroCardView';

4
src/common/layout/LayoutGridItem.tsx
View File

@ -1,8 +1,8 @@
import { FC, useMemo } from 'react';
import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView';
import { Base } from '../Base';
import { Column, ColumnProps } from '../Column';
import { LayoutItemCountView } from './LayoutItemCountView';
export interface LayoutGridItemProps extends ColumnProps
{
@ -61,7 +61,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
return (
<Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
{ (itemCount > itemCountMinimum) &&
<ItemCountView count={ itemCount } /> }
<LayoutItemCountView count={ itemCount } /> }
{ (itemUniqueNumber > 0) &&
<>
<Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />

28
src/common/layout/LayoutItemCountView.tsx Normal file
View File

@ -0,0 +1,28 @@
import { FC, useMemo } from 'react';
import { Base, BaseProps } from '..';
interface LayoutItemCountViewProps extends BaseProps<HTMLDivElement>
{
count: number;
}
export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
{
const { count = 0, position = 'aboslute', classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'badge', 'border', 'bg-danger', 'px-1', 'rounded-circle', 'nitro-item-count' ];
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
return (
<Base position="absolute" classNames={ getClassNames } { ...rest }>
{ count }
{ children }
</Base>
);
}

1
src/common/layout/index.ts
View File

@ -2,6 +2,7 @@ export * from './LayoutCurrencyIcon';
export * from './LayoutGiftTagView';
export * from './LayoutGridItem';
export * from './LayoutImage';
export * from './LayoutItemCountView';
export * from './LayoutLoadingSpinnerView';
export * from './LayoutMiniCameraView';
export * from './LayoutNotificationAlertView';

5
src/components/toolbar/ToolbarMeView.tsx
View File

@ -1,8 +1,7 @@
import { RoomObjectCategory } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../api';
import { Base, Flex } from '../../common';
import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
import { Base, Flex, LayoutItemCountView } from '../../common';
import { ToolbarViewItems } from './common/ToolbarViewItems';
export interface ToolbarMeViewProps
@ -31,7 +30,7 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
<Base pointer className="navigation-item icon icon-me-helper-tool" onClick={ () => handleToolbarItemClick(ToolbarViewItems.GUIDE_TOOL_ITEM) } /> }
<Base pointer className="navigation-item icon icon-me-achievements" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
{ (unseenAchievementCount > 0) &&
<ItemCountView count={ unseenAchievementCount } /> }
<LayoutItemCountView count={ unseenAchievementCount } /> }
</Base>
<Base pointer className="navigation-item icon icon-me-profile" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) } />
<Base pointer className="navigation-item icon icon-me-rooms" />

9
src/components/toolbar/ToolbarView.tsx
View File

@ -1,11 +1,10 @@
import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
import { Base, Flex, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { Base, Flex, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, NavigatorEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
import { ToolbarViewItems } from './common/ToolbarViewItems';
import { ToolbarMeView } from './ToolbarMeView';
@ -199,7 +198,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<AvatarImageView figure={ userFigure } direction={ 2 } />
{ (unseenAchievementCount > 0) &&
<ItemCountView count={ unseenAchievementCount } /> }
<LayoutItemCountView count={ unseenAchievementCount } /> }
</Flex>
{ isInRoom &&
<Base pointer className="navigation-item icon icon-habbo" onClick={ visitDesktop } /> }
@ -209,7 +208,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<Base pointer className="navigation-item icon icon-catalog" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CATALOG_ITEM) } />
<Base pointer className="navigation-item icon icon-inventory" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
{ (unseenInventoryCount > 0) &&
<ItemCountView count={ unseenInventoryCount } /> }
<LayoutItemCountView count={ unseenInventoryCount } /> }
</Base>
{ isInRoom &&
<Base pointer className="navigation-item icon icon-camera" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) } /> }
@ -222,7 +221,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<Flex gap={ 2 }>
<Base pointer className="navigation-item icon icon-friendall" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
{ (unseenFriendRequestCount > 0) &&
<ItemCountView count={ unseenFriendRequestCount } /> }
<LayoutItemCountView count={ unseenFriendRequestCount } /> }
</Base>
{ ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
<Base pointer className={ `navigation-item icon icon-message ${ (chatIconType === CHAT_ICON_UNREAD) && 'is-unread' }` } onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) } /> }

5
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -1,12 +1,11 @@
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { FriendsMessengerIconEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { ItemCountView } from '../../../shared/item-count/ItemCountView';
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { useFriendsContext } from '../../FriendsContext';
@ -267,7 +266,7 @@ export const FriendsMessengerView: FC<{}> = props =>
return (
<Flex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}>
{thread.unread &&
<ItemCountView count={ thread.unreadCount }/>
<LayoutItemCountView count={ thread.unreadCount }/>
}
<div className="friend-head rounded flex-shrink-0">

1
src/views/shared/Shared.scss
View File

@ -5,4 +5,3 @@
@import "./pet-image/PetImage";
@import "./rarity-level/RarityLevelView";
@import "./room-previewer/RoomPreviewerView";
@import "./item-count/ItemCountView";

6
src/views/shared/item-count/ItemCountView.scss
View File

@ -1,6 +0,0 @@
.nitro-item-count {
top: 2px;
right: 2px;
font-size: 8px;
z-index: 1;
}

13
src/views/shared/item-count/ItemCountView.tsx
View File

@ -1,13 +0,0 @@
import { FC } from 'react';
interface ItemCountViewProps
{
count: number;
}
export const ItemCountView: FC<ItemCountViewProps> = props =>
{
const { count = 0 } = props;
return <div className="position-absolute badge border bg-danger px-1 rounded-circle nitro-item-count">{ count }</div>
}