/
View.jsx
104 lines (99 loc) · 3 KB
/
View.jsx
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
import React from 'react';
import PropTypes from 'prop-types';
import { UniversalLink } from '@plone/volto/components';
import cx from 'classnames';
import {
flattenToAppURL,
isInternalURL,
withBlockExtensions,
} from '@plone/volto/helpers';
import config from '@plone/volto/registry';
export const View = ({ className, data, detached, properties, style }) => {
const href = data?.href?.[0]?.['@id'] || '';
const Image = config.getComponent({ name: 'Image' }).component;
return (
<p
className={cx(
'block image align',
{
center: !Boolean(data.align),
detached,
},
data.align,
className,
)}
style={style}
>
{data.url && (
<>
{(() => {
const image = (
<Image
className={cx({
'full-width': data.align === 'full',
large: data.size === 'l',
medium: data.size === 'm',
small: data.size === 's',
})}
item={
data.image_scales
? {
'@id': data.url,
image_field: data.image_field,
image_scales: data.image_scales,
}
: undefined
}
src={
data.image_scales
? undefined
: isInternalURL(data.url)
? // Backwards compat in the case that the block is storing the full server URL
(() => {
if (data.size === 'l')
return `${flattenToAppURL(data.url)}/@@images/image`;
if (data.size === 'm')
return `${flattenToAppURL(
data.url,
)}/@@images/image/preview`;
if (data.size === 's')
return `${flattenToAppURL(
data.url,
)}/@@images/image/mini`;
return `${flattenToAppURL(data.url)}/@@images/image`;
})()
: data.url
}
sizes={config.blocks.blocksConfig.image.getSizes(data)}
alt={data.alt || ''}
loading="lazy"
responsive={true}
/>
);
if (href) {
return (
<UniversalLink
href={href}
openLinkInNewTab={data.openLinkInNewTab}
>
{image}
</UniversalLink>
);
} else {
return image;
}
})()}
</>
)}
</p>
);
};
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
View.propTypes = {
data: PropTypes.objectOf(PropTypes.any).isRequired,
};
export default withBlockExtensions(View);