@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -1,34 +1,45 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 
 /**
  * Renders a preview image for a catalog brain result item.
- *
  */
-function PreviewImage(props) {
-  const { item, size = 'preview', alt, ...rest } = props;
-  const src = item.image_field
-    ? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
-    : config.getComponent({
-        name: 'DefaultImage',
-        dependencies: ['listing', 'summary'],
-      }).component || DefaultImageSVG;
+function PreviewImage({ item, alt, ...rest }) {
+  const Image = config.getComponent({ name: 'Image' }).component;
 
-  return <img src={src} alt={alt ?? item.title} {...rest} />;
+  if (item.image_field && item.image_scales?.[item.image_field]?.[0]) {
+    return (
+      <Image item={item} imageField={item.image_field} alt={alt} {...rest} />
+    );
+  } else {
+    return (
+      <img
+        src={
+          config.getComponent({
+            name: 'DefaultImage',
+            dependencies: ['listing', 'summary'],
+          }).component || DefaultImageSVG
+        }
+        alt={alt}
+        {...rest}
+        width="400"
+        height="300"
+      />
+    );
+  }
 }
 
 PreviewImage.propTypes = {
-  size: PropTypes.string,
   item: PropTypes.shape({
     '@id': PropTypes.string.isRequired,
-    image_field: PropTypes.string,
     title: PropTypes.string.isRequired,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
   }),
+  alt: PropTypes.string.isRequired,
 };
 
 export default PreviewImage;

package/src/components/theme/PreviewImage/PreviewImage.test.js

@@ -7,35 +7,56 @@ describe('PreviewImage', () => {
   it('renders a preview image', () => {
     const item = {
       image_field: 'image',
-      title: 'Item title',
-      '@id': 'http://localhost:3000/something',
-    };
-    const component = renderer.create(<PreviewImage item={item} />);
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders a preview image with extra props', () => {
-    const item = {
-      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a preview image with custom size', () => {
+  it('renders a preview image with extra props', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} size="large" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
@@ -46,7 +67,9 @@ describe('PreviewImage', () => {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
@@ -57,7 +80,7 @@ describe('PreviewImage', () => {
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

package/src/components/theme/SearchWidget/SearchWidget.jsx

@@ -1,14 +1,7 @@
-/**
- * Search widget component.
- * @module components/theme/SearchWidget/SearchWidget
- */
-
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
-import { compose } from 'redux';
-import { PropTypes } from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from '@plone/volto/components';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -24,96 +17,43 @@ const messages = defineMessages({
   },
 });
 
-/**
- * SearchWidget component class.
- * @class SearchWidget
- * @extends Component
- */
-class SearchWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    pathname: PropTypes.string,
+const SearchWidget = (props) => {
+  const intl = useIntl();
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const onChangeText = (event, { value }) => {
+    setText(value);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      text: '',
-    };
-  }
-
-  /**
-   * On change text
-   * @method onChangeText
-   * @param {object} event Event object.
-   * @param {string} value Text value.
-   * @returns {undefined}
-   */
-  onChangeText(event, { value }) {
-    this.setState({
-      text: value,
-    });
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {event} event Event object.
-   * @returns {undefined}
-   */
-  onSubmit(event) {
+  const pathname = props.pathname;
+  const onSubmit = (event) => {
     const path =
-      this.props.pathname?.length > 0
-        ? `&path=${encodeURIComponent(this.props.pathname)}`
-        : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
-    this.setState({
-      text: '',
-    });
+    setText('');
     event.preventDefault();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Form action="/search" onSubmit={this.onSubmit}>
-        <Form.Field className="searchbox">
-          <Input
-            aria-label={this.props.intl.formatMessage(messages.search)}
-            onChange={this.onChangeText}
-            name="SearchableText"
-            value={this.state.text}
-            transparent
-            autoComplete="off"
-            placeholder={this.props.intl.formatMessage(messages.searchSite)}
-            title={this.props.intl.formatMessage(messages.search)}
-          />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
-            <Icon name={zoomSVG} size="18px" />
-          </button>
-        </Form.Field>
-      </Form>
-    );
-  }
-}
+  };
 
-export default compose(withRouter, injectIntl)(SearchWidget);
+  return (
+    <Form action="/search" onSubmit={onSubmit}>
+      <Form.Field className="searchbox">
+        <Input
+          aria-label={intl.formatMessage(messages.search)}
+          onChange={onChangeText}
+          name="SearchableText"
+          value={text}
+          transparent
+          autoComplete="off"
+          placeholder={intl.formatMessage(messages.searchSite)}
+          title={intl.formatMessage(messages.search)}
+        />
+        <button aria-label={intl.formatMessage(messages.search)}>
+          <Icon name={zoomSVG} size="18px" />
+        </button>
+      </Form.Field>
+    </Form>
+  );
+};
+
+export default SearchWidget;

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, toBackendLang } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -40,7 +40,7 @@ class Sitemap extends Component {
   componentDidMount() {
     const { settings } = config;
     if (settings.isMultilingual) {
-      this.props.getNavigation(`${this.props.lang}`, 4);
+      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
     } else {
       this.props.getNavigation('', 4);
     }
@@ -108,7 +108,9 @@ export default compose(
         const { settings } = config;
         const lang = getState().intl.locale;
         if (settings.isMultilingual) {
-          return __SERVER__ && dispatch(getNavigation(`${lang}`, 4));
+          return (
+            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
+          );
         } else {
           return __SERVER__ && dispatch(getNavigation('', 4));
         }

package/src/components/theme/View/AlbumView.jsx

@@ -3,11 +3,16 @@
  * @module components/theme/View/AlbumView
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
-import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -19,7 +24,7 @@ import backSVG from '@plone/volto/icons/back.svg';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-class AlbumView extends Component {
+class AlbumView extends React.Component {
   constructor(props) {
     super(props);
 
@@ -56,6 +61,11 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    const PreviewImage = config.getComponent({ name: 'PreviewImage' })
+      .component;
+
     return (
       <Container className="view-wrapper">
         <article id="content">
@@ -80,17 +90,16 @@ class AlbumView extends Component {
                             <Segment className="imageborder">
                               <PreviewImage
                                 item={item}
-                                alt={
-                                  item.image_caption
-                                    ? item.image_caption
-                                    : item.title
-                                }
+                                alt={item.image_caption || item.title}
                                 onClick={() => {
                                   this.setState({
                                     openIndex: index,
                                   });
                                 }}
                                 className="ui middle aligned image"
+                                responsive={true}
+                                loading="lazy"
+                                title={item.title}
                               />
                             </Segment>
                           </Grid.Column>
@@ -133,20 +142,15 @@ class AlbumView extends Component {
                               <Modal.Content image>
                                 <PreviewImage
                                   item={item}
-                                  alt={
-                                    item.image_caption
-                                      ? item.image_caption
-                                      : item.title
-                                  }
+                                  alt={item.image_caption}
                                   onClick={() => {
                                     this.setState({
                                       openIndex: index,
                                     });
                                   }}
-                                  size="large"
                                   className="ui image"
+                                  responsive={true}
                                 />
-
                                 <Modal.Description>
                                   <p>{item.description}</p>
                                 </Modal.Description>

package/src/components/theme/View/DefaultView.jsx

@@ -87,7 +87,7 @@ const DefaultView = (props) => {
                 return f !== 'title' ? (
                   <Grid celled="internally" key={key}>
                     <Grid.Row>
-                      <Label>{field.title}:</Label>
+                      <Label title={field.id}>{field.title}:</Label>
                     </Grid.Row>
                     <Grid.Row>
                       <Segment basic>

package/src/components/theme/View/EventDatesInfo.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
 import cx from 'classnames';
 
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -28,7 +29,7 @@ const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {

package/src/components/theme/View/EventView.jsx

@@ -6,32 +6,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Image, Grid } from 'semantic-ui-react';
+import { Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
-const EventTextfieldView = ({ content }) => (
-  <React.Fragment>
-    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="document-image"
-        src={content.image.scales.thumb.download}
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </React.Fragment>
-);
+const EventTextfieldView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  return (
+    <React.Fragment>
+      {content.title && (
+        <h1 className="documentFirstHeading">{content.title}</h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.image && (
+        <Image
+          className="document-image ui right floated image"
+          item={content}
+          imageField="image"
+          alt=""
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
 
 /**
  * EventView view component class.
@@ -41,9 +50,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +94,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

package/src/components/theme/View/FileView.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/ImageView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,45 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <Image
+            item={content}
+            imageField="image"
+            alt={content.title}
+            responsive={true}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.