/
DefaultBody.jsx
84 lines (78 loc) · 2.7 KB
/
DefaultBody.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
import React from 'react';
import PropTypes from 'prop-types';
import { Message } from 'semantic-ui-react';
import { defineMessages, useIntl } from 'react-intl';
import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
import { isInternalURL } from '@plone/volto/helpers';
import { MaybeWrap } from '@plone/volto/components';
import { UniversalLink } from '@plone/volto/components';
import cx from 'classnames';
import config from '@plone/volto/registry';
const messages = defineMessages({
PleaseChooseContent: {
id: 'Please choose an existing content as source for this element',
defaultMessage:
'Please choose an existing content as source for this element',
},
});
const TeaserDefaultTemplate = (props) => {
const { className, data, isEditMode, style } = props;
const intl = useIntl();
const href = data.href?.[0];
const image = data.preview_image?.[0];
const Image = config.getComponent('Image').component;
const { openExternalLinkInNewTab } = config.settings;
return (
<div className={cx('block teaser', className)} style={style}>
<>
{!href && isEditMode && (
<Message>
<div className="teaser-item placeholder">
<img src={imageBlockSVG} alt="" />
<p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
</div>
</Message>
)}
{href && (
<MaybeWrap
condition={!isEditMode}
as={UniversalLink}
href={href['@id']}
target={
data.openLinkInNewTab ||
(openExternalLinkInNewTab && !isInternalURL(href['@id']))
? '_blank'
: null
}
>
<div className="teaser-item default">
{(href.hasPreviewImage || href.image_field || image) && (
<div className="image-wrapper">
<Image
item={image || href}
imageField={image ? image.image_field : href.image_field}
alt=""
loading="lazy"
responsive={true}
/>
</div>
)}
<div className="content">
{data?.head_title && (
<div className="headline">{data.head_title}</div>
)}
<h2>{data?.title}</h2>
{!data.hide_description && <p>{data?.description}</p>}
</div>
</div>
</MaybeWrap>
)}
</>
</div>
);
};
TeaserDefaultTemplate.propTypes = {
data: PropTypes.objectOf(PropTypes.any).isRequired,
isEditMode: PropTypes.bool,
};
export default TeaserDefaultTemplate;