-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
use summary component in listings and teaser
- Loading branch information
Showing
11 changed files
with
261 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
packages/volto-light-theme/src/components/Blocks/Teaser/DefaultBody.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| 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/Url/Url'; | ||
| import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap'; | ||
| import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink'; | ||
| import cx from 'classnames'; | ||
| import config from '@plone/volto/registry'; | ||
| import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary'; | ||
|
|
||
| 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 url = data.preview_image?.[0]?.['@id']; | ||
|
|
||
| const Image = config.getComponent('Image').component; | ||
| const Summary = | ||
| config.getComponent({ | ||
| name: 'Summary', | ||
| dependencies: [data['@type']], | ||
| }).component || DefaultSummary; | ||
| 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"> | ||
| {url && !image?.image_field ? ( | ||
| <div className="image-wrapper"> | ||
| <Image src={url} alt="" loading="lazy" responsive={true} /> | ||
| </div> | ||
| ) : ( | ||
| (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"> | ||
| <Summary item={data} HeadingTag="h2" /> | ||
| </div> | ||
| </div> | ||
| </MaybeWrap> | ||
| )} | ||
| </> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| TeaserDefaultTemplate.propTypes = { | ||
| data: PropTypes.objectOf(PropTypes.any).isRequired, | ||
| isEditMode: PropTypes.bool, | ||
| }; | ||
|
|
||
| export default TeaserDefaultTemplate; |
16 changes: 16 additions & 0 deletions
16
packages/volto-light-theme/src/components/Summary/DefaultSummary.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| const DefaultSummary = (props) => { | ||
| const { item, HeadingTag = 'h3' } = props; | ||
| return ( | ||
| <> | ||
| {item?.head_title && <div className="headline">{item.head_title}</div>} | ||
| <HeadingTag className="title"> | ||
| {item.title ? item.title : item.id} | ||
| </HeadingTag> | ||
| {!item.hide_description && ( | ||
| <p className="description">{item.description}</p> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DefaultSummary; |
34 changes: 34 additions & 0 deletions
34
packages/volto-light-theme/src/components/Summary/EventSummary.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| const EventSummary = (props) => { | ||
| const { item, HeadingTag = 'h3' } = props; | ||
| const formatter = new Intl.DateTimeFormat(item.Language || 'default', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| }); | ||
|
|
||
| let kicker = [ | ||
| item.start && item.end && ( | ||
| <span className="day" key="day" suppressHydrationWarning> | ||
| {formatter.formatRange(new Date(item.start), new Date(item.end))} | ||
| </span> | ||
| ), | ||
| item.head_title, | ||
| ].filter((x) => x); | ||
| if (kicker.length > 1) { | ||
| kicker = kicker.reduce((prev, curr) => [prev, ' | ', curr]); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {kicker.length ? <div className="headline">{kicker}</div> : null} | ||
| <HeadingTag className="title"> | ||
| {item.title ? item.title : item.id} | ||
| </HeadingTag> | ||
| {!item.hide_description && ( | ||
| <p className="description">{item.description}</p> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default EventSummary; |
34 changes: 34 additions & 0 deletions
34
packages/volto-light-theme/src/components/Summary/NewsItemSummary.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| const NewsItemSummary = (props) => { | ||
| const { item, HeadingTag = 'h3' } = props; | ||
| const formatter = new Intl.DateTimeFormat(item.Language || 'default', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| }); | ||
|
|
||
| let kicker = [ | ||
| item.EffectiveDate !== 'None' && item.effective && ( | ||
| <span className="day" key="day" suppressHydrationWarning> | ||
| {formatter.format(new Date(item.effective))} | ||
| </span> | ||
| ), | ||
| item.head_title, | ||
| ].filter((x) => x); | ||
| if (kicker.length > 1) { | ||
| kicker = kicker.reduce((prev, curr) => [prev, ' | ', curr]); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {kicker.length ? <div className="headline">{kicker}</div> : null} | ||
| <HeadingTag className="title"> | ||
| {item.title ? item.title : item.id} | ||
| </HeadingTag> | ||
| {!item.hide_description && ( | ||
| <p className="description">{item.description}</p> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default NewsItemSummary; |
8 changes: 8 additions & 0 deletions
8
...olto-light-theme/src/customizations/volto/components/manage/Blocks/Teaser/DefaultBody.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /** | ||
| * OVERRIDE DefaultBody.jsx | ||
| * REASON: Look up Summary component. | ||
| */ | ||
|
|
||
| import DefaultBody from '../../../../../../components/Blocks/Teaser/DefaultBody'; | ||
|
|
||
| export default DefaultBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.