Default export and removing namespace (#19863)

* Default export

* Correct imports for tests

* Update react-virtualized-select-tests.tsx

* Correct imports and cleaning
This commit is contained in:
Per Svensson 2017-09-25 21:18:03 +02:00 committed by Mohamed Hegazy
parent f06067665b
commit e9f670010b
3 changed files with 546 additions and 552 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,11 +1,10 @@
import * as React from "react";
import * as ReactSelect from "react-select";
const { Creatable } = ReactSelect;
import ReactSelect, * as ReactSelectModule from "react-select";
declare function describe(desc: string, f: () => void): void;
declare function it(desc: string, f: () => void): void;
const EXAMPLE_OPTIONS: ReactSelect.Options = [
const EXAMPLE_OPTIONS: ReactSelectModule.Options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two" }
];
@ -21,38 +20,38 @@ interface CustomValueType {
* If https://github.com/Microsoft/TypeScript/issues/6395 ever lands, this
* workaround may become redundant.
*/
type CustomValueReactSelect = new (props: ReactSelect.ReactSelectProps<CustomValueType>) => ReactSelect<CustomValueType>;
type CustomValueReactSelect = new (props: ReactSelectModule.ReactSelectProps<CustomValueType>) => ReactSelect<CustomValueType>;
const CustomValueReactSelect = ReactSelect as CustomValueReactSelect;
const EXAMPLE_CUSTOM_OPTIONS: ReactSelect.Options<CustomValueType> = [
const EXAMPLE_CUSTOM_OPTIONS: ReactSelectModule.Options<CustomValueType> = [
{ value: { prop1: "OneProp1", prop2: 1 }, label: "One" },
{ value: { prop1: "TwoProp2", prop2: 2 }, label: "Two" }
];
const EXAMPLE_CUSTOM_VALUE: ReactSelect.Option<CustomValueType> = {
value: { prop1: "ThreeProp1", prop2: 3 }, label: "Three"
const EXAMPLE_CUSTOM_VALUE: ReactSelectModule.Option<CustomValueType> = {
value: { prop1: "ThreeProp1", prop2: 3 }, label: "Three"
};
describe("react-select", () => {
it("options", () => {
const optionsString: ReactSelect.Options<string> = [
const optionsString: ReactSelectModule.Options<string> = [
{ value: "one", label: "One" },
{ value: "two", label: "Two", clearableValue: false }
];
const optionsNumber: ReactSelect.Options<number> = [
const optionsNumber: ReactSelectModule.Options<number> = [
{ value: 1, label: "One" },
{ value: 2, label: "Two", clearableValue: false }
];
const optionsMixed: ReactSelect.Options = [
const optionsMixed: ReactSelectModule.Options = [
{ value: "one", label: "One" },
{ value: 2, label: "Two", clearableValue: false }
];
});
it("async options", () => {
const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler = (input, callback) => {
const getAsyncLegacyOptions: ReactSelectModule.LoadOptionsLegacyHandler = (input, callback) => {
setTimeout(() => {
callback(null, {
options: [
@ -64,12 +63,12 @@ describe("react-select", () => {
};
const dummyRequest = async () => {
return new Promise<ReactSelect.Options>(resolve => {
return new Promise<ReactSelectModule.Options>(resolve => {
resolve(EXAMPLE_OPTIONS);
});
};
const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler = async input => {
const getAsyncOptions: ReactSelectModule.LoadOptionsAsyncHandler = async input => {
const result = await dummyRequest();
return {
@ -80,7 +79,7 @@ describe("react-select", () => {
});
it("Custom value async options", () => {
const getAsyncLegacyOptions: ReactSelect.LoadOptionsLegacyHandler<CustomValueType> = (input, callback) => {
const getAsyncLegacyOptions: ReactSelectModule.LoadOptionsLegacyHandler<CustomValueType> = (input, callback) => {
setTimeout(() => {
callback(null, {
options: [
@ -92,12 +91,12 @@ describe("react-select", () => {
};
const dummyRequest = async () => {
return new Promise<ReactSelect.Options<CustomValueType>>(resolve => {
return new Promise<ReactSelectModule.Options<CustomValueType>>(resolve => {
resolve(EXAMPLE_CUSTOM_OPTIONS);
});
};
const getAsyncOptions: ReactSelect.LoadOptionsAsyncHandler<CustomValueType> = async input => {
const getAsyncOptions: ReactSelectModule.LoadOptionsAsyncHandler<CustomValueType> = async input => {
const result = await dummyRequest();
return {
@ -109,7 +108,7 @@ describe("react-select", () => {
it("creatable", () => {
function Component(props: {}): JSX.Element {
return <Creatable name="creatable" options={EXAMPLE_OPTIONS} />;
return <ReactSelectModule.Creatable name="creatable" options={EXAMPLE_OPTIONS} />;
}
});
@ -128,14 +127,14 @@ describe("react-select", () => {
});
it("Overriding default key-down behavior with onInputKeyDown", () => {
const keyDownHandler: ReactSelect.OnInputKeyDownHandler = (event => {
const keyDownHandler: ReactSelectModule.OnInputKeyDownHandler = (event => {
const divEvent = event as React.KeyboardEvent<HTMLDivElement>;
const inputEvent = event as React.KeyboardEvent<HTMLInputElement>;
});
});
it("Updating input values with onInputChange", () => {
const cleanInput: ReactSelect.OnInputChangeHandler = inputValue => {
const cleanInput: ReactSelectModule.OnInputChangeHandler = inputValue => {
return inputValue.replace(/[^0-9]/g, "");
};
});
@ -172,7 +171,7 @@ describe("Focus events", () => {
describe("Examples", () => {
it("Simple example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = (option) => {
private onSelectChange: ReactSelectModule.OnChangeSingleHandler<string> = (option) => {
const optionValue: string = option.value;
}
@ -188,7 +187,7 @@ describe("Examples", () => {
it("onValueClick", () => {
class Component extends React.Component {
private onValueClick: ReactSelect.OnValueClickHandler<number> = (option) => {
private onValueClick: ReactSelectModule.OnValueClickHandler<number> = (option) => {
const optionValue: number = option.value;
}
@ -209,7 +208,7 @@ describe("Examples", () => {
it("Custom value onValueClick", () => {
class Component extends React.Component {
private onValueClick: ReactSelect.OnValueClickHandler<CustomValueType> = (option) => {
private onValueClick: ReactSelectModule.OnValueClickHandler<CustomValueType> = (option) => {
const optionValue: CustomValueType = option.value;
}
@ -225,7 +224,7 @@ describe("Examples", () => {
it("Custom value onChange", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<CustomValueType> = (option) => {
private onSelectChange: ReactSelectModule.OnChangeSingleHandler<CustomValueType> = (option) => {
const optionValue: CustomValueType = option.value;
}
@ -241,11 +240,11 @@ describe("Examples", () => {
it("Menu renderer example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
private onSelectChange: ReactSelectModule.OnChangeSingleHandler<string> = option => {
const optionValue: string = option.value;
}
private menuRenderer: ReactSelect.MenuRendererHandler = props => {
private menuRenderer: ReactSelectModule.MenuRendererHandler = props => {
const options = props.options.map(option => {
return <div className="option">{option.label}</div>;
});
@ -266,12 +265,12 @@ describe("Examples", () => {
it("Menu renderer with custom value type example", () => {
class Component extends React.Component {
private menuRenderer: ReactSelect.MenuRendererHandler<CustomValueType> = props => {
private menuRenderer: ReactSelectModule.MenuRendererHandler<CustomValueType> = props => {
const options = props.options.map(option => {
return (
<div className="option" data-value1={option.value.prop1}
data-value2={option.value.prop2}
onClick={() => props.selectValue(option)}>
data-value2={option.value.prop2}
onClick={() => props.selectValue(option)}>
{option.label}
</div>);
});
@ -292,11 +291,11 @@ describe("Examples", () => {
it("Input render example", () => {
class Component extends React.Component {
private onSelectChange: ReactSelect.OnChangeSingleHandler<string> = option => {
private onSelectChange: ReactSelectModule.OnChangeSingleHandler<string> = option => {
const optionValue: string = option.value;
}
private inputRenderer: ReactSelect.InputRendererHandler = props => {
private inputRenderer: ReactSelectModule.InputRendererHandler = props => {
return <input {...props} />;
}
@ -332,8 +331,8 @@ describe("Examples", () => {
});
it("Option render with custom value option", () => {
const optionRenderer = (option: ReactSelect.Option<CustomValueType>): ReactSelect.HandlerRendererResult =>
null;
const optionRenderer = (option: ReactSelectModule.Option<CustomValueType>): ReactSelectModule.HandlerRendererResult =>
null;
<CustomValueReactSelect
optionRenderer={optionRenderer}
@ -341,8 +340,8 @@ describe("Examples", () => {
});
it("Value render with custom value option", () => {
const valueRenderer = (option: ReactSelect.Option<CustomValueType>): ReactSelect.HandlerRendererResult =>
null;
const valueRenderer = (option: ReactSelectModule.Option<CustomValueType>): ReactSelectModule.HandlerRendererResult =>
null;
<CustomValueReactSelect
valueRenderer={valueRenderer}

View File

@ -1,5 +1,5 @@
import * as React from "react";
import Select = require("react-select");
import Select from "react-select";
import VirtualizedSelect from "react-virtualized-select";
<VirtualizedSelect