vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-04 06:47:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #14829 from tbayne/fixup_autosuggest_types

Browse Source 
Updated typings for the react-autosuggest package
This commit is contained in:
Mine Starks
2017-03-07 12:17:38 -08:00
committed by GitHub
parent 94aa02860f dbf6e9353d
commit 080fb49ebd
2 changed files with 253 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react-autosuggest/index.d.ts
Vendored
+10 -5
View File
@@ -1,11 +1,16 @@
// Type definitions for react-autosuggest 7.0
// Type definitions for react-autosuggest 8.0
// Project: http://react-autosuggest.js.org/
// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>, Robert Essig <https://github.com/robessog>
// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>, Robert Essig <https://github.com/robessog>, Terry Bayne <https://github.com/tbayne>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
import * as React from 'react';
import * as React from 'react';
declare class Autosuggest extends React.Component<any, any> {}
export = Autosuggest;
declare namespace Autosuggest {
interface SuggestionsFetchRequest {
value: string;
reason: string;
@@ -31,7 +36,7 @@ import * as React from 'react';
onBlur?: (event: React.FormEvent<any>, params?: BlurEvent) => void;
}
export interface SuggestionSelectedEventData<TSuggestion> {
export interface SuggestionSelectedEventData<TSuggestion> {
method: 'click' | 'enter';
sectionIndex: number | null;
suggestion: TSuggestion;
@@ -71,4 +76,4 @@ import * as React from 'react';
id?: string;
}
export class Autosuggest extends React.Component<any, any> {}
}
react-autosuggest/react-autosuggest-tests.tsx
+243 -181
View File
@@ -1,42 +1,69 @@
// region Imports
import React = require('react');
import ReactDOM = require('react-dom');
import { Autosuggest, SuggestionSelectedEventData } from 'react-autosuggest';
import Autosuggest = require('react-autosuggest');
// endregion
interface Language {
name: string;
year: number;
name : string;
year : number;
}
// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
function escapeRegexCharacters(str: string): string {
// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expression
// s#Using_Special_Characters
function escapeRegexCharacters(str : string) : string {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
export class ReactAutosuggestBasicTest extends React.Component<any, any> {
// region Fields
static languages: Language[] = [
{name: 'C', year: 1972},
{name: 'C#', year: 2000},
{name: 'C++', year: 1983},
{name: 'Clojure', year: 2007},
{name: 'Elm', year: 2012},
{name: 'Go', year: 2009},
{name: 'Haskell', year: 1990},
{name: 'Java', year: 1995},
{name: 'Javascript', year: 1995},
{name: 'Perl', year: 1987},
{name: 'PHP', year: 1995},
{name: 'Python', year: 1991},
{name: 'Ruby', year: 1995},
{name: 'Scala', year: 2003}
static languages : Language[] = [
{
name: 'C',
year: 1972
}, {
name: 'C#',
year: 2000
}, {
name: 'C++',
year: 1983
}, {
name: 'Clojure',
year: 2007
}, {
name: 'Elm',
year: 2012
}, {
name: 'Go',
year: 2009
}, {
name: 'Haskell',
year: 1990
}, {
name: 'Java',
year: 1995
}, {
name: 'Javascript',
year: 1995
}, {
name: 'Perl',
year: 1987
}, {
name: 'PHP',
year: 1995
}, {
name: 'Python',
year: 1991
}, {
name: 'Ruby',
year: 1995
}, {
name: 'Scala',
year: 2003
}
];
// endregion
// region Constructor
constructor(props: any) {
// endregion region Constructor
constructor(props : any) {
super(props);
this.state = {
@@ -44,15 +71,15 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
suggestions: this.getSuggestions('')
};
}
// endregion
// region Rendering methods
render(): JSX.Element {
// endregion region Rendering methods
render() : JSX.Element {
const {value, suggestions} = this.state;
const inputProps = {
placeholder: `Type 'c'`,
value,
onChange: this.onChange.bind(this)
onChange: this
.onChange
.bind(this)
};
const theme = {
@@ -61,42 +88,38 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
suggestionFocused: 'active'
};
return <Autosuggest suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
onSuggestionSelected={this.onSuggestionsSelected}
alwaysRenderSuggestions={true}
inputProps={inputProps}
theme={theme}
/>;
return <Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this
.onSuggestionsFetchRequested
.bind(this)}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
onSuggestionSelected={this.onSuggestionsSelected}
alwaysRenderSuggestions={true}
inputProps={inputProps}
theme={theme}/>;
}
protected onSuggestionsSelected(event: React.FormEvent<any>, data: SuggestionSelectedEventData<Language>): void {
protected onSuggestionsSelected(event : React.FormEvent<any>, data : Autosuggest.SuggestionSelectedEventData<Language>) : void {
alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`);
}
protected renderSuggestion(suggestion: Language): JSX.Element {
protected renderSuggestion(suggestion : Language) : JSX.Element {
return <span>{suggestion.name}</span>;
}
// endregion
// region Event handlers
protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
this.setState({
value: newValue
});
// endregion region Event handlers
protected onChange(event : React.FormEvent<any>, {newValue, method} : any) : void {
this.setState({value: newValue});
}
protected onSuggestionsFetchRequested({ value }: any): void {
protected onSuggestionsFetchRequested({value}: any) : void {
this.setState({
suggestions: this.getSuggestions(value)
});
}
// endregion
// region Helper methods
protected getSuggestions(value: string): Language[] {
// endregion region Helper methods
protected getSuggestions(value: string) : Language[] {
const escapedValue = escapeRegexCharacters(value.trim());
if (escapedValue === '') {
@@ -105,69 +128,97 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
const regex = new RegExp('^' + escapedValue, 'i');
return ReactAutosuggestBasicTest.languages.filter(language => regex.test(language.name));
return ReactAutosuggestBasicTest
.languages
.filter(language => regex.test(language.name));
}
protected getSuggestionValue(suggestion: Language): string {
return suggestion.name;
}
protected getSuggestionValue(suggestion: Language) : string {return suggestion.name;}
// endregion
}
ReactDOM.render(<ReactAutosuggestBasicTest />, document.getElementById('app'));
ReactDOM.render(
<ReactAutosuggestBasicTest/>, document.getElementById('app'));
interface LanguageGroup {
title: string;
languages: Language[];
title : string;
languages : Language[];
}
export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
export class ReactAutosuggestMultipleTest extends React.Component<any,any> {
// region Fields
static languages: LanguageGroup[] = [
static languages : LanguageGroup[] = [
{
title: '1970s',
languages: [
{name: 'C', year: 1972}
{
name: 'C',
year: 1972
}
]
},
{
}, {
title: '1980s',
languages: [
{name: 'C++', year: 1983},
{name: 'Perl', year: 1987}
{
name: 'C++',
year: 1983
}, {
name: 'Perl',
year: 1987
}
]
},
{
}, {
title: '1990s',
languages: [
{name: 'Haskell', year: 1990},
{name: 'Python', year: 1991},
{name: 'Java', year: 1995},
{name: 'Javascript', year: 1995},
{name: 'PHP', year: 1995},
{name: 'Ruby', year: 1995}
{
name: 'Haskell',
year: 1990
}, {
name: 'Python',
year: 1991
}, {
name: 'Java',
year: 1995
}, {
name: 'Javascript',
year: 1995
}, {
name: 'PHP',
year: 1995
}, {
name: 'Ruby',
year: 1995
}
]
},
{
}, {
title: '2000s',
languages: [
{name: 'C#', year: 2000},
{name: 'Scala', year: 2003},
{name: 'Clojure', year: 2007},
{name: 'Go', year: 2009}
{
name: 'C#',
year: 2000
}, {
name: 'Scala',
year: 2003
}, {
name: 'Clojure',
year: 2007
}, {
name: 'Go',
year: 2009
}
]
},
{
}, {
title: '2010s',
languages: [
{name: 'Elm', year: 2012}
{
name: 'Elm',
year: 2012
}
]
}
];
// endregion
// region Constructor
constructor(props: any) {
// endregion region Constructor
constructor(props : any) {
super(props);
this.state = {
@@ -175,59 +226,56 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
suggestions: this.getSuggestions('')
};
}
// endregion
// region Rendering methods
render(): JSX.Element {
const { value, suggestions } = this.state;
// endregion region Rendering methods
render() : JSX.Element {
const {value, suggestions} = this.state;
const inputProps = {
placeholder: `Type 'c'`,
value,
onChange: this.onChange.bind(this)
onChange: this
.onChange
.bind(this)
};
return <Autosuggest multiSection={true}
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
onSuggestionSelected={this.onSuggestionSelected}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
renderSectionTitle={this.renderSectionTitle}
getSectionSuggestions={this.getSectionSuggestions}
inputProps={inputProps} />;
return <Autosuggest
multiSection={true}
suggestions={suggestions}
onSuggestionsFetchRequested={this
.onSuggestionsFetchRequested
.bind(this)}
onSuggestionSelected={this.onSuggestionSelected}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
renderSectionTitle={this.renderSectionTitle}
getSectionSuggestions={this.getSectionSuggestions}
inputProps={inputProps}/>;
}
protected onSuggestionSelected(event: React.FormEvent<any>, data: SuggestionSelectedEventData<Language>): void {
protected onSuggestionSelected(event : React.FormEvent<any>, data : Autosuggest.SuggestionSelectedEventData<Language>) : void {
const language = data.suggestion as Language;
alert(`Selected language is ${language.name} (${language.year}).`);
}
protected renderSuggestion(suggestion: Language): JSX.Element {
protected renderSuggestion(suggestion : Language) : JSX.Element {
return <span>{suggestion.name}</span>;
}
protected renderSectionTitle(section: LanguageGroup): JSX.Element {
protected renderSectionTitle(section : LanguageGroup) : JSX.Element {
return <strong>{section.title}</strong>;
}
// endregion
// region Event handlers
protected onChange(event: React.FormEvent<any>, { newValue, method }: any): void {
this.setState({
value: newValue
});
// endregion region Event handlers
protected onChange(event : React.FormEvent<any>, {newValue, method} : any) : void {
this.setState({value: newValue});
}
protected onSuggestionsFetchRequested({ value }: any): void {
protected onSuggestionsFetchRequested({value} : any) : void {
this.setState({
suggestions: this.getSuggestions(value)
});
}
// endregion
// region Helper methods
protected getSuggestions(value: string): LanguageGroup[] {
// endregion region Helper methods
protected getSuggestions(value : string) : LanguageGroup[] {
const escapedValue = escapeRegexCharacters(value.trim());
if (escapedValue === '') {
@@ -236,46 +284,61 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
const regex = new RegExp('^' + escapedValue, 'i');
return ReactAutosuggestMultipleTest.languages
return ReactAutosuggestMultipleTest
.languages
.map(section => {
return {
title: section.title,
languages: section.languages.filter(language => regex.test(language.name))
languages: section
.languages
.filter(language => regex.test(language.name))
};
})
.filter(section => section.languages.length > 0);
}
protected getSuggestionValue(suggestion: Language) {
protected getSuggestionValue(suggestion : Language) {
return suggestion.name;
}
protected getSectionSuggestions(section: LanguageGroup) {
protected getSectionSuggestions(section : LanguageGroup) {
return section.languages;
}
// endregion
}
ReactDOM.render(<ReactAutosuggestMultipleTest />, document.getElementById('app'));
ReactDOM.render(
<ReactAutosuggestMultipleTest/>, document.getElementById('app'));
interface Person {
first: string;
last: string;
twitter: string;
first : string;
last : string;
twitter : string;
}
export class ReactAutosuggestCustomTest extends React.Component<any, any> {
export class ReactAutosuggestCustomTest extends React.Component<any,any> {
// region Fields
static people: Person[] = [
{first: 'Charlie', last: 'Brown', twitter: 'dancounsell'},
{first: 'Charlotte', last: 'White', twitter: 'mtnmissy'},
{first: 'Chloe', last: 'Jones', twitter: 'ladylexy'},
{first: 'Cooper', last: 'King', twitter: 'steveodom'}
static people : Person[] = [
{
first: 'Charlie',
last: 'Brown',
twitter: 'dancounsell'
}, {
first: 'Charlotte',
last: 'White',
twitter: 'mtnmissy'
}, {
first: 'Chloe',
last: 'Jones',
twitter: 'ladylexy'
}, {
first: 'Cooper',
last: 'King',
twitter: 'steveodom'
}
];
// endregion
// region Constructor
constructor(props: any) {
// endregion region Constructor
constructor(props : any) {
super(props);
this.state = {
@@ -283,64 +346,62 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
suggestions: this.getSuggestions('')
};
}
// endregion
// region Rendering methods
render(): JSX.Element {
const { value, suggestions } = this.state;
// endregion region Rendering methods
render() : JSX.Element {
const {value, suggestions} = this.state;
const inputProps = {
placeholder: "Type 'c'",
value,
onChange: this.onChange.bind(this)
onChange: this
.onChange
.bind(this)
};
return <Autosuggest suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps} />;
return<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps}/>;
}
protected renderSuggestion(suggestion: Person, { value, valueBeforeUpDown }: any): JSX.Element {
protected renderSuggestion(suggestion : Person, {value, valueBeforeUpDown} : any) : JSX.Element {
const suggestionText = `${suggestion.first} ${suggestion.last}`;
const query = (valueBeforeUpDown || value).trim();
const parts = suggestionText.split(' ').map((part: string) => {
return {
highlight: (Math.ceil(Math.random() * 10)) % 2,
text: part
};
});
const parts = suggestionText
.split(' ')
.map((part : string) => {
return {
highlight: (Math.ceil(Math.random() * 10)) % 2,
text: part
};
});
return <span className={'suggestion-content ' + suggestion.twitter}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? 'highlight' : undefined;
return<span className={'suggestion-content ' + suggestion.twitter}>
<span className="name">
{parts.map((part, index) => {
const className = part.highlight
? 'highlight'
: undefined;
return <span className={className} key={index}>{part.text}</span>;
})
}
</span>
</span>;
return<span className={className} key={index}>{part.text}</span>;
})
}
</span>
</span>;
}
// endregion
// region Event handlers
protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
this.setState({
value: newValue
});
// endregion region Event handlers
protected onChange(event : React.FormEvent<any>, {newValue, method} : any) : void {
this.setState({value: newValue});
}
protected onSuggestionsFetchRequested({ value }: any): void {
protected onSuggestionsFetchRequested({value} : any) : void {
this.setState({
suggestions: this.getSuggestions(value)
});
}
// endregion
// region Helper methods
protected getSuggestions(value: string): Person[] {
// endregion region Helper methods
protected getSuggestions(value : string) : Person[] {
const escapedValue = escapeRegexCharacters(value.trim());
if (escapedValue === '') {
@@ -349,13 +410,14 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
const regex = new RegExp('\\b' + escapedValue, 'i');
return ReactAutosuggestCustomTest.people.filter(person => regex.test(this.getSuggestionValue(person)));
return ReactAutosuggestCustomTest
.people
.filter(person => regex.test(this.getSuggestionValue(person)));
}
protected getSuggestionValue(suggestion: Person): string {
return `${suggestion.first} ${suggestion.last}`;
}
protected getSuggestionValue(suggestion : Person) : string {return `${suggestion.first} ${suggestion.last}`;}
// endregion
}
ReactDOM.render(<ReactAutosuggestCustomTest />, document.getElementById('app'));
ReactDOM.render(
<ReactAutosuggestCustomTest/>, document.getElementById('app'));