2021-04-21 22:32:31 +02:00
|
|
|
import { createRef, MouseEvent, useEffect } from 'react';
|
2021-04-19 18:34:31 +02:00
|
|
|
import Draggable from 'react-draggable';
|
|
|
|
import { DraggableWindowProps } from './DraggableWindow.types';
|
|
|
|
|
2021-04-21 22:32:31 +02:00
|
|
|
const currentWindows: HTMLDivElement[] = [];
|
|
|
|
|
2021-04-19 18:34:31 +02:00
|
|
|
export function DraggableWindow(props: DraggableWindowProps): JSX.Element
|
|
|
|
{
|
2021-04-21 22:32:31 +02:00
|
|
|
const elementRef = createRef<HTMLDivElement>();
|
|
|
|
|
|
|
|
function bringToTop(): void
|
|
|
|
{
|
|
|
|
let zIndex = 400;
|
|
|
|
|
|
|
|
for(const existingWindow of currentWindows)
|
|
|
|
{
|
|
|
|
zIndex += 1;
|
|
|
|
|
|
|
|
existingWindow.style.zIndex = zIndex.toString();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function onMouseDown(event: MouseEvent): void
|
|
|
|
{
|
2021-04-23 07:16:09 +02:00
|
|
|
const index = currentWindows.indexOf(elementRef.current);
|
|
|
|
|
|
|
|
if(index === -1)
|
|
|
|
{
|
|
|
|
currentWindows.push(elementRef.current);
|
|
|
|
}
|
|
|
|
|
|
|
|
else if(index === (currentWindows.length - 1)) return;
|
|
|
|
|
|
|
|
else if(index >= 0)
|
|
|
|
{
|
|
|
|
currentWindows.splice(index, 1);
|
|
|
|
|
|
|
|
currentWindows.push(elementRef.current);
|
|
|
|
}
|
|
|
|
|
2021-04-21 22:32:31 +02:00
|
|
|
bringToTop();
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-04-24 03:05:56 +02:00
|
|
|
if(!elementRef) return;
|
|
|
|
|
2021-04-21 22:32:31 +02:00
|
|
|
const element = elementRef.current;
|
|
|
|
|
|
|
|
currentWindows.push(element);
|
|
|
|
|
|
|
|
bringToTop();
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
{
|
|
|
|
const index = currentWindows.indexOf(element);
|
|
|
|
|
|
|
|
if(index >= 0) currentWindows.splice(index, 1);
|
|
|
|
}
|
|
|
|
}, [ elementRef ]);
|
|
|
|
|
2021-04-19 18:34:31 +02:00
|
|
|
return (
|
2021-04-21 05:36:39 +02:00
|
|
|
<Draggable handle={ props.handle } { ...props.draggableOptions }>
|
2021-04-23 07:16:09 +02:00
|
|
|
<div ref={ elementRef } className="position-absolute t-0 l-0" onMouseDownCapture={ onMouseDown }>
|
2021-04-21 22:32:31 +02:00
|
|
|
{ props.children }
|
|
|
|
</div>
|
2021-04-19 18:34:31 +02:00
|
|
|
</Draggable>
|
|
|
|
);
|
|
|
|
}
|