diff --git a/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx b/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx index 4fdac5d2..43e0fc00 100644 --- a/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx +++ b/src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx @@ -1,5 +1,5 @@ -import { MouseEventType, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer'; -import { createRef, useCallback, useEffect, useState } from 'react'; +import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer'; +import { useCallback, useState } from 'react'; import { GetRoomEngine, GetRoomSession, GetSessionDataManager } from '../../../../../api'; import { DraggableWindow } from '../../../../../hooks/draggable-window/DraggableWindow'; import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base'; @@ -16,8 +16,6 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem const [ stickieData, setStickieData ] = useState(null); - const textAreaRef = createRef(); - const onNitroEvent = useCallback((event: NitroEvent) => { switch(event.type) @@ -93,7 +91,7 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem return newStickieData; }); return; - case 'changeText': { + case 'changeText': setStickieData(prevState => { const newStickieData = new FurnitureStickieData(prevState.objectId, prevState.category, prevState.color, value, prevState.canModify); @@ -103,36 +101,19 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem return newStickieData; }); return; - } + case 'editMode': + setStickieData(prevValue => + { + if(!prevValue.canModify) return prevValue; + + return new FurnitureStickieData(prevValue.objectId, prevValue.category, prevValue.color, prevValue.text, prevValue.canModify, true); + }); + return; } }, []); - const onDocumentMouseDown = useCallback((event: MouseEvent) => - { - if(event.target === textAreaRef.current) return; - - processAction('changeText', textAreaRef.current.value); - }, [ textAreaRef, processAction ]); - - useEffect(() => - { - if(!stickieData || !stickieData.isEditing) return; - - document.addEventListener(MouseEventType.MOUSE_DOWN, onDocumentMouseDown); - - return () => document.removeEventListener(MouseEventType.MOUSE_DOWN, onDocumentMouseDown); - }, [ stickieData, onDocumentMouseDown ]); - if(!stickieData) return null; - function setIsEditing(): void - { - setStickieData(prevValue => - { - return new FurnitureStickieData(prevValue.objectId, prevValue.category, prevValue.color, prevValue.text, prevValue.canModify, true); - }); - } - return (
@@ -150,7 +131,7 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem
processAction('close') }>
- { !stickieData.isEditing ?
stickieData.canModify && setIsEditing() }>{ stickieData.text }
: } + { !stickieData.isEditing ?
processAction('editMode') }>{ stickieData.text }
: }