mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 03:33:09 +02:00
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
|
import { FC, useCallback, useState } from 'react';
|
||
|
import { CatalogEvent } from '../../events';
|
||
|
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
|
||
|
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||
|
import { LocalizeText } from '../../utils/LocalizeText';
|
||
|
import { CatalogMessageHandler } from './CatalogMessageHandler';
|
||
|
import { CatalogViewProps } from './CatalogView.types';
|
||
|
|
||
|
export const CatalogView: FC<CatalogViewProps> = props =>
|
||
|
{
|
||
|
const [ isVisible, setIsVisible ] = useState(false);
|
||
|
|
||
|
const onCatalogEvent = useCallback((event: CatalogEvent) =>
|
||
|
{
|
||
|
switch(event.type)
|
||
|
{
|
||
|
case CatalogEvent.SHOW_CATALOG:
|
||
|
setIsVisible(true);
|
||
|
return;
|
||
|
case CatalogEvent.TOGGLE_CATALOG:
|
||
|
setIsVisible(value => !value);
|
||
|
return;
|
||
|
}
|
||
|
}, []);
|
||
|
|
||
|
useUiEvent(CatalogEvent.SHOW_CATALOG, onCatalogEvent);
|
||
|
useUiEvent(CatalogEvent.TOGGLE_CATALOG, onCatalogEvent);
|
||
|
|
||
|
function hideCatalog(): void
|
||
|
{
|
||
|
setIsVisible(false);
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<CatalogMessageHandler />
|
||
|
{ isVisible && <DraggableWindow handle=".drag-handler">
|
||
|
<div className="nitro-catalog d-flex flex-column bg-primary border border-black shadow rounded">
|
||
|
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
|
||
|
<div className="h6 m-0">{ LocalizeText('catalog.title') }</div>
|
||
|
<button type="button" className="close" onClick={ hideCatalog }>
|
||
|
<i className="fas fa-times"></i>
|
||
|
</button>
|
||
|
</div>
|
||
|
<div className="d-flex p-3">
|
||
|
content
|
||
|
</div>
|
||
|
</div>
|
||
|
</DraggableWindow> }
|
||
|
</>
|
||
|
);
|
||
|
}
|