lucid-ui
Version:
A UI component library from Xandr.
118 lines • 4.19 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
/** Overlay Wrapper Message */
export interface IMessageProps extends StandardProps {
}
export declare const OverlayWrapperMessage: {
(_props: IMessageProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
};
/** Overlay Wrapper */
export interface IOverlayWrapperProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
/** Controls whether the message should be displayed over the wrapped content. */
isVisible?: boolean;
/** Set this to \`false\` if you don't want the semi-transparent overlay over
* the wrapped content.
*
* @default true
*/
hasOverlay: boolean;
/** Style variations for the overlay behind the message.
*
* @default 'light'
* */
overlayKind: 'light' | 'dark';
/** By default, the OverlayMessage is vertically aligned to the middle of the
* OverlayWrapper. Set this to true to position the `OverlayMessage` near the top of
* the `OverlayWrapper`.
*
* @default false
*/
anchorMessage: boolean;
/** By default, the OverlayMessage is vertically aligned to the middle of the
* OverlayWrapper, and the `OverlayWrapper` is the height of the entire content.
* Set this to true to position the `OverlayMessage` near the center of the
* `OverlayWrapper`, and fix the `OverlayWrapper` to the screen height and width.
*
* @default false
*/
fixedMessage: boolean;
/** *Child Element* The Message to display in the overlay. */
Message?: React.ReactNode & {
props: IMessageProps;
};
}
export declare const OverlayWrapper: {
(props: IOverlayWrapperProps): React.ReactElement;
defaultProps: {
hasOverlay: boolean;
overlayKind: "light";
anchorMessage: boolean;
fixedMessage: boolean;
isVisible: boolean;
};
displayName: string;
peek: {
description: string;
categories: string[];
};
propTypes: {
/**
Controls whether the message should be displayed over the wrapped
content.
*/
isVisible: PropTypes.Requireable<boolean>;
/**
Set this to \`false\` if you don't want the semi-transparent overlay over
the wrapped content.
*/
hasOverlay: PropTypes.Requireable<boolean>;
/**
Class names that are appended to the defaults.
*/
className: PropTypes.Requireable<string>;
/**
Any valid React children.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
Style variations for the overlay behind the message.
*/
overlayKind: PropTypes.Requireable<string>;
/**
By default, the \`OverlayMessage\` is vertically aligned to the middle of the
OverlayWrapper. Set this to true to position the \`OverlayMessage\` near the top of
the \`OverlayWrapper\`.
*/
anchorMessage: PropTypes.Requireable<boolean>;
/**
By default, the OverlayMessage is vertically aligned to the middle of the
\`OverlayWrapper\` and the \`OverlayWrapper\` is the height of the entire content.
Set this to true to position the \`OverlayMessage\` near the center of the
\`OverlayWrapper\`, and fix the \`OverlayWrapper\` to the screen height and width.
*/
fixedMessage: PropTypes.Requireable<boolean>;
Message: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
Message: {
(_props: IMessageProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
};
};
export default OverlayWrapper;
//# sourceMappingURL=OverlayWrapper.d.ts.map