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