lucid-ui/dist/esm/components/ContextMenu/ContextMenu.d.ts

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
export interface IContextMenuTargetProps extends StandardProps {
    elementType: string;
}
export interface IContextMenuFlyOutProps extends React.HTMLAttributes<HTMLDivElement> {
}
/** These have to be lowercase because:
 * 1. the key and value have to match
 * 	(limitation of TypeScript, see: https://github.com/Microsoft/TypeScript/issues/17198)
 * 2. the values are currently lowercase in the propTypes
 * */
export declare enum EnumDirection {
    up = "up",
    down = "down",
    left = "left",
    right = "right"
}
export declare type Direction = keyof typeof EnumDirection;
export declare enum EnumAlignment {
    start = "start",
    center = "center",
    end = "end"
}
export declare type Alignment = keyof typeof EnumAlignment;
export interface FlyoutPosition {
    opacity: number;
    maxHeight: string | number;
    left: string | number;
    top: string | number;
}
declare type GetAlignmentOffset = (n: number) => number;
export interface IContextMenuProps extends StandardProps, React.HTMLAttributes<HTMLElement> {
    /** direction of the FlyOut relative to Target. */
    direction?: Direction;
    /**	the px offset along the axis of the direction */
    directonOffset: number;
    /** alignment of the Flyout relative to Target in the cross axis from `direction`. */
    alignment: Alignment;
    /** the px offset along the axis of the alignment */
    alignmentOffset?: number;
    /** an alternative to `alignmentOffset` a function that is applied with
        the width/height of the flyout. the result is used as the
        `alignmentOffset` */
    getAlignmentOffset: GetAlignmentOffset;
    /** The number of px's to grow or shrink the minWidth of the FlyOut */
    minWidthOffset: number;
    /** Indicates whether the FlyOut will render or not. */
    isExpanded: boolean;
    /** Called when a click event happenens outside of the ContextMenu */
    onClickOut: ({ event, props, }: {
        event: MouseEvent;
        props: IContextMenuProps;
    }) => void | null;
    /** The `id` of the FlyOut portal element that is appended to
        `document.body`. Defaults to a generated `id`. */
    portalId: string | null;
    FlyOut?: React.ReactNode;
    Target?: React.ReactNode;
}
interface IContextMenuState {
    portalId: string;
    targetRect: {
        bottom: number;
        top: number;
        left: number;
        right: number;
        height: number;
        width: number;
    };
    flyOutHeight: number;
    flyOutWidth: number;
}
declare class ContextMenu extends React.Component<IContextMenuProps, IContextMenuState, {}> {
    static displayName: string;
    static peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static propTypes: {
        /**
            \`children\` should include exactly one ContextMenu.Target and one
            ContextMenu.FlyOut.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Appended to the component-specific class names set on the root element.
        */
        className: PropTypes.Requireable<string>;
        /**
            Passed through to the root element.
        */
        style: PropTypes.Requireable<object>;
        /**
            direction of the FlyOut relative to Target.
        */
        direction: PropTypes.Requireable<string>;
        /**
            the px offset along the axis of the direction
        */
        directonOffset: PropTypes.Requireable<number>;
        /**
            alignment of the Flyout relative to Target in the cross axis from
            \`direction\`.
        */
        alignment: PropTypes.Requireable<string>;
        /**
            the px offset along the axis of the alignment
        */
        alignmentOffset: PropTypes.Requireable<number>;
        /**
            an alternative to \`alignmentOffset\`, a function that is applied with
            the width/height of the flyout. the result is used as the
            \`alignmentOffset\`
        */
        getAlignmentOffset: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            The number of px's to grow or shrink the minWidth of the FlyOut
        */
        minWidthOffset: PropTypes.Requireable<number>;
        /**
            Indicates whether the FlyOut will render or not.
        */
        isExpanded: PropTypes.Requireable<boolean>;
        /**
            Called when a click event happenens outside of the ContextMenu, with the
            signature \`({ props, event }) => { ... }\`
        */
        onClickOut: 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>;
        FlyOut: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        Target: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static UP: EnumDirection;
    static DOWN: EnumDirection;
    static LEFT: EnumDirection;
    static RIGHT: EnumDirection;
    static START: EnumAlignment;
    static CENTER: EnumAlignment;
    static END: EnumAlignment;
    static Target: {
        (_props: IContextMenuTargetProps): null;
        displayName: string;
        propName: string;
        peek: {
            description: string;
        };
        propTypes: {
            elementType: PropTypes.Requireable<string>;
        };
        defaultProps: {
            elementType: string;
        };
    };
    static FlyOut: {
        (_props: IContextMenuFlyOutProps): null;
        displayName: string;
        propName: string;
        peek: {
            description: string;
        };
    };
    private targetRef;
    private flyOutPortalRef;
    static defaultProps: {
        direction: string;
        directonOffset: number;
        minWidthOffset: number;
        alignment: string;
        getAlignmentOffset: () => number;
        isExpanded: boolean;
        onClickOut: null;
        portalId: null;
    };
    state: {
        portalId: string;
        targetRect: {
            bottom: number;
            top: number;
            left: number;
            right: number;
            height: number;
            width: number;
        };
        flyOutHeight: number;
        flyOutWidth: number;
    };
    continueAlignment: boolean;
    beginAlignment: () => void;
    endAlignment: () => void;
    handleAlignment: () => void;
    handleBodyClick: (event: MouseEvent | TouchEvent) => void;
    calcAlignmentOffset: ({ direction, alignment, getAlignmentOffset, flyOutHeight, flyOutWidth, }: {
        direction: Direction;
        alignment: Alignment;
        getAlignmentOffset: GetAlignmentOffset;
        flyOutHeight: number;
        flyOutWidth: number;
    }) => number;
    getMatch: ({ direction, alignment, flyOutHeight, flyOutWidth, clientWidth, directonOffset, alignmentOffset, top, bottom, left, right, width, height, }: {
        direction: Direction;
        alignment: Alignment;
        flyOutHeight: number;
        flyOutWidth: number;
        clientWidth: number;
        directonOffset: number;
        alignmentOffset: number;
        top: number;
        bottom: number;
        left: number;
        right: number;
        width: number;
        height: number;
    }) => FlyoutPosition;
    getFlyoutPosition: () => FlyoutPosition | {} | undefined;
    alignFlyOut: (doRedunancyCheck?: boolean) => void;
    UNSAFE_componentWillReceiveProps(): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): React.ReactNode;
}
export default ContextMenu;
//# sourceMappingURL=ContextMenu.d.ts.map