mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-06-28 14:20:12 +00:00
Merge remote-tracking branch 'upstream/master' into merge_7_25
This commit is contained in:
Ryan Cavanaugh
770
react-select/index.d.ts
vendored
770
react-select/index.d.ts
vendored
@@ -5,409 +5,405 @@
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export as namespace ReactSelect;
|
||||
export = ReactSelectClass;
|
||||
|
||||
declare const select: ReactSelectClass;
|
||||
export default select;
|
||||
declare namespace ReactSelectClass {
|
||||
export interface AutocompleteResult {
|
||||
/** the search-results to be displayed */
|
||||
data: Option[],
|
||||
/** 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;
|
||||
}
|
||||
|
||||
interface AutocompleteResult {
|
||||
/** the search-results to be displayed */
|
||||
data: Option[],
|
||||
/** 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;
|
||||
}
|
||||
export interface Option {
|
||||
/** Text for rendering */
|
||||
label: string;
|
||||
/** Value for searching */
|
||||
value: string | number;
|
||||
/**
|
||||
* Allow this option to be cleared
|
||||
* @default true
|
||||
*/
|
||||
clearableValue?: boolean;
|
||||
}
|
||||
|
||||
export interface Option {
|
||||
/** Text for rendering */
|
||||
label: string;
|
||||
/** Value for searching */
|
||||
value: string | number;
|
||||
/**
|
||||
* Allow this option to be cleared
|
||||
* @default true
|
||||
*/
|
||||
clearableValue?: boolean;
|
||||
}
|
||||
export interface MenuRendererProps {
|
||||
/**
|
||||
* The currently focused option; should be visible in the menu by default.
|
||||
* default {}
|
||||
*/
|
||||
focusedOption: Option;
|
||||
|
||||
export 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: (option: Option) => void;
|
||||
|
||||
/**
|
||||
* Callback to focus a new option; receives the option as a parameter.
|
||||
*/
|
||||
focusOption: (option: Option) => void;
|
||||
/**
|
||||
* Option labels are accessible with this string key.
|
||||
*/
|
||||
labelKey: string;
|
||||
|
||||
/**
|
||||
* Option labels are accessible with this string key.
|
||||
*/
|
||||
labelKey: string;
|
||||
/**
|
||||
* Ordered array of options to render.
|
||||
*/
|
||||
options: Option[];
|
||||
|
||||
/**
|
||||
* Ordered array of options to render.
|
||||
*/
|
||||
options: Option[];
|
||||
/**
|
||||
* Callback to select a new option; receives the option as a parameter.
|
||||
*/
|
||||
selectValue: (option: Option) => void;
|
||||
|
||||
/**
|
||||
* Callback to select a new option; receives the option as a parameter.
|
||||
*/
|
||||
selectValue: (option: Option) => void;
|
||||
/**
|
||||
* Array of currently selected options.
|
||||
*/
|
||||
valueArray: Option[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Array of currently selected options.
|
||||
*/
|
||||
valueArray: Option[];
|
||||
}
|
||||
|
||||
export interface ReactSelectProps extends React.Props<ReactSelect> {
|
||||
/**
|
||||
* text to display when `allowCreate` is true.
|
||||
* @default 'Add "{label}"?'
|
||||
*/
|
||||
addLabelText?: string;
|
||||
/**
|
||||
* allow new options to be created in multi mode (displays an "Add <option> ?" item
|
||||
* when a value not already in the options array is entered)
|
||||
* @default false
|
||||
*/
|
||||
allowCreate?: boolean;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* 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?: (option: Option, filter: string) => Option;
|
||||
/**
|
||||
* method to filter the options array
|
||||
*/
|
||||
filterOptions?: (options: Array<Option>, filter: string, currentValues: Array<Option>) => Array<Option>;
|
||||
/**
|
||||
* 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?: Object;
|
||||
/**
|
||||
* 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?: {}
|
||||
/**
|
||||
* renders a custom menu with options
|
||||
*/
|
||||
menuRenderer?: (props: MenuRendererProps) => React.ReactElement<any>;
|
||||
/**
|
||||
* optional style to apply to the menu
|
||||
*/
|
||||
menuStyle?: {}
|
||||
/**
|
||||
* multi-value input
|
||||
* @default false
|
||||
*/
|
||||
multi?: boolean;
|
||||
/**
|
||||
* field name, for hidden `<input>` tag
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* factory to create new options when `allowCreate` is true
|
||||
* @default false
|
||||
*/
|
||||
newOptionCreator?: (input: string) => Option;
|
||||
/**
|
||||
* placeholder displayed when there are no matching search results or a falsy value to hide it
|
||||
* @default "No results found"
|
||||
*/
|
||||
noResultsText?: string;
|
||||
/**
|
||||
* onBlur handler: function (event) {}
|
||||
*/
|
||||
onBlur?: React.FocusEventHandler<{}>;
|
||||
/**
|
||||
* whether to clear input on blur or not
|
||||
* @default true
|
||||
*/
|
||||
onBlurResetsInput?: boolean;
|
||||
/**
|
||||
* onChange handler: function (newValue) {}
|
||||
*/
|
||||
onChange?: (newValue: Option | Option[]) => void;
|
||||
/**
|
||||
* fires when the menu is closed
|
||||
*/
|
||||
onClose?: () => void;
|
||||
/**
|
||||
* onFocus handler: function (event) {}
|
||||
*/
|
||||
onFocus?: React.FocusEventHandler<{}>;
|
||||
/**
|
||||
* onInputChange handler: function (inputValue) {}
|
||||
*/
|
||||
onInputChange?: (inputValue: string) => void;
|
||||
/**
|
||||
* fires when the menu is scrolled to the bottom; can be used to paginate options
|
||||
*/
|
||||
onMenuScrollToBottom?: () => void;
|
||||
/**
|
||||
* fires when the menu is opened
|
||||
*/
|
||||
onOpen?: () => void;
|
||||
/**
|
||||
* @deprecated use onValueClick isntead
|
||||
*/
|
||||
onOptionLabelClick?: (value: string, event: Event) => void;
|
||||
/**
|
||||
* boolean to enable opening dropdown when focused
|
||||
* @default false
|
||||
*/
|
||||
openAfterFocus?: boolean;
|
||||
/**
|
||||
export interface ReactSelectProps extends React.Props<ReactSelectClass> {
|
||||
/**
|
||||
* text to display when `allowCreate` is true.
|
||||
* @default 'Add "{label}"?'
|
||||
*/
|
||||
addLabelText?: string;
|
||||
/**
|
||||
* allow new options to be created in multi mode (displays an "Add <option> ?" item
|
||||
* when a value not already in the options array is entered)
|
||||
* @default false
|
||||
*/
|
||||
allowCreate?: boolean;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* 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?: (option: Option, filter: string) => Option;
|
||||
/**
|
||||
* method to filter the options array
|
||||
*/
|
||||
filterOptions?: (options: Array<Option>, filter: string, currentValues: Array<Option>) => Array<Option>;
|
||||
/**
|
||||
* 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?: Object;
|
||||
/**
|
||||
* 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?: {}
|
||||
/**
|
||||
* renders a custom menu with options
|
||||
*/
|
||||
menuRenderer?: (props: MenuRendererProps) => React.ReactElement<any>;
|
||||
/**
|
||||
* optional style to apply to the menu
|
||||
*/
|
||||
menuStyle?: {}
|
||||
/**
|
||||
* multi-value input
|
||||
* @default false
|
||||
*/
|
||||
multi?: boolean;
|
||||
/**
|
||||
* field name, for hidden `<input>` tag
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* factory to create new options when `allowCreate` is true
|
||||
* @default false
|
||||
*/
|
||||
newOptionCreator?: (input: string) => Option;
|
||||
/**
|
||||
* placeholder displayed when there are no matching search results or a falsy value to hide it
|
||||
* @default "No results found"
|
||||
*/
|
||||
noResultsText?: string;
|
||||
/**
|
||||
* onBlur handler: function (event) {}
|
||||
*/
|
||||
onBlur?: React.FocusEventHandler<{}>;
|
||||
/**
|
||||
* whether to clear input on blur or not
|
||||
* @default true
|
||||
*/
|
||||
onBlurResetsInput?: boolean;
|
||||
/**
|
||||
* onChange handler: function (newValue) {}
|
||||
*/
|
||||
onChange?: (newValue: Option | Option[]) => void;
|
||||
/**
|
||||
* fires when the menu is closed
|
||||
*/
|
||||
onClose?: () => void;
|
||||
/**
|
||||
* onFocus handler: function (event) {}
|
||||
*/
|
||||
onFocus?: React.FocusEventHandler<{}>;
|
||||
/**
|
||||
* onInputChange handler: function (inputValue) {}
|
||||
*/
|
||||
onInputChange?: (inputValue: string) => void;
|
||||
/**
|
||||
* fires when the menu is scrolled to the bottom; can be used to paginate options
|
||||
*/
|
||||
onMenuScrollToBottom?: () => void;
|
||||
/**
|
||||
* fires when the menu is opened
|
||||
*/
|
||||
onOpen?: () => void;
|
||||
/**
|
||||
* @deprecated use onValueClick isntead
|
||||
*/
|
||||
onOptionLabelClick?: (value: string, event: Event) => void;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* option component to render in dropdown
|
||||
*/
|
||||
optionComponent?: React.ReactElement<any>;
|
||||
/**
|
||||
* function which returns a custom way to render the options in the menu
|
||||
*/
|
||||
optionRenderer?: (option: Option) => JSX.Element;
|
||||
/**
|
||||
* array of Select options
|
||||
* @default false
|
||||
*/
|
||||
options?: Array<Option>;
|
||||
/**
|
||||
* field placeholder, displayed when there's no value
|
||||
* @default "Select..."
|
||||
*/
|
||||
placeholder?: string | React.ReactElement<any>;
|
||||
/**
|
||||
* 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 | Option[];
|
||||
/**
|
||||
* 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?: (option: Option) => JSX.Element;
|
||||
/**
|
||||
* optional style to apply to the control
|
||||
*/
|
||||
style?: any;
|
||||
openOnFocus?: boolean;
|
||||
/**
|
||||
* option component to render in dropdown
|
||||
*/
|
||||
optionComponent?: React.ComponentClass<any>;
|
||||
/**
|
||||
* function which returns a custom way to render the options in the menu
|
||||
*/
|
||||
optionRenderer?: (option: Option) => JSX.Element;
|
||||
/**
|
||||
* array of Select options
|
||||
* @default false
|
||||
*/
|
||||
options?: Array<Option>;
|
||||
/**
|
||||
* field placeholder, displayed when there's no value
|
||||
* @default "Select..."
|
||||
*/
|
||||
placeholder?: string | React.ReactElement<any>;
|
||||
/**
|
||||
* 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 | Option[];
|
||||
/**
|
||||
* 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?: (option: Option) => JSX.Element;
|
||||
/**
|
||||
* optional style to apply to the control
|
||||
*/
|
||||
style?: any;
|
||||
|
||||
/**
|
||||
* optional tab index of the control
|
||||
*/
|
||||
tabIndex?: string;
|
||||
/**
|
||||
* optional tab index of the control
|
||||
*/
|
||||
tabIndex?: string;
|
||||
|
||||
/**
|
||||
* value component to render
|
||||
*/
|
||||
valueComponent?: React.ReactElement<any>;
|
||||
/**
|
||||
* value component to render
|
||||
*/
|
||||
valueComponent?: React.ComponentClass<any>;
|
||||
|
||||
/**
|
||||
* optional style to apply to the component wrapper
|
||||
*/
|
||||
wrapperStyle?: any;
|
||||
/**
|
||||
* optional style to apply to the component wrapper
|
||||
*/
|
||||
wrapperStyle?: any;
|
||||
|
||||
/**
|
||||
* onClick handler for value labels: function (value, event) {}
|
||||
*/
|
||||
onValueClick?: (value: string, event: Event) => void;
|
||||
/**
|
||||
* onClick handler for value labels: function (value, event) {}
|
||||
*/
|
||||
onValueClick?: (value: string, event: Event) => void;
|
||||
|
||||
/**
|
||||
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
||||
*/
|
||||
simpleValue?: boolean;
|
||||
}
|
||||
|
||||
export interface ReactAsyncSelectProps extends ReactSelectProps {
|
||||
/**
|
||||
* object to use to cache results; can be null to disable cache
|
||||
*/
|
||||
cache?: Object | 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: (input: string, callback: (err: any, result: AutocompleteResult) => any) => any;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
||||
*/
|
||||
simpleValue?: boolean;
|
||||
}
|
||||
|
||||
export interface ReactAsyncSelectProps extends ReactSelectProps {
|
||||
/**
|
||||
* object to use to cache results; can be null to disable cache
|
||||
*/
|
||||
cache?: any;
|
||||
|
||||
/**
|
||||
* 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: (input: string, callback: (err: any, result: AutocompleteResult) => any) => any;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
interface ReactSelect extends React.ReactElement<ReactSelectProps> { }
|
||||
interface ReactSelectAsyncClass extends React.ComponentClass<ReactAsyncSelectProps> {
|
||||
}
|
||||
declare const Async: ReactSelectAsyncClass;
|
||||
interface ReactSelectClass extends React.ComponentClass<ReactSelectProps> {
|
||||
Async: ReactSelectAsyncClass;
|
||||
declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps, {}> {
|
||||
static Async: typeof ReactSelectAsyncClass;
|
||||
}
|
||||
declare class ReactSelectAsyncClass extends React.Component<ReactSelectClass.ReactAsyncSelectProps, {}> { }
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
/// <reference types="mqtt" />
|
||||
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
import Select, * as ReactSelect from "react-select";
|
||||
import Select = require("react-select");
|
||||
import { Option, ReactSelectProps, ReactAsyncSelectProps, MenuRendererProps } from "react-select";
|
||||
|
||||
const CustomOption = React.createClass({
|
||||
@@ -59,6 +57,26 @@ const CustomValue = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
const filterOptions = (options: Array<Option>, filter: string, values: Array<Option>) => {
|
||||
// Filter already selected values
|
||||
let filteredOptions = options.filter(option => values.indexOf(option) < 0);
|
||||
|
||||
// Filter by label
|
||||
if (filter != null && filter.length > 0) {
|
||||
filteredOptions = filteredOptions.filter(option => RegExp(filter, 'ig').test(option.label));
|
||||
}
|
||||
|
||||
// Append Addition option
|
||||
if (filteredOptions.length === 0) {
|
||||
filteredOptions.push({
|
||||
label: `Create: ${filter}`,
|
||||
value: filter
|
||||
});
|
||||
}
|
||||
|
||||
return filteredOptions;
|
||||
};
|
||||
|
||||
class SelectTest extends React.Component<React.Props<{}>, {}> {
|
||||
|
||||
render() {
|
||||
@@ -87,6 +105,7 @@ class SelectTest extends React.Component<React.Props<{}>, {}> {
|
||||
autosize: true,
|
||||
clearable: true,
|
||||
escapeClearsValue: true,
|
||||
filterOptions: filterOptions,
|
||||
ignoreAccents: true,
|
||||
joinValues: false,
|
||||
matchPos: "any",
|
||||
@@ -100,7 +119,7 @@ class SelectTest extends React.Component<React.Props<{}>, {}> {
|
||||
onOpen: onOpen,
|
||||
onClose: onClose,
|
||||
openAfterFocus: false,
|
||||
optionComponent: CustomOption as any,
|
||||
optionComponent: CustomOption,
|
||||
required: false,
|
||||
resetValue: "resetValue",
|
||||
scrollMenuIntoView: false,
|
||||
@@ -108,11 +127,12 @@ class SelectTest extends React.Component<React.Props<{}>, {}> {
|
||||
labelKey: "name",
|
||||
onChange: onChange,
|
||||
value: options,
|
||||
valueComponent: CustomValue as any,
|
||||
valueComponent: CustomValue,
|
||||
valueRenderer: optionRenderer
|
||||
};
|
||||
|
||||
return <div>
|
||||
<Select {...(selectProps as any)} />
|
||||
<Select {...selectProps} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
@@ -152,8 +172,8 @@ class SelectAsyncTest extends React.Component<React.Props<{}>, {}> {
|
||||
};
|
||||
|
||||
return <div>
|
||||
<Select.Async {...(asyncSelectProps as any)} />
|
||||
<Select.Async {...asyncSelectProps} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user