office-ui-fabric-react/lib-commonjs/components/KeytipLayer/KeytipLayer.base.d.ts

Reusable React components for building experiences for Office 365.

/// <reference types="react" />
import { IKeytipLayerProps } from './KeytipLayer.types';
import { IKeytipProps } from '../../Keytip';
import { BaseComponent } from '../../Utilities';
import { KeytipTree } from './KeytipTree';
import { IKeytipTransitionKey } from '../../utilities/keytips/IKeytipTransitionKey';
export interface IKeytipLayerState {
    inKeytipMode: boolean;
    keytips: IKeytipProps[];
    visibleKeytips: IKeytipProps[];
}
/**
 * A layer that holds all keytip items
 *
 * @export
 * @class KeytipLayer
 * @extends {BaseComponent<IKeytipLayerProps>}
 */
export declare class KeytipLayerBase extends BaseComponent<IKeytipLayerProps, IKeytipLayerState> {
    static defaultProps: IKeytipLayerProps;
    private _keytipTree;
    private _keytipManager;
    private _classNames;
    private _currentSequence;
    private _newCurrentKeytipSequences?;
    private _delayedKeytipQueue;
    private _delayedQueueTimeout;
    private _keyHandled;
    constructor(props: IKeytipLayerProps, context: any);
    render(): JSX.Element;
    componentDidMount(): void;
    componentWillUnmount(): void;
    getCurrentSequence(): string;
    getKeytipTree(): KeytipTree;
    /**
     * Processes an IKeytipTransitionKey entered by the user
     *
     * @param transitionKey - IKeytipTransitionKey received by the layer to process
     */
    processTransitionInput(transitionKey: IKeytipTransitionKey): void;
    /**
     * Processes inputs from the document listener and traverse the keytip tree
     *
     * @param key - Key pressed by the user
     */
    processInput(key: string): void;
    /**
     * Show the given keytips and hide all others
     *
     * @param ids - Keytip IDs to show
     */
    showKeytips(ids: string[]): void;
    /**
     * Enters keytip mode for this layer
     */
    private _enterKeytipMode();
    /**
     * Exits keytip mode for this layer
     */
    private _exitKeytipMode();
    /**
     * Sets the keytips state property
     *
     * @param keytipProps - Keytips to set in this layer
     */
    private _setKeytips(keytipProps?);
    /**
     * Callback function to use for persisted keytips
     *
     * @param overflowButtonSequences - The overflow button sequence to execute
     * @param keytipSequences - The keytip that should become the 'currentKeytip' when it is registered
     */
    private _persistedKeytipExecute(overflowButtonSequences, keytipSequences);
    private _getVisibleKeytips(keytips);
    private _onDismiss;
    private _onKeyDown;
    /**
     * Gets the ModifierKeyCodes based on the keyboard event
     *
     * @param ev - React.KeyboardEvent
     * @returns List of ModifierKeyCodes that were pressed
     */
    private _getModifierKey(key, ev);
    private _onKeyPress;
    private _onKeytipAdded;
    private _onKeytipUpdated;
    private _onKeytipRemoved;
    private _onPersistedKeytipAdded;
    private _onPersistedKeytipRemoved;
    private _onPersistedKeytipExecute;
    /**
     * Trigger a keytip immediately and set it as the current keytip
     *
     * @param keytipProps - Keytip to trigger immediately
     */
    private _triggerKeytipImmediately(keytipProps);
    private _addKeytipToQueue(keytipID);
    private _removeKeytipFromQueue(keytipID);
    /**
     * Gets the DOM element for the specified keytip
     *
     * @param keytipId - ID of the keytip to query for
     * @returns {HTMLElement | null} DOM element of the keytip if found
     */
    private _getKeytipDOMElement(keytipId);
    /**
     * Returns T/F if the keytipProps keySequences match the currentKeytip, and the currentKeytip is in an overflow well
     * This will make 'keytipProps' the new currentKeytip
     *
     * @param keytipProps - Keytip props to check
     * @returns {boolean} - T/F if this keytip should become the currentKeytip
     */
    private _isCurrentKeytipAnAlias(keytipProps);
    /**
     * Sets if we are in keytip mode.
     * Note, this sets both the state for the layer as well as
     * the value that the manager will expose externally.
     * @param inKeytipMode - Boolean so set whether we are in keytip mode or not
     */
    private _setInKeytipMode;
}