@plone/volto 15.0.0-alpha.4 → 15.0.0-alpha.8

package/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -5,6 +5,11 @@ import {
   DropdownIndicator,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 import { selectTheme, customSelectStyles } from './SelectStyling';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from './base';
 
 const SelectFacet = (props) => {
   const {
@@ -47,4 +52,8 @@ const SelectFacet = (props) => {
   );
 };
 
+SelectFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+SelectFacet.stateToValue = selectFacetStateToValue;
+SelectFacet.valueToQuery = selectFacetValueToQuery;
+
 export default injectLazyLibs('reactSelect')(SelectFacet);

package/src/components/manage/Blocks/Search/components/SelectFacetFilterListEntry.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Label, Icon } from 'semantic-ui-react';
+
+function SelectFacetFilterListEntry(props) {
+  const { facet, isEditMode, setFacets, facets } = props;
+  return typeof facets[facet] === 'string' ? (
+    <Label size="small">
+      {facets[facet]}
+      <Icon
+        name="delete"
+        onClick={() => {
+          !isEditMode &&
+            setFacets({
+              ...facets,
+              [facet]: '',
+            });
+        }}
+      />
+    </Label>
+  ) : (
+    <>
+      {facets[facet].map((entry, i) => (
+        <Label size="small" key={i}>
+          {entry}
+          <Icon
+            name="delete"
+            onClick={() => {
+              const entries = facets[facet].filter((item) => item !== entry);
+              !isEditMode &&
+                setFacets({
+                  ...facets,
+                  [facet]: entries,
+                });
+            }}
+          />
+        </Label>
+      ))}
+    </>
+  );
+}
+
+export default SelectFacetFilterListEntry;

package/src/components/manage/Blocks/Search/components/SelectStyling.jsx

@@ -15,7 +15,7 @@ export const customSelectStyles = {
     borderBottom: '1px solid #c7d5d8',
     boxShadow: 'none',
     borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
-    minHeight: '40px',
+    minHeight: '37px',
   }),
   menu: (styles, state) => ({
     ...styles,

package/src/components/manage/Blocks/Search/components/ToggleFacet.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Radio, Header } from 'semantic-ui-react';
+
+const ToggleFacet = (props) => {
+  const { facet, isEditMode, onChange, value } = props; // value, choices, isMulti, onChange,
+
+  return (
+    <div className="checkbox-facet">
+      <Header as="h4">{facet?.title ?? facet?.field?.label}</Header>
+      <div className="radio">
+        <Radio
+          toggle
+          checked={value || typeof value === 'string'}
+          disabled={isEditMode}
+          onChange={(e, { checked }) => {
+            onChange(facet.field.value, checked);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+ToggleFacet.stateToValue = ({ facetSettings, index, selectedValue }) => {
+  return selectedValue || typeof selectedValue === 'string';
+};
+
+ToggleFacet.valueToQuery = ({ value, facet }) => {
+  return value || typeof value === 'string'
+    ? {
+        i: facet.field.value,
+        o: 'plone.app.querystring.operation.boolean.isTrue',
+        v: '',
+      }
+    : null;
+};
+
+export default ToggleFacet;

package/src/components/manage/Blocks/Search/components/ToggleFacetFilterListEntry.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Label, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  yes: {
+    id: 'yes',
+    defaultMessage: 'Yes',
+  },
+  no: {
+    id: 'no',
+    defaultMessage: 'No',
+  },
+});
+
+function ToggleFacetFilterListEntry(props) {
+  const { facet, isEditMode, setFacets, facets } = props;
+  const intl = useIntl();
+
+  return (
+    <Label size="small">
+      {intl.formatMessage(facets[facet] ? messages.yes : messages.no)}
+      <Icon
+        name="delete"
+        onClick={() => {
+          const filteredFacets = Object.assign(
+            {},
+            ...Object.keys(facets)
+              .filter((f) => f !== facet)
+              .map((f) => ({ [f]: facets[f] })),
+          );
+          !isEditMode && setFacets(filteredFacets);
+        }}
+      />
+    </Label>
+  );
+}
+
+export default ToggleFacetFilterListEntry;

package/src/components/manage/Blocks/Search/components/base.js

@@ -0,0 +1,52 @@
+import { isEmpty } from 'lodash';
+
+/**
+ * Converts the state (extracted from URL) to options for the facet control
+ *
+ * Shared by the SelectFacet and CheckboxFacet
+ */
+export const selectFacetStateToValue = ({
+  facetSettings,
+  index,
+  selectedValue,
+}) => {
+  const isMulti = facetSettings.multiple;
+  return selectedValue
+    ? isMulti
+      ? Array.isArray(selectedValue)
+        ? selectedValue.map((v) => ({
+            value: v,
+            label: index.values?.[v]?.title,
+          }))
+        : []
+      : {
+          value: selectedValue,
+          label: index.values?.[selectedValue]?.title,
+        }
+    : [];
+};
+
+export const selectFacetSchemaEnhancer = ({ schema, formData }) => {
+  // adds (enables) the 'multiple' field after the 'type' dropdown
+  let { fields } = schema.fieldsets[0];
+  const pos = fields.indexOf('type') + 1;
+  fields = [
+    ...fields.slice(0, pos),
+    'multiple',
+    ...fields.slice(pos, fields.length),
+  ];
+  schema.fieldsets[0].fields = fields;
+  return schema;
+};
+
+export const selectFacetValueToQuery = ({ value, facet }) => {
+  return !isEmpty(value)
+    ? {
+        i: facet.field.value,
+        o: Array.isArray(value)
+          ? 'plone.app.querystring.operation.list.contains'
+          : 'plone.app.querystring.operation.selection.is',
+        v: value,
+      }
+    : undefined;
+};

package/src/components/manage/Blocks/Search/components/index.js

@@ -2,6 +2,11 @@ export SearchDetails from './SearchDetails';
 export Facets from './Facets';
 export SelectFacet from './SelectFacet';
 export CheckboxFacet from './CheckboxFacet';
+export DateRangeFacet from './DateRangeFacet';
 export SearchInput from './SearchInput';
 export FilterList from './FilterList';
 export SortOn from './SortOn';
+export ToggleFacet from './ToggleFacet';
+export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
+export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
+export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { isEmpty } from 'lodash';
 import qs from 'query-string';
 import { useLocation, useHistory } from 'react-router-dom';
 
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
@@ -25,16 +27,30 @@ const PAQO = 'plone.app.querystring.operation';
  *
  */
 function getInitialState(data, facets, urlSearchText, id) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const facetSettings = data?.facets || [];
+
   return {
     query: [
       ...(data.query?.query || []),
-      ...Object.keys(facets).map((name) => ({
-        i: name,
-        v: facets[name],
-
-        // TODO: make the facet operator pluggable
-        o: 'plone.app.querystring.operation.selection.is',
-      })),
+      ...(facetSettings || [])
+        .map((facet) => {
+          if (!facet?.field) return null;
+
+          const { valueToQuery } = resolveExtension(
+            'type',
+            facetWidgetTypes,
+            facet,
+          );
+
+          const name = facet.field.value;
+          const value = facets[name];
+
+          return valueToQuery({ value, facet });
+        })
+        .filter((f) => !!f),
       ...(urlSearchText
         ? [
             {
@@ -54,27 +70,42 @@ function getInitialState(data, facets, urlSearchText, id) {
 }
 
 /**
- * "Normalizes" the search state to something that's serializable and usable
- * as initial state
+ * "Normalizes" the search state to something that's serializable
+ * (for querying) and used to compute data for the ListingBody
  *
  * @function normalizeState
  *
  */
-function normalizeState({ query, facets, id, searchText, sortOn, sortOrder }) {
+function normalizeState({
+  query, // base query
+  facets, // facet values
+  id, // block id
+  searchText, // SearchableText
+  sortOn,
+  sortOrder,
+  facetSettings, // data.facets extracted from block data
+}) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+
   const params = {
     query: [
       ...(query.query || []),
-      ...Object.keys(facets).map((name) =>
-        !isEmpty(facets[name])
-          ? {
-              i: name,
-              o: Array.isArray(facets[name])
-                ? 'plone.app.querystring.operation.list.contains'
-                : 'plone.app.querystring.operation.selection.is',
-              v: facets[name],
-            }
-          : undefined,
-      ),
+      ...(facetSettings || []).map((facet) => {
+        if (!facet?.field) return null;
+
+        const { valueToQuery } = resolveExtension(
+          'type',
+          facetWidgetTypes,
+          facet,
+        );
+
+        const name = facet.field.value;
+        const value = facets[name];
+
+        return valueToQuery({ value, facet });
+      }),
     ].filter((o) => !!o),
     sort_on: sortOn || query.sort_on,
     sort_order: sortOrder || query.sort_order,
@@ -217,7 +248,7 @@ const withSearch = (options) => (WrappedComponent) => {
     const [facets, setFacets] = React.useState(
       Object.assign(
         {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
 
         // support for simple filters like ?Subject=something
         // TODO: since the move to hash params this is no longer working.
@@ -245,19 +276,21 @@ const withSearch = (options) => (WrappedComponent) => {
     );
 
     const timeoutRef = React.useRef();
+    const facetSettings = data?.facets;
 
     const onTriggerSearch = React.useCallback(
-      (toSearch, toSearchFacets, toSortOn, toSortOrder) => {
+      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
             const searchData = normalizeState({
+              id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              id,
-              searchText: toSearch,
+              searchText: toSearchText,
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
+              facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
             if (toSortOn) setSortOn(toSortOn);
@@ -268,7 +301,15 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
-      [data.query, facets, id, setLocationSearchData, sortOn, sortOrder],
+      [
+        data.query,
+        facets,
+        id,
+        setLocationSearchData,
+        sortOn,
+        sortOrder,
+        facetSettings,
+      ],
     );
 
     const querystringResults = useSelector(

package/src/components/manage/Blocks/Search/schema.js

@@ -1,6 +1,7 @@
 import config from '@plone/volto/registry';
 import { defineMessages } from 'react-intl';
 import { cloneDeep } from 'lodash';
+import { hasNonValueOperation, hasDateOperation } from './utils';
 
 const messages = defineMessages({
   searchBlock: {
@@ -99,9 +100,9 @@ const messages = defineMessages({
 
 const enhanceSchema = (originalSchema, formData) => {
   const extensionName = 'facetWidgets';
-  const extensionType = 'type';
+  const extensionType = 'type'; // property name in stored block data
   const variations =
-    config.blocks.blocksConfig.search.extensions[extensionName][extensionType];
+    config.blocks.blocksConfig.search.extensions[extensionName].types;
 
   const activeItemName = formData?.[extensionType];
   let activeItem = variations?.find((item) => item.id === activeItemName);
@@ -122,7 +123,7 @@ const FacetSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'field', 'type', 'multiple', 'hidden'],
+      fields: ['title', 'field', 'type', 'hidden'],
     },
   ],
   properties: {
@@ -141,7 +142,9 @@ const FacetSchema = ({ intl }) => ({
         return Object.assign(
           {},
           ...Object.keys(options).map((k) =>
-            Object.keys(options[k].values || {}).length
+            Object.keys(options[k].values || {}).length ||
+            hasNonValueOperation(options[k].operations) ||
+            hasDateOperation(options[k].operations)
               ? { [k]: options[k] }
               : {},
           ),

package/src/components/manage/Blocks/Search/utils.js

@@ -0,0 +1,16 @@
+export const NONVALUE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.boolean.isFalse',
+  'plone.app.querystring.operation.boolean.isTrue',
+]);
+
+export const DATE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.date.between',
+]);
+
+export const hasNonValueOperation = (ops) => {
+  return ops.filter((x) => NONVALUE_OPERATIONS.has(x)).length > 0;
+};
+
+export const hasDateOperation = (ops) => {
+  return ops.filter((x) => DATE_OPERATIONS.has(x)).length > 0;
+};

package/src/components/manage/Blocks/Table/Cell.jsx

@@ -5,19 +5,20 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Editor from 'draft-js-plugins-editor';
-import { convertFromRaw, EditorState, RichUtils } from 'draft-js';
-import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
-import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent';
 import { includes } from 'lodash';
 import config from '@plone/volto/registry';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import loadable from '@loadable/component';
+
+const Editor = loadable(() => import('draft-js-plugins-editor'));
+
 /**
  * Edit text cell class.
  * @class Cell
  * @extends Component
  */
-class Cell extends Component {
+class CellComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -54,12 +55,16 @@ class Cell extends Component {
   constructor(props) {
     super(props);
 
+    const { EditorState, convertFromRaw } = props.draftJs;
+    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
+
     if (!__SERVER__) {
+      this.draftConfig = config.settings.richtextEditorSettings(props);
       let editorState;
       editorState = EditorState.createWithContent(convertFromRaw(props.value));
 
       const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: config.settings.richTextEditorInlineToolbarButtons,
+        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
       });
 
       this.state = {
@@ -125,7 +130,8 @@ class Cell extends Component {
     }
 
     const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    const { settings } = config;
+    const isSoftNewlineEvent = this.props.draftJsLibIsSoftNewlineEvent.default;
+    const { RichUtils } = this.props.draftJs;
 
     return (
       <div>
@@ -135,11 +141,11 @@ class Cell extends Component {
           editorState={this.state.editorState}
           plugins={[
             this.state.inlineToolbarPlugin,
-            ...settings.richTextEditorPlugins,
+            ...this.draftConfig.richTextEditorPlugins,
           ]}
-          blockRenderMap={settings.extendedBlockRenderMap}
-          blockStyleFn={settings.blockStyleFn}
-          customStyleMap={settings.customStyleMap}
+          blockRenderMap={this.draftConfig.extendedBlockRenderMap}
+          blockStyleFn={this.draftConfig.blockStyleFn}
+          customStyleMap={this.draftConfig.customStyleMap}
           handleReturn={(e) => {
             if (isSoftNewlineEvent(e)) {
               this.onChange(
@@ -155,10 +161,10 @@ class Cell extends Component {
                 anchorKey,
               );
               const blockType = currentContentBlock.getType();
-              if (!includes(settings.listBlockTypes, blockType)) {
+              if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(
                   this.props.onAddBlock(
-                    settings.defaultBlockType,
+                    this.draftConfig.defaultBlockType,
                     this.props.index + 1,
                   ),
                 );
@@ -178,4 +184,24 @@ class Cell extends Component {
   }
 }
 
-export default Cell;
+export const Cell = injectLazyLibs([
+  'draftJs',
+  'draftJsBlockBreakoutPlugin',
+  'draftJsCreateBlockStyleButton',
+  'draftJsCreateInlineStyleButton',
+  'draftJsFilters',
+  'draftJsImportHtml',
+  'draftJsInlineToolbarPlugin',
+  'draftJsLibIsSoftNewlineEvent',
+  'immutableLib',
+])(CellComponent);
+
+const Preloader = (props) => {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    Editor.load().then(() => setLoaded(true));
+  }, []);
+  return loaded ? <Cell {...props} /> : null;
+};
+
+export default Preloader;

package/src/components/manage/Blocks/Table/Cell.test.jsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Cell from './Cell';
+import { Cell } from './Cell';
 
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 test('renders a cell component', () => {
   const component = renderer.create(
     <Cell onChange={() => {}} onSelectCell={() => {}} />,

package/src/components/manage/Blocks/Table/Edit.jsx

@@ -5,15 +5,16 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { compose } from 'redux';
 import { map, remove } from 'lodash';
 import { Button, Segment, Table, Form } from 'semantic-ui-react';
-import { convertToRaw } from 'draft-js';
 import { Portal } from 'react-portal';
 import cx from 'classnames';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Cell from '@plone/volto/components/manage/Blocks/Table/Cell';
 import { Field, Icon } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
 import rowAfterSVG from '@plone/volto/icons/row-after.svg';
@@ -208,6 +209,9 @@ class Edit extends Component {
     this.toggleBasic = this.toggleBasic.bind(this);
     this.toggleCelled = this.toggleCelled.bind(this);
     this.toggleStriped = this.toggleStriped.bind(this);
+
+    const { convertToRaw } = props.draftJs;
+    this.convertToRaw = convertToRaw;
   }
 
   /**
@@ -261,7 +265,7 @@ class Edit extends Component {
    */
   onChangeCell(row, cell, editorState) {
     const table = { ...this.props.data.table };
-    table.rows[row].cells[cell].value = convertToRaw(
+    table.rows[row].cells[cell].value = this.convertToRaw(
       editorState.getCurrentContent(),
     );
     this.props.onChangeBlock(this.props.block, {
@@ -740,4 +744,4 @@ class Edit extends Component {
   }
 }
 
-export default injectIntl(Edit);
+export default compose(injectLazyLibs(['draftJs']), injectIntl)(Edit);

package/src/components/manage/Blocks/Table/Edit.test.jsx

@@ -5,6 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import Edit from './Edit';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const mockStore = configureStore();
 
 test('renders an edit table block component', () => {

package/src/components/manage/Blocks/Table/View.jsx

@@ -37,8 +37,8 @@ const View = ({ data }) =>
                 {cell.value && cell.value.blocks && cell.value.blocks[0].text
                   ? redraft(
                       cell.value,
-                      config.settings.ToHTMLRenderers,
-                      config.settings.ToHTMLOptions,
+                      config.settings.richtextViewSettings.ToHTMLRenderers,
+                      config.settings.richtextViewSettings.ToHTMLOptions,
                     )
                   : '\u00A0'}
               </Table.Cell>