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

optional card offsets - future use

Browse Source
This commit is contained in:
Layne 2022-03-17 10:58:15 -04:00
parent e9d1660030
commit 414365f993
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/common/draggable-window/DraggableWindow.tsx
View File

@ -16,12 +16,14 @@ export interface DraggableWindowProps
handleSelector?: string; handleSelector?: string;
windowPosition?: string; windowPosition?: string;
disableDrag?: boolean; disableDrag?: boolean;
dragStyle?: CSSProperties dragStyle?: CSSProperties;
offsetLeft?: number;
offsetTop?: number;
} }
export const DraggableWindow: FC<DraggableWindowProps> = props => export const DraggableWindow: FC<DraggableWindowProps> = props =>
{ {
const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null } = props; const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null, offsetLeft = 0, offsetTop = 0 } = props;
const [ delta, setDelta ] = useState<{ x: number, y: number }>(null); const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
const [ offset, setOffset ] = useState<{ x: number, y: number }>(null); const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 }); const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
@ -175,16 +177,16 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
switch(windowPosition) switch(windowPosition)
{ {
case DraggableWindowPosition.TOP_CENTER: case DraggableWindowPosition.TOP_CENTER:
element.style.top = '50px'; element.style.top = 50 + offsetTop + 'px';
element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`; element.style.left = `calc(50vw - ${ (element.offsetWidth / 2 + offsetLeft) }px)`;
break; break;
case DraggableWindowPosition.CENTER: case DraggableWindowPosition.CENTER:
element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) }px)`; element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) + offsetTop }px)`;
element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`; element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) + offsetLeft }px)`;
break; break;
case DraggableWindowPosition.TOP_LEFT: case DraggableWindowPosition.TOP_LEFT:
element.style.top = '50px'; element.style.top = 50 + offsetTop + 'px';
element.style.left = '50px'; element.style.left = 50 + offsetLeft + 'px';
break; break;
} }