@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
61 lines (60 loc) • 2.89 kB
TypeScript
import React, { BaseSyntheticEvent } from "react";
import { IntentTypes } from "../../common/Intent";
import { TestableComponent } from "../interfaces";
import { CardActionsProps } from "./../Card";
import { ModalProps } from "./Modal";
export interface SimpleDialogProps extends ModalProps, TestableComponent {
/**
* The title of the dialog.
*/
title?: string;
/**
* Parts of the dialog are separated by a horizontal ruler.
*/
hasBorder?: boolean;
/**
* Include elements to the action footer, e.g. buttons.
*/
actions?: React.ReactNode | React.ReactNode[];
/**
* If populated with elements, then a second contant area is included before the action footer.
* Mainly provided to include `Notification` elements.
*/
notifications?: React.ReactNode | React.ReactNode[];
/**
* Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
*/
headerOptions?: null | JSX.Element | JSX.Element[];
/**
* If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
*/
preventSimpleClosing?: boolean;
/**
* Define purpose of the dialog, e.g. if it is a warning.
*/
intent?: IntentTypes;
/** Optional props for the wrapper div element inside the modal. */
wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
/** If a full screen toggler is shown that will allow to switch to full screen mode. */
showFullScreenToggler?: boolean;
/** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
startInFullScreenMode?: boolean;
/** Forward properties to the actions footer component. */
actionsProps?: Omit<CardActionsProps, "inverseDirection">;
}
/**
* Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
* Inherits all properties from `Modal`.
*/
export declare const SimpleDialog: ({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, enforceFocus, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, actionsProps, ...otherProps }: SimpleDialogProps) => React.JSX.Element;
/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
* allows to drag or supports hot keys etc. */
export declare const modalPreventEvents: {
onContextMenu: (event: BaseSyntheticEvent) => void;
onDrag: (event: BaseSyntheticEvent) => void;
onDragStart: (event: BaseSyntheticEvent) => void;
onDragEnd: (event: BaseSyntheticEvent) => void;
onMouseUp: (event: BaseSyntheticEvent) => void;
onClick: (event: BaseSyntheticEvent) => void;
};
export default SimpleDialog;