@eccenca/gui-elements/dist/types/components/AutoSuggestion/AutoSuggestion.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
export declare enum OVERWRITTEN_KEYS {
    ArrowUp = "ArrowUp",
    ArrowDown = "ArrowDown",
    Enter = "Enter",
    Tab = "Tab",
    Escape = "Escape"
}
export type OverwrittenKeyTypes = (typeof OVERWRITTEN_KEYS)[keyof typeof OVERWRITTEN_KEYS];
/** A single suggestion. */
export interface CodeAutocompleteFieldSuggestionBase {
    value: string;
    label?: string;
    description?: string;
}
/** Same as CodeAutocompleteFieldSuggestionBase, but with the query that was used to fetch this suggestion. */
export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends CodeAutocompleteFieldSuggestionBase {
    query: string;
    from: number;
    length: number;
}
/** The suggestions for a specific substring of the given input string. */
export interface CodeAutocompleteFieldReplacementResult {
    replacementInterval: {
        from: number;
        length: number;
    };
    extractedQuery: string;
    replacements: CodeAutocompleteFieldSuggestionBase[];
}
export interface CodeAutocompleteFieldPartialAutoCompleteResult {
    inputString: string;
    cursorPosition: number;
    replacementResults: CodeAutocompleteFieldReplacementResult[];
}
/** Validation result */
export interface CodeAutocompleteFieldValidationResult {
    valid: boolean;
    parseError?: {
        message: string;
        start: number;
        end: number;
    };
}
export interface CodeAutocompleteFieldProps {
    /** Additional class name.
     */
    className?: string;
    /** Optional label to be shown for the input (above). This will create a FieldItem around the input.
     */
    label?: string;
    /** The value the component is initialized with, do not use this to control value changes.
     */
    initialValue: string;
    /** Callback on value change
     */
    onChange: (currentValue: string) => any;
    /** Fetches the suggestions
     */
    fetchSuggestions: (inputString: string, cursorPosition: number) => (CodeAutocompleteFieldPartialAutoCompleteResult | undefined) | Promise<CodeAutocompleteFieldPartialAutoCompleteResult | undefined>;
    /** Checks if the input is valid
     */
    checkInput?: (inputString: string) => CodeAutocompleteFieldValidationResult | Promise<CodeAutocompleteFieldValidationResult | undefined>;
    /** Called with the input validation result
     */
    onInputChecked?: (validInput: boolean) => any;
    /** Text that should be shown if the input validation failed.
     */
    validationErrorText?: string;
    /** Text that should be shown when hovering over the clear icon
     */
    clearIconText?: string;
    /** Called when focus status changes
     */
    onFocusChange?: (hasFocus: boolean) => any;
    /** Optional ID to attach to the outer element
     */
    id?: string;
    /** If the <Tab> key should be used for auto-completing items. Else it will have its default behavior.
     */
    useTabForCompletions?: boolean;
    /** An additional element that is put to the left side of the input field */
    leftElement?: JSX.Element | null;
    /** An additional element that is put to the right side of the input field
     */
    rightElement?: JSX.Element | null;
    /** Placeholder tobe shown when no text has been entered, yet. */
    placeholder?: string;
    /** If the horizontal scrollbars should be shown. */
    showScrollBar?: boolean;
    /** Delay in ms before an auto-completion request should be send after nothing is typed in anymore.
     * This should prevent the UI to send too many requests to the backend. */
    autoCompletionRequestDelay?: number;
    /** Delay in ms before a validation request should be send after nothing is typed in anymore.
     * This should prevent the UI to send too many requests to the backend. */
    validationRequestDelay?: number;
    /**
     * multiline configuration
     */
    multiline?: boolean;
    mode?: SupportedCodeEditorModes;
    /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
     * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
    reInitOnInitialValueChange?: boolean;
    /** Optional height of the component */
    height?: number | string;
    /** Set read-only mode. Default: false */
    readOnly?: boolean;
    /** Properties that should be added to the outer div container. */
    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
}
/**
 * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
 * This is comparable to a one line code editor.
 *
 * Example usage: input of a path string offering auto-completion for each single part of the path.
 */
export declare const CodeAutocompleteField: ({ className, label, initialValue, onChange, fetchSuggestions, checkInput, validationErrorText, clearIconText, onFocusChange, id, onInputChecked, leftElement, rightElement, useTabForCompletions, placeholder, showScrollBar, autoCompletionRequestDelay, validationRequestDelay, mode, multiline, reInitOnInitialValueChange, height, readOnly, outerDivAttributes, }: CodeAutocompleteFieldProps) => React.JSX.Element;
export default CodeAutocompleteField;