Update chooser widget

src/App.scss

@@ -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%;

src/views/room/widgets/choosers/ChooserWidgetView.scss

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

src/views/room/widgets/choosers/ChooserWidgetView.tsx

@@ -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 items.filter(item => item.name.toLocaleLowerCase().includes(value));
-            {
-                return 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,24 +44,20 @@ 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) }>
+            <Flex key={ props.key } alignItems="center" position="absolute" className={ 'rounded px-1' + ((selectedItem === item) ? ' bg-muted' : '') } pointer style={ props.style } onClick={ event => onItemClick(item) }>
-                { item.name } { displayItemId && (' - ' + item.id) }
+                <Text truncate>{ item.name } { displayItemId && (' - ' + item.id) }</Text>
-            </div>
+            </Flex>
         );
     }
 
     return (
         <NitroCardView className="nitro-chooser-widget">
             <NitroCardHeaderView headerText={ title } onCloseClick={ onCloseClick } />
-            <NitroCardContentView>
+            <NitroCardContentView overflow="hidden">
-                <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>
+                <Column fullHeight overflow="auto">
-                </div>
+                    <AutoSizer defaultWidth={ 0 } defaultHeight={ 0 }>
-                <div className="row w-100 h-100 chooser-container">
+                        { ({ width, height }) => 
-                    <AutoSizer defaultWidth={150} defaultHeight={150}>
-                        {({ height, width }) => 
                             {
                                 return (<List
                                     width={ width }
@@ -65,7 +67,7 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
                                     rowRenderer={ rowRenderer } />)
                             } }
                     </AutoSizer>
-                </div>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/choosers/ChooserWidgetView.type.ts

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

src/views/room/widgets/choosers/FurniChooserWidgetView.tsx

@@ -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) =>
+    {
+        BatchUpdates(() =>
         {
             setItems(event.items);
             setIsVisible(true);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@@ -48,12 +51,15 @@ export const FurniChooserWidgetView: FC<{}> = props =>
     CreateEventDispatcherHook(RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
 
     const close = useCallback(() =>
+    {
+        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 } />;
 }

src/views/room/widgets/choosers/UserChooserWidgetView.tsx

@@ -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';
 
@@ -24,9 +24,12 @@ export const UserChooserWidgetView: FC<{}> = props =>
     }, [ isVisible, widgetHandler ]);
 
     const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
+    {
+        BatchUpdates(() =>
         {
             setItems(event.items);
             setIsVisible(true);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@@ -48,9 +51,12 @@ export const UserChooserWidgetView: FC<{}> = props =>
     CreateEventDispatcherHook(RoomWidgetUpdateRoomObjectEvent.USER_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
 
     const close = useCallback(() =>
+    {
+        BatchUpdates(() =>
         {
             setIsVisible(false);
             setItems(null);
+        });
     }, []);
     
     if(!isVisible) return null;