box-ui-elements-mlh/src/components/tooltip/Tooltip.js.flow

Box UI Elements

// @flow
import * as React from 'react';
import { type TetherPosition } from '../../common/tether-positions';

export type CustomPosition = {
    attachment: TetherPosition,
    targetAttachment: TetherPosition,
};

const TOP_CENTER = 'top-center';
const DEFAULT_THEME = 'default';

export type Position =
    | 'bottom-center'
    | 'bottom-left'
    | 'bottom-right'
    | 'middle-left'
    | 'middle-right'
    | 'top-center'
    | 'top-left'
    | 'top-right';

type Props = {
    /** An HTML element to append the tooltip container into (otherwise appends to body) */
    bodyElement?: HTMLElement,
    /** A React element to put the tooltip on */
    children: React.Node,
    /** A CSS class for the tooltip */
    className?: string,
    /** Whether to constrain the tooltip to the element's scroll parent. Defaults to `false` */
    constrainToScrollParent: boolean,
    /** Whether to constrain the tooltip to window. Defaults to `true` */
    constrainToWindow: boolean,
    /** Forces the tooltip to be disabled irrespecitve of it's shown state. Defaults to `false` */
    isDisabled: boolean,
    /** Forces the tooltip to be shown or hidden (useful for errors) */
    isShown?: boolean,
    /** Whether to add tabindex=0.  Defaults to `true` */
    isTabbable?: boolean,
    /** A string of the form 'vert-offset horiz-offset' which controls positioning */
    offset?: string,
    /** Function called if the user manually dismisses the tooltip - only applies if showCloseButton is true */
    onDismiss?: () => void,
    /** Where to position the tooltip relative to the wrapped component */
    position?: Position | CustomPosition,
    /** Shows an X button to close the tooltip. Useful when tooltips are force shown with the isShown prop. */
    showCloseButton?: boolean,
    /** stop click|keypress event bubbling */
    stopBubble?: boolean,
    /** Text to show in the tooltip */
    text?: React.Node,
    /** Tooltip theme */
    theme: 'callout' | 'default' | 'error',
};

type State = {
    hasRendered: boolean,
    isShown: boolean,
    wasClosedByUser: boolean,
};

class Tooltip extends React.Component<Props, State> {
    static defaultProps = {
        constrainToScrollParent: false,
        constrainToWindow: true,
        isDisabled: false,
        position: TOP_CENTER,
        theme: DEFAULT_THEME,
    };

    position: () => {};
}

export default Tooltip;