177 lines
7.8 KiB
TypeScript
177 lines
7.8 KiB
TypeScript
import * as React from 'react';
|
|
import { KeyCodes, IStyleFunctionOrObject } from '../../Utilities';
|
|
import { Selection } from '../../utilities/selection/index';
|
|
import { Suggestions } from './Suggestions/Suggestions';
|
|
import { SuggestionsController } from './Suggestions/SuggestionsController';
|
|
import { Autofill } from '../Autofill/index';
|
|
import type { ISuggestions, ISuggestionsProps } from './Suggestions/Suggestions.types';
|
|
import type { IBasePicker, IBasePickerProps } from './BasePicker.types';
|
|
import type { IAutofill } from '../Autofill/index';
|
|
import type { ILabelStyleProps, ILabelStyles } from '../../Label';
|
|
import type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout';
|
|
import type { JSXElement } from '@fluentui/utilities';
|
|
export interface IBasePickerState<T> {
|
|
items?: any;
|
|
suggestedDisplayValue?: string;
|
|
moreSuggestionsAvailable?: boolean;
|
|
isFocused?: boolean;
|
|
isSearching?: boolean;
|
|
isMostRecentlyUsedVisible?: boolean;
|
|
suggestionsVisible?: boolean;
|
|
suggestionsLoading?: boolean;
|
|
suggestionsExtendedLoading?: boolean;
|
|
isResultsFooterVisible?: boolean;
|
|
selectedIndices?: number[];
|
|
selectionRemoved?: T;
|
|
errorMessage?: string | JSXElement;
|
|
}
|
|
/**
|
|
* Aria id's for internal picker components
|
|
* {@docCategory Pickers}
|
|
*/
|
|
export type IPickerAriaIds = {
|
|
/**
|
|
* Aria id for selected suggestion alert component
|
|
*/
|
|
selectedSuggestionAlert: string;
|
|
/**
|
|
* Aria id for selected items container component
|
|
*/
|
|
selectedItems: string;
|
|
/**
|
|
* Aria id for suggestions list component
|
|
*/
|
|
suggestionList: string;
|
|
/**
|
|
* Aria id for element with role=combobox
|
|
*/
|
|
combobox: string;
|
|
/**
|
|
* Aria id for error message component
|
|
*/
|
|
error: string;
|
|
};
|
|
/**
|
|
* {@docCategory Pickers}
|
|
*/
|
|
export declare class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends React.Component<P, IBasePickerState<T>> implements IBasePicker<T> {
|
|
static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
|
|
context: any;
|
|
protected root: React.RefObject<HTMLDivElement | null>;
|
|
protected input: React.RefObject<IAutofill | null>;
|
|
protected suggestionElement: React.RefObject<ISuggestions<T> | null>;
|
|
protected selection: Selection;
|
|
protected suggestionStore: SuggestionsController<T>;
|
|
/**
|
|
* @deprecated this is no longer necessary as typescript now supports generic elements
|
|
*/
|
|
protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T>;
|
|
protected currentPromise: PromiseLike<any> | undefined;
|
|
protected _ariaMap: IPickerAriaIds;
|
|
private _styledSuggestions;
|
|
private _id;
|
|
private _async;
|
|
private _isMounted;
|
|
private _onResolveSuggestionsDebounced;
|
|
private _overrideScrollDismiss;
|
|
private _overrideScrollDimissTimeout;
|
|
static getDerivedStateFromProps(newProps: IBasePickerProps<any>): IBasePickerState<any> | null;
|
|
constructor(basePickerProps: P);
|
|
get items(): T[];
|
|
componentDidMount(): void;
|
|
componentDidUpdate(oldProps: P, oldState: IBasePickerState<T>): void;
|
|
componentWillUnmount(): void;
|
|
focus(): void;
|
|
focusInput(): void;
|
|
dismissSuggestions: (ev?: any) => void;
|
|
completeSuggestion(forceComplete?: boolean): void;
|
|
refocusSuggestions: (keyCode: KeyCodes) => void;
|
|
render(): JSXElement;
|
|
protected _getDescribedBy: (items: T[], hasError: boolean) => string;
|
|
protected canAddItems(): boolean;
|
|
protected renderLabel(inputId: string, styles: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles> | undefined): JSXElement | null;
|
|
protected renderError(className?: string): JSXElement | null;
|
|
protected renderSuggestions(styles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined): JSXElement | null;
|
|
protected renderItems(): JSXElement[];
|
|
protected resetFocus(index?: number): void;
|
|
protected onSuggestionSelect(): void;
|
|
protected onSelectionChange(): void;
|
|
protected updateSuggestions(suggestions: any[]): void;
|
|
/**
|
|
* Only to be called when there is nothing in the input. Checks to see if the consumer has
|
|
* provided a function to resolve suggestions
|
|
*/
|
|
protected onEmptyInputFocus(): void;
|
|
protected updateValue(updatedValue: string): void;
|
|
protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string): void;
|
|
protected resolveNewValue(updatedValue: string, suggestions: T[]): void;
|
|
protected onChange(items?: T[]): void;
|
|
protected onInputChange: (value: string) => void;
|
|
protected onSuggestionClick: (ev: React.MouseEvent<HTMLElement>, item: any, index: number) => void;
|
|
protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement>, item: T, index: number) => void;
|
|
protected onInputFocus: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
|
|
protected onInputBlur: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
|
|
protected onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;
|
|
/**
|
|
* Resets focus to last element in wrapper div if clicking back into Picker that has hit item limit
|
|
*/
|
|
protected onWrapperClick: (ev: React.MouseEvent<HTMLInputElement>) => void;
|
|
/**
|
|
* Reveals suggestions any time the user clicks on the input element
|
|
* without shifting focus.
|
|
*/
|
|
protected onClick: (ev: React.MouseEvent<HTMLInputElement>) => void;
|
|
protected onFocus: () => void;
|
|
protected onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;
|
|
protected onItemChange: (changedItem: T, index: number) => void;
|
|
protected onGetMoreResults: () => void;
|
|
protected completeSelection: (item: T) => void;
|
|
protected addItemByIndex: (index: number) => void;
|
|
protected addItem: (item: T) => void;
|
|
protected removeItem: (item: T) => void;
|
|
protected removeItems: (itemsToRemove: any[]) => void;
|
|
protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
|
|
/**
|
|
* @deprecated this is no longer necessary as focuszone has been removed
|
|
*/
|
|
protected _shouldFocusZoneEnterInnerZone: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
|
|
protected getActiveDescendant(): string | undefined;
|
|
/** @deprecated use renderCustomAlert instead */
|
|
protected getSuggestionsAlert(suggestionAlertClassName?: string): JSXElement | undefined;
|
|
protected renderCustomAlert(alertClassName?: string): JSXElement;
|
|
private _preventDismissOnScrollOrResize;
|
|
/** If suggestions are still loading after a predefined amount of time, set state to show user alert */
|
|
private _startLoadTimer;
|
|
/**
|
|
* Takes in the current updated value and either resolves it with the new suggestions
|
|
* or if updated value is undefined then it clears out currently suggested items
|
|
*/
|
|
private _updateAndResolveValue;
|
|
private _getErrorMessage;
|
|
private _updateErrorMessage;
|
|
/**
|
|
* Controls what happens whenever there is an action that impacts the selected items.
|
|
* If `selectedItems` is provided, this will act as a controlled component and it will not update its own state.
|
|
*/
|
|
private _updateSelectedItems;
|
|
private _onSelectedItemsUpdated;
|
|
/**
|
|
* Suggestions are normally shown after the user updates text and the text
|
|
* is non-empty, but also when the user clicks on the input element.
|
|
* @returns True if suggestions should be shown.
|
|
*/
|
|
private _getShowSuggestions;
|
|
private _onResolveSuggestions;
|
|
private _completeGenericSuggestion;
|
|
private _getTextFromItem;
|
|
/**
|
|
* This should be called when the user does something other than use text entry to trigger suggestions.
|
|
*
|
|
*/
|
|
private _userTriggeredSuggestions;
|
|
}
|
|
export declare class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
|
|
render(): JSXElement;
|
|
protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
|
|
}
|