Skip to content

Commit

Permalink
Revert "Fix #2042: Dialog better handling of draggable (#3709)"
Browse files Browse the repository at this point in the history 
This reverts commit 6bac6b3.
  • Loading branch information
@melloware
melloware authored Nov 28, 2022
1 parent 6bac6b3 commit 4b4dbfa
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 202 deletions.
80 changes: 73 additions & 7 deletions components/lib/dialog/Dialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import PrimeReact, { localeOption } from '../api/Api';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useDraggable, useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
Expand All @@ -11,24 +11,25 @@ export const Dialog = React.forwardRef((props, ref) => {
const [maskVisibleState, setMaskVisibleState] = React.useState(false);
const [visibleState, setVisibleState] = React.useState(false);
const [maximizedState, setMaximizedState] = React.useState(props.maximized);
const [draggableState, setDraggableState] = React.useState(false);
const dialogRef = React.useRef(null);
const headerRef = React.useRef(null);
const maskRef = React.useRef(null);
const contentRef = React.useRef(null);
const headerRef = React.useRef(null);
const footerRef = React.useRef(null);
const closeRef = React.useRef(null);
const dragging = React.useRef(false);
const resizing = React.useRef(false);
const lastPageX = React.useRef(null);
const lastPageY = React.useRef(null);
const styleElement = React.useRef(null);
const attributeSelector = React.useRef('');
const maximized = props.onMaximize ? props.maximized : maximizedState;

const draggable = useDraggable({ targetRef: dialogRef, handleRef: headerRef, onDragStart: props.onDragStart, onDrag: props.onDrag, onDragEnd: props.onDragEnd, enabled: draggableState, keepInViewport: props.keepInViewport });
const [bindDocumentKeyDownListener, unbindDocumentKeyDownListener] = useEventListener({ type: 'keydown', listener: (event) => onKeyDown(event) });
const [bindDocumentResizeListener, unbindDocumentResizeListener] = useEventListener({ type: 'mousemove', target: () => window.document, listener: (event) => onResize(event) });
const [bindDocumentResizeEndListener, unbindDocumentResizEndListener] = useEventListener({ type: 'mouseup', target: () => window.document, listener: (event) => onResizeEnd(event) });
const [bindDocumentDragListener, unbindDocumentDragListener] = useEventListener({ type: 'mousemove', target: () => window.document, listener: (event) => onDrag(event) });
const [bindDocumentDragEndListener, unbindDocumentDragEndListener] = useEventListener({ type: 'mouseup', target: () => window.document, listener: (event) => onDragEnd(event) });

const onClose = (event) => {
props.onHide();
Expand Down Expand Up @@ -108,6 +109,65 @@ export const Dialog = React.forwardRef((props, ref) => {
}
};

const onDragStart = (event) => {
if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
return;
}

if (props.draggable) {
dragging.current = true;
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
dialogRef.current.style.margin = '0';
DomHandler.addClass(document.body, 'p-unselectable-text');

props.onDragStart && props.onDragStart(event);
}
};

const onDrag = (event) => {
if (dragging.current) {
const width = DomHandler.getOuterWidth(dialogRef.current);
const height = DomHandler.getOuterHeight(dialogRef.current);
const deltaX = event.pageX - lastPageX.current;
const deltaY = event.pageY - lastPageY.current;
const offset = dialogRef.current.getBoundingClientRect();
const leftPos = offset.left + deltaX;
const topPos = offset.top + deltaY;
const viewport = DomHandler.getViewport();

dialogRef.current.style.position = 'fixed';

if (props.keepInViewport) {
if (leftPos >= props.minX && leftPos + width < viewport.width) {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos + 'px';
}

if (topPos >= props.minY && topPos + height < viewport.height) {
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos + 'px';
}
} else {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos + 'px';
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos + 'px';
}

props.onDrag && props.onDrag(event);
}
};

const onDragEnd = (event) => {
if (dragging.current) {
dragging.current = false;
DomHandler.removeClass(document.body, 'p-unselectable-text');

props.onDragEnd && props.onDragEnd(event);
}
};

const onResizeStart = (event) => {
if (props.resizable) {
resizing.current = true;
Expand Down Expand Up @@ -191,7 +251,6 @@ export const Dialog = React.forwardRef((props, ref) => {

const onEnter = () => {
dialogRef.current.setAttribute(attributeSelector.current, '');
setDraggableState(props.draggable);
};

const onEntered = () => {
Expand All @@ -215,7 +274,7 @@ export const Dialog = React.forwardRef((props, ref) => {
};

const onExited = () => {
setDraggableState(false);
dragging.current = false;
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
disableDocumentSettings();
Expand Down Expand Up @@ -246,6 +305,11 @@ export const Dialog = React.forwardRef((props, ref) => {
};

const bindGlobalListeners = () => {
if (props.draggable) {
bindDocumentDragListener();
bindDocumentDragEndListener();
}

if (props.resizable) {
bindDocumentResizeListener();
bindDocumentResizeEndListener();
Expand All @@ -258,6 +322,8 @@ export const Dialog = React.forwardRef((props, ref) => {
};

const unbindGlobalListeners = () => {
unbindDocumentDragListener();
unbindDocumentDragEndListener();
unbindDocumentResizeListener();
unbindDocumentResizEndListener();
unbindDocumentKeyDownListener();
Expand Down Expand Up @@ -394,7 +460,7 @@ export const Dialog = React.forwardRef((props, ref) => {
const headerClassName = classNames('p-dialog-header', props.headerClassName);

return (
<div ref={headerRef} style={props.headerStyle} className={headerClassName}>
<div ref={headerRef} style={props.headerStyle} className={headerClassName} onMouseDown={onDragStart}>
<div id={headerId} className="p-dialog-title">
{header}
</div>
Expand Down
15 changes: 7 additions & 8 deletions components/lib/hooks/Hooks.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { useDraggable } from './useDraggable';
import { useEventListener } from './useEventListener';
import { useInterval } from './useInterval';
import { usePrevious } from './usePrevious';
import { useMountEffect } from './useMountEffect';
import { useUpdateEffect } from './useUpdateEffect';
import { useUnmountEffect } from './useUnmountEffect';
import { useEventListener } from './useEventListener';
import { useOverlayListener } from './useOverlayListener';
import { useOverlayScrollListener } from './useOverlayScrollListener';
import { usePrevious } from './usePrevious';
import { useResizeListener } from './useResizeListener';
import { useLocalStorage, useSessionStorage, useStorage } from './useStorage';
import { useInterval } from './useInterval';
import { useStorage, useLocalStorage, useSessionStorage } from './useStorage';
import { useTimeout } from './useTimeout';
import { useUnmountEffect } from './useUnmountEffect';
import { useUpdateEffect } from './useUpdateEffect';

export { usePrevious, useMountEffect, useUpdateEffect, useUnmountEffect, useEventListener, useOverlayListener, useOverlayScrollListener, useResizeListener, useInterval, useStorage, useLocalStorage, useSessionStorage, useTimeout, useDraggable };
export { usePrevious, useMountEffect, useUpdateEffect, useUnmountEffect, useEventListener, useOverlayListener, useOverlayScrollListener, useResizeListener, useInterval, useStorage, useLocalStorage, useSessionStorage, useTimeout };
12 changes: 0 additions & 12 deletions components/lib/hooks/hooks.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,6 @@ interface ResizeEventOptions {
listener?(event: Event): void;
}

interface DraggableOptions {
targetRef: React.Ref<HTMLElement>;
handleRef: React.Ref<HTMLElement>;
onDrag?(e: React.DragEvent<HTMLElement>): void;
onDragEnd?(e: React.DragEvent<HTMLElement>): void;
onDragStart?(e: React.DragEvent<HTMLElement>): void;
enabled: true;
keepInViewport: false;
rectLimits?: DOMRect;
}

export declare function useDraggable(options: DraggableOptions): any;
export declare function usePrevious(value: any): any;
export declare function useMountEffect(effect: React.EffectCallback): void;
export declare function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
Expand Down
171 changes: 0 additions & 171 deletions components/lib/hooks/useDraggable.js
View file

This file was deleted.

12 changes: 8 additions & 4 deletions components/lib/utils/DomHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,14 @@ export default class DomHandler {
}

static getViewport() {
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

return { width: vw, height: vh };
let win = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
w = win.innerWidth || e.clientWidth || g.clientWidth,
h = win.innerHeight || e.clientHeight || g.clientHeight;

return { width: w, height: h };
}

static getOffset(el) {
Expand Down

0 comments on commit 4b4dbfa

Please sign in to comment.