@plone/volto 17.0.0-alpha.16 → 17.0.0-alpha.18

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,42 @@ 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 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)}>
+          <img
+            alt={content.title}
+            src={flattenToAppURL(content.image.scales.preview.download)}
           />
-        </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.

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

@@ -1,92 +1,67 @@
-/**
- * Link View.
- * @module components/theme/View/LinkView
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
-/**
- * View container class.
- * @class View
- * @extends Component
- */
-class LinkView extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    content: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      remoteUrl: PropTypes.string,
-    }),
-    token: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    token: null,
-  };
-
-  componentDidMount() {
-    if (!this.props.token) {
-      const { remoteUrl } = this.props.content;
+const LinkView = ({ token, content }) => {
+  const history = useHistory();
+  useEffect(() => {
+    if (!token) {
+      const { remoteUrl } = content;
       if (isInternalURL(remoteUrl)) {
-        this.props.history.replace(flattenToAppURL(remoteUrl));
+        history.replace(flattenToAppURL(remoteUrl));
       } else if (!__SERVER__) {
         window.location.href = flattenToAppURL(remoteUrl);
       }
     }
-  }
+  }, [content, history, token]);
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
+
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { remoteUrl } = this.props.content;
-    const { openExternalLinkInNewTab } = config.settings;
-    return (
-      <Container id="page-document">
-        <h1 className="documentFirstHeading">{this.props.content.title}</h1>
-        {this.props.content.description && (
-          <p className="documentDescription">
-            {this.props.content.description}
-          </p>
-        )}
-        {remoteUrl && (
-          <p>
-            <FormattedMessage
-              id="The link address is:"
-              defaultMessage="The link address is:"
-            />{' '}
-            <UniversalLink
-              href={remoteUrl}
-              openLinkInNewTab={
-                openExternalLinkInNewTab && !isInternalURL(remoteUrl)
-              }
-            >
-              {flattenToAppURL(remoteUrl)}
-            </UniversalLink>
-          </p>
-        )}
-      </Container>
-    );
-  }
-}
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
 
 export default LinkView;

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

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,37 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                size="thumb"
+                alt={item.image_caption ? item.image_caption : item.title}
+                className="ui image"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -6,9 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import PreviewImage from '../PreviewImage/PreviewImage';
+import config from '@plone/volto/registry';
 
 /**
  * Summary view component class.
@@ -16,43 +17,51 @@ import PreviewImage from '../PreviewImage/PreviewImage';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const SummaryView = ({ content }) => (
-  <Container className="view-wrapper summary-view">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        {content.items.map((item) => (
-          <article key={item.url}>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.image_field && (
-              <PreviewImage
-                item={item}
-                alt={item.image_caption ? item.image_caption : item.title}
-                size="thumb"
-                className="ui image floated right clear"
-              />
-            )}
-            {item.description && <p>{item.description}</p>}
-            <p>
-              <UniversalLink item={item}>
-                <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </UniversalLink>
-            </p>
-          </article>
-        ))}
-      </section>
-    </article>
-  </Container>
-);
+const SummaryView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper summary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          {content.items.map((item) => (
+            <article key={item.url}>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.image_field && (
+                <PreviewImage
+                  item={item}
+                  alt={item.image_caption ? item.image_caption : item.title}
+                  size="thumb"
+                  className="ui image floated right clear"
+                />
+              )}
+              {item.description && <p>{item.description}</p>}
+              <p>
+                <UniversalLink item={item}>
+                  <FormattedMessage
+                    id="Read More…"
+                    defaultMessage="Read More…"
+                  />
+                </UniversalLink>
+              </p>
+            </article>
+          ))}
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container, Table } from 'semantic-ui-react';
+import { Container as SemanticContainer, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
 
 /**
  * Tabular view component class.
@@ -15,59 +16,64 @@ import { FormattedMessage } from 'react-intl';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const TabularView = ({ content }) => (
-  <Container className="view-wrapper">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        <Table celled padded>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>
-                <FormattedMessage id="Title" defaultMessage="Title" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage
-                  id="Description"
-                  defaultMessage="Description"
-                />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="Type" defaultMessage="Type" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="State" defaultMessage="State" />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {content.items.map((item) => (
-              <Table.Row key={item.url}>
-                <Table.Cell>
-                  <UniversalLink
-                    item={item}
-                    className="summary url"
-                    title={item['@type']}
-                  >
-                    {item.title}
-                  </UniversalLink>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-                <Table.Cell>{item['@type']}</Table.Cell>
-                <Table.Cell>{item.review_state}</Table.Cell>
+const TabularView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Title" defaultMessage="Title" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Description"
+                    defaultMessage="Description"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Type" defaultMessage="Type" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="State" defaultMessage="State" />
+                </Table.HeaderCell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </section>
-    </article>
-  </Container>
-);
+            </Table.Header>
+            <Table.Body>
+              {content.items.map((item) => (
+                <Table.Row key={item.url}>
+                  <Table.Cell>
+                    <UniversalLink
+                      item={item}
+                      className="summary url"
+                      title={item['@type']}
+                    >
+                      {item.title}
+                    </UniversalLink>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                  <Table.Cell>{item['@type']}</Table.Cell>
+                  <Table.Cell>{item.review_state}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/hooks/client/useClient.js

@@ -0,0 +1,11 @@
+//useClient hook to replace repetitive delcaration in the components
+import { useEffect, useState } from 'react';
+
+export function useClient() {
+  const [isClient, setisClient] = useState(false);
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  return isClient;
+}

package/src/hooks/index.js

@@ -1,2 +1,2 @@
 export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
-export useToken from '@plone/volto/hooks/userSession/useToken';
+export { useClient } from '@plone/volto/hooks/client/useClient';

package/theme/themes/pastanaga/extras/main.less

@@ -25,7 +25,7 @@ body {
   &.has-toolbar-menu-open,
   &.has-mobile-menu-open {
     // The body scroll locker when the toolbar or the mobile menu are active in mobile.
-    @media only screen and (max-width: @largestMobileScreen) {
+    @media only screen and (max-width: @largestTabletScreen) {
       overflow: hidden;
     }
   }
@@ -667,5 +667,6 @@ body.has-toolbar-collapsed .mobile-menu {
 @import 'login';
 @import 'language-selector';
 @import 'views';
+@import 'toc';
 @import 'grid.less';
 .loadUIOverrides();

package/theme/themes/pastanaga/extras/toc.less

@@ -0,0 +1,29 @@
+.table-of-contents.horizontalMenu.sticky-toc {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+}
+
+.table-of-contents.horizontalMenu .hidden {
+  z-index: -1;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.table-of-contents.horizontalMenu .hidden-dropdown {
+  display: none !important;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown {
+  position: absolute !important;
+  right: 0;
+}
+
+.table-of-contents.horizontalMenu > .ui.menu {
+  position: relative;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown .focused > a {
+  border: 2px solid black !important;
+  border-radius: 4px;
+}

package/src/hooks/content/useContent.js

@@ -1,31 +0,0 @@
-import { useSelector, shallowEqual } from 'react-redux';
-
-/**
- * useContent hook
- *
- * This hook returns the current content that is stored in the Redux store in the
- * `content` reducer, and returns it along with the related state (loading/loaded/error).
- *
- * @export
- * @return {{ data: ContentData, loading: boolean, loaded: boolean, error: Error }}
- */
-export function useContent() {
-  const data = useSelector((state) => state.content.data, shallowEqual);
-  const loading = useSelector((state) => state.content.get.loading);
-  const loaded = useSelector((state) => state.content.get.loaded);
-  const error = useSelector((state) => state.content.get.error, shallowEqual);
-
-  return { data, loading, loaded, error };
-}
-
-// For reference purposes: Potential future useQuery version
-// export function useContent() {
-//   // the cache will need to know the current location
-//   const pathname = useLocation();
-//   const query = useQuery(getContentQuery({ path }))
-
-//   // This might not be needed if we rename the properties
-//   const {isLoading: loading, isSuccess: loaded, ...rest} = query;
-
-//   return { loading, loaded, ...rest };
-// }

package/src/hooks/userSession/useToken.js

@@ -1,5 +0,0 @@
-import { useSelector, shallowEqual } from 'react-redux';
-
-export function useToken() {
-  return useSelector((state) => state.userSession.token, shallowEqual);
-}