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

Update inventory context

Browse Source
This commit is contained in:
Bill 2021-04-23 21:03:34 -04:00
parent 1378417904
commit 34d0250f17
11 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/inventory/InventoryView.tsx
View File

@ -1,28 +1,22 @@
import { RoomSessionEvent } from 'nitro-renderer';
import { createContext, FC, useCallback, useEffect, useState } from 'react';
import { FC, useCallback, 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 { InventoryContextProvider } from './context/InventoryContext';
import { InventoryMessageHandler } from './InventoryMessageHandler';
import { IInventoryContext, InventoryTabs, InventoryViewProps } from './InventoryView.types';
import { 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 [ currentTab, setCurrentTab ] = useState<string>(null);
const [ tabs, setTabs ] = useState<string[]>([
InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES
]);
const tabs = [ InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES ];
useEffect(() => {
setCurrentTab(tabs[0]);
}, [ tabs ]);
const [ isVisible, setIsVisible ] = useState(false);
const [ currentTab, setCurrentTab ] = useState<string>(tabs[0]);
const onInventoryEvent = useCallback((event: InventoryEvent) =>
{
@ -62,7 +56,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
}
return (
<InventoryContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
<InventoryContextProvider value={{ currentTab, setCurrentTab }}>
<InventoryMessageHandler />
{ isVisible && <DraggableWindow handle=".drag-handler">
<div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
@ -76,6 +70,6 @@ export const InventoryView: FC<InventoryViewProps> = props =>
<InventoryTabsContentView />
</div>
</DraggableWindow> }
</InventoryContext.Provider>
</InventoryContextProvider>
);
}

6
src/views/inventory/InventoryView.types.ts
View File

@ -1,12 +1,6 @@
export interface InventoryViewProps
{}
export interface IInventoryContext
{
currentTab: string;
onSetCurrentTab: (tab: string) => void;
}
export class InventoryTabs
{
public static readonly FURNITURE: string = 'inventory.furni';

14
src/views/inventory/context/InventoryContext.tsx Normal file
View File

@ -0,0 +1,14 @@
import { createContext, FC, useContext } from 'react';
import { IInventoryContext, InventoryContextProps } from './InventoryContext.types';
const InventoryContext = createContext<IInventoryContext>({
currentTab: null,
setCurrentTab: null
});
export const InventoryContextProvider: FC<InventoryContextProps> = props =>
{
return <InventoryContext.Provider value={ props.value }>{ props.children }</InventoryContext.Provider>
}
export const useInventoryContext = () => useContext(InventoryContext);

12
src/views/inventory/context/InventoryContext.types.ts Normal file
View File

@ -0,0 +1,12 @@
import { ProviderProps } from 'react';
export interface IInventoryContext
{
currentTab: string;
setCurrentTab: (tab: string) => void;
}
export interface InventoryContextProps extends ProviderProps<IInventoryContext>
{
}

28
src/views/inventory/tabs-content/InventoryTabsContentView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../InventoryView';
import { FC } from 'react';
import { useInventoryContext } from '../context/InventoryContext';
import { InventoryTabs } from '../InventoryView.types';
import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
@ -9,14 +9,28 @@ import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
const inventoryContext = useInventoryContext();
function renderCurrentTab(): JSX.Element
{
switch(inventoryContext.currentTab)
{
case InventoryTabs.FURNITURE:
return <InventoryTabFurnitureView />
case InventoryTabs.BOTS:
return <InventoryTabBotsView />
case InventoryTabs.PETS:
return <InventoryTabPetsView />
case InventoryTabs.BADGES:
return <InventoryTabBadgesView />
}
return null;
}
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 /> }
{ inventoryContext && inventoryContext.currentTab && renderCurrentTab() }
</div>
);
}

6
src/views/inventory/tabs-content/badges/InventoryTabBadgesView.tsx
View File

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

6
src/views/inventory/tabs-content/bots/InventoryTabBotsView.tsx
View File

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

6
src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.tsx
View File

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

6
src/views/inventory/tabs-content/pets/InventoryTabPetsView.tsx
View File

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

4
src/views/inventory/tabs-selector/InventoryTabsSelectorView.tsx
View File

@ -4,9 +4,11 @@ import { InventoryTabView } from './tab/InventoryTabView';
export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
{
const { tabs = null } = props;
return (
<div className="p-3">
{ props.tabs &&
{ tabs && tabs.length &&
<div className="btn-group w-100">
{ props.tabs.map((tab, index) =>
{

23
src/views/inventory/tabs-selector/tab/InventoryTabView.tsx
View File

@ -1,18 +1,21 @@
import classNames from 'classnames';
import { FC, useContext } from 'react';
import { FC, MouseEvent } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { InventoryContext } from '../../InventoryView';
import { useInventoryContext } from '../../context/InventoryContext';
import { InventoryTabViewProps } from './InventoryTabView.types';
export const InventoryTabView: FC<InventoryTabViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
const { tab = null } = props;
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>
);
const inventoryContext = useInventoryContext();
function selectTab(event: MouseEvent = null): void
{
inventoryContext.setCurrentTab(tab);
}
if(!tab) return null;
return <button type="button" className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': (inventoryContext.currentTab === tab) })} onClick={ selectTab }>{ LocalizeText(tab) }</button>;
}