vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update react-tag-autocomplete definitions to 5.12 (#41684)

Browse Source
This commit is contained in:
Maxi Cilauro 2020-01-20 17:37:57 -03:00 committed by Eli Barzilay
parent b529159e4f
commit a18b03e2f9
2 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
types/react-tag-autocomplete/index.d.ts vendored
View File

@ -1,11 +1,12 @@
// Type definitions for react-tag-autocomplete 5.6
// Type definitions for react-tag-autocomplete 5.12
// Project: https://github.com/i-like-robots/react-tags#readme
// Definitions by: James Lismore <https://github.com/jlismore>
// Rahul Sagore <https://github.com/Rahul-Sagore>
// Max Cilauro <https://github.com/MaxCilauro>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import { Component } from "react";
import { Component } from 'react';
export default class ReactTags extends Component<ReactTagsProps> {}
@ -35,6 +36,10 @@ export interface ClassNames {
}
export interface ReactTagsProps {
/**
* Creates a tag from the current input value when focus on the input is lost. Default: false.
*/
addOnBlur?: boolean;
/**
* Disables ability to delete the selected tags when backspace is pressed while focussed on the text input. Default: true.
*/
@ -52,6 +57,10 @@ export interface ReactTagsProps {
*/
autoresize?: boolean;
classNames?: ClassNames;
/**
* Clear the text input when a tag is deleted. Default: true.
*/
clearInputOnDelete?: boolean;
/**
* 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 [],
@ -98,6 +107,10 @@ export interface ReactTagsProps {
* How many characters are needed for suggestions to appear. Default: 2.
*/
minQueryLength?: number;
/**
* Message shown if there are no matching suggestions. Default: null.
*/
noSuggestionsText?: string;
/**
* The placeholder string shown for the input. Default: 'Add new tag'.
*/
@ -106,6 +119,11 @@ export interface ReactTagsProps {
* 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[];
/**
* A callback function to filter suggestion items with. The callback receives two arguments; a suggestion and the current query and must return a boolean value.
* If no function is supplied the default filter is applied. Default: null.
*/
suggestionsFilter?: (suggestion: Tag, query: string) => boolean;
/**
* Provide a custom tag component to render. Default: null.
*/

52
types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx
View File

@ -1,29 +1,27 @@
import * as React from "react";
import ReactTags, { TagComponentProps } from "react-tag-autocomplete";
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 (
<ReactTags handleAddition={onAddTag} handleDelete={onDeleteTag} />
);
return <ReactTags handleAddition={onAddTag} handleDelete={onDeleteTag} />;
}
}
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"
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) => {};
@ -33,23 +31,27 @@ class TestAll extends React.Component {
const onValidate = (tag: { id: string | number; name: string }) => true;
const inputAttributes = { maxLength: 10 };
const suggestions = [
{ id: 3, name: "Bananas" },
{ id: 4, name: "Mangos" },
{ id: 5, name: "Lemons" },
{ id: 6, name: "Apricots", disabled: true }
{ id: 3, name: 'Bananas' },
{ id: 4, name: 'Mangos' },
{ id: 5, name: 'Lemons' },
{ id: 6, name: 'Apricots', disabled: true },
];
const suggestionFilter = (tag: { id: string | number; name: string }, query: string) => true;
const tagComponent = (props: TagComponentProps) => <button onClick={props.onDelete}>{props.tag.name}</button>;
const tags = [
{ id: 1, name: 'Apples' },
{ id: 2, name: 'Pears' },
];
const tagComponent = (props: TagComponentProps) => (
<button onClick={props.onDelete}>{props.tag.name}</button>
);
const tags = [{ id: 1, name: "Apples" }, { id: 2, name: "Pears" }];
return (
<ReactTags
addOnBlur={true}
allowBackspace={false}
allowNew={false}
autofocus={false}
autoresize={false}
classNames={classNamesObj}
delimiterChars={[",", " "]}
clearInputOnDelete={false}
delimiterChars={[',', ' ']}
delimiters={[9, 13]}
handleAddition={onAddTag}
handleBlur={onBlur}
@ -60,8 +62,10 @@ class TestAll extends React.Component {
inputAttributes={inputAttributes}
maxSuggestionsLength={10}
minQueryLength={5}
noSuggestionsText="no results"
placeholder=""
suggestions={suggestions}
suggestionsFilter={suggestionFilter}
tagComponent={tagComponent}
tags={tags}
/>