vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-11 20:40:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[react-select] Fixed and updated (#18287)

Browse Source 
* Added tslint. Fixed some dtslint errors.

* Changed from empty style object to React.CSSProperties.

* Changed from any to dictionary props.

* Created prop handlers types.

* Fixed props return types and Handlers return types.

* Added options. Added missing focus method in ReactSelect.

* Rewritten tests.
This commit is contained in:
Martynas Žilinskas
2017-07-31 14:54:59 -07:00
committed by Sheetal Nandi
parent 1b7656c466
commit edbbc0dd56
3 changed files with 231 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-select/index.d.ts
Vendored
+101 -64
View File
@@ -1,6 +1,12 @@
// Type definitions for react-select 1.0
// Project: https://github.com/JedWatson/react-select
// Definitions by: ESQUIBET Hugo <https://github.com/Hesquibet/>, Gilad Gray <https://github.com/giladgray/>, Izaak Baker <https://github.com/iebaker/>, Tadas Dailyda <https://github.com/skirsdeda/>, Mark Vujevits <https://github.com/vujevits/>, Mike Deverell <https://github.com/devrelm/>
// Definitions by: ESQUIBET Hugo <https://github.com/Hesquibet/>
// Gilad Gray <https://github.com/giladgray/>
// Izaak Baker <https://github.com/iebaker/>
// Tadas Dailyda <https://github.com/skirsdeda/>
// Mark Vujevits <https://github.com/vujevits/>
// Mike Deverell <https://github.com/devrelm/>
// MartynasZilinskas <https://github.com/MartynasZilinskas>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
@@ -9,21 +15,61 @@ import * as React from 'react';
export = ReactSelectClass;
declare namespace ReactSelectClass {
export interface AutocompleteResult {
/** the search-results to be displayed */
options: Option[],
/** Should be set to true, if and only if a longer query with the same prefix
// Other components
class Creatable extends React.Component<ReactCreatableSelectProps> { }
class Async extends React.Component<ReactAsyncSelectProps> { }
class AsyncCreatable extends React.Component<ReactAsyncSelectProps & ReactCreatableSelectProps> { }
// Handlers
type FocusOptionHandler = (option: Option) => void;
type SelectValueHandler = (option: Option) => void;
type ArrowRendererHandler = (props: ArrowRendererProps) => JSX.Element;
type FilterOptionHandler = (option: Option, filter: string) => Option;
type FilterOptionsHandler = (options: Options, filter: string, currentValues: Options) => Options;
type InputRendererHandler = (props: { [key: string]: any }) => JSX.Element;
type MenuRendererHandler = (props: MenuRendererProps) => JSX.Element;
type OnCloseHandler = () => void;
type OnInputChangeHandler = (inputValue: string) => void;
type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement>;
type OnMenuScrollToBottomHandler = () => void;
type OnOpenHandler = () => void;
type OnFocusHandler = React.FocusEventHandler<HTMLDivElement>;
type OnBlurHandler = React.FocusEventHandler<HTMLDivElement>;
type OptionRendererHandler = (option: Option) => JSX.Element;
type ValueRendererHandler = (option: Option) => JSX.Element;
type OnValueClickHandler = (value: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
type IsOptionUniqueHandler = (arg: { option: Option, options: Options, labelKey: string, valueKey: string }) => boolean;
type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
type NewOptionCreatorHandler = (arg: { label: string, labelKey: string, valueKey: string }) => Option;
type PromptTextCreatorHandler = (filterText: string) => string;
type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<Option<TValue>>;
type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<Options<TValue>>;
type OnChangeHandler<TOption = Option | Options> = (newValue: TOption | null) => void;
type LoadOptionsHandler = LoadOptionsAsyncHandler | LoadOptionsLegacyHandler;
type LoadOptionsAsyncHandler = (input: string) => Promise<AutocompleteResult>;
type LoadOptionsLegacyHandler = (input: string, callback: (err: any, result: AutocompleteResult) => void) => void;
interface AutocompleteResult {
/** The search-results to be displayed */
options: Options;
/**
* Should be set to true, if and only if a longer query with the same prefix
* would return a subset of the results
* If set to true, more specific queries will not be sent to the server.
**/
*/
complete: boolean;
}
export interface Option {
type Options<TValue = OptionValues> = Array<Option<TValue>>;
interface Option<TValue = OptionValues> {
/** Text for rendering */
label?: string;
/** Value for searching */
value?: string | number | boolean;
value?: TValue;
/**
* Allow this option to be cleared
* @default true
@@ -36,7 +82,9 @@ declare namespace ReactSelectClass {
disabled?: boolean;
}
export interface MenuRendererProps {
type OptionValues = string | number | boolean;
interface MenuRendererProps {
/**
* The currently focused option; should be visible in the menu by default.
* default {}
@@ -46,7 +94,7 @@ declare namespace ReactSelectClass {
/**
* Callback to focus a new option; receives the option as a parameter.
*/
focusOption: (option: Option) => void;
focusOption: FocusOptionHandler;
/**
* Option labels are accessible with this string key.
@@ -56,27 +104,27 @@ declare namespace ReactSelectClass {
/**
* Ordered array of options to render.
*/
options: Option[];
options: Options;
/**
* Callback to select a new option; receives the option as a parameter.
*/
selectValue: (option: Option) => void;
selectValue: SelectValueHandler;
/**
* Array of currently selected options.
*/
valueArray: Option[];
valueArray: Options;
}
export interface ArrowRendererProps {
interface ArrowRendererProps {
/**
* Arrow mouse down event handler.
*/
onMouseDown: React.MouseEventHandler<{}>;
onMouseDown: React.MouseEventHandler<any>;
}
export interface ReactSelectProps extends React.Props<ReactSelectClass> {
interface ReactSelectProps extends React.Props<ReactSelectClass> {
/**
* text to display when `allowCreate` is true.
* @default 'Add "{label}"?'
@@ -86,7 +134,7 @@ declare namespace ReactSelectClass {
* renders a custom drop-down arrow to be shown in the right-hand side of the select.
* @default undefined
*/
arrowRenderer?: (props: ArrowRendererProps) => React.ReactElement<any>;
arrowRenderer?: ArrowRendererHandler;
/**
* blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices.
* @default false
@@ -149,11 +197,11 @@ declare namespace ReactSelectClass {
/**
* method to filter a single option
*/
filterOption?: (option: Option, filter: string) => Option;
filterOption?: FilterOptionHandler;
/**
* method to filter the options array
*/
filterOptions?: (options: Array<Option>, filter: string, currentValues: Array<Option>) => Array<Option>;
filterOptions?: FilterOptionsHandler;
/**
* whether to strip diacritics when filtering
* @default true
@@ -168,11 +216,11 @@ declare namespace ReactSelectClass {
* custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
* @default {}
*/
inputProps?: Object;
inputProps?: { [key: string]: any };
/**
* renders a custom input
*/
inputRenderer?: (props: Object) => React.ReactElement<any>;
inputRenderer?: InputRendererHandler;
/**
* allows for synchronization of component id's on server and client.
* @see https://github.com/JedWatson/react-select/pull/1105
@@ -212,15 +260,15 @@ declare namespace ReactSelectClass {
/**
* optional style to apply to the menu container
*/
menuContainerStyle?: {}
menuContainerStyle?: React.CSSProperties;
/**
* renders a custom menu with options
*/
menuRenderer?: (props: MenuRendererProps) => React.ReactElement<any>;
menuRenderer?: MenuRendererHandler;
/**
* optional style to apply to the menu
*/
menuStyle?: {}
menuStyle?: React.CSSProperties;
/**
* multi-value input
* @default false
@@ -238,7 +286,7 @@ declare namespace ReactSelectClass {
/**
* onBlur handler: function (event) {}
*/
onBlur?: React.FocusEventHandler<{}>;
onBlur?: OnBlurHandler;
/**
* whether to clear input on blur or not
* @default true
@@ -247,35 +295,31 @@ declare namespace ReactSelectClass {
/**
* onChange handler: function (newValue) {}
*/
onChange?: (newValue: Option | Option[] | null) => void;
onChange?: OnChangeHandler;
/**
* fires when the menu is closed
*/
onClose?: () => void;
onClose?: OnCloseHandler;
/**
* onFocus handler: function (event) {}
*/
onFocus?: React.FocusEventHandler<{}>;
onFocus?: OnFocusHandler;
/**
* onInputChange handler: function (inputValue) {}
*/
onInputChange?: (inputValue: string) => void;
onInputChange?: OnInputChangeHandler;
/**
* onInputKeyDown handler: function (keyboardEvent) {}
*/
onInputKeyDown?: (event: KeyboardEvent) => void;
onInputKeyDown?: OnInputKeyDownHandler;
/**
* fires when the menu is scrolled to the bottom; can be used to paginate options
*/
onMenuScrollToBottom?: () => void;
onMenuScrollToBottom?: OnMenuScrollToBottomHandler;
/**
* fires when the menu is opened
*/
onOpen?: () => void;
/**
* @deprecated use onValueClick isntead
*/
onOptionLabelClick?: (value: string, event: Event) => void;
onOpen?: OnOpenHandler;
/**
* boolean to enable opening dropdown when focused
* @default false
@@ -293,21 +337,21 @@ declare namespace ReactSelectClass {
/**
* option component to render in dropdown
*/
optionComponent?: React.ComponentClass<any>;
optionComponent?: React.ComponentType;
/**
* function which returns a custom way to render the options in the menu
*/
optionRenderer?: (option: Option) => JSX.Element;
optionRenderer?: OptionRendererHandler;
/**
* array of Select options
* @default false
*/
options?: Array<Option>;
options?: Options;
/**
* field placeholder, displayed when there's no value
* @default "Select..."
*/
placeholder?: string | React.ReactElement<any>;
placeholder?: string | JSX.Element;
/**
* applies HTML5 required attribute when needed
* @default false
@@ -334,7 +378,7 @@ declare namespace ReactSelectClass {
/**
* initial field value
*/
value?: Option | Option[] | string | string[] | number | number[] | boolean;
value?: Option | Options | string | string[] | number | number[] | boolean;
/**
* the option property to use for the value
* @default "value"
@@ -344,11 +388,11 @@ declare namespace ReactSelectClass {
* function which returns a custom way to render the value selected
* @default false
*/
valueRenderer?: (option: Option) => JSX.Element;
valueRenderer?: ValueRendererHandler;
/**
* optional style to apply to the control
*/
style?: any;
style?: React.CSSProperties;
/**
* optional tab index of the control
@@ -358,17 +402,17 @@ declare namespace ReactSelectClass {
/**
* value component to render
*/
valueComponent?: React.ComponentClass<any>;
valueComponent?: React.ComponentType;
/**
* optional style to apply to the component wrapper
*/
wrapperStyle?: any;
wrapperStyle?: React.CSSProperties;
/**
* onClick handler for value labels: function (value, event) {}
*/
onValueClick?: (value: string, event: Event) => void;
onValueClick?: OnValueClickHandler;
/**
* pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
@@ -376,36 +420,35 @@ declare namespace ReactSelectClass {
simpleValue?: boolean;
}
export interface ReactCreatableSelectProps extends ReactSelectProps {
interface ReactCreatableSelectProps extends ReactSelectProps {
/**
* Searches for any matching option within the set of options. This function prevents
* duplicate options from being created.
*/
isOptionUnique?: (arg: { option: Option, options: Option[], labelKey: string, valueKey: string }) => boolean;
isOptionUnique?: IsOptionUniqueHandler;
/**
* Determines if the current input text represents a valid option.
*/
isValidNewOption?: (arg: { label: string }) => boolean;
isValidNewOption?: IsValidNewOptionHandler;
/**
* factory to create new options
*/
newOptionCreator?: (arg: { label: string, labelKey: string, valueKey: string }) => Option;
newOptionCreator?: NewOptionCreatorHandler;
/**
* Creates prompt/placeholder for option text.
*/
promptTextCreator?: (filterText: string) => string;
promptTextCreator?: PromptTextCreatorHandler;
/**
* Decides if a keyDown event (eg its 'keyCode') should result in the creation of a new option.
*/
shouldKeyDownEventCreateNewOption?: (arg: { keyCode: number }) => boolean;
shouldKeyDownEventCreateNewOption?: ShouldKeyDownEventCreateNewOptionHandler;
}
export interface ReactAsyncSelectProps extends ReactSelectProps {
interface ReactAsyncSelectProps extends ReactSelectProps {
/**
* Whether to auto-load the default async options set.
*/
@@ -414,7 +457,7 @@ declare namespace ReactSelectClass {
/**
* object to use to cache results; can be null to disable cache
*/
cache?: Object | boolean;
cache?: { [key: string]: any } | boolean;
/**
* whether to strip diacritics when filtering (shared with Select)
@@ -434,9 +477,7 @@ declare namespace ReactSelectClass {
/**
* function to call to load options asynchronously
*/
loadOptions:
| ((input: string) => Promise<AutocompleteResult>)
| ((input: string, callback: (err: any, result: AutocompleteResult) => void) => void);
loadOptions: LoadOptionsHandler;
/**
* replaces the placeholder while options are loading
@@ -469,10 +510,6 @@ declare namespace ReactSelectClass {
}
}
declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps> { }
declare module ReactSelectClass {
class Creatable extends React.Component<ReactCreatableSelectProps> { }
class Async extends React.Component<ReactAsyncSelectProps> { }
class AsyncCreatable extends React.Component<ReactAsyncSelectProps & ReactCreatableSelectProps> { }
declare class ReactSelectClass extends React.Component<ReactSelectClass.ReactSelectProps> {
focus(): void;
}
types/react-select/react-select-tests.tsx
+129 -302
View File
@@ -1,327 +1,154 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactSelect from "react-select";
const { Creatable } = ReactSelect;
import Select = require("react-select");
import { Option, ReactSelectProps, ReactCreatableSelectProps, ReactAsyncSelectProps, MenuRendererProps, AutocompleteResult } from "react-select";
declare function describe(desc: string, f: () => void): void;
declare function it(desc: string, f: () => void): void;
const CustomOption = React.createClass({
propTypes: {
children: React.PropTypes.node,
className: React.PropTypes.string,
isDisabled: React.PropTypes.bool,
isFocused: React.PropTypes.bool,
isSelected: React.PropTypes.bool,
onFocus: React.PropTypes.func,
onSelect: React.PropTypes.func,
option: React.PropTypes.object.isRequired,
},
handleMouseDown (event: Event) {
event.preventDefault();
event.stopPropagation();
this.props.onSelect(this.props.option, event);
},
handleMouseEnter (event: Event) {
this.props.onFocus(this.props.option, event);
},
handleMouseMove (event: Event) {
if (this.props.isFocused) return;
this.props.onFocus(this.props.option, event);
},
render () {
return (
<div className="Select-option"
onMouseDown={this.handleMouseDown}
onMouseEnter={this.handleMouseEnter}
onMouseMove={this.handleMouseMove}
title={this.props.option.title}>
{this.props.children}
</div>
);
}
});
const EXAMPLE_OPTIONS: ReactSelect.Options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two" }
];
const CustomValue = React.createClass({
propTypes: {
children: React.PropTypes.node,
placeholder: React.PropTypes.string,
value: React.PropTypes.object
},
render () {
return (
<div className="Select-value" title={this.props.value.title}>
<span className="Select-value-label">
{this.props.children}
</span>
</div>
);
}
});
describe("react-select", () => {
it("options", () => {
const optionsString: ReactSelect.Options<string> = [
{ value: "one", label: "One" },
{ value: "two", label: "Two", clearableValue: false }
];
const filterOptions = (options: Array<Option>, filter: string, values: Array<Option>) => {
// Filter already selected values
let filteredOptions = options.filter(option => values.indexOf(option) < 0);
const optionsNumber: ReactSelect.Options<number> = [
{ value: 1, label: "One" },
{ value: 2, label: "Two", clearableValue: false }
];
// Filter by label
if (filter != null && filter.length > 0) {
filteredOptions = filteredOptions.filter(option => RegExp(filter, 'ig').test(option.label));
}
const optionsMixed: ReactSelect.Options = [
{ value: "one", label: "One" },
{ value: 2, label: "Two", clearableValue: false }
];
});
// Append Addition option
if (filteredOptions.length === 0) {
filteredOptions.push({
label: `Create: ${filter}`,
value: filter
});
}
return filteredOptions;
};
class SelectTest extends React.Component<React.Props<{}>> {
render() {
const options: Option[] = [{ label: "Foo", value: "bar" }];
const onChange = (value: any) => console.log(value);
const renderMenu = ({
focusedOption,
focusOption,
labelKey,
options,
selectValue,
valueArray
}: MenuRendererProps) => { return <div></div> };
const onOpen = () => { return; };
const onClose = () => { return; };
const optionRenderer = (option: Option) => <span>{option.label}</span>
const selectProps: ReactSelectProps = {
name: "test-select",
className: "test-select",
key: "1",
options: options,
optionClassName: 'test-select-option',
optionRenderer: optionRenderer,
autofocus: true,
autosize: true,
clearable: true,
escapeClearsValue: true,
filterOptions: filterOptions,
ignoreAccents: true,
instanceId: 'custom-instance-id',
joinValues: false,
matchPos: "any",
matchProp: "any",
menuContainerStyle: {},
menuRenderer: renderMenu,
menuStyle: {},
multi: true,
onMenuScrollToBottom: () => {},
onValueClick: onChange,
onOpen: onOpen,
onClose: onClose,
openAfterFocus: false,
optionComponent: CustomOption,
required: false,
resetValue: "resetValue",
scrollMenuIntoView: false,
valueKey: "github",
labelKey: "name",
onChange: onChange,
value: options,
valueComponent: CustomValue,
valueRenderer: optionRenderer
};
return <div>
<Select {...selectProps} />
</div>;
}
}
class SelectWithStringValueTest extends React.Component<React.Props<{}>> {
render() {
const options: Option[] = [{
label: "Foo",
value: "bar",
}, {
label: "Foo2",
value: "bar2",
clearableValue: false,
disabled: true
}];
const onChange = (value: any) => console.log(value);
const selectProps: ReactSelectProps = {
name: "test-select-with-string-value",
value: "bar",
options: options,
onChange: onChange
};
return <div>
<Select {...selectProps} />
</div>;
}
}
class SelectAsyncTest extends React.Component<React.Props<{}>> {
render() {
const getOptions = (input: string, callback: (err: any, result: AutocompleteResult) => any) => {
setTimeout(function() {
it("async options", () => {
const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler = (input, callback) => {
setTimeout(() => {
callback(null, {
options: options,
complete: true
options: [
{ value: "one", label: "Two" }
],
complete: false
});
}, 500);
};
const options: Option[] = [{ label: "Foo", value: "bar" }];
const onChange = (value: any) => console.log(value);
const asyncSelectProps: ReactAsyncSelectProps = {
name: "test-select",
className: "test-select",
key: "1",
matchPos: "any",
matchProp: "any",
multi: true,
onValueClick: onChange,
valueKey: "github",
labelKey: "name",
onChange: onChange,
simpleValue: undefined,
value: options,
loadOptions: getOptions,
cache: {},
ignoreAccents: false,
ignoreCase: true,
isLoading: false,
minimumInput: 5,
searchPromptText: "search...",
searchingText: "searching...",
};
return <div>
<Select.Async {...asyncSelectProps} />
</div>;
}
}
class SelectAsyncPromiseTest extends React.Component<React.Props<{}>> {
render() {
const getOptions = (input: string): Promise<AutocompleteResult> => {
return new Promise(resolve => {
setTimeout(function() {
return resolve({
options: options,
complete: true
});
}, 500);
});
};
const options: Option[] = [{ label: "Foo", value: "bar" }];
const onChange = (value: any) => console.log(value);
const asyncSelectProps: ReactAsyncSelectProps = {
name: "test-select-async-promise",
className: "test-select",
key: "1",
matchPos: "any",
matchProp: "any",
multi: true,
onValueClick: onChange,
valueKey: "github",
labelKey: "name",
onChange: onChange,
simpleValue: undefined,
value: options,
loadOptions: getOptions,
cache: {},
ignoreAccents: false,
ignoreCase: true,
isLoading: false,
minimumInput: 5,
searchPromptText: "search...",
searchingText: "searching...",
const dummyRequest = async () => {
return new Promise<ReactSelect.Options>(resolve => {
resolve(EXAMPLE_OPTIONS);
});
};
return <div>
<Select.Async {...asyncSelectProps} />
</div>;
}
const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler = async input => {
const result = await dummyRequest();
}
class SelectCreatableTest extends React.Component<React.Props<{}>> {
render() {
const options: Option[] = [{ label: "Foo", value: "bar" }];
const onChange = (value: any) => console.log(value);
const creatableSelectProps: ReactCreatableSelectProps = {
name: "test-creatable-select",
value: "bar",
options: options,
onChange: onChange,
isOptionUnique: () => { return true; },
isValidNewOption: () => { return true; },
newOptionCreator: () => { return { label: "NewFoo", value: "newBar" }; },
promptTextCreator: () => { return ""; },
shouldKeyDownEventCreateNewOption: () => { return true; }
return {
options: result,
complete: false
};
};
});
return <div>
<Select.Creatable {...creatableSelectProps} />
</div>
}
it("creatable", () => {
function Component(props: {}): JSX.Element {
return <Creatable name="creatable" options={EXAMPLE_OPTIONS} />;
}
});
}
it("Focus method", () => {
class Component extends React.PureComponent {
private selectRef = (component: ReactSelect) => {
component.focus();
}
class SelectAsyncCreatableTest extends React.Component<React.Props<{}>> {
render() {
return <ReactSelect
ref={this.selectRef}
/>;
}
}
});
render() {
const getOptions = (input: string, callback: Function) => {
setTimeout(function() {
callback(null, options);
}, 500);
it("Overriding default key-down behavior with onInputKeyDown", () => {
const keyDownHandler: ReactSelect.OnInputKeyDownHandler = event => {
const e: React.KeyboardEvent<HTMLDivElement> = event;
};
const options: Option[] = [{ label: "Foo", value: "bar" }];
const onChange = (value: any) => console.log(value);
});
const asyncCreatableSelectProps: ReactCreatableSelectProps & ReactAsyncSelectProps = {
name: "test-select-async-creatable",
className: "test-select-async-creatable",
key: "1",
matchPos: "any",
matchProp: "any",
multi: true,
onValueClick: onChange,
valueKey: "github",
labelKey: "name",
onChange: onChange,
simpleValue: undefined,
value: options,
loadOptions: getOptions,
cache: {},
ignoreAccents: false,
ignoreCase: true,
isLoading: false,
minimumInput: 5,
searchPromptText: "search...",
searchingText: "searching...",
isOptionUnique: () => { return true; },
isValidNewOption: () => { return true; },
newOptionCreator: () => { return { label: "NewFoo", value: "newBar" }; },
promptTextCreator: () => { return ""; },
shouldKeyDownEventCreateNewOption: () => { return true; }
it("Updating input values with onInputChange", () => {
const cleanInput: ReactSelect.OnInputChangeHandler = inputValue => {
return inputValue.replace(/[^0-9]/g, "");
};
});
});
return <div>
<Select.AsyncCreatable {...asyncCreatableSelectProps} />
</div>
}
describe("Examples", () => {
it("Simple example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = (option) => {
const optionValue: string = option.value;
}
}
render() {
return <ReactSelect
name="select"
value="one"
options={EXAMPLE_OPTIONS}
/>;
}
}
});
it("Menu renderer example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
const optionValue: string = option.value;
}
private menuRenderer: ReactSelect.MenuRendererHandler = props => {
const options = props.options.map(option => {
return <div className="option">{option.label}</div>;
});
return <div className="menu">{options}</div>;
}
render() {
return <ReactSelect
name="select"
value="one"
options={EXAMPLE_OPTIONS}
menuRenderer={this.menuRenderer}
/>;
}
}
});
it("Input render example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
const optionValue: string = option.value;
}
private inputRenderer: ReactSelect.InputRendererHandler = props => {
return <input {...props} />;
}
render() {
return <ReactSelect
name="select"
value="one"
options={EXAMPLE_OPTIONS}
inputRenderer={this.inputRenderer}
/>;
}
}
});
});
types/react-select/tslint.json
+1
View File
@@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }