95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import ReactToolbox from "../index";
|
|
import { ButtonProps } from "../button/index";
|
|
|
|
export interface DialogTheme {
|
|
/**
|
|
* Used for the root when the dialog is active.
|
|
*/
|
|
active?: string;
|
|
/**
|
|
* Used to wrap the dialog body.
|
|
*/
|
|
body?: string;
|
|
/**
|
|
* Used in buttons when the dialog implements actions.
|
|
*/
|
|
button?: string;
|
|
/**
|
|
* Used for the root element.
|
|
*/
|
|
dialog?: string;
|
|
/**
|
|
* Used for the navigation element when it implements actions.
|
|
*/
|
|
navigation?: string;
|
|
/**
|
|
* Used for the title element of the dialog.
|
|
*/
|
|
title?: string;
|
|
}
|
|
|
|
export interface DialogActionProps extends ButtonProps {
|
|
/**
|
|
* The text string to use for the name of the button.
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* Callback called when the component is clicked.
|
|
*/
|
|
onClick?: Function;
|
|
}
|
|
|
|
export interface DialogProps extends ReactToolbox.Props {
|
|
/**
|
|
* A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
|
|
*/
|
|
actions?: DialogActionProps[];
|
|
/**
|
|
* If true, the dialog will be active.
|
|
* @default false
|
|
*/
|
|
active?: boolean;
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: React.ReactNode;
|
|
/**
|
|
* Callback called when the ESC key is pressed with the overlay active.
|
|
*/
|
|
onEscKeyDown?: Function;
|
|
/**
|
|
* Callback to be invoked when the dialog overlay is clicked.
|
|
*/
|
|
onOverlayClick?: Function;
|
|
/**
|
|
* Callback called when the mouse button is pressed on the overlay.
|
|
*/
|
|
onOverlayMouseDown?: Function;
|
|
/**
|
|
* Callback called when the mouse is moving over the overlay.
|
|
*/
|
|
onOverlayMouseMove?: Function;
|
|
/**
|
|
* Callback called when the mouse button is released over the overlay.
|
|
*/
|
|
onOverlayMouseUp?: Function;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: DialogTheme;
|
|
/**
|
|
* The text string to use as standar title of the dialog.
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* Used to determine the size of the dialog. It can be small, normal or large.
|
|
* @default "normal"
|
|
*/
|
|
type?: "small" | "normal" | "large" | string;
|
|
}
|
|
|
|
export class Dialog extends React.Component<DialogProps, {}> { }
|
|
|
|
export default Dialog;
|