From 077c016212df9a05358e1627442f2605add3f881 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 15 Aug 2021 00:54:17 -0400 Subject: [PATCH] Update choosers --- package-lock.json | 10 ++ package.json | 3 +- src/events/room-widgets/index.ts | 1 + .../room/events}/RoomObjectItem.ts | 6 +- .../events}/RoomWidgetChooserContentEvent.ts | 13 +-- src/views/room/events/index.ts | 2 + .../handlers/FurniChooserWidgetHandler.ts | 95 ++++++++----------- .../room/handlers/UserChooserWidgetHandler.ts | 52 ++++------ .../widgets/choosers/ChooserWidgetView.scss | 10 +- .../widgets/choosers/ChooserWidgetView.tsx | 85 +++++++---------- .../choosers/ChooserWidgetView.type.ts | 9 +- .../choosers/FurniChooserWidgetView.tsx | 54 ++++++++--- .../choosers/UserChooserWidgetView.tsx | 55 ++++++++--- .../room/widgets/choosers/utils/sorting.ts | 18 ---- 14 files changed, 203 insertions(+), 210 deletions(-) rename src/{events/room-widgets/choosers => views/room/events}/RoomObjectItem.ts (78%) rename src/{events/room-widgets/choosers => views/room/events}/RoomWidgetChooserContentEvent.ts (52%) delete mode 100644 src/views/room/widgets/choosers/utils/sorting.ts diff --git a/package-lock.json b/package-lock.json index 2b0533bd..8db31629 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4082,6 +4082,16 @@ "@types/react": "*" } }, + "@types/react-virtualized": { + "version": "9.21.13", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.13.tgz", + "integrity": "sha512-tCIQ5wDKj+QJ3sMzjPKSLY0AXsznt+ovAUcq+JCLjPBOcAHbPt4FraGT9HKYEFfmp9E6+ELuN49i5bWtuBmi3w==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/react": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", diff --git a/package.json b/package.json index ae0751c7..9a30909a 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@types/react": "^17.0.15", "@types/react-dom": "^17.0.9", "@types/react-slider": "^1.3.1", - "@types/react-transition-group": "^4.4.2" + "@types/react-transition-group": "^4.4.2", + "@types/react-virtualized": "^9.21.13" } } diff --git a/src/events/room-widgets/index.ts b/src/events/room-widgets/index.ts index 5eeca25b..960db095 100644 --- a/src/events/room-widgets/index.ts +++ b/src/events/room-widgets/index.ts @@ -1 +1,2 @@ export * from './camera'; +export * from './thumbnail'; diff --git a/src/events/room-widgets/choosers/RoomObjectItem.ts b/src/views/room/events/RoomObjectItem.ts similarity index 78% rename from src/events/room-widgets/choosers/RoomObjectItem.ts rename to src/views/room/events/RoomObjectItem.ts index d11fc5a8..f4fb2d6f 100644 --- a/src/events/room-widgets/choosers/RoomObjectItem.ts +++ b/src/views/room/events/RoomObjectItem.ts @@ -1,8 +1,8 @@ export class RoomObjectItem { - private readonly _id: number; - private readonly _category: number; - private readonly _name: string; + private _id: number; + private _category: number; + private _name: string; constructor(id: number, category: number, name: string) { diff --git a/src/events/room-widgets/choosers/RoomWidgetChooserContentEvent.ts b/src/views/room/events/RoomWidgetChooserContentEvent.ts similarity index 52% rename from src/events/room-widgets/choosers/RoomWidgetChooserContentEvent.ts rename to src/views/room/events/RoomWidgetChooserContentEvent.ts index aabb254e..75ec5f8e 100644 --- a/src/events/room-widgets/choosers/RoomWidgetChooserContentEvent.ts +++ b/src/views/room/events/RoomWidgetChooserContentEvent.ts @@ -1,5 +1,5 @@ -import { RoomWidgetUpdateEvent } from '../../../views/room/events'; import { RoomObjectItem } from './RoomObjectItem'; +import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent'; export class RoomWidgetChooserContentEvent extends RoomWidgetUpdateEvent { @@ -7,23 +7,16 @@ export class RoomWidgetChooserContentEvent extends RoomWidgetUpdateEvent public static FURNI_CHOOSER_CONTENT: string = 'RWCCE_FURNI_CHOOSER_CONTENT'; private _items: RoomObjectItem[]; - private _isAnyRoomController: boolean; - constructor(type: string, items: RoomObjectItem[], isAnyRoomController: boolean = false) + constructor(type: string, items: RoomObjectItem[]) { super(type); - this._items = items.slice(); - this._isAnyRoomController = isAnyRoomController; + this._items = items; } public get items(): RoomObjectItem[] { return this._items; } - - public get isAnyRoomController(): boolean - { - return this._isAnyRoomController; - } } diff --git a/src/views/room/events/index.ts b/src/views/room/events/index.ts index 4440c0af..d584aa5a 100644 --- a/src/views/room/events/index.ts +++ b/src/views/room/events/index.ts @@ -1,4 +1,6 @@ +export * from './RoomObjectItem'; export * from './RoomWidgetAvatarInfoEvent'; +export * from './RoomWidgetChooserContentEvent'; export * from './RoomWidgetDoorbellEvent'; export * from './RoomWidgetFloodControlEvent'; export * from './RoomWidgetObjectNameEvent'; diff --git a/src/views/room/handlers/FurniChooserWidgetHandler.ts b/src/views/room/handlers/FurniChooserWidgetHandler.ts index 9dc3f12e..f1dc79d7 100644 --- a/src/views/room/handlers/FurniChooserWidgetHandler.ts +++ b/src/views/room/handlers/FurniChooserWidgetHandler.ts @@ -1,11 +1,8 @@ import { NitroEvent, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer'; -import { GetNitroInstance, GetRoomEngine, GetSessionDataManager } from '../../../api'; -import { RoomObjectItem } from '../../../events/room-widgets/choosers/RoomObjectItem'; -import { RoomWidgetChooserContentEvent } from '../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { dispatchUiEvent } from '../../../hooks'; -import { RoomWidgetUpdateEvent } from '../events'; +import { GetRoomEngine, GetSessionDataManager } from '../../../api'; +import { LocalizeText } from '../../../utils'; +import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetUpdateEvent } from '../events'; import { RoomWidgetMessage, RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../messages'; -import { dynamicSort } from '../widgets/choosers/utils/sorting'; import { RoomWidgetHandler } from './RoomWidgetHandler'; export class FurniChooserWidgetHandler extends RoomWidgetHandler @@ -21,78 +18,68 @@ export class FurniChooserWidgetHandler extends RoomWidgetHandler switch(message.type) { case RoomWidgetRequestWidgetMessage.FURNI_CHOOSER: - this.processFurniChooser(); + this.processChooser(); break; case RoomWidgetRoomObjectMessage.SELECT_OBJECT: - this.selectFurni(message); + this.selectRoomObject((message as RoomWidgetRoomObjectMessage)); break; } return null; } - private selectFurni(message: RoomWidgetMessage): void + private processChooser(): void { - const event = message as RoomWidgetRoomObjectMessage; - - if(event == null) return; - - if(event.category === RoomObjectCategory.WALL || event.category === RoomObjectCategory.FLOOR) - { - GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, event.id, event.category); - } - } - - private processFurniChooser(): void - { - - if(this.container == null || this.container.roomSession == null || GetRoomEngine() == null || this.container.roomSession.userDataManager == null) return; - const roomId = this.container.roomSession.roomId; - const furniInRoom : RoomObjectItem[] = []; + const items: RoomObjectItem[] = []; const wallItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.WALL); const floorItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.FLOOR); - wallItems.forEach( wallItem => { - if(!wallItem) return; + wallItems.forEach(roomObject => + { + let name = roomObject.type; - const type = wallItem.type; - let name = null; - if(type.startsWith('poster')) - { - const posterNumber = Number.parseInt(type.replace('poster', '')); - name = GetNitroInstance().localization.getValue('poster_' + posterNumber + '_name'); - } - else - { - const furniTypeId = Number.parseInt(wallItem.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID)); - const wallItemData = GetSessionDataManager().getWallItemData(furniTypeId); - if(wallItemData != null && wallItemData.name.length > 0) + if(name.startsWith('poster')) { - name = wallItemData.name; + name = LocalizeText(`poster_${ name.replace('poster', '') }_name`); } else { - name = type; + const typeId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID); + const furniData = GetSessionDataManager().getWallItemData(typeId); + + if(furniData && furniData.name.length) name = furniData.name; } - } - furniInRoom.push(new RoomObjectItem(wallItem.id, RoomObjectCategory.WALL, name)); - }); - floorItems.forEach(roomObject => { - if(!roomObject) return; - - const furniTypeId = Number.parseInt(roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID)); - const floorItemData = GetSessionDataManager().getFloorItemData(furniTypeId); - const name = floorItemData != null ? floorItemData.name : roomObject.type; + items.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name)); + }); - furniInRoom.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name)); - }); + floorItems.forEach(roomObject => + { + let name = roomObject.type; - furniInRoom.sort(dynamicSort('name')); + const typeId = roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID); + const furniData = GetSessionDataManager().getFloorItemData(typeId); - dispatchUiEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, furniInRoom, false)); + if(furniData && furniData.name.length) name = furniData.name; + + items.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name)); + }); + + items.sort((a, b) => + { + return (a.name < b.name) ? -1 : 1; + }); + + this.container.eventDispatcher.dispatchEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, items)); + } + + private selectRoomObject(message: RoomWidgetRoomObjectMessage): void + { + if(message.category !== RoomObjectCategory.WALL || message.category !== RoomObjectCategory.FLOOR) return; + + GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, message.id, message.category); } public get type(): string diff --git a/src/views/room/handlers/UserChooserWidgetHandler.ts b/src/views/room/handlers/UserChooserWidgetHandler.ts index ce889635..5ab8ecc6 100644 --- a/src/views/room/handlers/UserChooserWidgetHandler.ts +++ b/src/views/room/handlers/UserChooserWidgetHandler.ts @@ -1,12 +1,8 @@ import { NitroEvent, RoomObjectCategory, RoomWidgetEnum } from '@nitrots/nitro-renderer'; import { RoomWidgetHandler } from '.'; import { GetRoomEngine } from '../../../api'; -import { RoomObjectItem } from '../../../events/room-widgets/choosers/RoomObjectItem'; -import { RoomWidgetChooserContentEvent } from '../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { dispatchUiEvent } from '../../../hooks'; -import { RoomWidgetUpdateEvent } from '../events'; +import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetUpdateEvent } from '../events'; import { RoomWidgetMessage, RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../messages'; -import { dynamicSort } from '../widgets/choosers/utils/sorting'; export class UserChooserWidgetHandler extends RoomWidgetHandler { @@ -21,51 +17,45 @@ export class UserChooserWidgetHandler extends RoomWidgetHandler switch(message.type) { case RoomWidgetRequestWidgetMessage.USER_CHOOSER: - this.processUserChooser(); + this.processChooser(); break; case RoomWidgetRoomObjectMessage.SELECT_OBJECT: - this.selectUnit(message); + this.selectRoomObject((message as RoomWidgetRoomObjectMessage)); break; } return null; } - private processUserChooser(): void + private processChooser(): void { - - if(this.container == null || this.container.roomSession == null || GetRoomEngine() == null || this.container.roomSession.userDataManager == null) return; - const roomId = this.container.roomSession.roomId; - const categoryId = RoomObjectCategory.UNIT; - const units : RoomObjectItem[] = []; - - const roomObjects = GetRoomEngine().getRoomObjects(roomId, categoryId); + const items: RoomObjectItem[] = []; - roomObjects.forEach(roomObject => { - if(!roomObject) return; + const userItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.UNIT); - const unitData = this.container.roomSession.userDataManager.getUserDataByIndex(roomObject.id); + userItems.forEach(roomObject => + { + const userData = this.container.roomSession.userDataManager.getUserDataByIndex(roomObject.id); - if(!unitData) return; + if(!userData) return; - units.push(new RoomObjectItem(unitData.roomIndex, categoryId, unitData.name)); + items.push(new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name)); + }); + + items.sort((a, b) => + { + return (a.name < b.name) ? -1 : 1; }); - units.sort(dynamicSort('name')); - dispatchUiEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, units)); + this.container.eventDispatcher.dispatchEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, items)); } - private selectUnit(k: RoomWidgetMessage): void + private selectRoomObject(message: RoomWidgetRoomObjectMessage): void { - const event = k as RoomWidgetRoomObjectMessage; - - if(event == null) return; - - if(event.category === RoomObjectCategory.UNIT) - { - GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, event.id, event.category); - } + if(message.category !== RoomObjectCategory.UNIT) return; + + GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, message.id, message.category); } public get type(): string diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.scss b/src/views/room/widgets/choosers/ChooserWidgetView.scss index bca2d777..9a461869 100644 --- a/src/views/room/widgets/choosers/ChooserWidgetView.scss +++ b/src/views/room/widgets/choosers/ChooserWidgetView.scss @@ -1,9 +1,11 @@ -.chooser-widget { - .selected-item { - background-color: cadetblue; - } +.nitro-chooser-widget { + .list-item { color: black; overflow: hidden; + + &.selected { + background-color: cadetblue; + } } } diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.tsx b/src/views/room/widgets/choosers/ChooserWidgetView.tsx index 05d3e7bf..db2da704 100644 --- a/src/views/room/widgets/choosers/ChooserWidgetView.tsx +++ b/src/views/room/widgets/choosers/ChooserWidgetView.tsx @@ -1,86 +1,65 @@ -import { FC, useCallback, useEffect, useState } from 'react'; -import List from 'react-virtualized/dist/commonjs/List'; -import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; -import { CreateEventDispatcherHook } from '../../../../hooks'; +import { FC, useCallback, useMemo, useState } from 'react'; +import { List, ListRowProps, ListRowRenderer } from 'react-virtualized'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { LocalizeText } from '../../../../utils'; import { useRoomContext } from '../../context/RoomContext'; -import { RoomWidgetRoomObjectUpdateEvent } from '../../events'; -import { RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../../messages'; +import { RoomObjectItem } from '../../events'; +import { RoomWidgetRoomObjectMessage } from '../../messages'; import { ChooserWidgetViewProps } from './ChooserWidgetView.type'; export const ChooserWidgetView: FC = props => { - const [filteredItems, setFilteredItems] = useState([]); - const [selectedItem, setSelectedItem] = useState(null); - const [refreshTimeout, setRefreshTimeout] = useState>(null); - const [searchValue, setSearchValue] = useState(''); - const { title = null, onCloseClick = null, displayItemId = false, items = null, messageType = null, roomWidgetRoomObjectUpdateEvents = null } = 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(); - useEffect(() => + const filteredItems = useMemo(() => { - if (!items) return; + if(!items) return []; - const filteredGroupItems = items.filter(item => - { - return item.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()); - }); + if(!searchValue || !searchValue.length) return items; - setFilteredItems(filteredGroupItems); - }, [items, searchValue, setFilteredItems]); + const value = searchValue.toLocaleLowerCase(); - const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => - { - if (!event) return; + return items.filter(item => + { + return item.name.toLocaleLowerCase().includes(value); + }); + }, [ items, searchValue ]); - if (refreshTimeout) clearTimeout(refreshTimeout); - - setRefreshTimeout(setTimeout(() => - { - widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(messageType)); - }, 100)); - - }, [refreshTimeout, messageType, widgetHandler]); - - roomWidgetRoomObjectUpdateEvents.forEach(event => CreateEventDispatcherHook(event, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent)); - - const onClickItem = useCallback((item: RoomObjectItem) => + const onItemClick = useCallback((item: RoomObjectItem) => { setSelectedItem(item); widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category)); - }, [setSelectedItem, widgetHandler]); + }, [ widgetHandler, setSelectedItem]); - const rowRenderer = function ({ - key, // Unique key within array of rows - index, // Index of row within collection - isScrolling, // The List is currently being scrolled - isVisible, // This row is visible within the List (eg it is not an overscanned row) - style, // Style object to be applied to row (to position it) - }) + const rowRenderer: ListRowRenderer = (props: ListRowProps) => { + const item = filteredItems[props.index]; + return ( -
onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}> - {filteredItems[index].name} - {displayItemId && (' - ' + filteredItems[index].id)} +
onItemClick(item) }> + { item.name } { displayItemId && (' - ' + item.id) }
); } return ( - - + +
- setSearchValue(event.target.value)} /> + setSearchValue(event.target.value)} />
- + ); diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts index 87c9ef9f..8266f8b9 100644 --- a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts +++ b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts @@ -1,12 +1,9 @@ -import { MouseEvent } from 'react'; -import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; +import { RoomObjectItem } from '../../events'; export interface ChooserWidgetViewProps { title: string; - onCloseClick: (event: MouseEvent) => void; - displayItemId: boolean; items: RoomObjectItem[]; - messageType: string; - roomWidgetRoomObjectUpdateEvents: string[]; + displayItemId: boolean; + onCloseClick: () => void; } diff --git a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx index d3d1b617..0ac7ab55 100644 --- a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx +++ b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx @@ -1,27 +1,55 @@ import { FC, useCallback, useState } from 'react'; -import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; -import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { useUiEvent } from '../../../../hooks'; +import { CreateEventDispatcherHook } from '../../../../hooks'; import { LocalizeText } from '../../../../utils'; -import { RoomWidgetRoomObjectUpdateEvent } from '../../events'; +import { useRoomContext } from '../../context/RoomContext'; +import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRoomObjectUpdateEvent } from '../../events'; import { RoomWidgetRequestWidgetMessage } from '../../messages'; import { ChooserWidgetView } from './ChooserWidgetView'; -export const FurniChooserWidgetView: FC = props => +export const FurniChooserWidgetView: FC<{}> = props => { - const [isVisible, setIsVisible] = useState(false); - const [items, setItems] = useState(null); + const [ isVisible, setIsVisible ] = useState(false); + const [ items, setItems ] = useState(null); + const [ refreshTimeout, setRefreshTimeout ] = useState>(null); + const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); - const onFurniChooserContent = useCallback((event: RoomWidgetChooserContentEvent) => + const refreshChooser = useCallback(() => + { + if(!isVisible) return; + + setRefreshTimeout(prevValue => + { + 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); }, []); - useUiEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, onFurniChooserContent); + CreateEventDispatcherHook(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent); + const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => + { + if(!isVisible) return; - const onClose = useCallback(() => + switch(event.type) + { + case RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED: + case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: + refreshChooser(); + return; + } + }, [ isVisible, refreshChooser ]); + + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); + + const close = useCallback(() => { setIsVisible(false); setItems(null); @@ -29,9 +57,5 @@ export const FurniChooserWidgetView: FC = props => if (!isVisible) return null; - return ( -
- -
- ) + return ; } diff --git a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx index e7f1e3be..4c8056af 100644 --- a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx +++ b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx @@ -1,26 +1,55 @@ import { FC, useCallback, useState } from 'react'; -import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; -import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { useUiEvent } from '../../../../hooks'; +import { CreateEventDispatcherHook } from '../../../../hooks'; import { LocalizeText } from '../../../../utils'; -import { RoomWidgetRoomObjectUpdateEvent } from '../../events'; +import { useRoomContext } from '../../context/RoomContext'; +import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRoomObjectUpdateEvent } from '../../events'; import { RoomWidgetRequestWidgetMessage } from '../../messages'; import { ChooserWidgetView } from './ChooserWidgetView'; -export const UserChooserWidgetView : FC = props => +export const UserChooserWidgetView: FC<{}> = props => { - const [isVisible, setIsVisible] = useState(false); - const [items, setItems] = useState(null); + const [ isVisible, setIsVisible ] = useState(false); + const [ items, setItems ] = useState(null); + const [ refreshTimeout, setRefreshTimeout ] = useState>(null); + const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); - const onUserChooserContent = useCallback((event: RoomWidgetChooserContentEvent) => + const refreshChooser = useCallback(() => + { + if(!isVisible) return; + + setRefreshTimeout(prevValue => + { + 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); }, []); - useUiEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, onUserChooserContent); + CreateEventDispatcherHook(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent); - const onClose = useCallback(() => + const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => + { + if(!isVisible) return; + + switch(event.type) + { + case RoomWidgetRoomObjectUpdateEvent.USER_ADDED: + case RoomWidgetRoomObjectUpdateEvent.USER_REMOVED: + refreshChooser(); + return; + } + }, [ isVisible, refreshChooser ]); + + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); + + const close = useCallback(() => { setIsVisible(false); setItems(null); @@ -28,9 +57,5 @@ export const UserChooserWidgetView : FC = props => if(!isVisible) return null; - return ( -
- -
- ); + return ; } diff --git a/src/views/room/widgets/choosers/utils/sorting.ts b/src/views/room/widgets/choosers/utils/sorting.ts deleted file mode 100644 index eee12529..00000000 --- a/src/views/room/widgets/choosers/utils/sorting.ts +++ /dev/null @@ -1,18 +0,0 @@ -export function dynamicSort(property) -{ - // Source: https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value - let sortOrder = 1; - if(property[0] === '-') - { - sortOrder = -1; - property = property.substr(1); - } - return function (a,b) - { - /* next line works with strings and numbers, - * and you may want to customize it to your needs - */ - const result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0; - return result * sortOrder; - }; -}