mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-02-17 01:12:37 +01:00
Merge branch 'main' of https://github.com/billsonnn/nitro-react
This commit is contained in:
commit
6f0ac2e7e8
@ -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 right = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
|
||||
//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']);
|
||||
|
||||
return (
|
||||
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
|
||||
|
@ -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">
|
||||
content
|
||||
</div>
|
||||
<InventoryTabsSelectorView tabs={ tabs } />
|
||||
<InventoryTabsContentView />
|
||||
</div>
|
||||
</DraggableWindow> }
|
||||
</>
|
||||
</InventoryContext.Provider>
|
||||
);
|
||||
}
|
||||
|
@ -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';
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
export interface InventoryTabsContentViewProps
|
||||
{}
|
@ -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</>
|
||||
);
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
export interface InventoryTabBadgesViewProps
|
||||
{}
|
@ -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</>
|
||||
);
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
export interface InventoryTabBotsViewProps
|
||||
{}
|
@ -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</>
|
||||
);
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
export interface InventoryTabFurnitureViewProps
|
||||
{}
|
@ -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</>
|
||||
);
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
export interface InventoryTabPetsViewProps
|
||||
{}
|
@ -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>
|
||||
);
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
export interface InventoryTabsSelectorViewProps
|
||||
{
|
||||
tabs: string[];
|
||||
}
|
18
src/views/inventory/tabs-selector/tab/InventoryTabView.tsx
Normal file
18
src/views/inventory/tabs-selector/tab/InventoryTabView.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
export interface InventoryTabViewProps
|
||||
{
|
||||
tab?: string;
|
||||
}
|
@ -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());
|
||||
|
@ -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) =>
|
||||
|
Loading…
x
Reference in New Issue
Block a user