mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 03:33:09 +02:00
60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
|
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
|
||
|
import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
|
||
|
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||
|
import { NitroCardContentView, NitroCardTabsView, NitroCardView } from '../../layout';
|
||
|
import { NitroCardSimpleHeaderView } from '../../layout/card/simple-header';
|
||
|
import { LocalizeText } from '../../utils/LocalizeText';
|
||
|
import { ModToolsContextProvider } from './context/ModToolsContext';
|
||
|
import { ModToolsViewProps } from './ModToolsView.types';
|
||
|
import { initialModTools, ModToolsReducer } from './reducers/ModToolsReducer';
|
||
|
|
||
|
export const ModToolsView: FC<ModToolsViewProps> = props =>
|
||
|
{
|
||
|
const [ isVisible, setIsVisible ] = useState(false);
|
||
|
const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
|
||
|
|
||
|
const onModToolsEvent = useCallback((event: ModToolsEvent) =>
|
||
|
{
|
||
|
switch(event.type)
|
||
|
{
|
||
|
case ModToolsEvent.SHOW_MOD_TOOLS:
|
||
|
setIsVisible(true);
|
||
|
return;
|
||
|
case ModToolsEvent.HIDE_MOD_TOOLS:
|
||
|
setIsVisible(false);
|
||
|
return;
|
||
|
case ModToolsEvent.TOGGLE_MOD_TOOLS:
|
||
|
setIsVisible(value => !value);
|
||
|
return;
|
||
|
}
|
||
|
}, []);
|
||
|
|
||
|
useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
|
||
|
useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
|
||
|
useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
|
||
|
|
||
|
useEffect(() =>
|
||
|
{
|
||
|
if(!isVisible) return;
|
||
|
}, [ isVisible ]);
|
||
|
|
||
|
return (
|
||
|
<ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
|
||
|
{ isVisible &&
|
||
|
<NitroCardView className="nitro-mod-tools">
|
||
|
<NitroCardSimpleHeaderView headerText={ LocalizeText('ModTools.title') } onCloseClick={ event => setIsVisible(false) } />
|
||
|
<NitroCardTabsView>
|
||
|
</NitroCardTabsView>
|
||
|
<NitroCardContentView>
|
||
|
<div className="row h-100">
|
||
|
<div className="col-3">
|
||
|
</div>
|
||
|
<div className="col">
|
||
|
</div>
|
||
|
</div>
|
||
|
</NitroCardContentView>
|
||
|
</NitroCardView> }
|
||
|
</ModToolsContextProvider>
|
||
|
);
|
||
|
}
|