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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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;
|
GitWeb