@plone/volto 15.0.0-alpha.0 → 15.0.0-alpha.11

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

@@ -5,62 +5,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-import { flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Container, Image, Segment, Header, List } from 'semantic-ui-react';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { Image, Grid } from 'semantic-ui-react';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { EventDetails } from '@plone/volto/components';
 
-import {
-  When,
-  Recurrence,
-} from '@plone/volto/components/theme/View/EventDatesInfo';
-
-const messages = defineMessages({
-  what: {
-    id: 'event_what',
-    defaultMessage: 'What',
-  },
-  when: {
-    id: 'event_when',
-    defaultMessage: 'When',
-  },
-  allDates: {
-    id: 'event_alldates',
-    defaultMessage: 'All dates',
-  },
-  where: {
-    id: 'event_where',
-    defaultMessage: 'Where',
-  },
-  contactName: {
-    id: 'event_contactname',
-    defaultMessage: 'Contact Name',
-  },
-  contactPhone: {
-    id: 'event_contactphone',
-    defaultMessage: 'Contact Phone',
-  },
-  attendees: {
-    id: 'event_attendees',
-    defaultMessage: 'Attendees',
-  },
-  website: {
-    id: 'event_website',
-    defaultMessage: 'Website',
-  },
-  visitWebsite: {
-    id: 'visit_external_website',
-    defaultMessage: 'Visit external website',
-  },
-});
-
-/**
- * EventView view component class.
- * @function EventView
- * @params {object} content Content object.
- * @returns {string} Markup of the component.
- */
-const EventView = ({ intl, content }) => (
-  <Container className="view-wrapper event-view">
+const EventTextfieldView = ({ content }) => (
+  <React.Fragment>
     {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
     {content.description && (
       <p className="documentDescription">{content.description}</p>
@@ -72,89 +23,6 @@ const EventView = ({ intl, content }) => (
         floated="right"
       />
     )}
-    <Segment floated="right">
-      {content.subjects.length > 0 && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.what)}
-          </Header>
-          <List items={content.subjects} />
-        </>
-      )}
-      <Header dividing sub>
-        {intl.formatMessage(messages.when)}
-      </Header>
-      <When
-        start={content.start}
-        end={content.end}
-        whole_day={content.whole_day}
-        open_end={content.open_end}
-      />
-      {content.recurrence && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.allDates)}
-          </Header>
-          <Recurrence recurrence={content.recurrence} start={content.start} />
-        </>
-      )}
-      {content.location && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.where)}
-          </Header>
-          <p>{content.location}</p>
-        </>
-      )}
-      {content.contact_name && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.contactName)}
-          </Header>
-          <p>
-            {content.contact_email ? (
-              <a href={`mailto:${content.contact_email}`}>
-                {content.contact_name}
-              </a>
-            ) : (
-              content.contact_name
-            )}
-          </p>
-        </>
-      )}
-      {content.contact_phone && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.contactPhone)}
-          </Header>
-          <p>{content.contact_phone}</p>
-        </>
-      )}
-      {content.attendees.length > 0 && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.attendees)}
-          </Header>
-          <List items={content.attendees} />
-        </>
-      )}
-      {content.event_url && (
-        <>
-          <Header dividing sub>
-            {intl.formatMessage(messages.website)}
-          </Header>
-          <p>
-            <a
-              href={content.event_url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {intl.formatMessage(messages.visitWebsite)}
-            </a>
-          </p>
-        </>
-      )}
-    </Segment>
     {content.text && (
       <div
         dangerouslySetInnerHTML={{
@@ -162,9 +30,63 @@ const EventView = ({ intl, content }) => (
         }}
       />
     )}
-  </Container>
+  </React.Fragment>
 );
 
+/**
+ * EventView view component class.
+ * @function EventView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const EventView = (props) => {
+  const { content } = props;
+
+  return (
+    <div id="page-document" className="ui container viewwrapper event-view">
+      <Grid>
+        <Grid.Column width={7} className="mobile hidden">
+          {hasBlocksData(content) ? (
+            <RenderBlocks {...props} />
+          ) : (
+            <EventTextfieldView {...props} />
+          )}
+        </Grid.Column>
+        <Grid.Column width={5} className="mobile hidden">
+          <EventDetails content={content} />
+        </Grid.Column>
+        <Grid.Column width={12} only="mobile">
+          {hasBlocksData(content) ? (
+            <>
+              <RenderBlocks
+                {...props}
+                content={{
+                  ...content,
+                  blocks_layout: {
+                    items: props.content.blocks_layout.items.slice(0, 1),
+                  },
+                }}
+              />
+              <EventDetails content={content} display_as="div" />
+              <RenderBlocks
+                {...props}
+                content={{
+                  ...content,
+                  blocks_layout: {
+                    items: props.content.blocks_layout.items.slice(1),
+                  },
+                }}
+              />
+            </>
+          ) : (
+            <EventTextfieldView {...props} />
+          )}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.
@@ -192,4 +114,4 @@ EventView.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(EventView);
+export default EventView;

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
-import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
+import { URLUtils } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 
 /**
@@ -68,7 +68,7 @@ class LinkView extends Component {
           </p>
         )}
         {remoteUrl && (
-          <span>
+          <p>
             <FormattedMessage
               id="The link address is:"
               defaultMessage="The link address is:"
@@ -108,7 +108,7 @@ class LinkView extends Component {
                 )}
               </>
             )}
-          </span>
+          </p>
         )}
       </Container>
     );

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

@@ -6,8 +6,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Container, Image } from 'semantic-ui-react';
-
-import { flattenToAppURL, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import {
+  hasBlocksData,
+  flattenToAppURL,
+  flattenHTMLToAppURL,
+} from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
 /**
  * NewsItemView view component class.
@@ -15,39 +19,44 @@ import { flattenToAppURL, flattenHTMLToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const NewsItemView = ({ content }) => (
-  <Container className="view-wrapper">
-    {content.title && (
-      <h1 className="documentFirstHeading">
-        {content.title}
-        {content.subtitle && ` - ${content.subtitle}`}
-      </h1>
-    )}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="documentImage"
-        alt={content.title}
-        title={content.title}
-        src={
-          content.image['content-type'] === 'image/svg+xml'
-            ? flattenToAppURL(content.image.download)
-            : flattenToAppURL(content.image.scales.mini.download)
-        }
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </Container>
-);
+const NewsItemView = ({ content }) =>
+  hasBlocksData(content) ? (
+    <div id="page-document" className="ui container viewwrapper event-view">
+      <RenderBlocks content={content} />
+    </div>
+  ) : (
+    <Container className="view-wrapper">
+      {content.title && (
+        <h1 className="documentFirstHeading">
+          {content.title}
+          {content.subtitle && ` - ${content.subtitle}`}
+        </h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.image && (
+        <Image
+          className="documentImage"
+          alt={content.title}
+          title={content.title}
+          src={
+            content.image['content-type'] === 'image/svg+xml'
+              ? flattenToAppURL(content.image.download)
+              : flattenToAppURL(content.image.scales.mini.download)
+          }
+          floated="right"
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </Container>
+  );
 
 /**
  * Property types.

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

@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { Redirect } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
@@ -21,6 +22,7 @@ import { listActions, getContent } from '@plone/volto/actions';
 import {
   BodyClass,
   getBaseUrl,
+  flattenToAppURL,
   getLayoutFieldname,
 } from '@plone/volto/helpers';
 
@@ -194,7 +196,9 @@ class View extends Component {
    */
   render() {
     const { views } = config;
-    if (this.props.error && !this.props.connectionRefused) {
+    if (this.props.error && this.props.error.code === 301) {
+      return <Redirect to={flattenToAppURL(this.props.error.url)} />;
+    } else if (this.props.error && !this.props.connectionRefused) {
       let FoundView;
       if (this.props.error.status === undefined) {
         // For some reason, while development and if CORS is in place and the

package/src/config/Blocks.jsx

@@ -56,6 +56,11 @@ import TopSideFacets from '@plone/volto/components/manage/Blocks/Search/layout/T
 import {
   SelectFacet,
   CheckboxFacet,
+  DateRangeFacet,
+  ToggleFacet,
+  ToggleFacetFilterListEntry,
+  SelectFacetFilterListEntry,
+  DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 
@@ -438,12 +443,38 @@ const blocksConfig = {
             title: 'Select',
             view: SelectFacet,
             isDefault: true,
+            schemaEnhancer: SelectFacet.schemaEnhancer,
+            stateToValue: SelectFacet.stateToValue,
+            valueToQuery: SelectFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'checkboxFacet',
             title: 'Checkbox',
             view: CheckboxFacet,
             isDefault: false,
+            schemaEnhancer: CheckboxFacet.schemaEnhancer,
+            stateToValue: CheckboxFacet.stateToValue,
+            valueToQuery: CheckboxFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
+          {
+            id: 'daterangeFacet',
+            title: 'Date range',
+            view: DateRangeFacet,
+            isDefault: false,
+            stateToValue: DateRangeFacet.stateToValue,
+            valueToQuery: DateRangeFacet.valueToQuery,
+            filterListComponent: DateRangeFacetFilterListEntry,
+          },
+          {
+            id: 'toggleFacet',
+            title: 'Toggle',
+            view: ToggleFacet,
+            isDefault: false,
+            stateToValue: ToggleFacet.stateToValue,
+            valueToQuery: ToggleFacet.valueToQuery,
+            filterListComponent: ToggleFacetFilterListEntry,
           },
         ],
       },

package/src/config/Loadables.jsx

@@ -32,4 +32,26 @@ export const loadables = {
   reactDnd: loadable.lib(() => import('react-dnd')),
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
+
+  // draftjs libs
+  immutableLib: loadable.lib(() => import('immutable')),
+  draftJs: loadable.lib(() => import('draft-js')),
+  draftJsLibIsSoftNewlineEvent: loadable.lib(() =>
+    import('draft-js/lib/isSoftNewlineEvent'),
+  ),
+  draftJsFilters: loadable.lib(() => import('draftjs-filters')),
+  draftJsInlineToolbarPlugin: loadable.lib(() =>
+    import('draft-js-inline-toolbar-plugin'),
+  ),
+  draftJsImportHtml: loadable.lib(() => import('draft-js-import-html')),
+  draftJsBlockBreakoutPlugin: loadable.lib(() =>
+    import('draft-js-block-breakout-plugin'),
+  ),
+  draftJsCreateInlineStyleButton: loadable.lib(() =>
+    import('draft-js-buttons/lib/utils/createInlineStyleButton'),
+  ),
+  draftJsCreateBlockStyleButton: loadable.lib(() =>
+    import('draft-js-buttons/lib/utils/createBlockStyleButton'),
+  ),
+  draftJsPluginsUtils: loadable.lib(() => import('draft-js-plugins-utils')),
 };

package/src/config/RichTextEditor/Blocks.jsx

@@ -1,25 +1,30 @@
-import { Map } from 'immutable';
-import { DefaultDraftBlockRenderMap } from 'draft-js';
+export default (props) => {
+  const { draftJs, immutableLib } = props;
+  const { DefaultDraftBlockRenderMap } = draftJs;
+  const { Map } = immutableLib;
 
-const blockRenderMap = Map({
-  callout: {
-    element: 'p',
-  },
-  unstyled: {
-    element: 'div',
-  },
-});
+  const blockRenderMap = Map({
+    callout: {
+      element: 'p',
+    },
+    unstyled: {
+      element: 'div',
+    },
+  });
 
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
+  const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+    blockRenderMap,
+  );
 
-const blockStyleFn = (contentBlock) => {
-  const type = contentBlock.getType();
-  if (type === 'callout') {
-    return 'callout';
-  }
-  return null;
-};
+  const blockStyleFn = (contentBlock) => {
+    const type = contentBlock.getType();
+    if (type === 'callout') {
+      return 'callout';
+    }
+    return null;
+  };
 
-const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
+  const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
 
-export { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
+  return { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
+};

package/src/config/RichTextEditor/Plugins.jsx

@@ -1,19 +1,6 @@
-import { Separator } from 'draft-js-inline-toolbar-plugin';
-
-import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin';
 import createLinkPlugin from '@plone/volto/components/manage/AnchorPlugin';
-//import createLinkDetectionPlugin from '@plone/volto/components/manage/LinkDetectionPlugin/link-detection-plugin';
-
-import {
-  BlockquoteButton,
-  BoldButton,
-  CalloutButton,
-  ItalicButton,
-  HeadlineTwoButton,
-  HeadlineThreeButton,
-  OrderedListButton,
-  UnorderedListButton,
-} from './Styles';
+
+import Styles from './Styles';
 
 const breakOutOptions = {
   doubleBreakoutBlocks: [
@@ -31,23 +18,43 @@ const breakOutOptions = {
   ],
 };
 
-const blockBreakoutPlugin = createBlockBreakoutPlugin(breakOutOptions);
-const linkPlugin = createLinkPlugin();
 //const linkDetectionPlugin = createLinkDetectionPlugin();
 
-export const inlineToolbarButtons = [
-  BoldButton,
-  ItalicButton,
-  linkPlugin.LinkButton,
-  Separator,
-  HeadlineTwoButton,
-  HeadlineThreeButton,
-  UnorderedListButton,
-  OrderedListButton,
-  BlockquoteButton,
-  CalloutButton,
-];
-
-const plugins = [linkPlugin, blockBreakoutPlugin]; //linkDetectionPlugin
+const plugins = (props) => {
+  const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props;
+  const { Separator } = draftJsInlineToolbarPlugin;
+  const blockBreakoutPlugin = draftJsBlockBreakoutPlugin.default(
+    breakOutOptions,
+  );
+
+  const linkPlugin = createLinkPlugin({ libraries: props });
+
+  const buttons = Styles(props);
+  const {
+    BoldButton,
+    ItalicButton,
+    HeadlineTwoButton,
+    HeadlineThreeButton,
+    UnorderedListButton,
+    OrderedListButton,
+    BlockquoteButton,
+    CalloutButton,
+  } = buttons;
+
+  const inlineToolbarButtons = [
+    BoldButton,
+    ItalicButton,
+    linkPlugin.LinkButton,
+    Separator,
+    HeadlineTwoButton,
+    HeadlineThreeButton,
+    UnorderedListButton,
+    OrderedListButton,
+    BlockquoteButton,
+    CalloutButton,
+  ];
+
+  return { inlineToolbarButtons, plugins: [linkPlugin, blockBreakoutPlugin] }; //linkDetectionPlugin
+};
 
 export default plugins;