Skip to content

Commit 9c1dc77

Browse files
cdeutschAndy
cdeutsch
authored and
Andy
committed
Updated react-autosuggest for version 9.3.X (DefinitelyTyped#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<Autosuggest.AutosuggestProps> {} ```
1 parent 7a99e7c commit 9c1dc77

4 files changed

Lines changed: 76 additions & 26 deletions

File tree

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2504,7 +2504,7 @@
25042504
/types/react/v15/ @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz
25052505
/types/react/ @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @richseviora
25062506
/types/react-app/ @prakarshpandey
2507-
/types/react-autosuggest/ @nicolas-schmitt @pjo256 @robessog @tbayne
2507+
/types/react-autosuggest/ @nicolas-schmitt @pjo256 @robessog @tbayne @cdeutsch
25082508
/types/react-body-classname/ @mhegazy
25092509
/types/react-bootstrap/ @walkerburgin @vsiao @danilojrr @Batbold-Gansukh @octatone @chengsieuly @katbusch
25102510
/types/react-bootstrap-date-picker/ @LKay @ssi-hu-antal-bodnar

‎types/react-autosuggest/index.d.ts‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,97 @@
1-
// Type definitions for react-autosuggest 8.0
1+
// Type definitions for react-autosuggest 9.3
22
// Project: http://react-autosuggest.js.org/
3-
// 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>
3+
// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>
4+
// Philip Ottesen <https://github.com/pjo256>
5+
// Robert Essig <https://github.com/robessog>
6+
// Terry Bayne <https://github.com/tbayne>
7+
// Christopher Deutsch <https://github.com/cdeutsch>
48
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
59
// TypeScript Version: 2.3
610

711
import * as React from 'react';
8-
declare class Autosuggest extends React.Component<any> {}
12+
declare class Autosuggest extends React.Component<Autosuggest.AutosuggestProps> {}
913

1014
export = Autosuggest;
1115

1216
declare namespace Autosuggest {
1317
interface SuggestionsFetchRequest {
1418
value: string;
15-
reason: string;
19+
reason: 'input-changed' | 'input-focused' | 'escape-pressed' | 'suggestions-revealed' | 'suggestion-selected';
1620
}
1721

1822
interface InputValues {
1923
value: string;
2024
valueBeforeUpDown?: string;
2125
}
2226

27+
interface RenderSuggestionParams {
28+
query: string;
29+
isHighlighted: boolean;
30+
}
31+
32+
interface SuggestionHighlightedParams {
33+
suggestion: any;
34+
}
35+
2336
interface ChangeEvent {
2437
newValue: string;
2538
method: 'down' | 'up' | 'escape' | 'enter' | 'click' | 'type';
2639
}
2740

2841
interface BlurEvent {
29-
focusedSuggestion: any;
42+
highlightedSuggestion: any;
3043
}
3144

32-
interface InputProps extends React.HTMLAttributes<any> {
45+
interface InputProps extends React.InputHTMLAttributes<any> {
3346
value: string;
3447
onChange(event: React.FormEvent<any>, params?: ChangeEvent): void;
3548
onBlur?(event: React.FormEvent<any>, params?: BlurEvent): void;
49+
[key: string]: any;
3650
}
3751

3852
interface SuggestionSelectedEventData<TSuggestion> {
39-
method: 'click' | 'enter';
40-
sectionIndex: number | null;
4153
suggestion: TSuggestion;
4254
suggestionValue: string;
55+
suggestionIndex: number;
56+
sectionIndex: number | null;
57+
method: 'click' | 'enter';
4358
}
4459

4560
interface Theme {
4661
container?: string;
4762
containerOpen?: string;
4863
input?: string;
64+
inputOpen?: string;
65+
inputFocused?: string;
66+
suggestionsContainer?: string;
67+
suggestionsContainerOpen?: string;
68+
suggestionsList?: string;
69+
suggestion?: string;
70+
suggestionFirst?: string;
71+
suggestionHighlighted?: string;
4972
sectionContainer?: string;
50-
sectionSuggestionsContainer?: string;
73+
sectionContainerFirst?: string;
5174
sectionTitle?: string;
52-
suggestion?: string;
53-
suggestionFocused?: string;
54-
suggestionsContainer?: string;
5575
}
5676

5777
interface AutosuggestProps extends React.Props<Autosuggest> {
5878
suggestions: any[];
5979
onSuggestionsFetchRequested(request: SuggestionsFetchRequest): void;
6080
onSuggestionsClearRequested?(): void;
6181
getSuggestionValue(suggestion: any): any;
62-
renderSuggestion(suggestion: any, inputValues: InputValues): JSX.Element;
82+
renderSuggestion(suggestion: any, params: RenderSuggestionParams): JSX.Element;
6383
inputProps: InputProps;
6484
onSuggestionSelected?(event: React.FormEvent<any>, data: SuggestionSelectedEventData<any>): void;
85+
onSuggestionHighlighted?(params: SuggestionHighlightedParams): void;
6586
shouldRenderSuggestions?(value: string): boolean;
6687
alwaysRenderSuggestions?: boolean;
67-
focusFirstSuggestion?: boolean;
88+
highlightFirstSuggestion?: boolean;
6889
focusInputOnSuggestionClick?: boolean;
6990
multiSection?: boolean;
70-
renderSectionTitle?(section: any, inputValues: InputValues): JSX.Element;
91+
renderSectionTitle?(section: any): JSX.Element;
7192
getSectionSuggestions?(section: any): any[];
72-
renderInputComponent?(): JSX.Element;
73-
renderSuggestionsContainer?(children: any): JSX.Element;
93+
renderInputComponent?(inputProps: InputProps): JSX.Element;
94+
renderSuggestionsContainer?(containerProps: any, children: any, query: string): JSX.Element;
7495
theme?: Theme;
7596
id?: string;
7697
}

‎types/react-autosuggest/react-autosuggest-tests.tsx‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,9 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
105105
alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`);
106106
}
107107

108-
protected renderSuggestion(suggestion: Language): JSX.Element {
109-
return <span>{suggestion.name}</span>;
108+
protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element {
109+
const className = params.isHighlighted ? "highlighted" : undefined;
110+
return <span className={className}>{suggestion.name}</span>;
110111
}
111112
// endregion region Event handlers
112113
protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
@@ -223,7 +224,8 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
223224

224225
this.state = {
225226
value: '',
226-
suggestions: this.getSuggestions('')
227+
suggestions: this.getSuggestions(''),
228+
highlighted: ''
227229
};
228230
}
229231
// endregion region Rendering methods
@@ -248,6 +250,10 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
248250
renderSuggestion={this.renderSuggestion}
249251
renderSectionTitle={this.renderSectionTitle}
250252
getSectionSuggestions={this.getSectionSuggestions}
253+
onSuggestionHighlighted={this.onSuggestionHighlighted}
254+
highlightFirstSuggestion={true}
255+
renderInputComponent={this.renderInputComponent}
256+
renderSuggestionsContainer={this.renderSuggestionsContainer}
251257
inputProps={inputProps}/>;
252258
}
253259

@@ -256,13 +262,30 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
256262
alert(`Selected language is ${language.name} (${language.year}).`);
257263
}
258264

259-
protected renderSuggestion(suggestion: Language): JSX.Element {
260-
return <span>{suggestion.name}</span>;
265+
protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element {
266+
const className = params.isHighlighted ? "highlighted" : undefined;
267+
return <span className={className}>{suggestion.name}</span>;
261268
}
262269

263270
protected renderSectionTitle(section: LanguageGroup): JSX.Element {
264271
return <strong>{section.title}</strong>;
265272
}
273+
274+
protected renderInputComponent(inputProps: Autosuggest.InputProps): JSX.Element {
275+
return (
276+
<div>
277+
<input {...inputProps} />
278+
</div>
279+
);
280+
}
281+
282+
protected renderSuggestionsContainer(containerProps: any, children: any, query: string): JSX.Element {
283+
return (
284+
<div {...containerProps}>
285+
<span>{children}</span>
286+
</div>
287+
);
288+
}
266289
// endregion region Event handlers
267290
protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
268291
this.setState({value: newValue});
@@ -303,6 +326,12 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
303326
protected getSectionSuggestions(section: LanguageGroup) {
304327
return section.languages;
305328
}
329+
330+
protected onSuggestionHighlighted(params: Autosuggest.SuggestionHighlightedParams): void {
331+
this.setState({
332+
highlighted: params.suggestion
333+
});
334+
}
306335
// endregion
307336
}
308337

@@ -364,9 +393,9 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
364393
inputProps={inputProps}/>;
365394
}
366395

367-
protected renderSuggestion(suggestion: Person, {value, valueBeforeUpDown}: any): JSX.Element {
396+
protected renderSuggestion(suggestion: Person, params: Autosuggest.RenderSuggestionParams): JSX.Element {
368397
const suggestionText = `${suggestion.first} ${suggestion.last}`;
369-
const query = (valueBeforeUpDown || value).trim();
398+
const query = params.query.trim();
370399
const parts = suggestionText
371400
.split(' ')
372401
.map((part: string) => {

‎types/react-autosuggest/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@
2222
"index.d.ts",
2323
"react-autosuggest-tests.tsx"
2424
]
25-
}
25+
}

0 commit comments

Comments
 (0)