blob: cff84e990bae85eca655229563889cba70f6aa6a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import * as React from 'react';
import './EditableText.scss';
import { Size } from '@dash/components';
export interface IEditableTextProps {
text: string;
placeholder?: string;
editing: boolean;
onEdit: (newText: string) => void;
setEditing: (editing: boolean) => void;
backgroundColor?: string;
size?: Size;
height?: number;
}
/**
* Editable Text is used for inline renaming of some text.
* It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
* @param props
* @returns
*/
export const EditableText = (props: IEditableTextProps) => {
const { editing, height, text, onEdit, setEditing, backgroundColor, placeholder } = props;
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onEdit(event.target.value);
};
return editing ? (
<input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
) : (
<input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
);
};
|
