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

Stickie updates

Browse Source
This commit is contained in:
Bill 2021-04-25 22:02:30 -04:00
parent c2692249f2
commit 1aff81b5e4
1 changed files with 12 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx
View File

@ -1,5 +1,5 @@
import { MouseEventType, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer'; import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer';
import { createRef, useCallback, useEffect, useState } from 'react'; import { useCallback, useState } from 'react';
import { GetRoomEngine, GetRoomSession, GetSessionDataManager } from '../../../../../api'; import { GetRoomEngine, GetRoomSession, GetSessionDataManager } from '../../../../../api';
import { DraggableWindow } from '../../../../../hooks/draggable-window/DraggableWindow'; import { DraggableWindow } from '../../../../../hooks/draggable-window/DraggableWindow';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base'; import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
@ -16,8 +16,6 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem
const [ stickieData, setStickieData ] = useState<FurnitureStickieData>(null); const [ stickieData, setStickieData ] = useState<FurnitureStickieData>(null);
const textAreaRef = createRef<HTMLTextAreaElement>();
const onNitroEvent = useCallback((event: NitroEvent) => const onNitroEvent = useCallback((event: NitroEvent) =>
{ {
switch(event.type) switch(event.type)
@ -93,7 +91,7 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem
return newStickieData; return newStickieData;
}); });
return; return;
case 'changeText': { case 'changeText':
setStickieData(prevState => setStickieData(prevState =>
{ {
const newStickieData = new FurnitureStickieData(prevState.objectId, prevState.category, prevState.color, value, prevState.canModify); 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 newStickieData;
}); });
return; 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; if(!stickieData) return null;
function setIsEditing(): void
{
setStickieData(prevValue =>
{
return new FurnitureStickieData(prevValue.objectId, prevValue.category, prevValue.color, prevValue.text, prevValue.canModify, true);
});
}
return ( return (
<DraggableWindow handle=".drag-handler"> <DraggableWindow handle=".drag-handler">
<div className={ "nitro-stickie nitro-stickie-image stickie-" + getStickieColorName(stickieData.color) }> <div className={ "nitro-stickie nitro-stickie-image stickie-" + getStickieColorName(stickieData.color) }>
@ -150,7 +131,7 @@ export function FurnitureStickieView(props: FurnitureStickieViewProps): JSX.Elem
<div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ event => processAction('close') }></div> <div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ event => processAction('close') }></div>
</div> </div>
<div className="stickie-context"> <div className="stickie-context">
{ !stickieData.isEditing ? <div className="context-text" onClick={ event => stickieData.canModify && setIsEditing() }>{ stickieData.text }</div> : <textarea className="context-text" ref={ textAreaRef } defaultValue={ stickieData.text || '' } autoFocus></textarea> } { !stickieData.isEditing ? <div className="context-text" onClick={ event => processAction('editMode') }>{ stickieData.text }</div> : <textarea className="context-text" defaultValue={ stickieData.text || '' } tabIndex={ 0 } onBlur={ event => processAction('changeText', event.target.value) } autoFocus></textarea> }
</div> </div>
</div> </div>
</DraggableWindow> </DraggableWindow>