blob: 8cd2792dddaafbdd1e05ea87d9534c1ee27e77f8 (
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
70
71
72
73
74
75
76
77
78
79
80
|
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { Component, createRef } from '@wordpress/element';
class JetpackOption extends Component {
constructor( ...args ) {
super( ...args );
this.onChangeOption = this.onChangeOption.bind( this );
this.onKeyPress = this.onKeyPress.bind( this );
this.onDeleteOption = this.onDeleteOption.bind( this );
this.textInput = createRef();
}
componentDidMount() {
if ( this.props.isInFocus ) {
this.textInput.current.focus();
}
}
componentDidUpdate() {
if ( this.props.isInFocus ) {
this.textInput.current.focus();
}
}
onChangeOption( event ) {
this.props.onChangeOption( this.props.index, event.target.value );
}
onKeyPress( event ) {
if ( event.key === 'Enter' ) {
this.props.onAddOption( this.props.index );
event.preventDefault();
return;
}
if ( event.key === 'Backspace' && event.target.value === '' ) {
this.props.onChangeOption( this.props.index );
event.preventDefault();
return;
}
}
onDeleteOption() {
this.props.onChangeOption( this.props.index );
}
render() {
const { isSelected, option, type } = this.props;
return (
<li className="jetpack-option">
{ type && type !== 'select' && (
<input className="jetpack-option__type" type={ type } disabled />
) }
<input
type="text"
className="jetpack-option__input"
value={ option }
placeholder={ __( 'Write option…', 'jetpack' ) }
onChange={ this.onChangeOption }
onKeyDown={ this.onKeyPress }
ref={ this.textInput }
/>
{ isSelected && (
<IconButton
className="jetpack-option__remove"
icon="trash"
label={ __( 'Remove option', 'jetpack' ) }
onClick={ this.onDeleteOption }
/>
) }
</li>
);
}
}
export default JetpackOption;
|
GitWeb