UNPKG

2 kBTypeScriptView Raw
1import * as React from "react";
2import { BoxProps } from "../Box";
3import { PseudoBoxProps } from "../PseudoBox";
4import { Omit } from "../common-types";
5
6interface IEditable {
7 /**
8 * The value of the Editable in both edit & preview mode
9 */
10 value?: string;
11 /**
12 * The initial value of the Editable in both edit & preview mode
13 */
14 defaultValue?: string;
15 /**
16 * If `true`, the Editable will be disabled.
17 */
18 isDisabled?: boolean;
19 /**
20 * If `true`, the Editable will start with edit mode by default.
21 */
22 startWithEditView?: boolean;
23 /**
24 * If `true`, the read only view, has a `tabIndex` set to `0` so it can recieve focus via the keyboard or click.
25 */
26 isPreviewFocusable?: boolean;
27 /**
28 * If `true`, it'll update the value onBlur and turn off the edit mode.
29 */
30 submitOnBlur?: boolean;
31 /**
32 * Callback invoked when user changes input.
33 */
34 onChange?: (newValue: string) => void;
35 /**
36 * Callback invoked when user cancels input with the `Esc` key.
37 * It provides the last confirmed value as argument.
38 */
39 onCancel?: (previousValue: string) => void;
40 /**
41 * Callback invoked when user confirms value with `enter` key or by blurring input.
42 */
43 onSubmit?: (newValue: string) => void;
44 /**
45 * Callback invoked once the user enters edit mode.
46 */
47 onEdit?: () => void;
48 /**
49 * If `true`, the input's text will be highlighted on focus.
50 */
51 selectAllOnFocus?: boolean;
52 /**
53 * The placeholder text when the value is empty.
54 */
55 placeholder?: string;
56 /**
57 * The content of the EditableText
58 * Ideally only `EditablePreview` and `EditableInput` should
59 * be the children but you add other elements too
60 */
61 children: React.ReactNode;
62}
63
64export type EditableProps = IEditable & Omit<BoxProps, "onChange" | "onSubmit">;
65
66export const EditablePreview: React.FC<PseudoBoxProps>;
67
68export const EditableInput: React.FC<PseudoBoxProps>;
69
70declare const Editable: React.FC<EditableProps>;
71
72export default Editable;