Merge branch 'main' of https://github.com/billsonnn/nitro-react

src/views/hotel-view/HotelView.tsx

@@ -8,8 +8,8 @@ export function HotelView(props: HotelViewProps): JSX.Element
     const sun             = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['sun']);
     const drape           = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['drape']);
     const left            = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['left']);
-    const rightRepeat     = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
+    //const rightRepeat     = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
-    const right           = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
+    //const right           = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
     
     return (
         <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>

src/views/inventory/InventoryView.tsx

@@ -1,16 +1,28 @@
 import { RoomSessionEvent } from 'nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { createContext, FC, useCallback, useEffect, useState } from 'react';
 import { InventoryEvent } from '../../events';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
-import { InventoryViewProps } from './InventoryView.types';
+import { IInventoryContext, InventoryTabs, InventoryViewProps } from './InventoryView.types';
+import { InventoryTabsContentView } from './tabs-content/InventoryTabsContentView';
+import { InventoryTabsSelectorView } from './tabs-selector/InventoryTabsSelectorView';
+
+export const InventoryContext = createContext<IInventoryContext>(null);
 
 export const InventoryView: FC<InventoryViewProps> = props =>
 {
-    const [ isVisible, setIsVisible ] = useState(false);
+    const [ isVisible, setIsVisible ]   = useState(false);
+    const [ currentTab, setCurrentTab ] = useState<string>(null);
+    const [ tabs, setTabs ]             = useState<string[]>([ 
+        InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES
+     ]);
+
+    useEffect(() => {
+        setCurrentTab(tabs[0]);
+    }, [ tabs ]);
 
     const onInventoryEvent = useCallback((event: InventoryEvent) =>
     {
@@ -50,7 +62,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     }
 
     return (
-        <>
+        <InventoryContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
             <InventoryMessageHandler  />
             { isVisible && <DraggableWindow handle=".drag-handler">
                 <div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
@@ -60,11 +72,10 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                             <i className="fas fa-times"></i>
                         </button>
                     </div>
-                    <div className="d-flex p-3">
+                    <InventoryTabsSelectorView tabs={ tabs } />
-                        content
+                    <InventoryTabsContentView />
-                    </div>
                 </div>
             </DraggableWindow> }
-        </>
+        </InventoryContext.Provider>
     );
 }

src/views/inventory/InventoryView.types.ts

@@ -1,4 +1,16 @@
 export interface InventoryViewProps
+{}
+
+export interface IInventoryContext
 {
-    
+    currentTab: string;
+    onSetCurrentTab: (tab: string) => void;
+}
+
+export class InventoryTabs
+{
+    public static readonly FURNITURE: string    = 'inventory.furni';
+    public static readonly BOTS: string         = 'inventory.bots';
+    public static readonly PETS: string         = 'inventory.furni.tab.pets';
+    public static readonly BADGES: string       = 'inventory.badges';
 }

src/views/inventory/tabs-content/InventoryTabsContentView.tsx

@@ -0,0 +1,22 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../InventoryView';
+import { InventoryTabs } from '../InventoryView.types';
+import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
+import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
+import { InventoryTabFurnitureView } from './furniture/InventoryTabFurnitureView';
+import { InventoryTabsContentViewProps } from './InventoryTabsContentView.types';
+import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
+
+export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+    
+    return (
+        <div className="px-3 pb-3">
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.FURNITURE && <InventoryTabFurnitureView /> }
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BOTS && <InventoryTabBotsView /> }
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.PETS && <InventoryTabPetsView /> }
+            { inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BADGES && <InventoryTabBadgesView /> }
+        </div>
+    );
+}

src/views/inventory/tabs-content/InventoryTabsContentView.types.ts

@@ -0,0 +1,2 @@
+export interface InventoryTabsContentViewProps
+{}

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabBadgesViewProps } from './InventoryTabBadgesView.types';
+
+export const InventoryTabBadgesView: FC<InventoryTabBadgesViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <>Badges content</>
+    );
+}

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.types.ts

@@ -0,0 +1,2 @@
+export interface InventoryTabBadgesViewProps
+{}

src/views/inventory/tabs-content/bots/InventoryTabBotsView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabBotsViewProps } from './InventoryTabBotsView.types';
+
+export const InventoryTabBotsView: FC<InventoryTabBotsViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <>Bots content</>
+    );
+}

src/views/inventory/tabs-content/bots/InventoryTabBotsView.types.ts

@@ -0,0 +1,2 @@
+export interface InventoryTabBotsViewProps
+{}

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabFurnitureViewProps } from './InventoryTabFurnitureView.types';
+
+export const InventoryTabFurnitureView: FC<InventoryTabFurnitureViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <>Furniture content</>
+    );
+}

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.types.ts

@@ -0,0 +1,2 @@
+export interface InventoryTabFurnitureViewProps
+{}

src/views/inventory/tabs-content/pets/InventoryTabPetsView.tsx

@@ -0,0 +1,12 @@
+import { FC, useContext } from 'react';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabPetsViewProps } from './InventoryTabPetsView.types';
+
+export const InventoryTabPetsView: FC<InventoryTabPetsViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <>Pets content</>
+    );
+}

src/views/inventory/tabs-content/pets/InventoryTabPetsView.types.ts

@@ -0,0 +1,2 @@
+export interface InventoryTabPetsViewProps
+{}

src/views/inventory/tabs-selector/InventoryTabsSelectorView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { InventoryTabsSelectorViewProps } from './InventoryTabsSelectorView.types';
+import { InventoryTabView } from './tab/InventoryTabView';
+
+export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
+{
+    return (
+        <div className="p-3">
+            { props.tabs &&
+                <div className="btn-group w-100">
+                    { props.tabs.map((tab, index) =>
+                        {
+                            return <InventoryTabView key={ index } tab={ tab } />
+                        }) }
+                </div> }
+        </div>
+    );
+}

src/views/inventory/tabs-selector/InventoryTabsSelectorView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryTabsSelectorViewProps
+{
+    tabs: string[];
+}

src/views/inventory/tabs-selector/tab/InventoryTabView.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { FC, useContext } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabViewProps } from './InventoryTabView.types';
+
+export const InventoryTabView: FC<InventoryTabViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <button type="button" 
+        className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': inventoryContext.currentTab === props.tab })}
+        onClick={ () => inventoryContext.onSetCurrentTab(props.tab) }>
+            { LocalizeText(props.tab) }
+        </button>
+    );
+}

src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryTabViewProps
+{
+    tab?: string;
+}

src/views/navigator/NavigatorMessageHandler.tsx

@@ -11,7 +11,7 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
     {
-        const parser = event.getParser();
+        //const parser = event.getParser();
 
         SendMessageHook(new NavigatorCategoriesComposer());
         SendMessageHook(new NavigatorSettingsComposer());

src/views/navigator/tabs/NavigatorTabsView.tsx

@@ -6,7 +6,7 @@ export function NavigatorTabsView(props: NavigatorTabsViewProps): JSX.Element
     const { topLevelContext = null, topLevelContexts = null, setTopLevelContext = null } = props;
 
     return (
-        <div className="d-flex flex-column p-3">
+        <div className="p-3">
             { topLevelContexts && topLevelContexts.length && 
                 <div className="btn-group w-100">
                     { topLevelContexts.map((context, index) =>