diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index a8b54271..3b906c83 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -6,6 +6,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro import RoomSettingsData from '../../common/RoomSettingsData'; import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView'; import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView'; +import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView'; const TABS: string[] = [ 'navigator.roomsettings.tab.1', @@ -37,36 +38,36 @@ export const NavigatorRoomSettingsView: FC<{}> = props => CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); - const save = useCallback(() => + const save = useCallback((data: RoomSettingsData) => { SendMessageHook( new SaveRoomSettingsComposer( - roomSettingsData.roomId, - roomSettingsData.roomName, - roomSettingsData.roomDescription, - roomSettingsData.lockState, - roomSettingsData.password, - roomSettingsData.userCount, - roomSettingsData.categoryId, - roomSettingsData.tags.length, - roomSettingsData.tags, - roomSettingsData.tradeState, - roomSettingsData.allowPets, - roomSettingsData.allowPetsEat, - roomSettingsData.allowWalkthrough, - roomSettingsData.hideWalls, - roomSettingsData.wallThickness, - roomSettingsData.floorThickness, - roomSettingsData.muteState, - roomSettingsData.kickState, - roomSettingsData.banState, - roomSettingsData.chatBubbleMode, - roomSettingsData.chatBubbleWeight, - roomSettingsData.chatBubbleSpeed, - roomSettingsData.chatDistance, - roomSettingsData.chatFloodProtection + data.roomId, + data.roomName, + data.roomDescription, + data.lockState, + data.password, + data.userCount, + data.categoryId, + data.tags.length, + data.tags, + data.tradeState, + data.allowPets, + data.allowPetsEat, + data.allowWalkthrough, + data.hideWalls, + data.wallThickness, + data.floorThickness, + data.muteState, + data.kickState, + data.banState, + data.chatBubbleMode, + data.chatBubbleWeight, + data.chatBubbleSpeed, + data.chatDistance, + data.chatFloodProtection )); - }, [ roomSettingsData ]); + }, []); const processAction = useCallback((action: string) => { @@ -93,6 +94,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { currentTab === TABS[0] && } { currentTab === TABS[1] && } + { currentTab === TABS[3] && } ); diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts index 52eded57..dd32f7e9 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts @@ -4,5 +4,5 @@ export class NavigatorRoomSettingsTabViewProps { roomSettingsData: RoomSettingsData; setRoomSettingsData: (roomSettings: RoomSettingsData) => void; - onSave: () => void; + onSave: (data: RoomSettingsData) => void; } diff --git a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx index d4b4944f..4acf0bdc 100644 --- a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx @@ -1,6 +1,5 @@ import { FC, useCallback } from 'react'; import { LocalizeText } from '../../../../../../api'; -import RoomSettingsData from '../../../../common/RoomSettingsData'; import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; export const NavigatorRoomSettingsAccessTabView: FC = props => @@ -9,7 +8,7 @@ export const NavigatorRoomSettingsAccessTabView: FC { - const roomSettings = ({ ...roomSettingsData } as RoomSettingsData); + const roomSettings = Object.assign({}, roomSettingsData); let save = true; switch(field) @@ -37,7 +36,7 @@ export const NavigatorRoomSettingsAccessTabView: FC @@ -47,8 +46,8 @@ export const NavigatorRoomSettingsAccessTabView: FC { - if(isPasswordValid()) onSave(); - }, [ isPasswordValid, onSave ]); + if(isPasswordValid()) onSave(roomSettingsData); + }, [isPasswordValid, onSave, roomSettingsData]); return ( <> diff --git a/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx index bb358297..64329cc1 100644 --- a/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx @@ -43,18 +43,18 @@ export const NavigatorRoomSettingsBasicTabView: FC
- handleChange('name', event.target.value) } onBlur={ onSave } /> + handleChange('name', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
- handleChange('description', event.target.value) } onBlur={ onSave } /> + handleChange('description', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
diff --git a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx new file mode 100644 index 00000000..e87b788c --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx @@ -0,0 +1,108 @@ +import { FC, useCallback } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsVipChatTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const clone = Object.assign({}, roomSettingsData); + let save = true; + + switch(field) + { + case 'hide_walls': + clone.hideWalls = Boolean(value); + break; + case 'wall_thickness': + clone.wallThickness = Number(value); + break; + case 'floor_thickness': + clone.floorThickness = Number(value); + break; + case 'bubble_mode': + clone.chatBubbleMode = Number(value); + break; + case 'chat_weight': + clone.chatBubbleWeight = Number(value); + break; + case 'bubble_speed': + clone.chatBubbleSpeed = Number(value); + break; + case 'flood_protection': + clone.chatFloodProtection = Number(value); + break; + case 'chat_distance': + clone.chatDistance = Number(value); + save = false; + break; + } + + setRoomSettingsData(clone); + + if(save) onSave(clone); + }, [ roomSettingsData, setRoomSettingsData, onSave ]); + + return ( + <> +
{LocalizeText('navigator.roomsettings.vip.caption')}
+
{LocalizeText('navigator.roomsettings.vip.info')}
+
{LocalizeText('navigator.roomsettings.vip_settings')}
+
+ handleChange('hide_walls', e.target.checked) } /> + +
+
+ +
+
+ +
+
{LocalizeText('navigator.roomsettings.chat_settings')}
+
{LocalizeText('navigator.roomsettings.chat_settings.info')}
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } /> +
+ + ); +}