From da810998c5b6f5c3a78f867575596d60fae14874 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:31:26 -0500
Subject: [PATCH] Update chooser widget

---
 src/App.scss                                  |  3 +
 .../widgets/choosers/ChooserWidgetView.scss   | 16 +-----
 .../widgets/choosers/ChooserWidgetView.tsx    | 56 ++++++++++---------
 .../choosers/ChooserWidgetView.type.ts        |  9 ---
 .../choosers/FurniChooserWidgetView.tsx       | 20 ++++---
 .../choosers/UserChooserWidgetView.tsx        | 16 ++++--
 6 files changed, 58 insertions(+), 62 deletions(-)
 delete mode 100644 src/views/room/widgets/choosers/ChooserWidgetView.type.ts

diff --git a/src/App.scss b/src/App.scss
index 547c02c4..30fce560 100644
--- a/src/App.scss
+++ b/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%;
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.scss b/src/views/room/widgets/choosers/ChooserWidgetView.scss
index 5365dd13..026e95b1 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.scss
+++ b/src/views/room/widgets/choosers/ChooserWidgetView.scss
@@ -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;
 }
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.tsx b/src/views/room/widgets/choosers/ChooserWidgetView.tsx
index 492b5164..2a11519f 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.tsx
+++ b/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 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>
     );
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts
deleted file mode 100644
index 89c9a169..00000000
--- a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RoomObjectItem } from '../../../../api';
-
-export interface ChooserWidgetViewProps
-{
-    title: string;
-    items: RoomObjectItem[];
-    displayItemId: boolean;
-    onCloseClick: () => void;
-}
diff --git a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
index 68a2971f..99198b1d 100644
--- a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
+++ b/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) =>
     {
-        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 } />;
 }
diff --git a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx
index b9ab2460..18dcbefd 100644
--- a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx
+++ b/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';
 
@@ -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;