1 | import * as React from "react";
|
2 | import { AbstractPureComponent } from "../../common";
|
3 | import { type IntentProps, type Props } from "../../common/props";
|
4 | export 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 | }
|
95 | export 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 | */
|
112 | export 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 | }
|