Do not omit the anyFunctionType from intersections (#35658)
* Do not omit the anyFunctionType from intersections * Move check into isEmptyResolvedType
This commit is contained in:
parent
d044e0680a
commit
88677de380
|
@ -14410,7 +14410,8 @@ namespace ts {
|
||||||
}
|
}
|
||||||
|
|
||||||
function isEmptyResolvedType(t: ResolvedType) {
|
function isEmptyResolvedType(t: ResolvedType) {
|
||||||
return t.properties.length === 0 &&
|
return t !== anyFunctionType &&
|
||||||
|
t.properties.length === 0 &&
|
||||||
t.callSignatures.length === 0 &&
|
t.callSignatures.length === 0 &&
|
||||||
t.constructSignatures.length === 0 &&
|
t.constructSignatures.length === 0 &&
|
||||||
!t.stringIndexInfo &&
|
!t.stringIndexInfo &&
|
||||||
|
|
|
@ -0,0 +1,636 @@
|
||||||
|
//// [jsxComplexSignatureHasApplicabilityError.tsx]
|
||||||
|
/// <reference path="/.lib/react16.d.ts" />
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
|
||||||
|
interface Props<T extends OptionValues> {
|
||||||
|
value?: Option<T> | T;
|
||||||
|
onChange?(value: Option<T> | undefined): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ExtractValueType<T> = T extends ReactSelectProps<infer U> ? U : never;
|
||||||
|
|
||||||
|
export type ReactSingleSelectProps<
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
> = Overwrite<
|
||||||
|
Omit<WrappedProps, "multi">,
|
||||||
|
Props<ExtractValueType<WrappedProps>>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export function createReactSingleSelect<
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
>(
|
||||||
|
WrappedComponent: React.ComponentType<WrappedProps>
|
||||||
|
): React.ComponentType<ReactSingleSelectProps<WrappedProps>> {
|
||||||
|
return (props) => {
|
||||||
|
return (
|
||||||
|
<ReactSelectClass<ExtractValueType<WrappedProps>>
|
||||||
|
{...props}
|
||||||
|
multi={false}
|
||||||
|
autosize={false}
|
||||||
|
value={props.value}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (props.onChange) {
|
||||||
|
props.onChange(value === null ? undefined : value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Copied from "type-zoo" version 3.4.0
|
||||||
|
export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
|
||||||
|
export type Overwrite<T, U> = Omit<T, keyof T & keyof U> & U;
|
||||||
|
|
||||||
|
// Everything below here copied from "@types/react-select" version 1.3.4
|
||||||
|
declare class ReactSelectClass<TValue = OptionValues> extends React.Component<ReactSelectProps<TValue>> {
|
||||||
|
focus(): void;
|
||||||
|
setValue(value: Option<TValue>): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OptionComponentType<TValue = OptionValues> = React.ComponentType<OptionComponentProps<TValue>>;
|
||||||
|
export type ValueComponentType<TValue = OptionValues> = React.ComponentType<ValueComponentProps<TValue>>;
|
||||||
|
|
||||||
|
export type HandlerRendererResult = JSX.Element | null | false;
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
export type FocusOptionHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
export type SelectValueHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
export type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult;
|
||||||
|
export type ClearRendererHandler = () => HandlerRendererResult;
|
||||||
|
export type FilterOptionHandler<TValue = OptionValues> = (option: Option<TValue>, filter: string) => boolean;
|
||||||
|
export type FilterOptionsHandler<TValue = OptionValues> = (options: Options<TValue>, filter: string, currentValues: Options<TValue>) => Options<TValue>;
|
||||||
|
export type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult;
|
||||||
|
export type MenuRendererHandler<TValue = OptionValues> = (props: MenuRendererProps<TValue>) => HandlerRendererResult;
|
||||||
|
export type OnCloseHandler = () => void;
|
||||||
|
export type OnInputChangeHandler = (inputValue: string) => string;
|
||||||
|
export type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OnMenuScrollToBottomHandler = () => void;
|
||||||
|
export type OnOpenHandler = () => void;
|
||||||
|
export type OnFocusHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OptionRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
|
||||||
|
export type ValueRendererHandler<TValue = OptionValues> = (option: Option<TValue>, index?: number) => HandlerRendererResult;
|
||||||
|
export type OnValueClickHandler<TValue = OptionValues> = (option: Option<TValue>, event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||||
|
export type IsOptionUniqueHandler<TValue = OptionValues> = (arg: { option: Option<TValue>, options: Options<TValue>, labelKey: string, valueKey: string }) => boolean;
|
||||||
|
export type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
|
||||||
|
export type NewOptionCreatorHandler<TValue = OptionValues> = (arg: { label: string, labelKey: string, valueKey: string }) => Option<TValue>;
|
||||||
|
export type PromptTextCreatorHandler = (filterText: string) => string;
|
||||||
|
export type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
|
||||||
|
|
||||||
|
export type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Option<TValue>>;
|
||||||
|
export type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Options<TValue>>;
|
||||||
|
export type OnChangeHandler<TValue = OptionValues, TOption = Option<TValue> | Options<TValue>> = (newValue: TOption | null) => void;
|
||||||
|
export type OnNewOptionClickHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
|
||||||
|
export type LoadOptionsHandler<TValue = OptionValues> = LoadOptionsAsyncHandler<TValue> | LoadOptionsLegacyHandler<TValue>;
|
||||||
|
export type LoadOptionsAsyncHandler<TValue = OptionValues> = (input: string) => Promise<AutocompleteResult<TValue>>;
|
||||||
|
export type LoadOptionsLegacyHandler<TValue = OptionValues> = (input: string, callback: (err: any, result: AutocompleteResult<TValue>) => void) => void;
|
||||||
|
|
||||||
|
export interface AutocompleteResult<TValue = OptionValues> {
|
||||||
|
/** The search-results to be displayed */
|
||||||
|
options: Options<TValue>;
|
||||||
|
/**
|
||||||
|
* 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<TValue = OptionValues> = Array<Option<TValue>>;
|
||||||
|
|
||||||
|
export 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;
|
||||||
|
/**
|
||||||
|
* 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<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* The currently focused option; should be visible in the menu by default.
|
||||||
|
* default {}
|
||||||
|
*/
|
||||||
|
focusedOption: Option<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to focus a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
focusOption: FocusOptionHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option labels are accessible with this string key.
|
||||||
|
*/
|
||||||
|
labelKey: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ordered array of options to render.
|
||||||
|
*/
|
||||||
|
options: Options<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to select a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
selectValue: SelectValueHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Array of currently selected options.
|
||||||
|
*/
|
||||||
|
valueArray: Options<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to remove selection from option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
removeValue: SelectValueHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer: OptionRendererHandler<TValue>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OptionComponentProps<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* Classname(s) to apply to the option component.
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Currently focused option.
|
||||||
|
*/
|
||||||
|
focusOption?: Option<TValue>;
|
||||||
|
|
||||||
|
inputValue?: string;
|
||||||
|
instancePrefix?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is disabled.
|
||||||
|
*/
|
||||||
|
isDisabled?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is focused.
|
||||||
|
*/
|
||||||
|
isFocused?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is selected.
|
||||||
|
*/
|
||||||
|
isSelected?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is focused.
|
||||||
|
*/
|
||||||
|
onFocus?: (option: Option<TValue>, event: any) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is selected.
|
||||||
|
*/
|
||||||
|
onSelect?: (option: Option<TValue>, event: any) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option to be rendered by this component.
|
||||||
|
*/
|
||||||
|
option: Option<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index of the option being rendered in the list
|
||||||
|
*/
|
||||||
|
optionIndex?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke when removing an option from a multi-selection. (Not necessarily the one
|
||||||
|
* being rendered)
|
||||||
|
*/
|
||||||
|
removeValue?: (value: TValue | TValue[]) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke to select an option. (Not necessarily the one being rendered)
|
||||||
|
*/
|
||||||
|
selectValue?: (value: TValue | TValue[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ArrowRendererProps {
|
||||||
|
/**
|
||||||
|
* Arrow mouse down event handler.
|
||||||
|
*/
|
||||||
|
onMouseDown: React.MouseEventHandler<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the Select is open or not.
|
||||||
|
*/
|
||||||
|
isOpen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValueComponentProps<TValue = OptionValues> {
|
||||||
|
disabled: ReactSelectProps<TValue>['disabled'];
|
||||||
|
id: string;
|
||||||
|
instancePrefix: string;
|
||||||
|
onClick: OnValueClickHandler<TValue> | null;
|
||||||
|
onRemove?: SelectValueHandler<TValue>;
|
||||||
|
placeholder: ReactSelectProps<TValue>['placeholder'];
|
||||||
|
value: Option<TValue>;
|
||||||
|
values?: Array<Option<TValue>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReactSelectProps<TValue = OptionValues> extends React.Props<ReactSelectClass<TValue>> {
|
||||||
|
/**
|
||||||
|
* 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 | null;
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* @deprecated. Use autoFocus instead
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autofocus?: 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;
|
||||||
|
/**
|
||||||
|
* Prefix prepended to element default className if no className is defined
|
||||||
|
*/
|
||||||
|
classNamePrefix?: string;
|
||||||
|
/**
|
||||||
|
* title for the "clear" control when `multi` is true
|
||||||
|
* @default "Clear all"
|
||||||
|
*/
|
||||||
|
clearAllText?: string;
|
||||||
|
/**
|
||||||
|
* Renders a custom clear to be shown in the right-hand side of the select when clearable true
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
clearRenderer?: ClearRendererHandler;
|
||||||
|
/**
|
||||||
|
* title for the "clear" control
|
||||||
|
* @default "Clear value"
|
||||||
|
*/
|
||||||
|
clearValueText?: string;
|
||||||
|
/**
|
||||||
|
* whether to close the menu when a value is selected
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
closeOnSelect?: boolean;
|
||||||
|
/**
|
||||||
|
* 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<TValue>;
|
||||||
|
/**
|
||||||
|
* method to filter the options array
|
||||||
|
*/
|
||||||
|
filterOptions?: FilterOptionsHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* id for the underlying HTML input element
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
id?: string;
|
||||||
|
/**
|
||||||
|
* 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<TValue>;
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
/**
|
||||||
|
* whether the input value should be reset when options are selected.
|
||||||
|
* Also input value will be set to empty if 'onSelectResetsInput=true' and
|
||||||
|
* Select will get new value that not equal previous value.
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onSelectResetsInput?: boolean;
|
||||||
|
/**
|
||||||
|
* whether to clear input when closing the menu through the arrow
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onCloseResetsInput?: boolean;
|
||||||
|
/**
|
||||||
|
* onChange handler: function (newValue) {}
|
||||||
|
*/
|
||||||
|
onChange?: OnChangeHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
*/
|
||||||
|
openOnClick?: boolean;
|
||||||
|
/**
|
||||||
|
* open the options menu when the input gets focus (requires searchable = true)
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
openOnFocus?: boolean;
|
||||||
|
/**
|
||||||
|
* className to add to each option component
|
||||||
|
*/
|
||||||
|
optionClassName?: string;
|
||||||
|
/**
|
||||||
|
* option component to render in dropdown
|
||||||
|
*/
|
||||||
|
optionComponent?: OptionComponentType<TValue>;
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer?: OptionRendererHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* array of Select options
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
options?: Options<TValue>;
|
||||||
|
/**
|
||||||
|
* number of options to jump when using page up/down keys
|
||||||
|
* @default 5
|
||||||
|
*/
|
||||||
|
pageSize?: number;
|
||||||
|
/**
|
||||||
|
* field placeholder, displayed when there's no value
|
||||||
|
* @default "Select..."
|
||||||
|
*/
|
||||||
|
placeholder?: string | JSX.Element;
|
||||||
|
/**
|
||||||
|
* whether the selected option is removed from the dropdown on multi selects
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
removeSelected?: boolean;
|
||||||
|
/**
|
||||||
|
* applies HTML5 required attribute when needed
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
required?: boolean;
|
||||||
|
/**
|
||||||
|
* value to use when you clear the control
|
||||||
|
*/
|
||||||
|
resetValue?: any;
|
||||||
|
/**
|
||||||
|
* use react-select in right-to-left direction
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
rtl?: boolean;
|
||||||
|
/**
|
||||||
|
* 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<TValue> | Options<TValue> | 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<TValue>;
|
||||||
|
/**
|
||||||
|
* optional style to apply to the control
|
||||||
|
*/
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional tab index of the control
|
||||||
|
*/
|
||||||
|
tabIndex?: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* value component to render
|
||||||
|
*/
|
||||||
|
valueComponent?: ValueComponentType<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the component wrapper
|
||||||
|
*/
|
||||||
|
wrapperStyle?: React.CSSProperties;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onClick handler for value labels: function (value, event) {}
|
||||||
|
*/
|
||||||
|
onValueClick?: OnValueClickHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
||||||
|
*/
|
||||||
|
simpleValue?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//// [jsxComplexSignatureHasApplicabilityError.js]
|
||||||
|
"use strict";
|
||||||
|
/// <reference path="react16.d.ts" />
|
||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
exports.__esModule = true;
|
||||||
|
var React = require("react");
|
||||||
|
function createReactSingleSelect(WrappedComponent) {
|
||||||
|
return function (props) {
|
||||||
|
return (React.createElement(ReactSelectClass, __assign({}, props, { multi: false, autosize: false, value: props.value, onChange: function (value) {
|
||||||
|
if (props.onChange) {
|
||||||
|
props.onChange(value === null ? undefined : value);
|
||||||
|
}
|
||||||
|
} })));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
exports.createReactSingleSelect = createReactSingleSelect;
|
File diff suppressed because it is too large
Load diff
|
@ -0,0 +1,997 @@
|
||||||
|
=== tests/cases/compiler/jsxComplexSignatureHasApplicabilityError.tsx ===
|
||||||
|
/// <reference path="react16.d.ts" />
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
>React : typeof React
|
||||||
|
|
||||||
|
|
||||||
|
interface Props<T extends OptionValues> {
|
||||||
|
value?: Option<T> | T;
|
||||||
|
>value : T | Option<T> | undefined
|
||||||
|
|
||||||
|
onChange?(value: Option<T> | undefined): void;
|
||||||
|
>onChange : ((value: Option<T> | undefined) => void) | undefined
|
||||||
|
>value : Option<T> | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
type ExtractValueType<T> = T extends ReactSelectProps<infer U> ? U : never;
|
||||||
|
>ExtractValueType : ExtractValueType<T>
|
||||||
|
|
||||||
|
export type ReactSingleSelectProps<
|
||||||
|
>ReactSingleSelectProps : Overwrite<Omit<WrappedProps, "multi">, Props<ExtractValueType<WrappedProps>>>
|
||||||
|
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
> = Overwrite<
|
||||||
|
Omit<WrappedProps, "multi">,
|
||||||
|
Props<ExtractValueType<WrappedProps>>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export function createReactSingleSelect<
|
||||||
|
>createReactSingleSelect : <WrappedProps extends ReactSelectProps<any>>(WrappedComponent: React.ComponentType<WrappedProps>) => React.ComponentType<Overwrite<Omit<WrappedProps, "multi">, Props<ExtractValueType<WrappedProps>>>>
|
||||||
|
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
>(
|
||||||
|
WrappedComponent: React.ComponentType<WrappedProps>
|
||||||
|
>WrappedComponent : React.ComponentType<WrappedProps>
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
): React.ComponentType<ReactSingleSelectProps<WrappedProps>> {
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
return (props) => {
|
||||||
|
>(props) => { return ( <ReactSelectClass<ExtractValueType<WrappedProps>> {...props} multi={false} autosize={false} value={props.value} onChange={(value) => { if (props.onChange) { props.onChange(value === null ? undefined : value); } }} /> ); } : (props: Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }) => JSX.Element
|
||||||
|
>props : Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }
|
||||||
|
|
||||||
|
return (
|
||||||
|
>( <ReactSelectClass<ExtractValueType<WrappedProps>> {...props} multi={false} autosize={false} value={props.value} onChange={(value) => { if (props.onChange) { props.onChange(value === null ? undefined : value); } }} /> ) : JSX.Element
|
||||||
|
|
||||||
|
<ReactSelectClass<ExtractValueType<WrappedProps>>
|
||||||
|
><ReactSelectClass<ExtractValueType<WrappedProps>> {...props} multi={false} autosize={false} value={props.value} onChange={(value) => { if (props.onChange) { props.onChange(value === null ? undefined : value); } }} /> : JSX.Element
|
||||||
|
>ReactSelectClass : typeof ReactSelectClass
|
||||||
|
|
||||||
|
{...props}
|
||||||
|
>props : Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }
|
||||||
|
|
||||||
|
multi={false}
|
||||||
|
>multi : false
|
||||||
|
>false : false
|
||||||
|
|
||||||
|
autosize={false}
|
||||||
|
>autosize : false
|
||||||
|
>false : false
|
||||||
|
|
||||||
|
value={props.value}
|
||||||
|
>value : ExtractValueType<WrappedProps> | Option<ExtractValueType<WrappedProps>> | undefined
|
||||||
|
>props.value : ExtractValueType<WrappedProps> | Option<ExtractValueType<WrappedProps>> | undefined
|
||||||
|
>props : Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }
|
||||||
|
>value : ExtractValueType<WrappedProps> | Option<ExtractValueType<WrappedProps>> | undefined
|
||||||
|
|
||||||
|
onChange={(value) => {
|
||||||
|
>onChange : (value: Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>> | null) => void
|
||||||
|
>(value) => { if (props.onChange) { props.onChange(value === null ? undefined : value); } } : (value: Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>> | null) => void
|
||||||
|
>value : Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>> | null
|
||||||
|
|
||||||
|
if (props.onChange) {
|
||||||
|
>props.onChange : ((value: Option<ExtractValueType<WrappedProps>> | undefined) => void) | undefined
|
||||||
|
>props : Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }
|
||||||
|
>onChange : ((value: Option<ExtractValueType<WrappedProps>> | undefined) => void) | undefined
|
||||||
|
|
||||||
|
props.onChange(value === null ? undefined : value);
|
||||||
|
>props.onChange(value === null ? undefined : value) : void
|
||||||
|
>props.onChange : (value: Option<ExtractValueType<WrappedProps>> | undefined) => void
|
||||||
|
>props : Omit<Omit<WrappedProps, "multi">, (keyof Omit<WrappedProps, "multi"> & "value") | (keyof Omit<WrappedProps, "multi"> & "onChange")> & Props<ExtractValueType<WrappedProps>> & { children?: React.ReactNode; }
|
||||||
|
>onChange : (value: Option<ExtractValueType<WrappedProps>> | undefined) => void
|
||||||
|
>value === null ? undefined : value : Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>> | undefined
|
||||||
|
>value === null : boolean
|
||||||
|
>value : Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>> | null
|
||||||
|
>null : null
|
||||||
|
>undefined : undefined
|
||||||
|
>value : Option<ExtractValueType<WrappedProps>> | Options<ExtractValueType<WrappedProps>>
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Copied from "type-zoo" version 3.4.0
|
||||||
|
export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
|
||||||
|
>Omit : Omit<T, K>
|
||||||
|
|
||||||
|
export type Overwrite<T, U> = Omit<T, keyof T & keyof U> & U;
|
||||||
|
>Overwrite : Overwrite<T, U>
|
||||||
|
|
||||||
|
// Everything below here copied from "@types/react-select" version 1.3.4
|
||||||
|
declare class ReactSelectClass<TValue = OptionValues> extends React.Component<ReactSelectProps<TValue>> {
|
||||||
|
>ReactSelectClass : ReactSelectClass<TValue>
|
||||||
|
>React.Component : React.Component<ReactSelectProps<TValue>, {}, any>
|
||||||
|
>React : typeof React
|
||||||
|
>Component : typeof React.Component
|
||||||
|
|
||||||
|
focus(): void;
|
||||||
|
>focus : () => void
|
||||||
|
|
||||||
|
setValue(value: Option<TValue>): void;
|
||||||
|
>setValue : (value: Option<TValue>) => void
|
||||||
|
>value : Option<TValue>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OptionComponentType<TValue = OptionValues> = React.ComponentType<OptionComponentProps<TValue>>;
|
||||||
|
>OptionComponentType : React.ComponentType<OptionComponentProps<TValue>>
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type ValueComponentType<TValue = OptionValues> = React.ComponentType<ValueComponentProps<TValue>>;
|
||||||
|
>ValueComponentType : React.ComponentType<ValueComponentProps<TValue>>
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type HandlerRendererResult = JSX.Element | null | false;
|
||||||
|
>HandlerRendererResult : HandlerRendererResult
|
||||||
|
>JSX : any
|
||||||
|
>null : null
|
||||||
|
>false : false
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
export type FocusOptionHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
>FocusOptionHandler : FocusOptionHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
|
||||||
|
export type SelectValueHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
>SelectValueHandler : SelectValueHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
|
||||||
|
export type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult;
|
||||||
|
>ArrowRendererHandler : ArrowRendererHandler
|
||||||
|
>props : ArrowRendererProps
|
||||||
|
|
||||||
|
export type ClearRendererHandler = () => HandlerRendererResult;
|
||||||
|
>ClearRendererHandler : ClearRendererHandler
|
||||||
|
|
||||||
|
export type FilterOptionHandler<TValue = OptionValues> = (option: Option<TValue>, filter: string) => boolean;
|
||||||
|
>FilterOptionHandler : FilterOptionHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
>filter : string
|
||||||
|
|
||||||
|
export type FilterOptionsHandler<TValue = OptionValues> = (options: Options<TValue>, filter: string, currentValues: Options<TValue>) => Options<TValue>;
|
||||||
|
>FilterOptionsHandler : FilterOptionsHandler<TValue>
|
||||||
|
>options : Options<TValue>
|
||||||
|
>filter : string
|
||||||
|
>currentValues : Options<TValue>
|
||||||
|
|
||||||
|
export type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult;
|
||||||
|
>InputRendererHandler : InputRendererHandler
|
||||||
|
>props : { [key: string]: any; }
|
||||||
|
>key : string
|
||||||
|
|
||||||
|
export type MenuRendererHandler<TValue = OptionValues> = (props: MenuRendererProps<TValue>) => HandlerRendererResult;
|
||||||
|
>MenuRendererHandler : MenuRendererHandler<TValue>
|
||||||
|
>props : MenuRendererProps<TValue>
|
||||||
|
|
||||||
|
export type OnCloseHandler = () => void;
|
||||||
|
>OnCloseHandler : OnCloseHandler
|
||||||
|
|
||||||
|
export type OnInputChangeHandler = (inputValue: string) => string;
|
||||||
|
>OnInputChangeHandler : OnInputChangeHandler
|
||||||
|
>inputValue : string
|
||||||
|
|
||||||
|
export type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
>OnInputKeyDownHandler : (event: React.KeyboardEvent<HTMLDivElement | HTMLInputElement>) => void
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type OnMenuScrollToBottomHandler = () => void;
|
||||||
|
>OnMenuScrollToBottomHandler : OnMenuScrollToBottomHandler
|
||||||
|
|
||||||
|
export type OnOpenHandler = () => void;
|
||||||
|
>OnOpenHandler : OnOpenHandler
|
||||||
|
|
||||||
|
export type OnFocusHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
>OnFocusHandler : (event: React.FocusEvent<HTMLDivElement | HTMLInputElement>) => void
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
>OnBlurHandler : (event: React.FocusEvent<HTMLDivElement | HTMLInputElement>) => void
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type OptionRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
|
||||||
|
>OptionRendererHandler : OptionRendererHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
|
||||||
|
export type ValueRendererHandler<TValue = OptionValues> = (option: Option<TValue>, index?: number) => HandlerRendererResult;
|
||||||
|
>ValueRendererHandler : ValueRendererHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
>index : number | undefined
|
||||||
|
|
||||||
|
export type OnValueClickHandler<TValue = OptionValues> = (option: Option<TValue>, event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||||
|
>OnValueClickHandler : OnValueClickHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
>event : React.MouseEvent<HTMLAnchorElement>
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
export type IsOptionUniqueHandler<TValue = OptionValues> = (arg: { option: Option<TValue>, options: Options<TValue>, labelKey: string, valueKey: string }) => boolean;
|
||||||
|
>IsOptionUniqueHandler : IsOptionUniqueHandler<TValue>
|
||||||
|
>arg : { option: Option<TValue>; options: Options<TValue>; labelKey: string; valueKey: string; }
|
||||||
|
>option : Option<TValue>
|
||||||
|
>options : Options<TValue>
|
||||||
|
>labelKey : string
|
||||||
|
>valueKey : string
|
||||||
|
|
||||||
|
export type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
|
||||||
|
>IsValidNewOptionHandler : IsValidNewOptionHandler
|
||||||
|
>arg : { label: string; }
|
||||||
|
>label : string
|
||||||
|
|
||||||
|
export type NewOptionCreatorHandler<TValue = OptionValues> = (arg: { label: string, labelKey: string, valueKey: string }) => Option<TValue>;
|
||||||
|
>NewOptionCreatorHandler : NewOptionCreatorHandler<TValue>
|
||||||
|
>arg : { label: string; labelKey: string; valueKey: string; }
|
||||||
|
>label : string
|
||||||
|
>labelKey : string
|
||||||
|
>valueKey : string
|
||||||
|
|
||||||
|
export type PromptTextCreatorHandler = (filterText: string) => string;
|
||||||
|
>PromptTextCreatorHandler : PromptTextCreatorHandler
|
||||||
|
>filterText : string
|
||||||
|
|
||||||
|
export type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
|
||||||
|
>ShouldKeyDownEventCreateNewOptionHandler : ShouldKeyDownEventCreateNewOptionHandler
|
||||||
|
>arg : { keyCode: number; }
|
||||||
|
>keyCode : number
|
||||||
|
|
||||||
|
export type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Option<TValue>>;
|
||||||
|
>OnChangeSingleHandler : OnChangeHandler<TValue, Option<TValue>>
|
||||||
|
|
||||||
|
export type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Options<TValue>>;
|
||||||
|
>OnChangeMultipleHandler : OnChangeHandler<TValue, Options<TValue>>
|
||||||
|
|
||||||
|
export type OnChangeHandler<TValue = OptionValues, TOption = Option<TValue> | Options<TValue>> = (newValue: TOption | null) => void;
|
||||||
|
>OnChangeHandler : OnChangeHandler<TValue, TOption>
|
||||||
|
>newValue : TOption | null
|
||||||
|
>null : null
|
||||||
|
|
||||||
|
export type OnNewOptionClickHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
>OnNewOptionClickHandler : OnNewOptionClickHandler<TValue>
|
||||||
|
>option : Option<TValue>
|
||||||
|
|
||||||
|
export type LoadOptionsHandler<TValue = OptionValues> = LoadOptionsAsyncHandler<TValue> | LoadOptionsLegacyHandler<TValue>;
|
||||||
|
>LoadOptionsHandler : LoadOptionsHandler<TValue>
|
||||||
|
|
||||||
|
export type LoadOptionsAsyncHandler<TValue = OptionValues> = (input: string) => Promise<AutocompleteResult<TValue>>;
|
||||||
|
>LoadOptionsAsyncHandler : LoadOptionsAsyncHandler<TValue>
|
||||||
|
>input : string
|
||||||
|
|
||||||
|
export type LoadOptionsLegacyHandler<TValue = OptionValues> = (input: string, callback: (err: any, result: AutocompleteResult<TValue>) => void) => void;
|
||||||
|
>LoadOptionsLegacyHandler : LoadOptionsLegacyHandler<TValue>
|
||||||
|
>input : string
|
||||||
|
>callback : (err: any, result: AutocompleteResult<TValue>) => void
|
||||||
|
>err : any
|
||||||
|
>result : AutocompleteResult<TValue>
|
||||||
|
|
||||||
|
export interface AutocompleteResult<TValue = OptionValues> {
|
||||||
|
/** The search-results to be displayed */
|
||||||
|
options: Options<TValue>;
|
||||||
|
>options : Options<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
>complete : boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Options<TValue = OptionValues> = Array<Option<TValue>>;
|
||||||
|
>Options : Options<TValue>
|
||||||
|
|
||||||
|
export interface Option<TValue = OptionValues> {
|
||||||
|
/** Text for rendering */
|
||||||
|
label?: string;
|
||||||
|
>label : string | undefined
|
||||||
|
|
||||||
|
/** Value for searching */
|
||||||
|
value?: TValue;
|
||||||
|
>value : TValue | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow this option to be cleared
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
clearableValue?: boolean;
|
||||||
|
>clearableValue : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Do not allow this option to be selected
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
disabled?: boolean;
|
||||||
|
>disabled : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
>property : string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OptionValues = string | number | boolean;
|
||||||
|
>OptionValues : OptionValues
|
||||||
|
|
||||||
|
export interface MenuRendererProps<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* The currently focused option; should be visible in the menu by default.
|
||||||
|
* default {}
|
||||||
|
*/
|
||||||
|
focusedOption: Option<TValue>;
|
||||||
|
>focusedOption : Option<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to focus a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
focusOption: FocusOptionHandler<TValue>;
|
||||||
|
>focusOption : FocusOptionHandler<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option labels are accessible with this string key.
|
||||||
|
*/
|
||||||
|
labelKey: string;
|
||||||
|
>labelKey : string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ordered array of options to render.
|
||||||
|
*/
|
||||||
|
options: Options<TValue>;
|
||||||
|
>options : Options<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to select a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
selectValue: SelectValueHandler<TValue>;
|
||||||
|
>selectValue : SelectValueHandler<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Array of currently selected options.
|
||||||
|
*/
|
||||||
|
valueArray: Options<TValue>;
|
||||||
|
>valueArray : Options<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to remove selection from option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
removeValue: SelectValueHandler<TValue>;
|
||||||
|
>removeValue : SelectValueHandler<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer: OptionRendererHandler<TValue>;
|
||||||
|
>optionRenderer : OptionRendererHandler<TValue>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OptionComponentProps<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* Classname(s) to apply to the option component.
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
>className : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Currently focused option.
|
||||||
|
*/
|
||||||
|
focusOption?: Option<TValue>;
|
||||||
|
>focusOption : Option<TValue> | undefined
|
||||||
|
|
||||||
|
inputValue?: string;
|
||||||
|
>inputValue : string | undefined
|
||||||
|
|
||||||
|
instancePrefix?: string;
|
||||||
|
>instancePrefix : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is disabled.
|
||||||
|
*/
|
||||||
|
isDisabled?: boolean;
|
||||||
|
>isDisabled : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is focused.
|
||||||
|
*/
|
||||||
|
isFocused?: boolean;
|
||||||
|
>isFocused : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is selected.
|
||||||
|
*/
|
||||||
|
isSelected?: boolean;
|
||||||
|
>isSelected : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is focused.
|
||||||
|
*/
|
||||||
|
onFocus?: (option: Option<TValue>, event: any) => void;
|
||||||
|
>onFocus : ((option: Option<TValue>, event: any) => void) | undefined
|
||||||
|
>option : Option<TValue>
|
||||||
|
>event : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is selected.
|
||||||
|
*/
|
||||||
|
onSelect?: (option: Option<TValue>, event: any) => void;
|
||||||
|
>onSelect : ((option: Option<TValue>, event: any) => void) | undefined
|
||||||
|
>option : Option<TValue>
|
||||||
|
>event : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option to be rendered by this component.
|
||||||
|
*/
|
||||||
|
option: Option<TValue>;
|
||||||
|
>option : Option<TValue>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index of the option being rendered in the list
|
||||||
|
*/
|
||||||
|
optionIndex?: number;
|
||||||
|
>optionIndex : number | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke when removing an option from a multi-selection. (Not necessarily the one
|
||||||
|
* being rendered)
|
||||||
|
*/
|
||||||
|
removeValue?: (value: TValue | TValue[]) => void;
|
||||||
|
>removeValue : ((value: TValue | TValue[]) => void) | undefined
|
||||||
|
>value : TValue | TValue[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke to select an option. (Not necessarily the one being rendered)
|
||||||
|
*/
|
||||||
|
selectValue?: (value: TValue | TValue[]) => void;
|
||||||
|
>selectValue : ((value: TValue | TValue[]) => void) | undefined
|
||||||
|
>value : TValue | TValue[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ArrowRendererProps {
|
||||||
|
/**
|
||||||
|
* Arrow mouse down event handler.
|
||||||
|
*/
|
||||||
|
onMouseDown: React.MouseEventHandler<any>;
|
||||||
|
>onMouseDown : (event: React.MouseEvent<any>) => void
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the Select is open or not.
|
||||||
|
*/
|
||||||
|
isOpen: boolean;
|
||||||
|
>isOpen : boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValueComponentProps<TValue = OptionValues> {
|
||||||
|
disabled: ReactSelectProps<TValue>['disabled'];
|
||||||
|
>disabled : boolean | undefined
|
||||||
|
|
||||||
|
id: string;
|
||||||
|
>id : string
|
||||||
|
|
||||||
|
instancePrefix: string;
|
||||||
|
>instancePrefix : string
|
||||||
|
|
||||||
|
onClick: OnValueClickHandler<TValue> | null;
|
||||||
|
>onClick : OnValueClickHandler<TValue> | null
|
||||||
|
>null : null
|
||||||
|
|
||||||
|
onRemove?: SelectValueHandler<TValue>;
|
||||||
|
>onRemove : SelectValueHandler<TValue> | undefined
|
||||||
|
|
||||||
|
placeholder: ReactSelectProps<TValue>['placeholder'];
|
||||||
|
>placeholder : string | JSX.Element | undefined
|
||||||
|
|
||||||
|
value: Option<TValue>;
|
||||||
|
>value : Option<TValue>
|
||||||
|
|
||||||
|
values?: Array<Option<TValue>>;
|
||||||
|
>values : Option<TValue>[] | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReactSelectProps<TValue = OptionValues> extends React.Props<ReactSelectClass<TValue>> {
|
||||||
|
>React : typeof React
|
||||||
|
|
||||||
|
/**
|
||||||
|
* text to display when `allowCreate` is true.
|
||||||
|
* @default 'Add "{label}"?'
|
||||||
|
*/
|
||||||
|
addLabelText?: string;
|
||||||
|
>addLabelText : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* renders a custom drop-down arrow to be shown in the right-hand side of the select.
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
arrowRenderer?: ArrowRendererHandler | null;
|
||||||
|
>arrowRenderer : ArrowRendererHandler | null | undefined
|
||||||
|
>null : null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices.
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autoBlur?: boolean;
|
||||||
|
>autoBlur : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* autofocus the component on mount
|
||||||
|
* @deprecated. Use autoFocus instead
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autofocus?: boolean;
|
||||||
|
>autofocus : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* autofocus the component on mount
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autoFocus?: boolean;
|
||||||
|
>autoFocus : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If enabled, the input will expand as the length of its value increases
|
||||||
|
*/
|
||||||
|
autosize?: boolean;
|
||||||
|
>autosize : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether pressing backspace removes the last item when there is no input value
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
backspaceRemoves?: boolean;
|
||||||
|
>backspaceRemoves : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
>backspaceToRemoveMessage : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CSS className for the outer element
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
>className : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prefix prepended to element default className if no className is defined
|
||||||
|
*/
|
||||||
|
classNamePrefix?: string;
|
||||||
|
>classNamePrefix : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* title for the "clear" control when `multi` is true
|
||||||
|
* @default "Clear all"
|
||||||
|
*/
|
||||||
|
clearAllText?: string;
|
||||||
|
>clearAllText : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a custom clear to be shown in the right-hand side of the select when clearable true
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
clearRenderer?: ClearRendererHandler;
|
||||||
|
>clearRenderer : ClearRendererHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* title for the "clear" control
|
||||||
|
* @default "Clear value"
|
||||||
|
*/
|
||||||
|
clearValueText?: string;
|
||||||
|
>clearValueText : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to close the menu when a value is selected
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
closeOnSelect?: boolean;
|
||||||
|
>closeOnSelect : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether it is possible to reset value. if enabled, an X button will appear at the right side.
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
clearable?: boolean;
|
||||||
|
>clearable : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether backspace removes an item if there is no text input
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
deleteRemoves?: boolean;
|
||||||
|
>deleteRemoves : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* delimiter to use to join multiple values
|
||||||
|
* @default ","
|
||||||
|
*/
|
||||||
|
delimiter?: string;
|
||||||
|
>delimiter : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the Select is disabled or not
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
disabled?: boolean;
|
||||||
|
>disabled : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether escape clears the value when the menu is closed
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
escapeClearsValue?: boolean;
|
||||||
|
>escapeClearsValue : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* method to filter a single option
|
||||||
|
*/
|
||||||
|
filterOption?: FilterOptionHandler<TValue>;
|
||||||
|
>filterOption : FilterOptionHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* method to filter the options array
|
||||||
|
*/
|
||||||
|
filterOptions?: FilterOptionsHandler<TValue>;
|
||||||
|
>filterOptions : FilterOptionsHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* id for the underlying HTML input element
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
id?: string;
|
||||||
|
>id : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to strip diacritics when filtering
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
ignoreAccents?: boolean;
|
||||||
|
>ignoreAccents : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to perform case-insensitive filtering
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
ignoreCase?: boolean;
|
||||||
|
>ignoreCase : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
|
||||||
|
* @default {}
|
||||||
|
*/
|
||||||
|
inputProps?: { [key: string]: any };
|
||||||
|
>inputProps : { [key: string]: any; } | undefined
|
||||||
|
>key : string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* renders a custom input
|
||||||
|
*/
|
||||||
|
inputRenderer?: InputRendererHandler;
|
||||||
|
>inputRenderer : InputRendererHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* allows for synchronization of component id's on server and client.
|
||||||
|
* @see https://github.com/JedWatson/react-select/pull/1105
|
||||||
|
*/
|
||||||
|
instanceId?: string;
|
||||||
|
>instanceId : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
>isLoading : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (legacy mode) joins multiple values into a single form field with the delimiter
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
joinValues?: boolean;
|
||||||
|
>joinValues : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* the option property to use for the label
|
||||||
|
* @default "label"
|
||||||
|
*/
|
||||||
|
labelKey?: string;
|
||||||
|
>labelKey : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (any, start) match the start or entire string when filtering
|
||||||
|
* @default "any"
|
||||||
|
*/
|
||||||
|
matchPos?: string;
|
||||||
|
>matchPos : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (any, label, value) which option property to filter on
|
||||||
|
* @default "any"
|
||||||
|
*/
|
||||||
|
matchProp?: string;
|
||||||
|
>matchProp : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* buffer of px between the base of the dropdown and the viewport to shift if menu doesnt fit in viewport
|
||||||
|
* @default 0
|
||||||
|
*/
|
||||||
|
menuBuffer?: number;
|
||||||
|
>menuBuffer : number | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the menu container
|
||||||
|
*/
|
||||||
|
menuContainerStyle?: React.CSSProperties;
|
||||||
|
>menuContainerStyle : React.CSSProperties | undefined
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* renders a custom menu with options
|
||||||
|
*/
|
||||||
|
menuRenderer?: MenuRendererHandler<TValue>;
|
||||||
|
>menuRenderer : MenuRendererHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the menu
|
||||||
|
*/
|
||||||
|
menuStyle?: React.CSSProperties;
|
||||||
|
>menuStyle : React.CSSProperties | undefined
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* multi-value input
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
multi?: boolean;
|
||||||
|
>multi : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* field name, for hidden `<input>` tag
|
||||||
|
*/
|
||||||
|
name?: string;
|
||||||
|
>name : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* placeholder displayed when there are no matching search results or a falsy value to hide it
|
||||||
|
* @default "No results found"
|
||||||
|
*/
|
||||||
|
noResultsText?: string | JSX.Element;
|
||||||
|
>noResultsText : string | JSX.Element | undefined
|
||||||
|
>JSX : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onBlur handler: function (event) {}
|
||||||
|
*/
|
||||||
|
onBlur?: OnBlurHandler;
|
||||||
|
>onBlur : ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement>) => void) | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to clear input on blur or not
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onBlurResetsInput?: boolean;
|
||||||
|
>onBlurResetsInput : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the input value should be reset when options are selected.
|
||||||
|
* Also input value will be set to empty if 'onSelectResetsInput=true' and
|
||||||
|
* Select will get new value that not equal previous value.
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onSelectResetsInput?: boolean;
|
||||||
|
>onSelectResetsInput : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to clear input when closing the menu through the arrow
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onCloseResetsInput?: boolean;
|
||||||
|
>onCloseResetsInput : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onChange handler: function (newValue) {}
|
||||||
|
*/
|
||||||
|
onChange?: OnChangeHandler<TValue>;
|
||||||
|
>onChange : OnChangeHandler<TValue, Option<TValue> | Options<TValue>> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fires when the menu is closed
|
||||||
|
*/
|
||||||
|
onClose?: OnCloseHandler;
|
||||||
|
>onClose : OnCloseHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onFocus handler: function (event) {}
|
||||||
|
*/
|
||||||
|
onFocus?: OnFocusHandler;
|
||||||
|
>onFocus : ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement>) => void) | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onInputChange handler: function (inputValue) {}
|
||||||
|
*/
|
||||||
|
onInputChange?: OnInputChangeHandler;
|
||||||
|
>onInputChange : OnInputChangeHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onInputKeyDown handler: function (keyboardEvent) {}
|
||||||
|
*/
|
||||||
|
onInputKeyDown?: OnInputKeyDownHandler;
|
||||||
|
>onInputKeyDown : ((event: React.KeyboardEvent<HTMLDivElement | HTMLInputElement>) => void) | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fires when the menu is scrolled to the bottom; can be used to paginate options
|
||||||
|
*/
|
||||||
|
onMenuScrollToBottom?: OnMenuScrollToBottomHandler;
|
||||||
|
>onMenuScrollToBottom : OnMenuScrollToBottomHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fires when the menu is opened
|
||||||
|
*/
|
||||||
|
onOpen?: OnOpenHandler;
|
||||||
|
>onOpen : OnOpenHandler | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* boolean to enable opening dropdown when focused
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
openOnClick?: boolean;
|
||||||
|
>openOnClick : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* open the options menu when the input gets focus (requires searchable = true)
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
openOnFocus?: boolean;
|
||||||
|
>openOnFocus : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* className to add to each option component
|
||||||
|
*/
|
||||||
|
optionClassName?: string;
|
||||||
|
>optionClassName : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* option component to render in dropdown
|
||||||
|
*/
|
||||||
|
optionComponent?: OptionComponentType<TValue>;
|
||||||
|
>optionComponent : React.ComponentClass<OptionComponentProps<TValue>, any> | React.StatelessComponent<OptionComponentProps<TValue>> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer?: OptionRendererHandler<TValue>;
|
||||||
|
>optionRenderer : OptionRendererHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* array of Select options
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
options?: Options<TValue>;
|
||||||
|
>options : Options<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* number of options to jump when using page up/down keys
|
||||||
|
* @default 5
|
||||||
|
*/
|
||||||
|
pageSize?: number;
|
||||||
|
>pageSize : number | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* field placeholder, displayed when there's no value
|
||||||
|
* @default "Select..."
|
||||||
|
*/
|
||||||
|
placeholder?: string | JSX.Element;
|
||||||
|
>placeholder : string | JSX.Element | undefined
|
||||||
|
>JSX : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the selected option is removed from the dropdown on multi selects
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
removeSelected?: boolean;
|
||||||
|
>removeSelected : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* applies HTML5 required attribute when needed
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
required?: boolean;
|
||||||
|
>required : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* value to use when you clear the control
|
||||||
|
*/
|
||||||
|
resetValue?: any;
|
||||||
|
>resetValue : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* use react-select in right-to-left direction
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
rtl?: boolean;
|
||||||
|
>rtl : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the viewport will shift to display the entire menu when engaged
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
scrollMenuIntoView?: boolean;
|
||||||
|
>scrollMenuIntoView : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to enable searching feature or not
|
||||||
|
* @default true;
|
||||||
|
*/
|
||||||
|
searchable?: boolean;
|
||||||
|
>searchable : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to select the currently focused value when the [tab] key is pressed
|
||||||
|
*/
|
||||||
|
tabSelectsValue?: boolean;
|
||||||
|
>tabSelectsValue : boolean | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* initial field value
|
||||||
|
*/
|
||||||
|
value?: Option<TValue> | Options<TValue> | string | string[] | number | number[] | boolean;
|
||||||
|
>value : string | number | boolean | Option<TValue> | Options<TValue> | string[] | number[] | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* the option property to use for the value
|
||||||
|
* @default "value"
|
||||||
|
*/
|
||||||
|
valueKey?: string;
|
||||||
|
>valueKey : string | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the value selected
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
valueRenderer?: ValueRendererHandler<TValue>;
|
||||||
|
>valueRenderer : ValueRendererHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the control
|
||||||
|
*/
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
>style : React.CSSProperties | undefined
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional tab index of the control
|
||||||
|
*/
|
||||||
|
tabIndex?: string | number;
|
||||||
|
>tabIndex : string | number | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* value component to render
|
||||||
|
*/
|
||||||
|
valueComponent?: ValueComponentType<TValue>;
|
||||||
|
>valueComponent : React.ComponentClass<ValueComponentProps<TValue>, any> | React.StatelessComponent<ValueComponentProps<TValue>> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the component wrapper
|
||||||
|
*/
|
||||||
|
wrapperStyle?: React.CSSProperties;
|
||||||
|
>wrapperStyle : React.CSSProperties | undefined
|
||||||
|
>React : any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onClick handler for value labels: function (value, event) {}
|
||||||
|
*/
|
||||||
|
onValueClick?: OnValueClickHandler<TValue>;
|
||||||
|
>onValueClick : OnValueClickHandler<TValue> | undefined
|
||||||
|
|
||||||
|
/**
|
||||||
|
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
||||||
|
*/
|
||||||
|
simpleValue?: boolean;
|
||||||
|
>simpleValue : boolean | undefined
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,610 @@
|
||||||
|
// @strict: true
|
||||||
|
// @jsx: react
|
||||||
|
// @skipLibCheck: true
|
||||||
|
/// <reference path="/.lib/react16.d.ts" />
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
|
||||||
|
interface Props<T extends OptionValues> {
|
||||||
|
value?: Option<T> | T;
|
||||||
|
onChange?(value: Option<T> | undefined): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ExtractValueType<T> = T extends ReactSelectProps<infer U> ? U : never;
|
||||||
|
|
||||||
|
export type ReactSingleSelectProps<
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
> = Overwrite<
|
||||||
|
Omit<WrappedProps, "multi">,
|
||||||
|
Props<ExtractValueType<WrappedProps>>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export function createReactSingleSelect<
|
||||||
|
WrappedProps extends ReactSelectProps<any>
|
||||||
|
>(
|
||||||
|
WrappedComponent: React.ComponentType<WrappedProps>
|
||||||
|
): React.ComponentType<ReactSingleSelectProps<WrappedProps>> {
|
||||||
|
return (props) => {
|
||||||
|
return (
|
||||||
|
<ReactSelectClass<ExtractValueType<WrappedProps>>
|
||||||
|
{...props}
|
||||||
|
multi={false}
|
||||||
|
autosize={false}
|
||||||
|
value={props.value}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (props.onChange) {
|
||||||
|
props.onChange(value === null ? undefined : value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Copied from "type-zoo" version 3.4.0
|
||||||
|
export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
|
||||||
|
export type Overwrite<T, U> = Omit<T, keyof T & keyof U> & U;
|
||||||
|
|
||||||
|
// Everything below here copied from "@types/react-select" version 1.3.4
|
||||||
|
declare class ReactSelectClass<TValue = OptionValues> extends React.Component<ReactSelectProps<TValue>> {
|
||||||
|
focus(): void;
|
||||||
|
setValue(value: Option<TValue>): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OptionComponentType<TValue = OptionValues> = React.ComponentType<OptionComponentProps<TValue>>;
|
||||||
|
export type ValueComponentType<TValue = OptionValues> = React.ComponentType<ValueComponentProps<TValue>>;
|
||||||
|
|
||||||
|
export type HandlerRendererResult = JSX.Element | null | false;
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
export type FocusOptionHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
export type SelectValueHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
export type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult;
|
||||||
|
export type ClearRendererHandler = () => HandlerRendererResult;
|
||||||
|
export type FilterOptionHandler<TValue = OptionValues> = (option: Option<TValue>, filter: string) => boolean;
|
||||||
|
export type FilterOptionsHandler<TValue = OptionValues> = (options: Options<TValue>, filter: string, currentValues: Options<TValue>) => Options<TValue>;
|
||||||
|
export type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult;
|
||||||
|
export type MenuRendererHandler<TValue = OptionValues> = (props: MenuRendererProps<TValue>) => HandlerRendererResult;
|
||||||
|
export type OnCloseHandler = () => void;
|
||||||
|
export type OnInputChangeHandler = (inputValue: string) => string;
|
||||||
|
export type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OnMenuScrollToBottomHandler = () => void;
|
||||||
|
export type OnOpenHandler = () => void;
|
||||||
|
export type OnFocusHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
|
||||||
|
export type OptionRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
|
||||||
|
export type ValueRendererHandler<TValue = OptionValues> = (option: Option<TValue>, index?: number) => HandlerRendererResult;
|
||||||
|
export type OnValueClickHandler<TValue = OptionValues> = (option: Option<TValue>, event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||||
|
export type IsOptionUniqueHandler<TValue = OptionValues> = (arg: { option: Option<TValue>, options: Options<TValue>, labelKey: string, valueKey: string }) => boolean;
|
||||||
|
export type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
|
||||||
|
export type NewOptionCreatorHandler<TValue = OptionValues> = (arg: { label: string, labelKey: string, valueKey: string }) => Option<TValue>;
|
||||||
|
export type PromptTextCreatorHandler = (filterText: string) => string;
|
||||||
|
export type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
|
||||||
|
|
||||||
|
export type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Option<TValue>>;
|
||||||
|
export type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Options<TValue>>;
|
||||||
|
export type OnChangeHandler<TValue = OptionValues, TOption = Option<TValue> | Options<TValue>> = (newValue: TOption | null) => void;
|
||||||
|
export type OnNewOptionClickHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
|
||||||
|
|
||||||
|
export type LoadOptionsHandler<TValue = OptionValues> = LoadOptionsAsyncHandler<TValue> | LoadOptionsLegacyHandler<TValue>;
|
||||||
|
export type LoadOptionsAsyncHandler<TValue = OptionValues> = (input: string) => Promise<AutocompleteResult<TValue>>;
|
||||||
|
export type LoadOptionsLegacyHandler<TValue = OptionValues> = (input: string, callback: (err: any, result: AutocompleteResult<TValue>) => void) => void;
|
||||||
|
|
||||||
|
export interface AutocompleteResult<TValue = OptionValues> {
|
||||||
|
/** The search-results to be displayed */
|
||||||
|
options: Options<TValue>;
|
||||||
|
/**
|
||||||
|
* 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<TValue = OptionValues> = Array<Option<TValue>>;
|
||||||
|
|
||||||
|
export 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;
|
||||||
|
/**
|
||||||
|
* 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<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* The currently focused option; should be visible in the menu by default.
|
||||||
|
* default {}
|
||||||
|
*/
|
||||||
|
focusedOption: Option<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to focus a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
focusOption: FocusOptionHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option labels are accessible with this string key.
|
||||||
|
*/
|
||||||
|
labelKey: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ordered array of options to render.
|
||||||
|
*/
|
||||||
|
options: Options<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to select a new option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
selectValue: SelectValueHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Array of currently selected options.
|
||||||
|
*/
|
||||||
|
valueArray: Options<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to remove selection from option; receives the option as a parameter.
|
||||||
|
*/
|
||||||
|
removeValue: SelectValueHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer: OptionRendererHandler<TValue>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OptionComponentProps<TValue = OptionValues> {
|
||||||
|
/**
|
||||||
|
* Classname(s) to apply to the option component.
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Currently focused option.
|
||||||
|
*/
|
||||||
|
focusOption?: Option<TValue>;
|
||||||
|
|
||||||
|
inputValue?: string;
|
||||||
|
instancePrefix?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is disabled.
|
||||||
|
*/
|
||||||
|
isDisabled?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is focused.
|
||||||
|
*/
|
||||||
|
isFocused?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if this option is selected.
|
||||||
|
*/
|
||||||
|
isSelected?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is focused.
|
||||||
|
*/
|
||||||
|
onFocus?: (option: Option<TValue>, event: any) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to be invoked when this option is selected.
|
||||||
|
*/
|
||||||
|
onSelect?: (option: Option<TValue>, event: any) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Option to be rendered by this component.
|
||||||
|
*/
|
||||||
|
option: Option<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index of the option being rendered in the list
|
||||||
|
*/
|
||||||
|
optionIndex?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke when removing an option from a multi-selection. (Not necessarily the one
|
||||||
|
* being rendered)
|
||||||
|
*/
|
||||||
|
removeValue?: (value: TValue | TValue[]) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback to invoke to select an option. (Not necessarily the one being rendered)
|
||||||
|
*/
|
||||||
|
selectValue?: (value: TValue | TValue[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ArrowRendererProps {
|
||||||
|
/**
|
||||||
|
* Arrow mouse down event handler.
|
||||||
|
*/
|
||||||
|
onMouseDown: React.MouseEventHandler<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the Select is open or not.
|
||||||
|
*/
|
||||||
|
isOpen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValueComponentProps<TValue = OptionValues> {
|
||||||
|
disabled: ReactSelectProps<TValue>['disabled'];
|
||||||
|
id: string;
|
||||||
|
instancePrefix: string;
|
||||||
|
onClick: OnValueClickHandler<TValue> | null;
|
||||||
|
onRemove?: SelectValueHandler<TValue>;
|
||||||
|
placeholder: ReactSelectProps<TValue>['placeholder'];
|
||||||
|
value: Option<TValue>;
|
||||||
|
values?: Array<Option<TValue>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReactSelectProps<TValue = OptionValues> extends React.Props<ReactSelectClass<TValue>> {
|
||||||
|
/**
|
||||||
|
* 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 | null;
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
* @deprecated. Use autoFocus instead
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autofocus?: 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;
|
||||||
|
/**
|
||||||
|
* Prefix prepended to element default className if no className is defined
|
||||||
|
*/
|
||||||
|
classNamePrefix?: string;
|
||||||
|
/**
|
||||||
|
* title for the "clear" control when `multi` is true
|
||||||
|
* @default "Clear all"
|
||||||
|
*/
|
||||||
|
clearAllText?: string;
|
||||||
|
/**
|
||||||
|
* Renders a custom clear to be shown in the right-hand side of the select when clearable true
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
clearRenderer?: ClearRendererHandler;
|
||||||
|
/**
|
||||||
|
* title for the "clear" control
|
||||||
|
* @default "Clear value"
|
||||||
|
*/
|
||||||
|
clearValueText?: string;
|
||||||
|
/**
|
||||||
|
* whether to close the menu when a value is selected
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
closeOnSelect?: boolean;
|
||||||
|
/**
|
||||||
|
* 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<TValue>;
|
||||||
|
/**
|
||||||
|
* method to filter the options array
|
||||||
|
*/
|
||||||
|
filterOptions?: FilterOptionsHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* id for the underlying HTML input element
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
id?: string;
|
||||||
|
/**
|
||||||
|
* 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<TValue>;
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
/**
|
||||||
|
* whether the input value should be reset when options are selected.
|
||||||
|
* Also input value will be set to empty if 'onSelectResetsInput=true' and
|
||||||
|
* Select will get new value that not equal previous value.
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onSelectResetsInput?: boolean;
|
||||||
|
/**
|
||||||
|
* whether to clear input when closing the menu through the arrow
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
onCloseResetsInput?: boolean;
|
||||||
|
/**
|
||||||
|
* onChange handler: function (newValue) {}
|
||||||
|
*/
|
||||||
|
onChange?: OnChangeHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
*/
|
||||||
|
openOnClick?: boolean;
|
||||||
|
/**
|
||||||
|
* open the options menu when the input gets focus (requires searchable = true)
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
openOnFocus?: boolean;
|
||||||
|
/**
|
||||||
|
* className to add to each option component
|
||||||
|
*/
|
||||||
|
optionClassName?: string;
|
||||||
|
/**
|
||||||
|
* option component to render in dropdown
|
||||||
|
*/
|
||||||
|
optionComponent?: OptionComponentType<TValue>;
|
||||||
|
/**
|
||||||
|
* function which returns a custom way to render the options in the menu
|
||||||
|
*/
|
||||||
|
optionRenderer?: OptionRendererHandler<TValue>;
|
||||||
|
/**
|
||||||
|
* array of Select options
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
options?: Options<TValue>;
|
||||||
|
/**
|
||||||
|
* number of options to jump when using page up/down keys
|
||||||
|
* @default 5
|
||||||
|
*/
|
||||||
|
pageSize?: number;
|
||||||
|
/**
|
||||||
|
* field placeholder, displayed when there's no value
|
||||||
|
* @default "Select..."
|
||||||
|
*/
|
||||||
|
placeholder?: string | JSX.Element;
|
||||||
|
/**
|
||||||
|
* whether the selected option is removed from the dropdown on multi selects
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
removeSelected?: boolean;
|
||||||
|
/**
|
||||||
|
* applies HTML5 required attribute when needed
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
required?: boolean;
|
||||||
|
/**
|
||||||
|
* value to use when you clear the control
|
||||||
|
*/
|
||||||
|
resetValue?: any;
|
||||||
|
/**
|
||||||
|
* use react-select in right-to-left direction
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
rtl?: boolean;
|
||||||
|
/**
|
||||||
|
* 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<TValue> | Options<TValue> | 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<TValue>;
|
||||||
|
/**
|
||||||
|
* optional style to apply to the control
|
||||||
|
*/
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional tab index of the control
|
||||||
|
*/
|
||||||
|
tabIndex?: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* value component to render
|
||||||
|
*/
|
||||||
|
valueComponent?: ValueComponentType<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* optional style to apply to the component wrapper
|
||||||
|
*/
|
||||||
|
wrapperStyle?: React.CSSProperties;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onClick handler for value labels: function (value, event) {}
|
||||||
|
*/
|
||||||
|
onValueClick?: OnValueClickHandler<TValue>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
|
||||||
|
*/
|
||||||
|
simpleValue?: boolean;
|
||||||
|
}
|
Loading…
Reference in a new issue