Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #2042: Dialog better handling of draggable #3715

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge branch 'master' into PR2042
melloware authored Mar 9, 2024
commit 2e13dac52640a57c69922c378cd9c6d62d546c0c
13 changes: 7 additions & 6 deletions components/lib/dialog/Dialog.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,10 @@ import * as React from 'react';
import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useDraggable, useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useDraggable, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { TimesIcon } from '../icons/times';
import { WindowMaximizeIcon } from '../icons/windowmaximize';
import { WindowMinimizeIcon } from '../icons/windowminimize';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
@@ -505,11 +508,9 @@ export const Dialog = React.forwardRef((inProps, ref) => {
);

return (
<div ref={headerRef} style={props.headerStyle} className={headerClassName}>
<div id={headerId} className="p-dialog-title">
{header}
</div>
<div className="p-dialog-header-icons">
<div {...headerProps}>
<div {...headerTitleProps}>{header}</div>
<div {...headerIconsProps}>
{icons}
{maximizeIcon}
{closeIcon}
42 changes: 41 additions & 1 deletion components/lib/hooks/Hooks.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import { useClickOutside } from './useClickOutside';
import { useCounter } from './useCounter';
import { useDebounce } from './useDebounce';
import { useDisplayOrder } from './useDisplayOrder';
import { useDraggable } from './useDraggable';
import { useEventListener } from './useEventListener';
import { useFavicon } from './useFavicon';
import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey } from './useGlobalOnEscapeKey';
import { useIntersectionObserver } from './useIntersectionObserver';
import { useInterval } from './useInterval';
import { useMatchMedia } from './useMatchMedia';
import { useMergeProps } from './useMergeProps';
import { useMountEffect } from './useMountEffect';
import { useMouse } from './useMouse';
import { useMove } from './useMove';
import { useOverlayListener } from './useOverlayListener';
import { useOverlayScrollListener } from './useOverlayScrollListener';
import { usePrevious } from './usePrevious';
@@ -11,4 +22,33 @@ 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 {
ESC_KEY_HANDLING_PRIORITIES,
useClickOutside,
useCounter,
useDebounce,
useDisplayOrder,
useDraggable,
useEventListener,
useFavicon,
useGlobalOnEscapeKey,
useIntersectionObserver,
useInterval,
useLocalStorage,
useMatchMedia,
useMergeProps,
useMountEffect,
useMouse,
useMove,
useOverlayListener,
useOverlayScrollListener,
usePrevious,
useResizeListener,
useSessionStorage,
useStorage,
useStyle,
useTimeout,
useUnmountEffect,
useUpdateEffect
};

46 changes: 43 additions & 3 deletions components/lib/hooks/hooks.d.ts
Original file line number Diff line number Diff line change
@@ -164,18 +164,58 @@ interface ResizeEventOptions {
when?: boolean;
}

/**
* Custom draggable event options.
*/
interface DraggableOptions {
/**
* The target element to listen to.
*/
targetRef: React.Ref<HTMLElement>;
/**
* The draggable handle element.
*/
handleRef: React.Ref<HTMLElement>;
onDrag?(e: React.DragEvent<HTMLElement>): void;
onDragEnd?(e: React.DragEvent<HTMLElement>): void;
onDragStart?(e: React.DragEvent<HTMLElement>): void;
/**
* Callback to invoke when dragging dialog.
* @param {React.DragEvent<HTMLElement>} event - Browser event.
*/
onDrag?(event: React.DragEvent<HTMLElement>): void;
/**
* Callback to invoke when dialog dragging is completed.
* @param {React.DragEvent<HTMLElement>} event - Browser event.
*/
onDragEnd?(event: React.DragEvent<HTMLElement>): void;
/**
* Callback to invoke when dialog dragging is initiated.
* @param {React.DragEvent<HTMLElement>} event - Browser event.
*/
onDragStart?(event: React.DragEvent<HTMLElement>): void;
/**
* Enables the draggable feature.
* @defaultValue true
*/
enabled: true;
/**
* Flag to keep the draggable in the viewport, else let it go outside the bounds.
* @defaultValue false
*/
keepInViewport: false;
/**
* The reactangular limits if you want to keep draggable to a certain area.
*/
rectLimits?: DOMRect;
}

/**
* Custom hook to handle dragging.
* @param {DraggableOptions} options - The draggable options.
*/
export declare function useDraggable(options: DraggableOptions): any;
/**
* Custom hook to get the previous value of a property.
* @param {*} value - The value to compare.
*/
export declare function usePrevious(value: any): any;
/**
* Custom hook to run a mount effect only once.
You are viewing a condensed version of this merge commit. You can view the full changes here.