Inventory tabs selector

This commit is contained in:
Batman 2021-04-22 02:29:42 -03:00
parent 676af80e23
commit cfd996f650
7 changed files with 65 additions and 10 deletions

View File

@ -1,14 +1,23 @@
import { FC, useCallback, useState } from 'react';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { InventoryEvent } from '../../events';
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { LocalizeText } from '../../utils/LocalizeText';
import { InventoryMessageHandler } from './InventoryMessageHandler';
import { InventoryViewProps } from './InventoryView.types';
import { IInventoryContext, InventoryViewProps } from './InventoryView.types';
import { InventoryTabsView } from './tabs/InventoryTabsView';
export const InventoryContext = React.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[]>([ 'inventory.furni', 'inventory.bots', 'inventory.furni.tab.pets', 'inventory.badges' ]);
useEffect(() => {
setCurrentTab(tabs[0]);
}, [ tabs ]);
const onInventoryEvent = useCallback((event: InventoryEvent) =>
{
@ -32,7 +41,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">
@ -42,11 +51,9 @@ export const InventoryView: FC<InventoryViewProps> = props =>
<i className="fas fa-times"></i>
</button>
</div>
<div className="d-flex p-3">
content
</div>
<InventoryTabsView tabs={ tabs } />
</div>
</DraggableWindow> }
</>
</InventoryContext.Provider>
);
}

View File

@ -1,4 +1,8 @@
export interface InventoryViewProps
{}
export interface IInventoryContext
{
currentTab: string;
onSetCurrentTab: (tab: string) => void;
}

View File

@ -0,0 +1,18 @@
import { FC } from 'react';
import { InventoryTabsViewProps } from './InventoryTabsView.types';
import { InventoryTabView } from './tab/InventoryTabView';
export const InventoryTabsView: FC<InventoryTabsViewProps> = 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>
);
}

View File

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

View 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>
);
}

View File

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

View File

@ -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) =>