diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-info/address/edit.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/contact-info/address/edit.js | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/edit.js b/plugins/jetpack/extensions/blocks/contact-info/address/edit.js new file mode 100644 index 00000000..4618f686 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-info/address/edit.js @@ -0,0 +1,125 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { PlainText } from '@wordpress/editor'; +import { ToggleControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import save from './save'; + +class AddressEdit extends Component { + constructor( ...args ) { + super( ...args ); + + this.preventEnterKey = this.preventEnterKey.bind( this ); + } + + preventEnterKey( event ) { + if ( event.key === 'Enter' ) { + event.preventDefault(); + return; + } + } + + render() { + const { + attributes: { + address, + addressLine2, + addressLine3, + city, + region, + postal, + country, + linkToGoogleMaps, + }, + isSelected, + setAttributes, + } = this.props; + + const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some( + value => value !== '' + ); + const classNames = classnames( { + 'jetpack-address-block': true, + 'is-selected': isSelected, + } ); + + const externalLink = ( + <ToggleControl + label={ __( 'Link address to Google Maps', 'jetpack' ) } + checked={ linkToGoogleMaps } + onChange={ newlinkToGoogleMaps => + setAttributes( { linkToGoogleMaps: newlinkToGoogleMaps } ) + } + /> + ); + + return ( + <div className={ classNames }> + { ! isSelected && hasContent && save( this.props ) } + { ( isSelected || ! hasContent ) && ( + <Fragment> + <PlainText + value={ address } + placeholder={ __( 'Street Address', 'jetpack' ) } + aria-label={ __( 'Street Address', 'jetpack' ) } + onChange={ newAddress => setAttributes( { address: newAddress } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ addressLine2 } + placeholder={ __( 'Address Line 2', 'jetpack' ) } + aria-label={ __( 'Address Line 2', 'jetpack' ) } + onChange={ newAddressLine2 => setAttributes( { addressLine2: newAddressLine2 } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ addressLine3 } + placeholder={ __( 'Address Line 3', 'jetpack' ) } + aria-label={ __( 'Address Line 3', 'jetpack' ) } + onChange={ newAddressLine3 => setAttributes( { addressLine3: newAddressLine3 } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ city } + placeholder={ __( 'City', 'jetpack' ) } + aria-label={ __( 'City', 'jetpack' ) } + onChange={ newCity => setAttributes( { city: newCity } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ region } + placeholder={ __( 'State/Province/Region', 'jetpack' ) } + aria-label={ __( 'State/Province/Region', 'jetpack' ) } + onChange={ newRegion => setAttributes( { region: newRegion } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ postal } + placeholder={ __( 'Postal/Zip Code', 'jetpack' ) } + aria-label={ __( 'Postal/Zip Code', 'jetpack' ) } + onChange={ newPostal => setAttributes( { postal: newPostal } ) } + onKeyDown={ this.preventEnterKey } + /> + <PlainText + value={ country } + placeholder={ __( 'Country', 'jetpack' ) } + aria-label={ __( 'Country', 'jetpack' ) } + onChange={ newCountry => setAttributes( { country: newCountry } ) } + onKeyDown={ this.preventEnterKey } + /> + { externalLink } + </Fragment> + ) } + </div> + ); + } +} + +export default AddressEdit; |