lucid-ui
Version:
A UI component library from Xandr.
195 lines • 7.15 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { IIconProps } from '../Icon/Icon';
import * as reducers from './ToolTip.reducers';
import { StandardProps } from '../../util/component-types';
/** ToolTip Target */
export interface IToolTipTargetProps extends StandardProps {
description?: string;
elementType?: string;
}
/** ToolTip Title */
export interface IToolTipTitleProps extends StandardProps {
description?: string;
}
/** ToolTip Body */
export interface IToolTipBodyProps extends StandardProps {
description?: string;
}
/** ToolTip */
export interface IToolTipState {
isExpanded: boolean;
isMouseOverFlyout: boolean;
isMouseOverTarget: boolean;
}
export interface IToolTipProps extends StandardProps {
/** Set this to `true` if you want to have a `x` close icon. */
isCloseable?: boolean;
/** Offers a lighter style for the tooltip window. Defaults to `false`. */
isLight?: boolean;
/** Called when the user closes the `Banner`. */
onClose?: ({ event, props, }: {
event: React.MouseEvent;
props: IToolTipProps;
}) => void;
/** Passed through to the root `FlyOut` element. */
flyOutStyle?: React.CSSProperties;
/** maximum width of the `ToolTip` `FlyOut`. Defaults to `200px`. */
flyOutMaxWidth?: number | string;
/** direction of the `FlyOut` relative to `Target`. */
direction?: 'down' | 'up' | 'right' | 'left';
/** alignment of the `Flyout` relative to `Target` in the cross axis from `direction`. */
alignment?: 'start' | 'center' | 'end';
/** Indicates whether the `ToolTip` will render or not. */
isExpanded?: boolean;
/** Called when cursor moves over the `Target`. */
onMouseOver?: ({ event, props, }: {
event: React.MouseEvent;
props: IToolTipProps;
}) => void;
/** Called when cursor leaves the `Target` and the `ToolTip`. */
onMouseOut?: ({ event, props, }: {
event: React.MouseEvent;
props: IToolTipProps;
}) => void;
/** The `id` of the `FlyOut` portal element that is appended to `document.body`.
* Defaults to a generated `id`. */
portalId?: string | null;
}
/** TODO: Remove nonPassThroughs when the component is converted to a functional component */
export declare const nonPassThroughs: string[];
declare class ToolTip extends React.Component<IToolTipProps, IToolTipState> {
constructor(props: IToolTipProps);
static displayName: string;
static Title: {
(_props: IToolTipTitleProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
};
static Target: {
(_props: IToolTipTargetProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
};
static Body: {
(_props: IToolTipBodyProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
};
static peek: {
description: string;
notes: {
overview: string;
intendedUse: string;
technicalRecommendations: string;
};
categories: string[];
madeFrom: string[];
};
static reducers: typeof reducers;
static propTypes: {
/**
* \`children\` should include exactly one ToolTip.Target and one ToolTip.FlyOut.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
* Set this to \`true\` if you want to have a \`x\` close icon.
*/
isCloseable: PropTypes.Requireable<boolean>;
/**
* Offers a lighter style for the tooltip window. Defaults to false.
*/
isLight: PropTypes.Requireable<boolean>;
/**
* Called when the user closes the \`Banner\`.
* Signature: \`({ event, props }) => {}\`
*/
onClose: PropTypes.Requireable<(...args: any[]) => any>;
/** Passed through to the root target element.*/
style: PropTypes.Requireable<object>;
/** Passed through to the root FlyOut element.*/
flyOutStyle: PropTypes.Requireable<object>;
/**
* maximum width of the ToolTip FlyOut. Defaults to 200px.
*/
flyOutMaxWidth: PropTypes.Requireable<string | number>;
/**
* direction of the FlyOut relative to Target.
*/
direction: PropTypes.Requireable<string>;
/**
* alignment of the Flyout relative to Target in the cross axis from \`direction\`.
*/
alignment: PropTypes.Requireable<string>;
/**
* Indicates whether the ToolTip will render or not.
*/
isExpanded: PropTypes.Requireable<boolean>;
/**
* Called when cursor moves over the target
* Signature: \`({ props, event }) => {}\`
*/
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called when cursor leaves the target and the ToolTip
* Signature: \`({ props, event }) => {}\`
*/
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
/**
* The \`id\` of the FlyOut portal element that is appended to \`document.body\`.
* Defaults to a generated \`id\`.
*/
portalId: PropTypes.Requireable<string>;
/**
* Tooltips do not typically have a Title but one can be displayed above the Body.
*/
Title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* The body of the 'ToolTip'.
*/
Body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* The hover target that will trigger the ToolTip to be displayed.
*/
Target: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
static defaultProps: {
alignment: import("../ContextMenu/ContextMenu").EnumAlignment;
direction: import("../ContextMenu/ContextMenu").EnumDirection;
flyOutStyle: {};
isCloseable: boolean;
isExpanded: boolean;
isLight: boolean;
onClose: (...args: any[]) => void;
onMouseOut: (...args: any[]) => void;
onMouseOver: (...args: any[]) => void;
portalId: null;
};
handleMouseOut: (event: React.MouseEvent) => void;
handleMouseOverFlyout: () => void;
handleMouseOutFlyout: (event: React.MouseEvent) => void;
handleMouseOverTarget: (event: React.MouseEvent) => void;
handleMouseOutTarget: (event: React.MouseEvent) => void;
handleClose: ({ event, props, }: {
event: React.MouseEvent;
props: IIconProps;
}) => void;
render(): JSX.Element;
}
declare const _default: typeof ToolTip & import("../../util/state-management").IHybridComponent<IToolTipProps, IToolTipState>;
export default _default;
export { ToolTip as ToolTipDumb };
//# sourceMappingURL=ToolTip.d.ts.map