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 choosers

Browse Source
This commit is contained in:
Bill 2021-08-15 00:54:17 -04:00
parent 24215b9c5c
commit 077c016212
14 changed files with 203 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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"
}
}

1
src/events/room-widgets/index.ts
View File

@ -1 +1,2 @@
export * from './camera';
export * from './thumbnail';

6
src/events/room-widgets/choosers/RoomObjectItem.ts → src/views/room/events/RoomObjectItem.ts
View File

@ -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)
{

13
src/events/room-widgets/choosers/RoomWidgetChooserContentEvent.ts → src/views/room/events/RoomWidgetChooserContentEvent.ts
View File

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

2
src/views/room/events/index.ts
View File

@ -1,4 +1,6 @@
export * from './RoomObjectItem';
export * from './RoomWidgetAvatarInfoEvent';
export * from './RoomWidgetChooserContentEvent';
export * from './RoomWidgetDoorbellEvent';
export * from './RoomWidgetFloodControlEvent';
export * from './RoomWidgetObjectNameEvent';

95
src/views/room/handlers/FurniChooserWidgetHandler.ts
View File

@ -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<number>(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<number>(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

52
src/views/room/handlers/UserChooserWidgetHandler.ts
View File

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

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

@ -1,9 +1,11 @@
.chooser-widget {
.selected-item {
background-color: cadetblue;
}
.nitro-chooser-widget {
.list-item {
color: black;
overflow: hidden;
&.selected {
background-color: cadetblue;
}
}
}

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

@ -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<ChooserWidgetViewProps> = props =>
{
const [filteredItems, setFilteredItems] = useState<RoomObjectItem[]>([]);
const [selectedItem, setSelectedItem] = useState<RoomObjectItem>(null);
const [refreshTimeout, setRefreshTimeout] = useState<ReturnType<typeof setTimeout>>(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<RoomObjectItem>(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 (
<div key={key} style={style} onClick={() => onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}>
{filteredItems[index].name}
{displayItemId && (' - ' + filteredItems[index].id)}
<div key={ props.key } className={ 'list-item' + ((selectedItem === item) ? ' selected' : '') } style={ props.style } onClick={ () => onItemClick(item) }>
{ item.name } { displayItemId && (' - ' + item.id) }
</div>
);
}
return (
<NitroCardView>
<NitroCardHeaderView headerText={title} onCloseClick={onCloseClick}></NitroCardHeaderView>
<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)} />
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
</div>
</div>
<List width={150}
height={150}
rowCount={filteredItems.length}
rowHeight={20}
rowRenderer={rowRenderer} />
<List
width={ 150 }
height={ 150 }
rowCount={ filteredItems.length }
rowHeight={ 20 }
rowRenderer={ rowRenderer } />
</NitroCardContentView>
</NitroCardView>
);

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

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

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

@ -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<RoomObjectItem[]>(null);
const [ isVisible, setIsVisible ] = useState(false);
const [ items, setItems ] = useState<RoomObjectItem[]>(null);
const [ refreshTimeout, setRefreshTimeout ] = useState<ReturnType<typeof setTimeout>>(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 (
<div className="chooser-widget">
<ChooserWidgetView title={LocalizeText('widget.chooser.furni.title')} displayItemId={true} onCloseClick={onClose} items={items} messageType={RoomWidgetRequestWidgetMessage.FURNI_CHOOSER} roomWidgetRoomObjectUpdateEvents={[RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED]}></ChooserWidgetView>
</div>
)
return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } displayItemId={ false } items={ items } onCloseClick={ close } />;
}

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

@ -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<RoomObjectItem[]>(null);
const [ isVisible, setIsVisible ] = useState(false);
const [ items, setItems ] = useState<RoomObjectItem[]>(null);
const [ refreshTimeout, setRefreshTimeout ] = useState<ReturnType<typeof setTimeout>>(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 (
<div className="chooser-widget">
<ChooserWidgetView title={LocalizeText('widget.chooser.user.title')} displayItemId={false} onCloseClick={onClose} items={items} messageType={RoomWidgetRequestWidgetMessage.USER_CHOOSER} roomWidgetRoomObjectUpdateEvents={[RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, RoomWidgetRoomObjectUpdateEvent.USER_ADDED]}></ChooserWidgetView>
</div>
);
return <ChooserWidgetView title={ LocalizeText('widget.chooser.user.title') } displayItemId={ true } items={ items } onCloseClick={ close } />;
}

18
src/views/room/widgets/choosers/utils/sorting.ts
View File

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