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 = props => { const { title = null, items = null, displayItemId = false, onCloseClick = null } = props; const [ selectedItem, setSelectedItem ] = useState(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 = 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 = props => const item = filteredItems[props.index]; return ( -
onItemClick(item) }> - { item.name } { displayItemId && (' - ' + item.id) } -
+ onItemClick(item) }> + { item.name } { displayItemId && (' - ' + item.id) } + ); } return ( - -
-
- setSearchValue(event.target.value)} /> -
-
-
- - {({ height, width }) => - { - return () - }} + + setSearchValue(event.target.value)} /> + + + { ({ width, height }) => + { + return () + } } -
+
); 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 ; } 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;