From e9f670010bb187fbb575baed58ff924460bb6769 Mon Sep 17 00:00:00 2001 From: Per Svensson Date: Mon, 25 Sep 2017 21:18:03 +0200 Subject: [PATCH] Default export and removing namespace (#19863) * Default export * Correct imports for tests * Update react-virtualized-select-tests.tsx * Correct imports and cleaning --- types/react-select/index.d.ts | 1029 ++++++++--------- types/react-select/react-select-tests.tsx | 67 +- .../react-virtualized-select-tests.tsx | 2 +- 3 files changed, 546 insertions(+), 552 deletions(-) diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts index ff29e1992f..e5defc9ede 100644 --- a/types/react-select/index.d.ts +++ b/types/react-select/index.d.ts @@ -14,522 +14,517 @@ import * as React from 'react'; -export = ReactSelectClass; - -declare namespace ReactSelectClass { - // Other components - class Creatable extends React.Component> { } - class Async extends React.Component> { } - class AsyncCreatable extends React.Component & 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) => boolean; - 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; - type OnMenuScrollToBottomHandler = () => void; - type OnOpenHandler = () => void; - type OnFocusHandler = React.FocusEventHandler; - type OnBlurHandler = React.FocusEventHandler; - type OptionRendererHandler = (option: Option) => HandlerRendererResult; - type ValueRendererHandler = (option: Option) => HandlerRendererResult; - type OnValueClickHandler = (option: Option, event: React.MouseEvent) => 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 = OnChangeHandler>; - type OnChangeMultipleHandler = OnChangeHandler>; - type OnChangeHandler | Options> = (newValue: TOption | null) => void; - type OnNewOptionClickHandler = (option: Option) => void; - - type LoadOptionsHandler = LoadOptionsAsyncHandler | LoadOptionsLegacyHandler; - type LoadOptionsAsyncHandler = (input: string) => Promise>; - 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 = Array>; - - interface Option { - /** 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; - /** - * In the event that a custom menuRenderer is provided, Option should be able - * to accept arbitrary key-value pairs. See react-virtualized-select. - */ - [property: string]: any; - } - - 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; - } - - interface ReactSelectProps extends React.Props> { - /** - * 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; - /** - * whether backspace removes an item if there is no text input - * @default true - */ - deleteRemoves?: 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 `` 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; - - /** - * new option click handler: function (option) {} - */ - onNewOptionClick?: OnNewOptionClickHandler; - } - - 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> { +export default class ReactSelectClass extends React.Component> { focus(): void; } +// Other components +export class Creatable extends React.Component> { } +export class Async extends React.Component> { } +export class AsyncCreatable extends React.Component & ReactCreatableSelectProps> { } + +export type HandlerRendererResult = JSX.Element | null | false; + +// Handlers +export type FocusOptionHandler = (option: Option) => void; +export type SelectValueHandler = (option: Option) => void; +export type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult; +export type FilterOptionHandler = (option: Option, filter: string) => boolean; +export type FilterOptionsHandler = (options: Options, filter: string, currentValues: Options) => Options; +export type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult; +export type MenuRendererHandler = (props: MenuRendererProps) => HandlerRendererResult; +export type OnCloseHandler = () => void; +export type OnInputChangeHandler = (inputValue: string) => void; +export type OnInputKeyDownHandler = React.KeyboardEventHandler; +export type OnMenuScrollToBottomHandler = () => void; +export type OnOpenHandler = () => void; +export type OnFocusHandler = React.FocusEventHandler; +export type OnBlurHandler = React.FocusEventHandler; +export type OptionRendererHandler = (option: Option) => HandlerRendererResult; +export type ValueRendererHandler = (option: Option) => HandlerRendererResult; +export type OnValueClickHandler = (option: Option, event: React.MouseEvent) => void; +export type IsOptionUniqueHandler = (arg: { option: Option, options: Options, labelKey: string, valueKey: string }) => boolean; +export type IsValidNewOptionHandler = (arg: { label: string }) => boolean; +export type NewOptionCreatorHandler = (arg: { label: string, labelKey: string, valueKey: string }) => Option; +export type PromptTextCreatorHandler = (filterText: string) => string; +export type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean; + +export type OnChangeSingleHandler = OnChangeHandler>; +export type OnChangeMultipleHandler = OnChangeHandler>; +export type OnChangeHandler | Options> = (newValue: TOption | null) => void; +export type OnNewOptionClickHandler = (option: Option) => void; + +export type LoadOptionsHandler = LoadOptionsAsyncHandler | LoadOptionsLegacyHandler; +export type LoadOptionsAsyncHandler = (input: string) => Promise>; +export type LoadOptionsLegacyHandler = (input: string, callback: (err: any, result: AutocompleteResult) => void) => void; + +export 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; +} + +export type Options = Array>; + +export interface Option { + /** 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; + /** + * In the event that a custom menuRenderer is provided, Option should be able + * to accept arbitrary key-value pairs. See react-virtualized-select. + */ + [property: string]: any; +} + +export type OptionValues = string | number | boolean; + +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: 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; +} + +export interface ArrowRendererProps { + /** + * Arrow mouse down event handler. + */ + onMouseDown: React.MouseEventHandler; +} + +export interface ReactSelectProps extends React.Props> { + /** + * 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; + /** + * whether backspace removes an item if there is no text input + * @default true + */ + deleteRemoves?: 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 `` 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; +} + +export 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; + + /** + * new option click handler: function (option) {} + */ + onNewOptionClick?: OnNewOptionClickHandler; +} + +export 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; +} diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx index 15527339b1..000042c1d0 100644 --- a/types/react-select/react-select-tests.tsx +++ b/types/react-select/react-select-tests.tsx @@ -1,11 +1,10 @@ import * as React from "react"; -import * as ReactSelect from "react-select"; -const { Creatable } = ReactSelect; +import ReactSelect, * as ReactSelectModule from "react-select"; declare function describe(desc: string, f: () => void): void; declare function it(desc: string, f: () => void): void; -const EXAMPLE_OPTIONS: ReactSelect.Options = [ +const EXAMPLE_OPTIONS: ReactSelectModule.Options = [ { value: "one", label: "One" }, { value: "two", label: "Two" } ]; @@ -21,38 +20,38 @@ interface CustomValueType { * If https://github.com/Microsoft/TypeScript/issues/6395 ever lands, this * workaround may become redundant. */ -type CustomValueReactSelect = new (props: ReactSelect.ReactSelectProps) => ReactSelect; +type CustomValueReactSelect = new (props: ReactSelectModule.ReactSelectProps) => ReactSelect; const CustomValueReactSelect = ReactSelect as CustomValueReactSelect; -const EXAMPLE_CUSTOM_OPTIONS: ReactSelect.Options = [ +const EXAMPLE_CUSTOM_OPTIONS: ReactSelectModule.Options = [ { value: { prop1: "OneProp1", prop2: 1 }, label: "One" }, { value: { prop1: "TwoProp2", prop2: 2 }, label: "Two" } ]; -const EXAMPLE_CUSTOM_VALUE: ReactSelect.Option = { - value: { prop1: "ThreeProp1", prop2: 3 }, label: "Three" +const EXAMPLE_CUSTOM_VALUE: ReactSelectModule.Option = { + value: { prop1: "ThreeProp1", prop2: 3 }, label: "Three" }; describe("react-select", () => { it("options", () => { - const optionsString: ReactSelect.Options = [ + const optionsString: ReactSelectModule.Options = [ { value: "one", label: "One" }, { value: "two", label: "Two", clearableValue: false } ]; - const optionsNumber: ReactSelect.Options = [ + const optionsNumber: ReactSelectModule.Options = [ { value: 1, label: "One" }, { value: 2, label: "Two", clearableValue: false } ]; - const optionsMixed: ReactSelect.Options = [ + const optionsMixed: ReactSelectModule.Options = [ { value: "one", label: "One" }, { value: 2, label: "Two", clearableValue: false } ]; }); it("async options", () => { - const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler = (input, callback) => { + const getAsyncLegacyOptions: ReactSelectModule.LoadOptionsLegacyHandler = (input, callback) => { setTimeout(() => { callback(null, { options: [ @@ -64,12 +63,12 @@ describe("react-select", () => { }; const dummyRequest = async () => { - return new Promise(resolve => { + return new Promise(resolve => { resolve(EXAMPLE_OPTIONS); }); }; - const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler = async input => { + const getAsyncOptions: ReactSelectModule.LoadOptionsAsyncHandler = async input => { const result = await dummyRequest(); return { @@ -80,7 +79,7 @@ describe("react-select", () => { }); it("Custom value async options", () => { - const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler = (input, callback) => { + const getAsyncLegacyOptions: ReactSelectModule.LoadOptionsLegacyHandler = (input, callback) => { setTimeout(() => { callback(null, { options: [ @@ -92,12 +91,12 @@ describe("react-select", () => { }; const dummyRequest = async () => { - return new Promise>(resolve => { + return new Promise>(resolve => { resolve(EXAMPLE_CUSTOM_OPTIONS); }); }; - const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler = async input => { + const getAsyncOptions: ReactSelectModule.LoadOptionsAsyncHandler = async input => { const result = await dummyRequest(); return { @@ -109,7 +108,7 @@ describe("react-select", () => { it("creatable", () => { function Component(props: {}): JSX.Element { - return ; + return ; } }); @@ -128,14 +127,14 @@ describe("react-select", () => { }); it("Overriding default key-down behavior with onInputKeyDown", () => { - const keyDownHandler: ReactSelect.OnInputKeyDownHandler = (event => { + const keyDownHandler: ReactSelectModule.OnInputKeyDownHandler = (event => { const divEvent = event as React.KeyboardEvent; const inputEvent = event as React.KeyboardEvent; }); }); it("Updating input values with onInputChange", () => { - const cleanInput: ReactSelect.OnInputChangeHandler = inputValue => { + const cleanInput: ReactSelectModule.OnInputChangeHandler = inputValue => { return inputValue.replace(/[^0-9]/g, ""); }; }); @@ -172,7 +171,7 @@ describe("Focus events", () => { describe("Examples", () => { it("Simple example", () => { class Component extends React.Component { - private onSelectChange: ReactSelect.OnChangeSingleHandler = (option) => { + private onSelectChange: ReactSelectModule.OnChangeSingleHandler = (option) => { const optionValue: string = option.value; } @@ -188,7 +187,7 @@ describe("Examples", () => { it("onValueClick", () => { class Component extends React.Component { - private onValueClick: ReactSelect.OnValueClickHandler = (option) => { + private onValueClick: ReactSelectModule.OnValueClickHandler = (option) => { const optionValue: number = option.value; } @@ -209,7 +208,7 @@ describe("Examples", () => { it("Custom value onValueClick", () => { class Component extends React.Component { - private onValueClick: ReactSelect.OnValueClickHandler = (option) => { + private onValueClick: ReactSelectModule.OnValueClickHandler = (option) => { const optionValue: CustomValueType = option.value; } @@ -225,7 +224,7 @@ describe("Examples", () => { it("Custom value onChange", () => { class Component extends React.Component { - private onSelectChange: ReactSelect.OnChangeSingleHandler = (option) => { + private onSelectChange: ReactSelectModule.OnChangeSingleHandler = (option) => { const optionValue: CustomValueType = option.value; } @@ -241,11 +240,11 @@ describe("Examples", () => { it("Menu renderer example", () => { class Component extends React.Component { - private onSelectChange: ReactSelect.OnChangeSingleHandler = option => { + private onSelectChange: ReactSelectModule.OnChangeSingleHandler = option => { const optionValue: string = option.value; } - private menuRenderer: ReactSelect.MenuRendererHandler = props => { + private menuRenderer: ReactSelectModule.MenuRendererHandler = props => { const options = props.options.map(option => { return
{option.label}
; }); @@ -266,12 +265,12 @@ describe("Examples", () => { it("Menu renderer with custom value type example", () => { class Component extends React.Component { - private menuRenderer: ReactSelect.MenuRendererHandler = props => { + private menuRenderer: ReactSelectModule.MenuRendererHandler = props => { const options = props.options.map(option => { return (
props.selectValue(option)}> + data-value2={option.value.prop2} + onClick={() => props.selectValue(option)}> {option.label}
); }); @@ -292,11 +291,11 @@ describe("Examples", () => { it("Input render example", () => { class Component extends React.Component { - private onSelectChange: ReactSelect.OnChangeSingleHandler = option => { + private onSelectChange: ReactSelectModule.OnChangeSingleHandler = option => { const optionValue: string = option.value; } - private inputRenderer: ReactSelect.InputRendererHandler = props => { + private inputRenderer: ReactSelectModule.InputRendererHandler = props => { return ; } @@ -332,8 +331,8 @@ describe("Examples", () => { }); it("Option render with custom value option", () => { - const optionRenderer = (option: ReactSelect.Option): ReactSelect.HandlerRendererResult => - null; + const optionRenderer = (option: ReactSelectModule.Option): ReactSelectModule.HandlerRendererResult => + null; { }); it("Value render with custom value option", () => { - const valueRenderer = (option: ReactSelect.Option): ReactSelect.HandlerRendererResult => - null; + const valueRenderer = (option: ReactSelectModule.Option): ReactSelectModule.HandlerRendererResult => + null;