import * as React from 'react'; import { Autofill } from './Autofill'; import { KeyCodes } from '../../Utilities'; import type { IRefObject } from '../../Utilities'; /** * {@docCategory Autofill} */ export interface IAutofill { /** * The current index of the cursor in the input area. Returns -1 if the input element * is not ready. */ cursorLocation: number | null; /** * Whether there is a value selected in the input area. */ isValueSelected: boolean; /** * The current text value that the user has entered. */ value: string; /** * The current index of where the selection starts. Returns -1 if the input element * is not ready. */ selectionStart: number | null; /** * The current index of where the selection ends. Returns -1 if the input element * is not ready. */ selectionEnd: number | null; /** * The current input element. */ inputElement: HTMLInputElement | null; /** * Focus the input element. */ focus(): void; /** * Clear all text in the input. Sets value to `''`. */ clear(): void; } /** * {@docCategory Autofill} */ export interface IAutofillProps extends React.InputHTMLAttributes { /** * Gets the component ref. */ componentRef?: IRefObject; /** * The suggested autofill value that will display. */ suggestedDisplayValue?: string; /** * A callback for when the current input value changes. Called after * the state has been changed. * * @param composing - true if the change event was triggered while the * inner input was in the middle of a multi-character composition. * (for example, jp-hiragana IME input) */ onInputValueChange?: (newValue?: string, composing?: boolean) => void; /** * When the user uses left arrow, right arrow, clicks, or deletes text, autofill is disabled * since the user has taken control. It is automatically re-enabled when the user enters text and the * cursor is at the end of the text in the input box. This prop can be used to override the * default list of key presses that will re-enable autofill. * @defaultvalue [KeyCodes.down, KeyCodes.up] */ enableAutofillOnKeyPress?: KeyCodes[]; /** * The default value to be visible. This is different from placeholder * because it actually sets the current value of the picker. * Note: Updates to this prop will not be respected. */ defaultVisibleValue?: string; /** * Handler for checking and updating the value if needed in `componentWillReceiveProps`. * Returns the updated value to set, if needed. * * @deprecated use standard input `value` prop instead if the autofill should act like a controlled component */ updateValueInWillReceiveProps?: () => string | null; /** * Handler for checking if the full value of the input should be selected in `componentDidUpdate`. * Returns whether the full value of the input should be selected. */ shouldSelectFullInputValueInComponentDidUpdate?: () => boolean; /** * A callback used to modify the input string. Will entirely override the default behavior if provided. * If you just want to be notified of changes, use `onInputValueChange` instead. * Called before the state has been updated. * * @param composing - true if the change event was triggered while the * inner input was in the middle of a multi-character composition. * (for example, jp-hiragana IME input) * @deprecated To control the value, pass in `value` like in any other controlled component. * To be notified of changes, use `onInputValueChange`. */ onInputChange?: (value: string, composing: boolean) => string | void; /** * Should the value of the input be selected? True if we're focused on our input, false otherwise. * We need to explicitly not select the text in the autofill if we are no longer focused. * In IE11, selecting an input will also focus the input, causing other element's focus to be stolen. */ preventValueSelection?: boolean; }