UNPKG

4.82 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent } from "../../common";
3import { type IntentProps, type Props } from "../../common/props";
4export interface EditableTextProps extends IntentProps, Props {
5 /**
6 * EXPERIMENTAL FEATURE.
7 *
8 * When true, this forces the component to _always_ render an editable input (or textarea)
9 * both when the component is focussed and unfocussed, instead of the component's default
10 * behavior of switching between a text span and a text input upon interaction.
11 *
12 * This behavior can help in certain applications where, for example, a custom right-click
13 * context menu is used to supply clipboard copy and paste functionality.
14 *
15 * @default false
16 */
17 alwaysRenderInput?: boolean;
18 /**
19 * If `true` and in multiline mode, the `enter` key will trigger onConfirm and `mod+enter`
20 * will insert a newline. If `false`, the key bindings are inverted such that `enter`
21 * adds a newline.
22 *
23 * @default false
24 */
25 confirmOnEnterKey?: boolean;
26 /** Default text value of uncontrolled input. */
27 defaultValue?: string;
28 /**
29 * Whether the text can be edited.
30 *
31 * @default false
32 */
33 disabled?: boolean;
34 /**
35 * Ref to attach to the root element rendered by this component.
36 *
37 * N.B. this may be renamed to simply `ref` in a future major version of Blueprint, when this class component is
38 * refactored into a function.
39 */
40 elementRef?: React.Ref<HTMLDivElement>;
41 /** Whether the component is currently being edited. */
42 isEditing?: boolean;
43 /** Maximum number of characters allowed. Unlimited by default. */
44 maxLength?: number;
45 /** Minimum width in pixels of the input, when not `multiline`. */
46 minWidth?: number;
47 /**
48 * Whether the component supports multiple lines of text.
49 * This prop should not be changed during the component's lifetime.
50 *
51 * @default false
52 */
53 multiline?: boolean;
54 /**
55 * Maximum number of lines before scrolling begins, when `multiline`.
56 */
57 maxLines?: number;
58 /**
59 * Minimum number of lines (essentially minimum height), when `multiline`.
60 *
61 * @default 1
62 */
63 minLines?: number;
64 /**
65 * Placeholder text when there is no value.
66 *
67 * @default "Click to Edit"
68 */
69 placeholder?: string;
70 /**
71 * Whether the entire text field should be selected on focus.
72 * If `false`, the cursor is placed at the end of the text.
73 * This prop is ignored on inputs with type other then text, search, url, tel and password. See https://html.spec.whatwg.org/multipage/input.html#do-not-apply for details.
74 *
75 * @default false
76 */
77 selectAllOnFocus?: boolean;
78 /**
79 * The type of input that should be shown, when not `multiline`.
80 */
81 type?: string;
82 /** Text value of controlled input. */
83 value?: string;
84 /** ID attribute to pass to the underlying element that contains the text contents. This allows for referencing via aria attributes */
85 contentId?: string;
86 /** Callback invoked when user cancels input with the `esc` key. Receives last confirmed value. */
87 onCancel?(value: string): void;
88 /** Callback invoked when user changes input in any way. */
89 onChange?(value: string): void;
90 /** Callback invoked when user confirms value with `enter` key or by blurring input. */
91 onConfirm?(value: string): void;
92 /** Callback invoked after the user enters edit mode. */
93 onEdit?(value: string | undefined): void;
94}
95export interface EditableTextState {
96 /** Pixel height of the input, measured from span size */
97 inputHeight?: number;
98 /** Pixel width of the input, measured from span size */
99 inputWidth?: number;
100 /** Whether the value is currently being edited */
101 isEditing?: boolean;
102 /** The last confirmed value */
103 lastValue?: string;
104 /** The controlled input value, may be different from prop during editing */
105 value?: string;
106}
107/**
108 * EditableText component.
109 *
110 * @see https://blueprintjs.com/docs/#core/components/editable-text
111 */
112export declare class EditableText extends AbstractPureComponent<EditableTextProps, EditableTextState> {
113 static displayName: string;
114 static defaultProps: EditableTextProps;
115 private inputElement;
116 private valueElement;
117 private refHandlers;
118 constructor(props: EditableTextProps);
119 render(): React.JSX.Element;
120 componentDidMount(): void;
121 componentDidUpdate(prevProps: EditableTextProps, prevState: EditableTextState): void;
122 cancelEditing: () => void;
123 toggleEditing: () => void;
124 private handleFocus;
125 private handleTextChange;
126 private handleKeyEvent;
127 private renderInput;
128 private updateInputDimensions;
129}