@cimpress/react-components
Version:
React components to support the MCP styleguide
45 lines • 1.67 kB
TypeScript
import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import { PublicComponentProps } from '../types';
type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
type Size = 'md' | 'lg' | 'xl';
export interface DisplayModalProps extends BaseProps, PublicComponentProps {
/**
* Render the modal with a different size, one of 'sm' or 'lg'.
*/
size?: Size;
/**
* Render the modal with a contextual style, one of 'success' 'warning' 'danger' or 'info'.
*/
status?: 'danger' | 'info' | 'success' | 'warning';
/**
* JSX to render as the body of the modal.
*/
children?: ReactNode;
/**
* Controls whether an 'x' appears in the header to close the modal.
*/
closeButton?: boolean;
/**
* Calls onRequestHide when clicked outside of the main Modal div.
*/
closeOnOutsideClick?: boolean;
/**
* Modal footer. Any buttons with actions should go here. If a footer is not provided, the modal-footer element will not render.
*/
footer?: ReactNode;
/**
* Function called when the modal wants to close itself.
*/
onRequestHide?: (event: React.MouseEvent) => void;
/**
* Title for the modal. If no title is provided, the space will be left blank.
*/
title?: ReactNode;
/**
* Inline styles for the modal wrapper node.
*/
wrapperStyle?: CSSProperties;
}
export declare const DisplayModal: ({ title, closeButton, footer, size, onRequestHide, closeOnOutsideClick, style, className, status, wrapperStyle, ...rest }: DisplayModalProps) => React.ReactPortal;
export {};
//# sourceMappingURL=Modal.d.ts.map