nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 19:33:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update background color widget

Browse Source
This commit is contained in:
Bill 2022-02-25 19:56:16 -05:00
parent 7bf528d4be
commit 66bb329b74
1 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
View File

@ -2,11 +2,8 @@ import { ApplyTonerComposer, RoomControllerLevel, RoomEngineObjectEvent, RoomEng
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 { GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api'; import { GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
import { Button } from '../../../../../common/Button'; import { Button, Column, Text } from '../../../../../common';
import { Column } from '../../../../../common/Column'; import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
import { FormGroup } from '../../../../../common/FormGroup';
import { Text } from '../../../../../common/Text';
import { SendMessageHook } from '../../../../../hooks';
import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events'; import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext'; import { useRoomContext } from '../../../context/RoomContext';
@ -45,10 +42,13 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category); const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
const model = roomObject.model; const model = roomObject.model;
BatchUpdates(() =>
{
setObjectId(roomObject.id); setObjectId(roomObject.id);
setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE))); setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)));
setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION))); setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS))); setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
});
return; return;
} }
@ -89,10 +89,10 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
return ( return (
<NitroCardView> <NitroCardView>
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } /> <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
<NitroCardContentView> <NitroCardContentView overflow="hidden">
<Column overflow="auto"> <Column overflow="auto" gap={ 1 }>
<FormGroup column> <Column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text> <Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>
<ReactSlider <ReactSlider
className={ 'nitro-slider' } className={ 'nitro-slider' }
min={ 0 } min={ 0 }
@ -101,9 +101,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setHue(event) } onChange={ event => setHue(event) }
thumbClassName={ 'thumb degree' } thumbClassName={ 'thumb degree' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } /> renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup> </Column>
<FormGroup column> <Column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.saturation') }</Text> <Text bold>{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
<ReactSlider <ReactSlider
className={ 'nitro-slider' } className={ 'nitro-slider' }
min={ 0 } min={ 0 }
@ -112,9 +112,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setSaturation(event) } onChange={ event => setSaturation(event) }
thumbClassName={ 'thumb percent' } thumbClassName={ 'thumb percent' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } /> renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup> </Column>
<FormGroup column> <Column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text> <Text bold>{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
<ReactSlider <ReactSlider
className={ 'nitro-slider' } className={ 'nitro-slider' }
min={ 0 } min={ 0 }
@ -123,13 +123,13 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setLightness(event) } onChange={ event => setLightness(event) }
thumbClassName={ 'thumb percent' } thumbClassName={ 'thumb percent' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } /> renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup>
</Column> </Column>
<Column center gap={ 1 }> </Column>
<Button fullWidth variant="primary" size="sm" onClick={ event => processAction('toggle') }> <Column gap={ 1 }>
<Button fullWidth variant="primary" onClick={ event => processAction('toggle') }>
{ LocalizeText('widget.backgroundcolor.button.on') } { LocalizeText('widget.backgroundcolor.button.on') }
</Button> </Button>
<Button fullWidth variant="primary" size="sm" onClick={ event => processAction('apply') }> <Button fullWidth variant="primary" onClick={ event => processAction('apply') }>
{ LocalizeText('widget.backgroundcolor.button.apply') } { LocalizeText('widget.backgroundcolor.button.apply') }
</Button> </Button>
</Column> </Column>