blob: e9e7ca26425f51463a7fd63da509d012214e9e81 (
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import * as React from 'react'
import './EditableText.scss'
import { Size } from 'browndash-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,
size,
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>
// <div className="lb-displayText" onClick={(e) => {
// e.stopPropagation()
// setEditing(true)
// }}>{text}</div>
)
}
|
