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

Update chooser widget

Browse Source
This commit is contained in:
Bill 2022-02-25 19:31:26 -05:00
parent d54ea63f8b
commit da810998c5
6 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.scss
View File

@ -71,6 +71,9 @@ $room-info-width: 325px;
$nitro-mod-tools-width: 175px;
$nitro-chooser-width: 200px;
$nitro-chooser-height: 200px;
.nitro-app {
width: 100%;
height: 100%;

16
src/views/room/widgets/choosers/ChooserWidgetView.scss
View File

@ -1,16 +1,4 @@
.nitro-chooser-widget {
.chooser-container {
min-height: 150px;
.list-item {
color: black;
overflow: hidden;
&.selected {
background-color: cadetblue;
}
}
}
width: $nitro-chooser-width;
height: $nitro-chooser-height;
}

56
src/views/room/widgets/choosers/ChooserWidgetView.tsx
View File

@ -2,16 +2,24 @@ import { FC, useCallback, useMemo, useState } from 'react';
import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { RoomObjectItem, RoomWidgetRoomObjectMessage } from '../../../../api';
import { LocalizeText } from '../../../../api/utils';
import { Column, Flex, Text } from '../../../../common';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { useRoomContext } from '../../context/RoomContext';
import { ChooserWidgetViewProps } from './ChooserWidgetView.type';
interface ChooserWidgetViewProps
{
title: string;
items: RoomObjectItem[];
displayItemId: boolean;
onCloseClick: () => void;
}
export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
{
const { title = null, items = null, displayItemId = false, onCloseClick = null } = props;
const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
const [ searchValue, setSearchValue ] = useState('');
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const { widgetHandler = null } = useRoomContext();
const filteredItems = useMemo(() =>
{
@ -21,15 +29,13 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
const value = searchValue.toLocaleLowerCase();
return items.filter(item =>
{
return item.name.toLocaleLowerCase().includes(value);
});
return items.filter(item => item.name.toLocaleLowerCase().includes(value));
}, [ items, searchValue ]);
const onItemClick = useCallback((item: RoomObjectItem) =>
{
setSelectedItem(item);
widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category));
}, [ widgetHandler, setSelectedItem]);
@ -38,34 +44,30 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
const item = filteredItems[props.index];
return (
<div key={ props.key } className={ 'list-item' + ((selectedItem === item) ? ' selected' : '') } style={ props.style } onClick={ () => onItemClick(item) }>
{ item.name } { displayItemId && (' - ' + item.id) }
</div>
<Flex key={ props.key } alignItems="center" position="absolute" className={ 'rounded px-1' + ((selectedItem === item) ? ' bg-muted' : '') } pointer style={ props.style } onClick={ event => onItemClick(item) }>
<Text truncate>{ item.name } { displayItemId && (' - ' + item.id) }</Text>
</Flex>
);
}
return (
<NitroCardView className="nitro-chooser-widget">
<NitroCardHeaderView headerText={ title } onCloseClick={ onCloseClick } />
<NitroCardContentView>
<div className="d-flex mb-1">
<div className="d-flex flex-grow-1 me-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
</div>
</div>
<div className="row w-100 h-100 chooser-container">
<AutoSizer defaultWidth={150} defaultHeight={150}>
{({ height, width }) =>
{
return (<List
width={ width }
height={ height }
rowCount={ filteredItems.length }
rowHeight={ 20 }
rowRenderer={ rowRenderer } />)
}}
<NitroCardContentView overflow="hidden">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
<Column fullHeight overflow="auto">
<AutoSizer defaultWidth={ 0 } defaultHeight={ 0 }>
{ ({ width, height }) =>
{
return (<List
width={ width }
height={ height }
rowCount={ filteredItems.length }
rowHeight={ 20 }
rowRenderer={ rowRenderer } />)
} }
</AutoSizer>
</div>
</Column>
</NitroCardContentView>
</NitroCardView>
);

9
src/views/room/widgets/choosers/ChooserWidgetView.type.ts
View File

@ -1,9 +0,0 @@
import { RoomObjectItem } from '../../../../api';
export interface ChooserWidgetViewProps
{
title: string;
items: RoomObjectItem[];
displayItemId: boolean;
onCloseClick: () => void;
}

20
src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
View File

@ -1,6 +1,6 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRequestWidgetMessage, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
import { CreateEventDispatcherHook } from '../../../../hooks';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
import { useRoomContext } from '../../context/RoomContext';
import { ChooserWidgetView } from './ChooserWidgetView';
@ -20,13 +20,16 @@ export const FurniChooserWidgetView: FC<{}> = props =>
if(prevValue) clearTimeout(prevValue);
return setTimeout(() => widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.FURNI_CHOOSER)), 100);
})
});
}, [ isVisible, widgetHandler ]);
const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
{
setItems(event.items);
setIsVisible(true);
BatchUpdates(() =>
{
setItems(event.items);
setIsVisible(true);
});
}, []);
CreateEventDispatcherHook(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@ -49,11 +52,14 @@ export const FurniChooserWidgetView: FC<{}> = props =>
const close = useCallback(() =>
{
setIsVisible(false);
setItems(null);
BatchUpdates(() =>
{
setIsVisible(false);
setItems(null);
});
}, []);
if(!isVisible) return null;
if(!items) return null;
return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } displayItemId={ true } items={ items } onCloseClick={ close } />;
}

16
src/views/room/widgets/choosers/UserChooserWidgetView.tsx
View File

@ -1,6 +1,6 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRequestWidgetMessage, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
import { CreateEventDispatcherHook } from '../../../../hooks';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
import { useRoomContext } from '../../context/RoomContext';
import { ChooserWidgetView } from './ChooserWidgetView';
@ -25,8 +25,11 @@ export const UserChooserWidgetView: FC<{}> = props =>
const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
{
setItems(event.items);
setIsVisible(true);
BatchUpdates(() =>
{
setItems(event.items);
setIsVisible(true);
});
}, []);
CreateEventDispatcherHook(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@ -49,8 +52,11 @@ export const UserChooserWidgetView: FC<{}> = props =>
const close = useCallback(() =>
{
setIsVisible(false);
setItems(null);
BatchUpdates(() =>
{
setIsVisible(false);
setItems(null);
});
}, []);
if(!isVisible) return null;