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
|
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
const hasAddress = ( { address, addressLine2, addressLine3, city, region, postal, country } ) => {
return [ address, addressLine2, addressLine3, city, region, postal, country ].some(
value => value !== ''
);
};
const Address = ( {
attributes: { address, addressLine2, addressLine3, city, region, postal, country },
} ) => (
<Fragment>
{ address && (
<div className="jetpack-address__address jetpack-address__address1">{ address }</div>
) }
{ addressLine2 && (
<div className="jetpack-address__address jetpack-address__address2">{ addressLine2 }</div>
) }
{ addressLine3 && (
<div className="jetpack-address__address jetpack-address__address3">{ addressLine3 }</div>
) }
{ city && ! ( region || postal ) && <div className="jetpack-address__city">{ city }</div> }
{ city && ( region || postal ) && (
<div>
{ [
<span className="jetpack-address__city">{ city }</span>,
', ',
<span className="jetpack-address__region">{ region }</span>,
' ',
<span className="jetpack-address__postal">{ postal }</span>,
] }
</div>
) }
{ ! city && ( region || postal ) && (
<div>
{ [
<span className="jetpack-address__region">{ region }</span>,
' ',
<span className="jetpack-address__postal">{ postal }</span>,
] }
</div>
) }
{ country && <div className="jetpack-address__country">{ country }</div> }
</Fragment>
);
export const googleMapsUrl = ( {
attributes: { address, addressLine2, addressLine3, city, region, postal, country },
} ) => {
const addressUrl = address ? `${ address },` : '';
const addressLine2Url = addressLine2 ? `${ addressLine2 },` : '';
const addressLine3Url = addressLine3 ? `${ addressLine3 },` : '';
const cityUrl = city ? `+${ city },` : '';
let regionUrl = region ? `+${ region },` : '';
regionUrl = postal ? `${ regionUrl }+${ postal }` : regionUrl;
const countryUrl = country ? `+${ country }` : '';
return `https://www.google.com/maps/search/${ addressUrl }${ addressLine2Url }${ addressLine3Url }${ cityUrl }${ regionUrl }${ countryUrl }`.replace(
' ',
'+'
);
};
const save = props =>
hasAddress( props.attributes ) && (
<div className={ props.className }>
{ props.attributes.linkToGoogleMaps && (
<a
href={ googleMapsUrl( props ) }
target="_blank"
rel="noopener noreferrer"
title={ __( 'Open address in Google Maps', 'jetpack' ) }
>
<Address { ...props } />
</a>
) }
{ ! props.attributes.linkToGoogleMaps && <Address { ...props } /> }
</div>
);
export default save;
|
GitWeb