Merge pull request #17849 from jankarres/master

Update react-tag-input for v4.7.2

types/react-tag-input/index.d.ts

@@ -1,18 +1,35 @@
 // Type definitions for React-Tags (react-tag-input) 4.7
 // Project: https://github.com/prakhar1989/react-tags
-// Definitions by: Ogglas <https://stackoverflow.com/users/3850405/ogglas>
+// Definitions by: Ogglas <https://github.com/Ogglas>
+//                  Jan Karres <https://github.com/jankarres>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
 
 import * as React from "react";
 
 export interface ReactTagsProps {
-    tags?: Array<{id: number, text: string }>;
+    tags?: Array<{ id: number, text: string }>;
     suggestions?: string[];
-    handleDelete: ((i: number) => void);
-    handleAddition: ((tag: string) => void);
-    handleDrag?: ((tag: { id: number; text: string; }, currPos: number, newPos: number) => void);
+    delimiters?: number[];
     placeholder?: string;
+    labelField?: string;
+
+    handleAddition: ((tag: string) => void);
+    handleDelete: ((i: number) => void);
+    handleDrag?: ((tag: { id: number; text: string; }, currPos: number, newPos: number) => void);
+    handleInputChange?: ((value: string) => void);
+    handleFilterSuggestions?: ((textInputValue: string, possibleSuggestionsArray: string[]) => boolean);
+    handleInputBlur?: (() => void);
+
+    autofocus?: boolean;
+    allowDeleteFromEmptyInput?: boolean;
+    minQueryLength?: number;
+    removeComponent?: React.Component<any, any>;
+    autocomplete?: boolean | 1;
+    readOnly?: boolean;
+    maxLength?: number;
+
+    name?: string;
+    id?: string;
 }
 
 export class WithContext extends React.Component<ReactTagsProps, {}> { }

types/react-tag-input/react-tag-input-tests.tsx

@@ -7,10 +7,30 @@ let tags = Array({ id: 0, text: "test" }, { id: 1, text: "testing" });
 let suggestions = Array("test1", "test2");
 
 ReactDOM.render(
-    <ReactTags tags={tags}
+    <ReactTags
+        tags={tags}
         suggestions={suggestions}
-        handleDelete={(i: number) => console.log("Delete: " + i)}
+        delimiters={[13, 8, 188]} // Enter, Tab and Comma
+        placeholder="Some placeholder text"
+        labelField="Some label"
+
         handleAddition={(tag: string) => console.log("Add: " + tag)}
-        handleDrag={(tag: { id: number; text: string; }, currPos: number, newPos: number) => console.log("Drag: " + tag.text)} />,
+        handleDelete={(i: number) => console.log("Delete: " + i)}
+        handleDrag={(tag: { id: number; text: string; }, currPos: number, newPos: number) => console.log("Drag: " + tag.text)}
+        handleInputChange={(value: string) => console.log("Changed to: ", value)}
+        handleFilterSuggestions={(textInputValue: string, possibleSuggestionsArray: string[]) => true}
+        handleInputBlur={() => console.log("Blured")}
+
+        autofocus={false}
+        allowDeleteFromEmptyInput={false}
+        minQueryLength={0}
+        removeComponent={null}
+        autocomplete={true}
+        readOnly={false}
+        maxLength={64}
+
+        name="react-tags-field"
+        id="react-tags-field"
+    />,
     document.getElementById("app")
 );