@point-api/dropdown-react/dist/Dropdown.d.ts

HOC to add a Point API autocomplete dropdown

import * as React from "react";
import EditableAdapter, { Coordinates } from "./EditableAdapter";
import { Snippet } from "@point-api/js-sdk";
import { Theme, WithStyles } from "@material-ui/core";
declare const style: (theme: Theme) => Record<"pointDropdown" | "pointDropdownNewButton", import("@material-ui/styles").CSSProperties | (() => import("@material-ui/styles").CSSProperties)>;
/** Props passed to a Dropdown instance */
interface DropdownProps {
    /** The class to attach to the dropdown element */
    dropdownClass?: string;
    /** The Editable Adapter a dropdown is attached to */
    editable: EditableAdapter;
    /** The snippets list to display in the dropdown */
    snippets: Snippet[];
    /** The current query string user to generate snippets */
    query: string | null;
    /** Whether to use keyword search display mode */
    searchType: string;
    /** Whether to trigger autocomplete after using the tab button */
    tabCompletion: boolean;
    /** Function called when a snippet is selected (w/ mouse or keyboard) */
    onSnippetSelect: (snippet: Snippet) => void;
    /** Handle snippet delete */
    onSnippetDelete: (snippetId: string) => void;
}
declare type PropsType = DropdownProps & WithStyles<typeof style>;
/** State of a Dropdown instance */
interface DropdownState {
    caretPos: Coordinates | null;
    activeSnippet: number;
    canBeVisible: boolean;
}
/** Component representing an autocomplete dropdown */
export declare class DropdownComponent extends React.Component<PropsType, DropdownState> {
    readonly dropdown: React.RefObject<HTMLUListElement>;
    allowHover: boolean;
    tabCompletion: boolean;
    selectionMethod: "arrowKeys" | "hover" | "none";
    constructor(props: PropsType);
    readonly visibility: boolean;
    componentDidMount(): void;
    componentDidUpdate(prevProps: DropdownProps): void;
    /**
     * Listen for Arrow and Enter key events and dispatch responses
     * @param e - The KeyboardEvent
     */
    private watchKeys;
    private arrowKeyDefaults;
    /**
     * Set the dropdown position to be the caret(cursor) location in an Editable
     */
    updatePos: () => void;
    /**
     * Update selected snippet when down arrow is pressed
     */
    private arrowDown;
    /**
     * Update selected snippet when up arrow key is pressed
     */
    private arrowUp;
    /**
     * Call onSnippetSelect callback and reset selected snippet
     * @param snippet - Selected snippet
     */
    selectSnippet(snippet: Snippet): void;
    /**
     * Called when a user clicks on a snippet in the dropdown
     * @param index - index of the clicked snippet in the dropdown
     */
    private clicksnippet;
    /**
     * Syncs active snippet with the snippet a user is hovering over
     * @param index - hovered snippet index in the Dropdown
     */
    private onHover;
    /**
     * Resets the active snippet when a user mouses away from the Dropdown
     * @param e - The MouseEvent
     */
    private onMouseLeave;
    private onNewSnippetButtonClick;
    render(): JSX.Element | null;
}
declare const _default: React.ComponentType<Pick<PropsType, "query" | "dropdownClass" | "editable" | "snippets" | "searchType" | "tabCompletion" | "onSnippetSelect" | "onSnippetDelete"> & import("@material-ui/core").StyledComponentProps<"pointDropdown" | "pointDropdownNewButton">>;
export default _default;