nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update FurnitureCustomStackHeightView

Browse Source
This commit is contained in:
Bill 2021-10-16 01:51:11 -04:00
parent d932c410de
commit 40cd7c6609
2 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss Normal file
View File

@ -0,0 +1,4 @@
.nitro-widget-custom-stack-height {
width: $nitro-widget-custom-stack-height-width;
height: $nitro-widget-custom-stack-height-height;
}

78
src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx
View File

@ -2,9 +2,10 @@ import { FurnitureStackHeightComposer, FurnitureStackHeightEvent } from '@nitrot
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider'; import ReactSlider from 'react-slider';
import { LocalizeText, RoomWidgetUpdateCustomStackHeightEvent } from '../../../../../api'; import { LocalizeText, RoomWidgetUpdateCustomStackHeightEvent } from '../../../../../api';
import { CreateMessageHook, SendMessageHook } from '../../../../../hooks'; import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events'; import { CreateEventDispatcherHook } from '../../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
import { NitroLayoutBase } from '../../../../../layout/base';
import { useRoomContext } from '../../../context/RoomContext'; import { useRoomContext } from '../../../context/RoomContext';
const MAX_HEIGHT: number = 40; const MAX_HEIGHT: number = 40;
@ -14,13 +15,15 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
const [ objectId, setObjectId ] = useState(-1); const [ objectId, setObjectId ] = useState(-1);
const [ height, setHeight ] = useState(0); const [ height, setHeight ] = useState(0);
const [ pendingHeight, setPendingHeight ] = useState(-1); const [ pendingHeight, setPendingHeight ] = useState(-1);
const { eventDispatcher = null } = useRoomContext();
const { roomSession = null, eventDispatcher = null } = useRoomContext();
const close = useCallback(() => const close = useCallback(() =>
{ {
setObjectId(-1); BatchUpdates(() =>
setHeight(0); {
setObjectId(-1);
setHeight(0);
});
}, []); }, []);
const updateHeight = useCallback((height: number, fromServer: boolean = false) => const updateHeight = useCallback((height: number, fromServer: boolean = false) =>
@ -31,9 +34,12 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
if(!fromServer) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT)); if(!fromServer) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT));
setHeight(parseFloat(height.toFixed(2))); BatchUpdates(() =>
{
setHeight(parseFloat(height.toFixed(2)));
if(!fromServer) setPendingHeight(height * 100); if(!fromServer) setPendingHeight(height * 100);
});
}, []); }, []);
const onRoomWidgetUpdateCustomStackHeightEvent = useCallback((event: RoomWidgetUpdateCustomStackHeightEvent) => const onRoomWidgetUpdateCustomStackHeightEvent = useCallback((event: RoomWidgetUpdateCustomStackHeightEvent) =>
@ -65,16 +71,6 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
SendMessageHook(new FurnitureStackHeightComposer(objectId, ~~(height))); SendMessageHook(new FurnitureStackHeightComposer(objectId, ~~(height)));
}, [ objectId ]); }, [ objectId ]);
const placeAboveStack = useCallback(() =>
{
sendUpdate(-100);
}, [ sendUpdate ]);
const placeAtFloor = useCallback(() =>
{
sendUpdate(0);
}, [ sendUpdate ]);
useEffect(() => useEffect(() =>
{ {
if((objectId === -1) || (pendingHeight === -1)) return; if((objectId === -1) || (pendingHeight === -1)) return;
@ -87,27 +83,35 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
if(objectId === -1) return null; if(objectId === -1) return null;
return ( return (
<NitroCardView> <NitroCardView className="nitro-widget-custom-stack-height" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } /> <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
<NitroCardContentView> <NitroCardContentView>
<div className="form-group"> <NitroLayoutGrid>
<label className="fw-bold text-black">{ LocalizeText('widget.custom.stack.height.text') }</label> <NitroLayoutGridColumn className="justify-content-between" size={ 12 }>
<ReactSlider <NitroLayoutBase className="text-black" overflow="auto">
className={ 'nitro-slider' } { LocalizeText('widget.custom.stack.height.text') }
min={ 0 } </NitroLayoutBase>
max={ MAX_HEIGHT } <NitroLayoutFlexColumn gap={ 2 }>
step={ 0.01 } <NitroLayoutFlex gap={ 2 }>
value={ height } <ReactSlider
onChange={ event => updateHeight(event) } className="nitro-slider"
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } /> min={ 0 }
</div> max={ MAX_HEIGHT }
<div className="form-group"> step={ 0.01 }
<input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } /> value={ height }
</div> onChange={ event => updateHeight(event) }
<div className="form-group"> renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
<button type="button" className="btn btn-primary" onClick={ placeAboveStack }>{ LocalizeText('furniture.above.stack') }</button> <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
<button type="button" className="btn btn-primary" onClick={ placeAtFloor }>{ LocalizeText('furniture.floor.level') }</button> </NitroLayoutFlex>
</div> <NitroLayoutButton variant="primary" onClick={ event => sendUpdate(-100) }>
{ LocalizeText('furniture.above.stack') }
</NitroLayoutButton>
<NitroLayoutButton variant="primary" onClick={ event => sendUpdate(0) }>
{ LocalizeText('furniture.floor.level') }
</NitroLayoutButton>
</NitroLayoutFlexColumn>
</NitroLayoutGridColumn>
</NitroLayoutGrid>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );