mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
518 lines
16 KiB
TypeScript
518 lines
16 KiB
TypeScript
// Type definitions for react-select 1.0
|
|
// Project: https://github.com/JedWatson/react-select
|
|
// Definitions by: ESQUIBET Hugo <https://github.com/Hesquibet>
|
|
// Gilad Gray <https://github.com/giladgray>
|
|
// Izaak Baker <https://github.com/iebaker>
|
|
// Tadas Dailyda <https://github.com/skirsdeda>
|
|
// Mark Vujevits <https://github.com/vujevits>
|
|
// Mike Deverell <https://github.com/devrelm>
|
|
// MartynasZilinskas <https://github.com/MartynasZilinskas>
|
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
// TypeScript Version: 2.3
|
|
|
|
import * as React from 'react';
|
|
|
|
export = ReactSelectClass;
|
|
|
|
declare namespace ReactSelectClass {
|
|
// Other components
|
|
class Creatable extends React.Component<ReactCreatableSelectProps> { }
|
|
class Async extends React.Component<ReactAsyncSelectProps> { }
|
|
class AsyncCreatable extends React.Component<ReactAsyncSelectProps & ReactCreatableSelectProps> { }
|
|
|
|
type HandlerRendererResult = JSX.Element | null | false;
|
|
|
|
// Handlers
|
|
type FocusOptionHandler = (option: Option) => void;
|
|
type SelectValueHandler = (option: Option) => void;
|
|
type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult;
|
|
type FilterOptionHandler = (option: Option, filter: string) => Option;
|
|
type FilterOptionsHandler = (options: Options, filter: string, currentValues: Options) => Options;
|
|
type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult;
|
|
type MenuRendererHandler = (props: MenuRendererProps) => HandlerRendererResult;
|
|
type OnCloseHandler = () => void;
|
|
type OnInputChangeHandler = (inputValue: string) => void;
|
|
type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement>;
|
|
type OnMenuScrollToBottomHandler = () => void;
|
|
type OnOpenHandler = () => void;
|
|
type OnFocusHandler = React.FocusEventHandler<HTMLDivElement>;
|
|
type OnBlurHandler = React.FocusEventHandler<HTMLDivElement>;
|
|
type OptionRendererHandler = (option: Option) => HandlerRendererResult;
|
|
type ValueRendererHandler = (option: Option) => HandlerRendererResult;
|
|
type OnValueClickHandler = (value: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
type IsOptionUniqueHandler = (arg: { option: Option, options: Options, labelKey: string, valueKey: string }) => boolean;
|
|
type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
|
|
type NewOptionCreatorHandler = (arg: { label: string, labelKey: string, valueKey: string }) => Option;
|
|
type PromptTextCreatorHandler = (filterText: string) => string;
|
|
type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
|
|
|
|
type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<Option<TValue>>;
|
|
type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<Options<TValue>>;
|
|
type OnChangeHandler<TOption = Option | Options> = (newValue: TOption | null) => void;
|
|
|
|
type LoadOptionsHandler = LoadOptionsAsyncHandler | LoadOptionsLegacyHandler;
|
|
type LoadOptionsAsyncHandler = (input: string) => Promise<AutocompleteResult>;
|
|
type LoadOptionsLegacyHandler = (input: string, callback: (err: any, result: AutocompleteResult) => void) => void;
|
|
|
|
interface AutocompleteResult {
|
|
/** The search-results to be displayed */
|
|
options: Options;
|
|
/**
|
|
* Should be set to true, if and only if a longer query with the same prefix
|
|
* would return a subset of the results
|
|
* If set to true, more specific queries will not be sent to the server.
|
|
*/
|
|
complete: boolean;
|
|
}
|
|
|
|
type Options<TValue = OptionValues> = Array<Option<TValue>>;
|
|
|
|
interface Option<TValue = OptionValues> {
|
|
/** Text for rendering */
|
|
label?: string;
|
|
/** Value for searching */
|
|
value?: TValue;
|
|
/**
|
|
* Allow this option to be cleared
|
|
* @default true
|
|
*/
|
|
clearableValue?: boolean;
|
|
/**
|
|
* Do not allow this option to be selected
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
}
|
|
|
|
type OptionValues = string | number | boolean;
|
|
|
|
interface MenuRendererProps {
|
|
/**
|
|
* The currently focused option; should be visible in the menu by default.
|
|
* default {}
|
|
*/
|
|
focusedOption: Option;
|
|
|
|
/**
|
|
* Callback to focus a new option; receives the option as a parameter.
|
|
*/
|
|
focusOption: FocusOptionHandler;
|
|
|
|
/**
|
|
* Option labels are accessible with this string key.
|
|
*/
|
|
labelKey: string;
|
|
|
|
/**
|
|
* Ordered array of options to render.
|
|
*/
|
|
options: Options;
|
|
|
|
/**
|
|
* Callback to select a new option; receives the option as a parameter.
|
|
*/
|
|
selectValue: SelectValueHandler;
|
|
|
|
/**
|
|
* Array of currently selected options.
|
|
*/
|
|
valueArray: Options;
|
|
}
|
|
|
|
interface ArrowRendererProps {
|
|
/**
|
|
* Arrow mouse down event handler.
|
|
*/
|
|
onMouseDown: React.MouseEventHandler<any>;
|
|
}
|
|
|
|
interface ReactSelectProps extends React.Props<ReactSelectClass> {
|
|
/**
|
|
* text to display when `allowCreate` is true.
|
|
* @default 'Add "{label}"?'
|
|
*/
|
|
addLabelText?: string;
|
|
/**
|
|
* renders a custom drop-down arrow to be shown in the right-hand side of the select.
|
|
* @default undefined
|
|
*/
|
|
arrowRenderer?: ArrowRendererHandler;
|
|
/**
|
|
* blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices.
|
|
* @default false
|
|
*/
|
|
autoBlur?: boolean;
|
|
/**
|
|
* autofocus the component on mount
|
|
* @default false
|
|
*/
|
|
autofocus?: boolean;
|
|
/**
|
|
* If enabled, the input will expand as the length of its value increases
|
|
*/
|
|
autosize?: boolean;
|
|
/**
|
|
* whether pressing backspace removes the last item when there is no input value
|
|
* @default true
|
|
*/
|
|
backspaceRemoves?: boolean;
|
|
/**
|
|
* Message to use for screenreaders to press backspace to remove the current item
|
|
* {label} is replaced with the item label
|
|
* @default "Press backspace to remove..."
|
|
*/
|
|
backspaceToRemoveMessage?: string;
|
|
/**
|
|
* CSS className for the outer element
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* title for the "clear" control when `multi` is true
|
|
* @default "Clear all"
|
|
*/
|
|
clearAllText?: string;
|
|
/**
|
|
* title for the "clear" control
|
|
* @default "Clear value"
|
|
*/
|
|
clearValueText?: string;
|
|
/**
|
|
* whether it is possible to reset value. if enabled, an X button will appear at the right side.
|
|
* @default true
|
|
*/
|
|
clearable?: boolean;
|
|
/**
|
|
* delimiter to use to join multiple values
|
|
* @default ","
|
|
*/
|
|
delimiter?: string;
|
|
/**
|
|
* whether the Select is disabled or not
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* whether escape clears the value when the menu is closed
|
|
* @default true
|
|
*/
|
|
escapeClearsValue?: boolean;
|
|
/**
|
|
* method to filter a single option
|
|
*/
|
|
filterOption?: FilterOptionHandler;
|
|
/**
|
|
* method to filter the options array
|
|
*/
|
|
filterOptions?: FilterOptionsHandler;
|
|
/**
|
|
* whether to strip diacritics when filtering
|
|
* @default true
|
|
*/
|
|
ignoreAccents?: boolean;
|
|
/**
|
|
* whether to perform case-insensitive filtering
|
|
* @default true
|
|
*/
|
|
ignoreCase?: boolean;
|
|
/**
|
|
* custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
|
|
* @default {}
|
|
*/
|
|
inputProps?: { [key: string]: any };
|
|
/**
|
|
* renders a custom input
|
|
*/
|
|
inputRenderer?: InputRendererHandler;
|
|
/**
|
|
* allows for synchronization of component id's on server and client.
|
|
* @see https://github.com/JedWatson/react-select/pull/1105
|
|
*/
|
|
instanceId?: string;
|
|
/**
|
|
* whether the Select is loading externally or not (such as options being loaded).
|
|
* if true, a loading spinner will be shown at the right side.
|
|
* @default false
|
|
*/
|
|
isLoading?: boolean;
|
|
/**
|
|
* (legacy mode) joins multiple values into a single form field with the delimiter
|
|
* @default false
|
|
*/
|
|
joinValues?: boolean;
|
|
/**
|
|
* the option property to use for the label
|
|
* @default "label"
|
|
*/
|
|
labelKey?: string;
|
|
/**
|
|
* (any, start) match the start or entire string when filtering
|
|
* @default "any"
|
|
*/
|
|
matchPos?: string;
|
|
/**
|
|
* (any, label, value) which option property to filter on
|
|
* @default "any"
|
|
*/
|
|
matchProp?: string;
|
|
/**
|
|
* buffer of px between the base of the dropdown and the viewport to shift if menu doesnt fit in viewport
|
|
* @default 0
|
|
*/
|
|
menuBuffer?: number;
|
|
/**
|
|
* optional style to apply to the menu container
|
|
*/
|
|
menuContainerStyle?: React.CSSProperties;
|
|
/**
|
|
* renders a custom menu with options
|
|
*/
|
|
menuRenderer?: MenuRendererHandler;
|
|
/**
|
|
* optional style to apply to the menu
|
|
*/
|
|
menuStyle?: React.CSSProperties;
|
|
/**
|
|
* multi-value input
|
|
* @default false
|
|
*/
|
|
multi?: boolean;
|
|
/**
|
|
* field name, for hidden `<input>` tag
|
|
*/
|
|
name?: string;
|
|
/**
|
|
* placeholder displayed when there are no matching search results or a falsy value to hide it
|
|
* @default "No results found"
|
|
*/
|
|
noResultsText?: string | JSX.Element;
|
|
/**
|
|
* onBlur handler: function (event) {}
|
|
*/
|
|
onBlur?: OnBlurHandler;
|
|
/**
|
|
* whether to clear input on blur or not
|
|
* @default true
|
|
*/
|
|
onBlurResetsInput?: boolean;
|
|
/**
|
|
* onChange handler: function (newValue) {}
|
|
*/
|
|
onChange?: OnChangeHandler;
|
|
/**
|
|
* fires when the menu is closed
|
|
*/
|
|
onClose?: OnCloseHandler;
|
|
/**
|
|
* onFocus handler: function (event) {}
|
|
*/
|
|
onFocus?: OnFocusHandler;
|
|
/**
|
|
* onInputChange handler: function (inputValue) {}
|
|
*/
|
|
onInputChange?: OnInputChangeHandler;
|
|
/**
|
|
* onInputKeyDown handler: function (keyboardEvent) {}
|
|
*/
|
|
onInputKeyDown?: OnInputKeyDownHandler;
|
|
/**
|
|
* fires when the menu is scrolled to the bottom; can be used to paginate options
|
|
*/
|
|
onMenuScrollToBottom?: OnMenuScrollToBottomHandler;
|
|
/**
|
|
* fires when the menu is opened
|
|
*/
|
|
onOpen?: OnOpenHandler;
|
|
/**
|
|
* boolean to enable opening dropdown when focused
|
|
* @default false
|
|
*/
|
|
openAfterFocus?: boolean;
|
|
/**
|
|
* open the options menu when the input gets focus (requires searchable = true)
|
|
* @default false
|
|
*/
|
|
openOnFocus?: boolean;
|
|
/**
|
|
* className to add to each option component
|
|
*/
|
|
optionClassName?: string;
|
|
/**
|
|
* option component to render in dropdown
|
|
*/
|
|
optionComponent?: React.ComponentType;
|
|
/**
|
|
* function which returns a custom way to render the options in the menu
|
|
*/
|
|
optionRenderer?: OptionRendererHandler;
|
|
/**
|
|
* array of Select options
|
|
* @default false
|
|
*/
|
|
options?: Options;
|
|
/**
|
|
* field placeholder, displayed when there's no value
|
|
* @default "Select..."
|
|
*/
|
|
placeholder?: string | JSX.Element;
|
|
/**
|
|
* applies HTML5 required attribute when needed
|
|
* @default false
|
|
*/
|
|
required?: boolean;
|
|
/**
|
|
* value to use when you clear the control
|
|
*/
|
|
resetValue?: any;
|
|
/**
|
|
* whether the viewport will shift to display the entire menu when engaged
|
|
* @default true
|
|
*/
|
|
scrollMenuIntoView?: boolean;
|
|
/**
|
|
* whether to enable searching feature or not
|
|
* @default true;
|
|
*/
|
|
searchable?: boolean;
|
|
/**
|
|
* whether to select the currently focused value when the [tab] key is pressed
|
|
*/
|
|
tabSelectsValue?: boolean;
|
|
/**
|
|
* initial field value
|
|
*/
|
|
value?: Option | Options | string | string[] | number | number[] | boolean;
|
|
/**
|
|
* the option property to use for the value
|
|
* @default "value"
|
|
*/
|
|
valueKey?: string;
|
|
/**
|
|
* function which returns a custom way to render the value selected
|
|
* @default false
|
|
*/
|
|
valueRenderer?: ValueRendererHandler;
|
|
/**
|
|
* optional style to apply to the control
|
|
*/
|
|
style?: React.CSSProperties;
|
|
|
|
/**
|
|
* optional tab index of the control
|
|
*/
|
|
tabIndex?: string;
|
|
|
|
/**
|
|
* value component to render
|
|
*/
|
|
valueComponent?: React.ComponentType;
|
|
|
|
/**
|
|
* optional style to apply to the component wrapper
|
|
*/
|
|
wrapperStyle?: React.CSSProperties;
|
|
|
|
/**
|
|
* onClick handler for value labels: function (value, event) {}
|
|
*/
|
|
onValueClick?: OnValueClickHandler;
|
|
|
|
/**
|
|
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
|
*/
|
|
simpleValue?: boolean;
|
|
}
|
|
|
|
interface ReactCreatableSelectProps extends ReactSelectProps {
|
|
/**
|
|
* Searches for any matching option within the set of options. This function prevents
|
|
* duplicate options from being created.
|
|
*/
|
|
isOptionUnique?: IsOptionUniqueHandler;
|
|
|
|
/**
|
|
* Determines if the current input text represents a valid option.
|
|
*/
|
|
isValidNewOption?: IsValidNewOptionHandler;
|
|
|
|
/**
|
|
* factory to create new options
|
|
*/
|
|
newOptionCreator?: NewOptionCreatorHandler;
|
|
|
|
/**
|
|
* Creates prompt/placeholder for option text.
|
|
*/
|
|
promptTextCreator?: PromptTextCreatorHandler;
|
|
|
|
/**
|
|
* Decides if a keyDown event (eg its 'keyCode') should result in the creation of a new option.
|
|
*/
|
|
shouldKeyDownEventCreateNewOption?: ShouldKeyDownEventCreateNewOptionHandler;
|
|
}
|
|
|
|
interface ReactAsyncSelectProps extends ReactSelectProps {
|
|
/**
|
|
* Whether to auto-load the default async options set.
|
|
*/
|
|
autoload?: boolean;
|
|
|
|
/**
|
|
* object to use to cache results; can be null to disable cache
|
|
*/
|
|
cache?: { [key: string]: any } | boolean;
|
|
|
|
/**
|
|
* whether to strip diacritics when filtering (shared with Select)
|
|
*/
|
|
ignoreAccents?: boolean;
|
|
|
|
/**
|
|
* whether to perform case-insensitive filtering (shared with Select)
|
|
*/
|
|
ignoreCase?: boolean;
|
|
|
|
/**
|
|
* overrides the isLoading state when set to true
|
|
*/
|
|
isLoading?: boolean;
|
|
|
|
/**
|
|
* function to call to load options asynchronously
|
|
*/
|
|
loadOptions: LoadOptionsHandler;
|
|
|
|
/**
|
|
* replaces the placeholder while options are loading
|
|
*/
|
|
loadingPlaceholder?: string;
|
|
|
|
/**
|
|
* the minimum number of characters that trigger loadOptions
|
|
*/
|
|
minimumInput?: number;
|
|
|
|
/**
|
|
* placeholder displayed when there are no matching search results (shared with Select)
|
|
*/
|
|
noResultsText?: string | JSX.Element;
|
|
/**
|
|
* field placeholder; displayed when there's no value (shared with Select)
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* label to prompt for search input
|
|
*/
|
|
searchPromptText?: string;
|
|
|
|
/**
|
|
* message to display while options are loading
|
|
*/
|
|
searchingText?: string;
|
|
}
|
|
}
|
|
|
|
declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps> {
|
|
focus(): void;
|
|
}
|