diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js new file mode 100644 index 00000000..8cd2792d --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js @@ -0,0 +1,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; |