lucid-ui
Version:
A UI component library from Xandr.
103 lines • 3.86 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
export interface IOverlayProps extends StandardProps {
/** Controls visibility. */
isShown: boolean;
/** Enables animated transitions during expansion and collapse. */
isAnimated: boolean;
/** Determines if it shows with a gray background. If `false`, the
background will be rendered but will be invisible, except for the
contents, and it won't capture any of the user click events. */
isModal: boolean;
/** Set your own id for the \`Portal\` is that is opened up to contain the
contents. In practice you should never need to set this manually. */
portalId?: string;
/** Fired when the user hits escape. */
onEscape: ({ event, props, }: {
event: KeyboardEvent;
props: IOverlayProps;
}) => void;
/** Fired when the user clicks on the background, this may or may not be
visible depending on \`isModal\`. */
onBackgroundClick: ({ event, props, }: {
event: React.MouseEvent;
props: IOverlayProps;
}) => void;
}
export declare const overlayPropTypes: string[];
interface IOverlayState {
portalId: string;
}
export declare const defaultProps: {
isAnimated: boolean;
isModal: boolean;
isShown: boolean;
onBackgroundClick: (...args: any[]) => void;
onEscape: (...args: any[]) => void;
};
declare class Overlay extends React.Component<IOverlayProps, IOverlayState, {}> {
static displayName: string;
static peek: {
description: string;
categories: string[];
madeFrom: string[];
};
static propTypes: {
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
Generally you should only have a single child element so the centering
works correctly.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
Controls visibility.
*/
isShown: PropTypes.Requireable<boolean>;
/**
Enables animated transitions during expansion and collapse.
*/
isAnimated: PropTypes.Requireable<boolean>;
/**
Determines if it shows with a gray background. If \`false\`, the
background will be rendered but will be invisible, except for the
contents, and it won't capture any of the user click events.
*/
isModal: PropTypes.Requireable<boolean>;
/**
Set your own id for the \`Portal\` is that is opened up to contain the
contents. In practice you should never need to set this manually.
*/
portalId: PropTypes.Requireable<string>;
/**
Fired when the user hits escape. Signature: \`({ event, props }) => {}\`
*/
onEscape: PropTypes.Requireable<(...args: any[]) => any>;
/**
Fired when the user clicks on the background, this may or may not be
visible depending on \`isModal\`. Signature: \`({ event, props }) => {}\`
*/
onBackgroundClick: PropTypes.Requireable<(...args: any[]) => any>;
};
private rootHTMLDivElement;
static defaultProps: {
isAnimated: boolean;
isModal: boolean;
isShown: boolean;
onBackgroundClick: (...args: any[]) => void;
onEscape: (...args: any[]) => void;
};
state: {
portalId: string;
};
componentDidMount(): void;
componentWillUnmount(): void;
handleDocumentKeyDown: (event: KeyboardEvent) => void;
handleBackgroundClick: (event: React.MouseEvent) => void;
render(): React.ReactNode;
}
export default Overlay;
//# sourceMappingURL=Overlay.d.ts.map