primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
484 lines (473 loc) • 14.5 kB
TypeScript
/**
*
* Dialog is a container to display content in an overlay window.
*
* [Live Demo](https://www.primereact.org/dialog)
*
* @module dialog
*
*/
import * as React from 'react';
import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
import { ComponentHooks } from '../componentbase/componentbase';
import { CSSTransitionProps } from '../csstransition';
import { PassThroughOptions } from '../passthrough';
import { IconType, PassThroughType } from '../utils/utils';
export declare type DialogPassThroughType<T> = PassThroughType<T, DialogPassThroughMethodOptions>;
export declare type DialogPassThroughTransitionType = ReactCSSTransitionProps | ((options: DialogPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface DialogPassThroughMethodOptions {
props: DialogProps;
state: DialogState;
}
/**
* Custom passthrough(pt) options.
* @see {@link DialogProps.pt}
*/
export interface DialogPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header title's DOM element.
*/
headerTitle?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header icons' DOM element.
*/
headerIcons?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the maximizable button's DOM element.
*/
maximizableButton?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
/**
* Uses to pass attributes to the maximizable icon's DOM element.
*/
maximizableIcon?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the close button's component.
*/
closeButton?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
/**
* Uses to pass attributes to the close button icon's component.
*/
closeButtonIcon?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the footer's DOM element.
*/
footer?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the mask's DOM element.
*/
mask?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control React Transition API.
*/
transition?: DialogPassThroughTransitionType;
}
/**
* Defines current inline state in Dialog component.
*/
export interface DialogState {
/**
* Current visible state of the container as a boolean.
* @defaultValue false
*/
containerVisible: boolean;
/**
* Current maximized state as a boolean.
* @defaultValue false
*/
maximized: boolean;
}
/**
* Dialog break options
*/
interface DialogBreakpoints {
/**
* Extra options.
*/
[key: string]: string;
}
/**
* Custom complete method event.
* @see {@link DialogProps.onMaximize}
* @event
*/
interface DialogMaximizeEvent {
/**
* Browser mouse event.
*/
originalEvent: React.SyntheticEvent;
/**
* When enabled, the dialog is initially displayed full screen.
* @defaultValue false
*/
maximized: boolean;
}
/**
* Defines current content values and refs for headless development.
* @see {@link DialogProps.content}
*/
interface ContentProps {
/**
* Allows you to specify the header of the content.
*/
headerRef: React.RefObject<HTMLElement>;
/**
* Allows you to specify the content.
*/
contentRef: React.RefObject<HTMLElement>;
/**
* Allows you to specify the footer of the content.
*/
footerRef: React.RefObject<HTMLElement>;
/**
* Allows you to specify the close button of the dialog.
*/
closeRef: React.RefObject<HTMLButtonElement | HTMLElement>;
/**
* Callback for hiding the dialog.
*/
hide(e: React.SyntheticEvent): void;
/**
* Dialog's props values.
*/
message: ContentPropsMessage;
}
/**
* Defines current content values and refs for headless development.
* @see {@link ContentProps.message}
*/
interface ContentPropsMessage {
/**
* Header of the dialog.
* @readonly
*/
header: string;
/**
* Content of the dialog.
* @readonly
*/
content: string;
/**
* Message of the dialog.
* @readonly
*/
message: string;
}
/**
* Defines valid properties in Dialog component.
* @group Properties
*/
export interface DialogProps {
/**
* DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
* @defaultValue document.body
*/
appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
/**
* Defines a string that labels the close icon.
*/
ariaCloseIconLabel?: string | undefined;
/**
* Base zIndex value to use in layering.
* @defaultValue 0
*/
baseZIndex?: number | undefined;
/**
* Whether background scroll should be blocked when dialog is visible.
* @defaultValue false
*/
blockScroll?: boolean | undefined;
/**
* Object literal to define widths per screen size.
*/
breakpoints?: DialogBreakpoints | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Style class of the component.
*/
className?: string | undefined;
/**
* Adds a close icon to the header to hide the dialog.
* @defaultValue true
*/
closable?: boolean | undefined;
/**
* Specifies if pressing escape key should hide the dialog.
* @defaultValue true
*/
closeOnEscape?: boolean | undefined;
/**
* Style class of the content section.
*/
contentClassName?: string | undefined;
/**
* Style of the content section.
*/
contentStyle?: React.CSSProperties | undefined;
/**
* Specifies if clicking the modal background should hide the dialog.
* @defaultValue false
*/
dismissableMask?: boolean | undefined;
/**
* Enables dragging to change the position using header.
* @defaultValue true
*/
draggable?: boolean | undefined;
/**
* When enabled, first button receives focus on show.
* @defaultValue true
*/
focusOnShow?: boolean | undefined;
/**
* Footer content of the dialog.
*/
footer?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
/**
* Title content of the dialog.
*/
header?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
/**
* Style class of the header section.
*/
headerClassName?: string | undefined;
/**
* Icon to display in the dialog close button.
*/
closeIcon?: IconType<DialogProps> | undefined;
/**
* Style of the header section.
*/
headerStyle?: React.CSSProperties | undefined;
/**
* Custom icons template for the header.
*/
icons?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
/**
* Unique identifier of the element.
*/
id?: string | undefined;
/**
* Keeps dialog in the viewport.
* @defaultValue true
*/
keepInViewport?: boolean | undefined;
/**
* Style class of the mask.
*/
maskClassName?: string | undefined;
/**
* Inline style of the mask.
*/
maskStyle?: React.CSSProperties | undefined;
/**
* Whether the dialog can be displayed full screen.
* @defaultValue false
*/
maximizable?: boolean | undefined;
/**
* When enabled, the dialog is initially displayed full screen.
* @defaultValue false
*/
maximized?: boolean | undefined;
/**
* Minimum value for the left coordinate of dialog in dragging.
* @defaultValue 0
*/
minX?: number | undefined;
/**
* Minimum value for the top coordinate of dialog in dragging.
* @defaultValue 0
*/
minY?: number | undefined;
/**
* Defines if background should be blocked when dialog is displayed.
* @defaultValue true
*/
modal?: boolean | undefined;
/**
* Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right".
* @defaultValue center
*/
position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined;
/**
* Enables resizing of the content.
* @defaultValue true
*/
resizable?: boolean | undefined;
/**
* When enabled dialog is displayed in RTL direction.
* @defaultValue false
*/
rtl?: boolean | undefined;
/**
* Whether to show the header or not.
* @defaultValue true
*/
showHeader?: boolean | undefined;
/**
* Icon to display in the dialog maximize button when dialog is not maximized.
*/
maximizeIcon?: IconType<DialogProps> | undefined;
/**
* Icon to display in the dialog maximize button when dialog is maximized.
*/
minimizeIcon?: IconType<DialogProps> | undefined;
/**
* Inline style of the component.
*/
style?: React.CSSProperties | undefined;
/**
* The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
*/
transitionOptions?: CSSTransitionProps | undefined;
/**
* Specifies the visibility of the dialog.
* @defaultValue false
*/
visible?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {DialogPassThroughOptions}
*/
pt?: DialogPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
/**
* Callback to invoke when dialog is clicked.
* @param {React.PointerEvent<HTMLElement>} event - Browser event.
*/
onClick?(event: React.PointerEvent<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;
/**
* Callback to invoke when dialog is hidden (Required).
*/
onHide(): void;
/**
* Callback to invoke when the mask is clicked.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onMaskClick?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke when toggle maximize icon is clicked.
* @param {DialogMaximizeEvent} event - Custom click event.
*/
onMaximize?(event: DialogMaximizeEvent): void;
/**
* Callback to invoke while resizing dialog.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onResize?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke when dialog resizing is completed.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onResizeEnd?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke when dialog resizing is initiated.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onResizeStart?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke when dialog is showed.
*/
onShow?(): void;
/**
* Specifies a custom content for the dialog. For more complex markup, use the "content" slot instead.
* @param {ContentProps} props - The values of dialog.
* @return {React.ReactNode}
*/
content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
}
/**
* **PrimeReact - Dialog**
*
* _Dialog is a container to display content in an overlay window._
*
* [Live Demo](https://www.primereact.org/dialog/)
* --- ---
* 
*
* @group Component
*/
export declare class Dialog extends React.Component<DialogProps, any> {
/**
* Reset the dialog's position.
*/
public resetPosition(): void;
/**
* Used to get the container element of the dialog.
* @return {HTMLDivElement} Container element
*/
public getElement(): HTMLDivElement;
/**
* Used to get mask element.
* @return {HTMLDivElement} Mask element
*/
public getMask(): HTMLDivElement;
/**
* Used to get the content element of the dialog
* @return {HTMLDivElement} Content element
*/
public getContent(): HTMLDivElement;
/**
* Used to get the header element of the dialog
* @return {HTMLDivElement} Header element
*/
public getHeader(): HTMLDivElement;
/**
* Used to get the dialog's footer element.
* @return {HTMLDivElement} Footer element
*/
public getFooter(): HTMLDivElement;
/**
* Used to get close button element.
* @return {HTMLButtonElement} CloseButton element
*/
public getCloseButton(): HTMLButtonElement;
}