1 | /// <reference types="react" />
|
2 | import { AbstractPureComponent2 } from "../../common";
|
3 | import { IntentProps, Props } from "../../common/props";
|
4 | export declare type EditableTextProps = IEditableTextProps;
|
5 | /** @deprecated use EditableTextProps */
|
6 | export 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 | }
|
90 | export 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 | }
|
102 | /**
|
103 | * EditableText component.
|
104 | *
|
105 | * @see https://blueprintjs.com/docs/#core/components/editable-text
|
106 | */
|
107 | export declare class EditableText extends AbstractPureComponent2<EditableTextProps, IEditableTextState> {
|
108 | static displayName: string;
|
109 | static defaultProps: EditableTextProps;
|
110 | private inputElement;
|
111 | private valueElement;
|
112 | private refHandlers;
|
113 | constructor(props: EditableTextProps, context?: any);
|
114 | render(): JSX.Element;
|
115 | componentDidMount(): void;
|
116 | componentDidUpdate(prevProps: EditableTextProps, prevState: IEditableTextState): void;
|
117 | cancelEditing: () => void;
|
118 | toggleEditing: () => void;
|
119 | private handleFocus;
|
120 | private handleTextChange;
|
121 | private handleKeyEvent;
|
122 | private renderInput;
|
123 | private updateInputDimensions;
|
124 | }
|