From d6089672604a190e95bac9cd5f42db55d1fd8dee Mon Sep 17 00:00:00 2001 From: jlismore <37339984+jlismore@users.noreply.github.com> Date: Thu, 18 Oct 2018 19:45:04 +0000 Subject: [PATCH] Add types for react-tag-autocomplete pkg (#29856) * Types for react-tag-autocomplete pkg * Add TS version to declarion file Fix test errors --- types/react-tag-autocomplete/index.d.ts | 112 ++++++++++++++++++ .../react-tag-autocomplete-tests.tsx | 68 +++++++++++ types/react-tag-autocomplete/tsconfig.json | 17 +++ types/react-tag-autocomplete/tslint.json | 1 + 4 files changed, 198 insertions(+) create mode 100644 types/react-tag-autocomplete/index.d.ts create mode 100644 types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx create mode 100644 types/react-tag-autocomplete/tsconfig.json create mode 100644 types/react-tag-autocomplete/tslint.json diff --git a/types/react-tag-autocomplete/index.d.ts b/types/react-tag-autocomplete/index.d.ts new file mode 100644 index 0000000000..15273e3918 --- /dev/null +++ b/types/react-tag-autocomplete/index.d.ts @@ -0,0 +1,112 @@ +// Type definitions for react-tag-autocomplete 5.6 +// Project: https://github.com/i-like-robots/react-tags#readme +// Definitions by: James Lismore +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { Component } from "react"; + +export default class ReactTags extends Component {} + +export interface Tag { + id: string | number; + name: string; + disabled?: boolean; +} + +export interface TagComponentProps { + tag: Tag; + classNames: ClassNames; + onDelete: (event: React.MouseEvent) => void; +} + +export interface ClassNames { + root: string; + rootFocused: string; + selected: string; + selectedTag: string; + selectedTagName: string; + search: string; + searchInput: string; + suggestions: string; + suggestionActive: string; + suggestionDisabled: string; +} + +export interface ReactTagsProps { + /** + * Disables ability to delete the selected tags when backspace is pressed while focussed on the text input. Default: true. + */ + allowBackspace?: boolean; + /** + * Allows users to add new (not suggested) tags. Default: false. + */ + allowNew?: boolean; + /** + * Boolean parameter to control whether the text-input should be autofocused on mount. Default: true. + */ + autofocus?: boolean; + /** + * Boolean parameter to control whether the text-input should be automatically resized to fit its value. Default: true. + */ + autoresize?: boolean; + classNames?: ClassNames; + /** + * Array of characters matching keyboard event key values. This is useful when needing to support a specific character irrespective of the keyboard layout. + * Note, that this list is separate from the one specified by the delimiters option, so you'll need to set the value there to [], + * if you wish to disable those keys. Example usage: delimiterChars={[',', ' ']}. Default: [] + */ + delimiterChars?: string[]; + /** + * Array of integers matching keyboard event keyCode values. When a corresponding key is pressed, the preceding string is finalised as tag. Default: [9, 13] (Tab and return keys). + */ + delimiters?: number[]; + /** + * Function called when the user wants to add a tag. Receives the tag + */ + handleAddition: (tag: Tag) => void; + /** + * Optional event handler when focus on the input is lost. Receives no arguments. + */ + handleBlur?: () => void; + /** + * Function called when the user wants to delete a tag. Receives the tag index. + */ + handleDelete: (index: number) => void; + /** + * Optional event handler when the input receives focus. Receives no arguments. + */ + handleFocus?: () => void; + /** + * Optional event handler when the input changes. Receives the current input value. + */ + handleInputChange?: (input: string) => void; + /** + * An object containing additional attributes that will be applied to the underlying field. + */ + inputAttributes?: { [key: string]: any }; + /** + * Maximum number of suggestions to display. Default: 6. + */ + maxSuggestionsLength?: number; + /** + * How many characters are needed for suggestions to appear. Default: 2. + */ + minQueryLength?: number; + /** + * The placeholder string shown for the input. Default: 'Add new tag'. + */ + placeholder?: string; + /** + * An array of suggestions that are used as basis for showing suggestions. Each suggestion must have an id and a name property and an optional disabled property. Default: [] + */ + suggestions?: Tag[]; + /** + * Provide a custom tag component to render. Default: null. + */ + tagComponent?: React.SFC; + /** + * An array of tags that are displayed as pre-selected. Each tag must have an id and a name property. Default: [] + */ + tags?: Tag[]; +} diff --git a/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx b/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx new file mode 100644 index 0000000000..0777d682da --- /dev/null +++ b/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx @@ -0,0 +1,68 @@ +import * as React from "react"; +import ReactTags, { TagComponentProps } from "react-tag-autocomplete"; + +class TestRequired extends React.Component { + render() { + const onAddTag = (tag: { id: string | number; name: string }) => {}; + const onDeleteTag = (i: number) => {}; + return ( + + ); + } +} + +class TestAll extends React.Component { + render() { + const classNamesObj = { + root: "react-tags", + rootFocused: "is-focused", + selected: "react-tags__selected", + selectedTag: "react-tags__selected-tag", + selectedTagName: "react-tags__selected-tag-name", + search: "react-tags__search", + searchInput: "react-tags__search-input", + suggestions: "react-tags__suggestions", + suggestionActive: "is-active", + suggestionDisabled: "is-disabled" + }; + const onAddTag = (tag: { id: string | number; name: string }) => {}; + const onDeleteTag = (i: number) => {}; + const onBlur = () => {}; + const onFocus = () => {}; + const onInputChange = (input: string) => {}; + const inputAttributes = { maxLength: 10 }; + const suggestions = [ + { id: 3, name: "Bananas" }, + { id: 4, name: "Mangos" }, + { id: 5, name: "Lemons" }, + { id: 6, name: "Apricots", disabled: true } + ]; + const tagComponent = (props: TagComponentProps) => ( + + ); + const tags = [{ id: 1, name: "Apples" }, { id: 2, name: "Pears" }]; + return ( + + ); + } +} diff --git a/types/react-tag-autocomplete/tsconfig.json b/types/react-tag-autocomplete/tsconfig.json new file mode 100644 index 0000000000..70845fa5a1 --- /dev/null +++ b/types/react-tag-autocomplete/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": ["index.d.ts", "react-tag-autocomplete-tests.tsx"] +} diff --git a/types/react-tag-autocomplete/tslint.json b/types/react-tag-autocomplete/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-tag-autocomplete/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }