diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts index d256bb437e..d5383d3d86 100644 --- a/types/react-select/index.d.ts +++ b/types/react-select/index.d.ts @@ -11,6 +11,7 @@ // Ian Johnson // Anton Novik // David Schkalee +// Arthur Udalov // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -18,12 +19,15 @@ import * as React from 'react'; export default class ReactSelectClass extends React.Component> { focus(): void; + setValue(value: Option): void; } // Other components export class Creatable extends React.Component> { } export class Async extends React.Component> { } export class AsyncCreatable extends React.Component & ReactCreatableSelectProps> { } +export type OptionComponentType = React.ComponentType>; + export type HandlerRendererResult = JSX.Element | null | false; // Handlers @@ -128,6 +132,16 @@ export interface MenuRendererProps { * Array of currently selected options. */ valueArray: Options; + + /** + * Callback to remove selection from option; receives the option as a parameter. + */ + removeValue: SelectValueHandler; + + /** + * function which returns a custom way to render the options in the menu + */ + optionRenderer: OptionRendererHandler; } export interface OptionComponentProps { @@ -196,6 +210,11 @@ export interface ArrowRendererProps { * Arrow mouse down event handler. */ onMouseDown: React.MouseEventHandler; + + /** + * whether the Select is open or not. + */ + isOpen: boolean; } export interface ReactSelectProps extends React.Props> { @@ -449,7 +468,7 @@ export interface ReactSelectProps extends React.Props>; + optionComponent?: OptionComponentType; /** * function which returns a custom way to render the options in the menu */ diff --git a/types/react-select/lib/Option/index.d.ts b/types/react-select/lib/Option/index.d.ts new file mode 100644 index 0000000000..0f9e97d540 --- /dev/null +++ b/types/react-select/lib/Option/index.d.ts @@ -0,0 +1,5 @@ +import { OptionComponentType } from '../../'; + +declare const OptionComponent: OptionComponentType; + +export default OptionComponent; diff --git a/types/react-select/lib/utils/defaultMenuRenderer/index.d.ts b/types/react-select/lib/utils/defaultMenuRenderer/index.d.ts new file mode 100644 index 0000000000..baf530d59d --- /dev/null +++ b/types/react-select/lib/utils/defaultMenuRenderer/index.d.ts @@ -0,0 +1,3 @@ +import { MenuRendererProps } from '../../../'; + +export default function defaultMenuRenderer(props: MenuRendererProps): JSX.Element[]; diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx index 3635fe3145..a6b450f513 100644 --- a/types/react-select/react-select-tests.tsx +++ b/types/react-select/react-select-tests.tsx @@ -1,5 +1,7 @@ import * as React from "react"; import ReactSelect, * as ReactSelectModule from "react-select"; +import defaultMenuRenderer from 'react-select/lib/utils/defaultMenuRenderer'; +import DefaultOptionComponent from 'react-select/lib/Option'; declare function describe(desc: string, f: () => void): void; declare function it(desc: string, f: () => void): void; @@ -126,6 +128,22 @@ describe("react-select", () => { } }); + it("setValue method", () => { + class Component extends React.PureComponent { + private readonly selectRef = (component: ReactSelect) => { + component.setValue({ + value: 'value' + }); + } + + render() { + return ; + } + } + }); + it("Overriding default key-down behavior with onInputKeyDown", () => { const keyDownHandler: ReactSelectModule.OnInputKeyDownHandler = (event => { const divEvent = event as React.KeyboardEvent; @@ -246,7 +264,13 @@ describe("Examples", () => { private readonly menuRenderer: ReactSelectModule.MenuRendererHandler = props => { const options = props.options.map(option => { - return
{option.label}
; + return ( +
+
{option.label}
+
{props.optionRenderer({})}
+
+ ); }); return
{options}
; @@ -289,6 +313,41 @@ describe("Examples", () => { } }); + it("Extend default menu renderer", () => { + return class Component extends React.Component { + private readonly menuRenderer: ReactSelectModule.MenuRendererHandler = props => { + return
defaultMenuRenderer(props)
; + } + + render() { + return ; + } + }; + }); + + it("Extend default Option component", () => { + function OptionComponent(props: ReactSelectModule.OptionComponentProps) { + const {option, isFocused, isSelected} = props; + + return ( + + + {isSelected ? '+' : '-'} + {option.label} + + + ); + } + + return ( + + ); + }); + it("Input render example", () => { class Component extends React.Component { private readonly onSelectChange: ReactSelectModule.OnChangeSingleHandler = option => { @@ -330,6 +389,19 @@ describe("Examples", () => { />; }); + it("Arrow render example", () => { + return ( + ( +
+ )} + /> + ); + }); + it("Option render with custom value option", () => { const optionRenderer = (option: ReactSelectModule.Option): ReactSelectModule.HandlerRendererResult => null; diff --git a/types/react-select/tsconfig.json b/types/react-select/tsconfig.json index 727747e72c..7855eceaf1 100644 --- a/types/react-select/tsconfig.json +++ b/types/react-select/tsconfig.json @@ -1,6 +1,8 @@ { "files": [ "index.d.ts", + "lib/Option/index.d.ts", + "lib/utils/defaultMenuRenderer/index.d.ts", "react-select-tests.tsx" ], "compilerOptions": { @@ -22,4 +24,4 @@ "noEmit": true, "forceConsistentCasingInFileNames": true } -} \ No newline at end of file +}