blob: ececd07bc985c52022787616ca99ff4eba4da61c (
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
66
67
68
69
|
import PropTypes from 'prop-types'
import React, { useRef, useState } from 'react'
import { Button, TextInput } from '@patternfly/react-core'
import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
function NameComponent({ name, onEdit }) {
const [isEditing, setEditing] = useState(false)
const nameInput = useRef(null)
const onCancel = () => {
nameInput.current.value = name
setEditing(false)
}
const onSubmit = (event) => {
if (event) {
event.preventDefault()
}
const name = nameInput.current.value
if (name) {
onEdit(name)
}
setEditing(false)
}
return (
<form
className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
onSubmit={onSubmit}
>
<div className="pf-c-inline-edit__group">
<div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
{name}
</div>
<div className="pf-c-inline-edit__action pf-m-enable-editable">
<Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
<PencilAltIcon />
</Button>
</div>
</div>
<div className="pf-c-inline-edit__group">
<div className="pf-c-inline-edit__input">
<TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
</div>
<div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
<div className="pf-c-inline-edit__action pf-m-valid">
<Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
<CheckIcon />
</Button>
</div>
<div className="pf-c-inline-edit__action">
<Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
<TimesIcon />
</Button>
</div>
</div>
</div>
</form>
)
}
NameComponent.propTypes = {
name: PropTypes.string,
onEdit: PropTypes.func,
}
export default NameComponent
|
