From 23cfd3e510709aff50e42ab3c7fec666108716e4 Mon Sep 17 00:00:00 2001 From: Terry Bayne Date: Thu, 23 Feb 2017 12:39:17 -0600 Subject: [PATCH 1/4] Updated typings for the react-autosuggest package Reformatted to remove whitespace errors Fixed the comment header --- react-autosuggest/index.d.ts | 25 +- react-autosuggest/react-autosuggest-tests.tsx | 418 ++++++++++-------- 2 files changed, 257 insertions(+), 186 deletions(-) diff --git a/react-autosuggest/index.d.ts b/react-autosuggest/index.d.ts index d0d6bec839..d028e0b595 100644 --- a/react-autosuggest/index.d.ts +++ b/react-autosuggest/index.d.ts @@ -1,11 +1,18 @@ // Type definitions for react-autosuggest 7.0 // Project: http://react-autosuggest.js.org/ -// Definitions by: Nicolas Schmitt , Philip Ottesen , Robert Essig +// Definitions by: Nicolas Schmitt , Philip Ottesen , Robert Essig , Terry Bayne // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 -import * as React from 'react'; +/* tslint:disable:dt-header */ +import * as React from 'react'; +declare class Autosuggest extends React.Component {} + +export = Autosuggest; +export as namespace Autosuggest; + +declare namespace Autosuggest { interface SuggestionsFetchRequest { value: string; reason: string; @@ -25,13 +32,13 @@ import * as React from 'react'; focusedSuggestion: any; } - interface InputProps extends React.HTMLAttributes { + interface InputProps extends React.HTMLAttributes { value: string; - onChange: (event: React.FormEvent, params?: ChangeEvent) => void; - onBlur?: (event: React.FormEvent, params?: BlurEvent) => void; + onChange: (event: React.FormEvent , params?: ChangeEvent) => void; + onBlur?: (event: React.FormEvent , params?: BlurEvent) => void; } - export interface SuggestionSelectedEventData { + export interface SuggestionSelectedEventData { method: 'click' | 'enter'; sectionIndex: number | null; suggestion: TSuggestion; @@ -50,14 +57,14 @@ import * as React from 'react'; suggestionsContainer?: string; } - interface AutosuggestProps extends React.Props { + interface AutosuggestProps extends React.Props < Autosuggest > { suggestions: any[]; onSuggestionsFetchRequested: (request: SuggestionsFetchRequest) => void; onSuggestionsClearRequested?: () => void; getSuggestionValue: (suggestion: any) => any; renderSuggestion: (suggestion: any, inputValues: InputValues) => JSX.Element; inputProps: InputProps; - onSuggestionSelected?: (event: React.FormEvent, data: SuggestionSelectedEventData) => void; + onSuggestionSelected?: (event: React.FormEvent , data: SuggestionSelectedEventData ) => void; shouldRenderSuggestions?: (value: string) => boolean; alwaysRenderSuggestions?: boolean; focusFirstSuggestion?: boolean; @@ -71,4 +78,4 @@ import * as React from 'react'; id?: string; } - export class Autosuggest extends React.Component {} +} diff --git a/react-autosuggest/react-autosuggest-tests.tsx b/react-autosuggest/react-autosuggest-tests.tsx index 3eaee3e4e7..2dff0a82bd 100644 --- a/react-autosuggest/react-autosuggest-tests.tsx +++ b/react-autosuggest/react-autosuggest-tests.tsx @@ -1,42 +1,69 @@ // region Imports import React = require('react'); import ReactDOM = require('react-dom'); -import { Autosuggest, SuggestionSelectedEventData } from 'react-autosuggest'; +import * as Autosuggest from '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 { +export class ReactAutosuggestBasicTest extends React.Component { // 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 { 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 { suggestionFocused: 'active' }; - return ; + return ; } - protected onSuggestionsSelected(event: React.FormEvent, data: SuggestionSelectedEventData): void { + protected onSuggestionsSelected(event : React.FormEvent , 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 {suggestion.name}; } - // endregion - - // region Event handlers - protected onChange(event: React.FormEvent, {newValue, method}: any): void { - this.setState({ - value: newValue - }); + // endregion region Event handlers + protected onChange(event : React.FormEvent , {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,98 @@ export class ReactAutosuggestBasicTest extends React.Component { 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(, document.getElementById('app')); +ReactDOM.render( + , document.getElementById('app')); interface LanguageGroup { - title: string; - languages: Language[]; + title : string; + languages : Language[]; } -export class ReactAutosuggestMultipleTest extends React.Component { +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 +227,56 @@ export class ReactAutosuggestMultipleTest extends React.Component { 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 ; + return ; } - protected onSuggestionSelected(event: React.FormEvent, data: SuggestionSelectedEventData): void { + protected onSuggestionSelected(event : React.FormEvent , 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 {suggestion.name}; } - protected renderSectionTitle(section: LanguageGroup): JSX.Element { + protected renderSectionTitle(section : LanguageGroup) : JSX.Element { return {section.title}; } - // endregion - - // region Event handlers - protected onChange(event: React.FormEvent, { newValue, method }: any): void { - this.setState({ - value: newValue - }); + // endregion region Event handlers + protected onChange(event : React.FormEvent , {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 +285,62 @@ export class ReactAutosuggestMultipleTest extends React.Component { 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(, document.getElementById('app')); +ReactDOM.render( + , document.getElementById('app')); interface Person { - first: string; - last: string; - twitter: string; + first : string; + last : string; + twitter : string; } -export class ReactAutosuggestCustomTest extends React.Component { +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 +348,62 @@ export class ReactAutosuggestCustomTest extends React.Component { 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 ; + return ; } - 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 - { - parts.map((part, index) => { - const className = part.highlight ? 'highlight' : undefined; + {parts.map((part, index) => { + const className = part.highlight + ? 'highlight' + : undefined; return {part.text}; - }) - } + }) +} ; } - // endregion - - // region Event handlers - protected onChange(event: React.FormEvent, {newValue, method}: any): void { - this.setState({ - value: newValue - }); + // endregion region Event handlers + protected onChange(event : React.FormEvent , {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 +412,14 @@ export class ReactAutosuggestCustomTest extends React.Component { 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(, document.getElementById('app')); +ReactDOM.render( + , document.getElementById('app')); From 71d1224978e84eabf76de8aada2e34d8e070760f Mon Sep 17 00:00:00 2001 From: Terry Bayne Date: Mon, 27 Feb 2017 08:17:20 -0600 Subject: [PATCH 2/4] Updated version supported to react-autosuggest 8.0 --- react-autosuggest/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-autosuggest/index.d.ts b/react-autosuggest/index.d.ts index d028e0b595..5f3648eb3a 100644 --- a/react-autosuggest/index.d.ts +++ b/react-autosuggest/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-autosuggest 7.0 +// Type definitions for react-autosuggest 8.0 // Project: http://react-autosuggest.js.org/ // Definitions by: Nicolas Schmitt , Philip Ottesen , Robert Essig , Terry Bayne // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped From 6fd0e9e82dd55e17bd44e9f5e147e4b3baa48a65 Mon Sep 17 00:00:00 2001 From: Terry Bayne Date: Mon, 27 Feb 2017 08:42:06 -0600 Subject: [PATCH 3/4] Removed unnecessary export as statement --- react-autosuggest/index.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/react-autosuggest/index.d.ts b/react-autosuggest/index.d.ts index 5f3648eb3a..13f88eb00b 100644 --- a/react-autosuggest/index.d.ts +++ b/react-autosuggest/index.d.ts @@ -10,7 +10,6 @@ import * as React from 'react'; declare class Autosuggest extends React.Component {} export = Autosuggest; -export as namespace Autosuggest; declare namespace Autosuggest { interface SuggestionsFetchRequest { From dbf6e9353d318dc8c23d0ba07e53635fb9e50343 Mon Sep 17 00:00:00 2001 From: Terry Bayne Date: Mon, 27 Feb 2017 09:48:51 -0600 Subject: [PATCH 4/4] Changes for DefinatelyTyped: Removed tslint:disable:dt-header comment Changed import to use require in tests Formatting fixed around type parameters --- react-autosuggest/index.d.ts | 15 ++++---- react-autosuggest/react-autosuggest-tests.tsx | 38 +++++++++---------- 2 files changed, 25 insertions(+), 28 deletions(-) diff --git a/react-autosuggest/index.d.ts b/react-autosuggest/index.d.ts index 13f88eb00b..7199fefcdb 100644 --- a/react-autosuggest/index.d.ts +++ b/react-autosuggest/index.d.ts @@ -4,10 +4,9 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 -/* tslint:disable:dt-header */ import * as React from 'react'; -declare class Autosuggest extends React.Component {} +declare class Autosuggest extends React.Component {} export = Autosuggest; @@ -31,13 +30,13 @@ declare namespace Autosuggest { focusedSuggestion: any; } - interface InputProps extends React.HTMLAttributes { + interface InputProps extends React.HTMLAttributes { value: string; - onChange: (event: React.FormEvent , params?: ChangeEvent) => void; - onBlur?: (event: React.FormEvent , params?: BlurEvent) => void; + onChange: (event: React.FormEvent, params?: ChangeEvent) => void; + onBlur?: (event: React.FormEvent, params?: BlurEvent) => void; } - export interface SuggestionSelectedEventData { + export interface SuggestionSelectedEventData { method: 'click' | 'enter'; sectionIndex: number | null; suggestion: TSuggestion; @@ -56,14 +55,14 @@ declare namespace Autosuggest { suggestionsContainer?: string; } - interface AutosuggestProps extends React.Props < Autosuggest > { + interface AutosuggestProps extends React.Props { suggestions: any[]; onSuggestionsFetchRequested: (request: SuggestionsFetchRequest) => void; onSuggestionsClearRequested?: () => void; getSuggestionValue: (suggestion: any) => any; renderSuggestion: (suggestion: any, inputValues: InputValues) => JSX.Element; inputProps: InputProps; - onSuggestionSelected?: (event: React.FormEvent , data: SuggestionSelectedEventData ) => void; + onSuggestionSelected?: (event: React.FormEvent, data: SuggestionSelectedEventData) => void; shouldRenderSuggestions?: (value: string) => boolean; alwaysRenderSuggestions?: boolean; focusFirstSuggestion?: boolean; diff --git a/react-autosuggest/react-autosuggest-tests.tsx b/react-autosuggest/react-autosuggest-tests.tsx index 2dff0a82bd..f5ecaedc63 100644 --- a/react-autosuggest/react-autosuggest-tests.tsx +++ b/react-autosuggest/react-autosuggest-tests.tsx @@ -1,7 +1,7 @@ // region Imports import React = require('react'); import ReactDOM = require('react-dom'); -import * as Autosuggest from 'react-autosuggest'; +import Autosuggest = require('react-autosuggest'); // endregion interface Language { @@ -15,7 +15,7 @@ function escapeRegexCharacters(str : string) : string { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } -export class ReactAutosuggestBasicTest extends React.Component { +export class ReactAutosuggestBasicTest extends React.Component { // region Fields static languages : Language[] = [ { @@ -101,7 +101,7 @@ export class ReactAutosuggestBasicTest extends React.Component { theme={theme}/>; } - protected onSuggestionsSelected(event : React.FormEvent , data : Autosuggest.SuggestionSelectedEventData < Language >) : void { + protected onSuggestionsSelected(event : React.FormEvent, data : Autosuggest.SuggestionSelectedEventData) : void { alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`); } @@ -109,7 +109,7 @@ export class ReactAutosuggestBasicTest extends React.Component { return {suggestion.name}; } // endregion region Event handlers - protected onChange(event : React.FormEvent , {newValue, method} : any) : void { + protected onChange(event : React.FormEvent, {newValue, method} : any) : void { this.setState({value: newValue}); } @@ -138,15 +138,14 @@ export class ReactAutosuggestBasicTest extends React.Component { } ReactDOM.render( - , document.getElementById('app')); + , document.getElementById('app')); interface LanguageGroup { title : string; languages : Language[]; } -export class ReactAutosuggestMultipleTest extends React.Component < any, -any > { +export class ReactAutosuggestMultipleTest extends React.Component { // region Fields static languages : LanguageGroup[] = [ { @@ -252,7 +251,7 @@ any > { inputProps={inputProps}/>; } - protected onSuggestionSelected(event : React.FormEvent , data : Autosuggest.SuggestionSelectedEventData < Language >) : void { + protected onSuggestionSelected(event : React.FormEvent, data : Autosuggest.SuggestionSelectedEventData) : void { const language = data.suggestion as Language; alert(`Selected language is ${language.name} (${language.year}).`); @@ -266,7 +265,7 @@ any > { return {section.title}; } // endregion region Event handlers - protected onChange(event : React.FormEvent , {newValue, method} : any) : void { + protected onChange(event : React.FormEvent, {newValue, method} : any) : void { this.setState({value: newValue}); } @@ -309,7 +308,7 @@ any > { } ReactDOM.render( - , document.getElementById('app')); + , document.getElementById('app')); interface Person { first : string; @@ -317,8 +316,7 @@ interface Person { twitter : string; } -export class ReactAutosuggestCustomTest extends React.Component < any, -any > { +export class ReactAutosuggestCustomTest extends React.Component { // region Fields static people : Person[] = [ { @@ -359,7 +357,7 @@ any > { .bind(this) }; - return { }; }); - return - + return + {parts.map((part, index) => { const className = part.highlight ? 'highlight' : undefined; - return {part.text}; + return{part.text}; }) } - - ; + + ; } // endregion region Event handlers - protected onChange(event : React.FormEvent , {newValue, method} : any) : void { + protected onChange(event : React.FormEvent, {newValue, method} : any) : void { this.setState({value: newValue}); } @@ -422,4 +420,4 @@ any > { } ReactDOM.render( - , document.getElementById('app')); + , document.getElementById('app'));