From 9c1dc77ef4e85f5d5ec18ffe768e43359f47aca0 Mon Sep 17 00:00:00 2001 From: Christopher Deutsch Date: Mon, 16 Oct 2017 13:36:31 -0500 Subject: [PATCH] Updated `react-autosuggest` for version 9.3.X (#20442) `react-autosuggest` had some breaking changes. Previously Autosuggest was defined with `any` props which meant no type checking was happening. New definition enables type checking when using `Autosuggest` component. ``` declare class Autosuggest extends React.Component {} ``` --- .github/CODEOWNERS | 2 +- types/react-autosuggest/index.d.ts | 57 +++++++++++++------ .../react-autosuggest-tests.tsx | 43 +++++++++++--- types/react-autosuggest/tsconfig.json | 2 +- 4 files changed, 77 insertions(+), 27 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 390df0c3ed..c9c83c77c4 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -2504,7 +2504,7 @@ /types/react/v15/ @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz /types/react/ @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @richseviora /types/react-app/ @prakarshpandey -/types/react-autosuggest/ @nicolas-schmitt @pjo256 @robessog @tbayne +/types/react-autosuggest/ @nicolas-schmitt @pjo256 @robessog @tbayne @cdeutsch /types/react-body-classname/ @mhegazy /types/react-bootstrap/ @walkerburgin @vsiao @danilojrr @Batbold-Gansukh @octatone @chengsieuly @katbusch /types/react-bootstrap-date-picker/ @LKay @ssi-hu-antal-bodnar diff --git a/types/react-autosuggest/index.d.ts b/types/react-autosuggest/index.d.ts index 2afbd1960d..9205f63d4c 100644 --- a/types/react-autosuggest/index.d.ts +++ b/types/react-autosuggest/index.d.ts @@ -1,18 +1,22 @@ -// Type definitions for react-autosuggest 8.0 +// Type definitions for react-autosuggest 9.3 // Project: http://react-autosuggest.js.org/ -// Definitions by: Nicolas Schmitt , Philip Ottesen , Robert Essig , Terry Bayne +// Definitions by: Nicolas Schmitt +// Philip Ottesen +// Robert Essig +// Terry Bayne +// Christopher Deutsch // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 import * as React from 'react'; -declare class Autosuggest extends React.Component {} +declare class Autosuggest extends React.Component {} export = Autosuggest; declare namespace Autosuggest { interface SuggestionsFetchRequest { value: string; - reason: string; + reason: 'input-changed' | 'input-focused' | 'escape-pressed' | 'suggestions-revealed' | 'suggestion-selected'; } interface InputValues { @@ -20,38 +24,54 @@ declare namespace Autosuggest { valueBeforeUpDown?: string; } + interface RenderSuggestionParams { + query: string; + isHighlighted: boolean; + } + + interface SuggestionHighlightedParams { + suggestion: any; + } + interface ChangeEvent { newValue: string; method: 'down' | 'up' | 'escape' | 'enter' | 'click' | 'type'; } interface BlurEvent { - focusedSuggestion: any; + highlightedSuggestion: any; } - interface InputProps extends React.HTMLAttributes { + interface InputProps extends React.InputHTMLAttributes { value: string; onChange(event: React.FormEvent, params?: ChangeEvent): void; onBlur?(event: React.FormEvent, params?: BlurEvent): void; + [key: string]: any; } interface SuggestionSelectedEventData { - method: 'click' | 'enter'; - sectionIndex: number | null; suggestion: TSuggestion; suggestionValue: string; + suggestionIndex: number; + sectionIndex: number | null; + method: 'click' | 'enter'; } interface Theme { container?: string; containerOpen?: string; input?: string; - sectionContainer?: string; - sectionSuggestionsContainer?: string; - sectionTitle?: string; - suggestion?: string; - suggestionFocused?: string; + inputOpen?: string; + inputFocused?: string; suggestionsContainer?: string; + suggestionsContainerOpen?: string; + suggestionsList?: string; + suggestion?: string; + suggestionFirst?: string; + suggestionHighlighted?: string; + sectionContainer?: string; + sectionContainerFirst?: string; + sectionTitle?: string; } interface AutosuggestProps extends React.Props { @@ -59,18 +79,19 @@ declare namespace Autosuggest { onSuggestionsFetchRequested(request: SuggestionsFetchRequest): void; onSuggestionsClearRequested?(): void; getSuggestionValue(suggestion: any): any; - renderSuggestion(suggestion: any, inputValues: InputValues): JSX.Element; + renderSuggestion(suggestion: any, params: RenderSuggestionParams): JSX.Element; inputProps: InputProps; onSuggestionSelected?(event: React.FormEvent, data: SuggestionSelectedEventData): void; + onSuggestionHighlighted?(params: SuggestionHighlightedParams): void; shouldRenderSuggestions?(value: string): boolean; alwaysRenderSuggestions?: boolean; - focusFirstSuggestion?: boolean; + highlightFirstSuggestion?: boolean; focusInputOnSuggestionClick?: boolean; multiSection?: boolean; - renderSectionTitle?(section: any, inputValues: InputValues): JSX.Element; + renderSectionTitle?(section: any): JSX.Element; getSectionSuggestions?(section: any): any[]; - renderInputComponent?(): JSX.Element; - renderSuggestionsContainer?(children: any): JSX.Element; + renderInputComponent?(inputProps: InputProps): JSX.Element; + renderSuggestionsContainer?(containerProps: any, children: any, query: string): JSX.Element; theme?: Theme; id?: string; } diff --git a/types/react-autosuggest/react-autosuggest-tests.tsx b/types/react-autosuggest/react-autosuggest-tests.tsx index 252f5833fb..c67a5c72ad 100644 --- a/types/react-autosuggest/react-autosuggest-tests.tsx +++ b/types/react-autosuggest/react-autosuggest-tests.tsx @@ -105,8 +105,9 @@ export class ReactAutosuggestBasicTest extends React.Component { alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`); } - protected renderSuggestion(suggestion: Language): JSX.Element { - return {suggestion.name}; + protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element { + const className = params.isHighlighted ? "highlighted" : undefined; + return {suggestion.name}; } // endregion region Event handlers protected onChange(event: React.FormEvent, {newValue, method}: any): void { @@ -223,7 +224,8 @@ export class ReactAutosuggestMultipleTest extends React.Component { this.state = { value: '', - suggestions: this.getSuggestions('') + suggestions: this.getSuggestions(''), + highlighted: '' }; } // endregion region Rendering methods @@ -248,6 +250,10 @@ export class ReactAutosuggestMultipleTest extends React.Component { renderSuggestion={this.renderSuggestion} renderSectionTitle={this.renderSectionTitle} getSectionSuggestions={this.getSectionSuggestions} + onSuggestionHighlighted={this.onSuggestionHighlighted} + highlightFirstSuggestion={true} + renderInputComponent={this.renderInputComponent} + renderSuggestionsContainer={this.renderSuggestionsContainer} inputProps={inputProps}/>; } @@ -256,13 +262,30 @@ export class ReactAutosuggestMultipleTest extends React.Component { alert(`Selected language is ${language.name} (${language.year}).`); } - protected renderSuggestion(suggestion: Language): JSX.Element { - return {suggestion.name}; + protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element { + const className = params.isHighlighted ? "highlighted" : undefined; + return {suggestion.name}; } protected renderSectionTitle(section: LanguageGroup): JSX.Element { return {section.title}; } + + protected renderInputComponent(inputProps: Autosuggest.InputProps): JSX.Element { + return ( +
+ +
+ ); + } + + protected renderSuggestionsContainer(containerProps: any, children: any, query: string): JSX.Element { + return ( +
+ {children} +
+ ); + } // endregion region Event handlers protected onChange(event: React.FormEvent, {newValue, method}: any): void { this.setState({value: newValue}); @@ -303,6 +326,12 @@ export class ReactAutosuggestMultipleTest extends React.Component { protected getSectionSuggestions(section: LanguageGroup) { return section.languages; } + + protected onSuggestionHighlighted(params: Autosuggest.SuggestionHighlightedParams): void { + this.setState({ + highlighted: params.suggestion + }); + } // endregion } @@ -364,9 +393,9 @@ export class ReactAutosuggestCustomTest extends React.Component { inputProps={inputProps}/>; } - protected renderSuggestion(suggestion: Person, {value, valueBeforeUpDown}: any): JSX.Element { + protected renderSuggestion(suggestion: Person, params: Autosuggest.RenderSuggestionParams): JSX.Element { const suggestionText = `${suggestion.first} ${suggestion.last}`; - const query = (valueBeforeUpDown || value).trim(); + const query = params.query.trim(); const parts = suggestionText .split(' ') .map((part: string) => { diff --git a/types/react-autosuggest/tsconfig.json b/types/react-autosuggest/tsconfig.json index b85bc369dc..fc78293096 100644 --- a/types/react-autosuggest/tsconfig.json +++ b/types/react-autosuggest/tsconfig.json @@ -22,4 +22,4 @@ "index.d.ts", "react-autosuggest-tests.tsx" ] -} \ No newline at end of file +}