UNPKG

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