Merge pull request #12722 from pjo256/types-2.0

[react-autosuggest] Optional theme parameters, alwaysRenderSuggestions

react-autosuggest/index.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for react-autosuggest v3.7.3
 // Project: http://react-autosuggest.js.org/
-// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>
+// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 /// <reference types="react"/>
@@ -16,14 +16,24 @@ declare namespace ReactAutosuggest {
     valueBeforeUpDown?: string;
   }
 
+  interface ChangeEvent {
+    newValue: string;
+    method: 'down' | 'up' | 'escape' | 'enter' | 'click' | 'type';
+  }
+
+  interface BlurEvent {
+    focusedSuggestion: any;
+  }
+
   interface InputProps extends React.HTMLAttributes<any> {
     value: string;
-    onChange: (event: React.FormEvent<any>, params?: {newValue: string, method: string}) => void;
+    onChange: (event: React.FormEvent<any>, params?: ChangeEvent) => void;
+    onBlur?: (event: React.FormEvent<any>, params?: BlurEvent) => void;
   }
 
   interface ExplicitSuggestionSelectedEventData<TSuggestion> {
-    method: string;
-    sectionIndex: number;
+    method: 'click' | 'enter';
+    sectionIndex: number | null;
     suggestion: TSuggestion;
     suggestionValue: string;
   }
@@ -32,15 +42,15 @@ declare namespace ReactAutosuggest {
   }
 
   interface Theme {
-    container: string;
-    containerOpen: string;
-    input: string;
-    sectionContainer: string;
-    sectionSuggestionsContainer: string;
-    sectionTitle: string;
-    suggestion: string;
-    suggestionFocused: string;
-    suggestionsContainer: string;
+    container?: string;
+    containerOpen?: string;
+    input?: string;
+    sectionContainer?: string;
+    sectionSuggestionsContainer?: string;
+    sectionTitle?: string;
+    suggestion?: string;
+    suggestionFocused?: string;
+    suggestionsContainer?: string;
   }
 
   interface AutosuggestProps extends React.Props<Autosuggest> {
@@ -49,6 +59,7 @@ declare namespace ReactAutosuggest {
     getSuggestionValue: (suggestion: any) => string;
     renderSuggestion: (suggestion: any, inputValues: InputValues) => JSX.Element;
     inputProps: InputProps;
+    alwaysRenderSuggestions?: boolean;
     shouldRenderSuggestions?: (value: string) => boolean;
     multiSection?: boolean;
     renderSectionTitle?: (section: any, inputValues: InputValues) => JSX.Element;

react-autosuggest/react-autosuggest-tests.tsx

@@ -55,12 +55,21 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
             onChange: this.onChange.bind(this)
         };
 
+        const theme = {
+            input: 'themed-input-class',
+            container: 'themed-container-class',
+            suggestionFocused: 'active'
+        }
+
         return <Autosuggest suggestions={suggestions}
                             onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested.bind(this)}
                             getSuggestionValue={this.getSuggestionValue}
                             renderSuggestion={this.renderSuggestion}
                             onSuggestionSelected={this.onSuggestionsSelected}
-                            inputProps={inputProps}/>;
+                            alwaysRenderSuggestions={true}
+                            inputProps={inputProps}
+                            theme={theme}
+                            />;
     }
 
     protected onSuggestionsSelected(event: React.FormEvent<any>, data: ReactAutosuggest.ExplicitSuggestionSelectedEventData<Language>): void {
@@ -306,7 +315,7 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
             <span className="name">
             {
                 parts.map((part, index) => {
-                    const className = part.highlight ? 'highlight' : null;
+                    const className = part.highlight ? 'highlight' : undefined;
 
                     return <span className={className} key={index}>{part.text}</span>;
                     })

react-autosuggest/tsconfig.json

@@ -3,7 +3,7 @@
         "module": "commonjs",
         "target": "es6",
         "noImplicitAny": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"