1 | import * as React from "react";
|
2 | import { AbstractPureComponent2, IRef } from "../../common";
|
3 | import { HTMLInputProps, IntentProps, Props, MaybeElement } from "../../common/props";
|
4 | import { IconName } from "../icon/icon";
|
5 | import { TagProps } from "../tag/tag";
|
6 | /**
|
7 | * The method in which a `TagInput` value was added.
|
8 | * - `"default"` - indicates that a value was added by manual selection.
|
9 | * - `"blur"` - indicates that a value was added when the `TagInput` lost focus.
|
10 | * This is only possible when `addOnBlur=true`.
|
11 | * - `"paste"` - indicates that a value was added via paste. This is only
|
12 | * possible when `addOnPaste=true`.
|
13 | */
|
14 | export declare type TagInputAddMethod = "default" | "blur" | "paste";
|
15 | export declare type TagInputProps = ITagInputProps;
|
16 | /** @deprecated use TagInputProps */
|
17 | export interface ITagInputProps extends IntentProps, Props {
|
18 | /**
|
19 | * If true, `onAdd` will be invoked when the input loses focus.
|
20 | * Otherwise, `onAdd` is only invoked when `enter` is pressed.
|
21 | *
|
22 | * @default false
|
23 | */
|
24 | addOnBlur?: boolean;
|
25 | /**
|
26 | * If true, `onAdd` will be invoked when the user pastes text containing the `separator`
|
27 | * into the input. Otherwise, pasted text will remain in the input.
|
28 | *
|
29 | * __Note:__ For example, if `addOnPaste=true` and `separator="\n"` (new line), then:
|
30 | * - Pasting `"hello"` will _not_ invoke `onAdd`
|
31 | * - Pasting `"hello\n"` will invoke `onAdd` with `["hello"]`
|
32 | * - Pasting `"hello\nworld"` will invoke `onAdd` with `["hello", "world"]`
|
33 | *
|
34 | * @default true
|
35 | */
|
36 | addOnPaste?: boolean;
|
37 | /**
|
38 | * Whether the component is non-interactive.
|
39 | * Note that you'll also need to disable the component's `rightElement`,
|
40 | * if appropriate.
|
41 | *
|
42 | * @default false
|
43 | */
|
44 | disabled?: boolean;
|
45 | /** Whether the tag input should take up the full width of its container. */
|
46 | fill?: boolean;
|
47 | /**
|
48 | * React props to pass to the `<input>` element.
|
49 | * Note that `ref` and `key` are not supported here; use `inputRef` below.
|
50 | */
|
51 | inputProps?: HTMLInputProps;
|
52 | /** Ref handler for the `<input>` element. */
|
53 | inputRef?: IRef<HTMLInputElement>;
|
54 | /** Controlled value of the `<input>` element. This is shorthand for `inputProps={{ value }}`. */
|
55 | inputValue?: string;
|
56 | /** Whether the tag input should use a large size. */
|
57 | large?: boolean;
|
58 | /** Name of a Blueprint UI icon (or an icon element) to render on the left side of the input. */
|
59 | leftIcon?: IconName | MaybeElement;
|
60 | /**
|
61 | * Callback invoked when new tags are added by the user pressing `enter` on the input.
|
62 | * Receives the current value of the input field split by `separator` into an array.
|
63 | * New tags are expected to be appended to the list.
|
64 | *
|
65 | * The input will be cleared after `onAdd` is invoked _unless_ the callback explicitly
|
66 | * returns `false`. This is useful if the provided `value` is somehow invalid and should
|
67 | * not be added as a tag.
|
68 | */
|
69 | onAdd?: (values: string[], method: TagInputAddMethod) => boolean | void;
|
70 | /**
|
71 | * Callback invoked when new tags are added or removed. Receives the updated list of `values`:
|
72 | * new tags are appended to the end of the list, removed tags are removed at their index.
|
73 | *
|
74 | * Like `onAdd`, the input will be cleared after this handler is invoked _unless_ the callback
|
75 | * explicitly returns `false`.
|
76 | *
|
77 | * This callback essentially implements basic `onAdd` and `onRemove` functionality and merges
|
78 | * the two handlers into one to simplify controlled usage.
|
79 | * ```
|
80 | */
|
81 | onChange?: (values: React.ReactNode[]) => boolean | void;
|
82 | /**
|
83 | * Callback invoked when the value of `<input>` element is changed.
|
84 | * This is shorthand for `inputProps={{ onChange }}`.
|
85 | */
|
86 | onInputChange?: React.FormEventHandler<HTMLInputElement>;
|
87 | /**
|
88 | * Callback invoked when the user depresses a keyboard key.
|
89 | * Receives the event and the index of the active tag (or `undefined` if
|
90 | * focused in the input).
|
91 | */
|
92 | onKeyDown?: (event: React.KeyboardEvent<HTMLElement>, index?: number) => void;
|
93 | /**
|
94 | * Callback invoked when the user releases a keyboard key.
|
95 | * Receives the event and the index of the active tag (or `undefined` if
|
96 | * focused in the input).
|
97 | */
|
98 | onKeyUp?: (event: React.KeyboardEvent<HTMLElement>, index?: number) => void;
|
99 | /**
|
100 | * Callback invoked when the user clicks the X button on a tag.
|
101 | * Receives value and index of removed tag.
|
102 | */
|
103 | onRemove?: (value: React.ReactNode, index: number) => void;
|
104 | /**
|
105 | * Input placeholder text which will not appear if `values` contains any items
|
106 | * (consistent with default HTML input behavior).
|
107 | * Use `inputProps.placeholder` if you want the placeholder text to _always_ appear.
|
108 | *
|
109 | * If you define both `placeholder` and `inputProps.placeholder`, then the former will appear
|
110 | * when `values` is empty and the latter at all other times.
|
111 | */
|
112 | placeholder?: string;
|
113 | /**
|
114 | * Element to render on right side of input.
|
115 | * For best results, use a small spinner or minimal button (button height will adjust if `TagInput` uses large styles).
|
116 | * Other elements will likely require custom styles for correct positioning.
|
117 | */
|
118 | rightElement?: JSX.Element;
|
119 | /**
|
120 | * Separator pattern used to split input text into multiple values. Default value splits on commas and newlines.
|
121 | * Explicit `false` value disables splitting (note that `onAdd` will still receive an array of length 1).
|
122 | *
|
123 | * @default /[,\n\r]/
|
124 | */
|
125 | separator?: string | RegExp | false;
|
126 | /**
|
127 | * React props to pass to each `Tag`. Provide an object to pass the same props to every tag,
|
128 | * or a function to customize props per tag.
|
129 | *
|
130 | * If you define `onRemove` here then you will have to implement your own tag removal
|
131 | * handling as `TagInput`'s own `onRemove` handler will never be invoked.
|
132 | */
|
133 | tagProps?: TagProps | ((value: React.ReactNode, index: number) => TagProps);
|
134 | /**
|
135 | * Controlled tag values. Each value will be rendered inside a `Tag`, which can be customized
|
136 | * using `tagProps`. Therefore, any valid React node can be used as a `TagInput` value; falsy
|
137 | * values will not be rendered.
|
138 | *
|
139 | * __Note about typed usage:__ If you know your `values` will always be of a certain `ReactNode`
|
140 | * subtype, such as `string` or `ReactChild`, you can use that type on all your handlers
|
141 | * to simplify type logic.
|
142 | */
|
143 | values: React.ReactNode[];
|
144 | }
|
145 | export interface ITagInputState {
|
146 | activeIndex: number;
|
147 | inputValue: string;
|
148 | isInputFocused: boolean;
|
149 | prevInputValueProp?: string;
|
150 | }
|
151 | export declare class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputState> {
|
152 | static displayName: string;
|
153 | static defaultProps: Partial<TagInputProps>;
|
154 | static getDerivedStateFromProps(props: Readonly<TagInputProps>, state: Readonly<ITagInputState>): Partial<ITagInputState> | null;
|
155 | state: ITagInputState;
|
156 | inputElement: HTMLInputElement | null;
|
157 | private handleRef;
|
158 | render(): JSX.Element;
|
159 | componentDidUpdate(prevProps: TagInputProps): void;
|
160 | private addTags;
|
161 | private maybeRenderTag;
|
162 | private getNextActiveIndex;
|
163 | private findNextIndex;
|
164 | /**
|
165 | * Splits inputValue on separator prop,
|
166 | * trims whitespace from each new value,
|
167 | * and ignores empty values.
|
168 | */
|
169 | private getValues;
|
170 | private handleContainerClick;
|
171 | private handleContainerBlur;
|
172 | private handleInputFocus;
|
173 | private handleInputChange;
|
174 | private handleInputKeyDown;
|
175 | private handleInputKeyUp;
|
176 | private handleInputPaste;
|
177 | private handleRemoveTag;
|
178 | private handleBackspaceToRemove;
|
179 | private handleDeleteToRemove;
|
180 | /** Remove the item at the given index by invoking `onRemove` and `onChange` accordingly. */
|
181 | private removeIndexFromValues;
|
182 | private invokeKeyPressCallback;
|
183 | /** Returns whether the given index represents a valid item in `this.props.values`. */
|
184 | private isValidIndex;
|
185 | }
|
186 |
|
\ | No newline at end of file |