@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -31,6 +30,10 @@ const messages = defineMessages({
     id: 'Descending',
     defaultMessage: 'Descending',
   },
+  sortedOn: {
+    id: 'Sorted on',
+    defaultMessage: 'Sorted on',
+  },
 });
 
 const SortOn = (props) => {
@@ -48,9 +51,17 @@ const SortOn = (props) => {
   const { sortable_indexes } = querystring;
   const Select = reactSelect.default;
 
-  const activeSortOn = sortOn || data?.query?.sort_on || '';
+  const defaultSortOn = data?.query?.sort_on || '';
+  const activeSortOn = sortOn || defaultSortOn;
+
+  let { sortOnOptions = [] } = data;
+  sortOnOptions = [defaultSortOn, ...sortOnOptions];
+  sortOnOptions = [...new Set(sortOnOptions)];
 
-  const { sortOnOptions = [] } = data;
+  const showSelectField = sortOnOptions.length > 1;
+  if (!showSelectField && !activeSortOn) {
+    return null;
+  }
   const value = {
     value: activeSortOn || intl.formatMessage(messages.noSelection),
     label:
@@ -62,59 +73,75 @@ const SortOn = (props) => {
   return (
     <div className="search-sort-wrapper">
       <div className="search-sort-on">
-        <span className="sort-label">
-          {intl.formatMessage(messages.sortOn)}
-        </span>
-        <Select
-          id="select-search-sort-on"
-          name="select-searchblock-sort-on"
-          className="search-react-select-container"
-          classNamePrefix="react-select"
-          placeholder={intl.formatMessage(messages.sortOn)}
-          styles={sortOnSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          options={[
-            ...sortOnOptions.map((k) => ({
-              value: k,
-              label: sortable_indexes[k]?.title || k,
-            })),
-          ]}
-          isSearchable={false}
-          value={value}
-          onChange={(data) => {
-            !isEditMode && setSortOn(data.value);
-          }}
-        />
+        {showSelectField ? (
+          <>
+            <span className="sort-label">
+              {intl.formatMessage(messages.sortOn)}
+            </span>
+            <Select
+              id="select-search-sort-on"
+              name="select-searchblock-sort-on"
+              className="search-react-select-container"
+              classNamePrefix="react-select"
+              placeholder={intl.formatMessage(messages.sortOn)}
+              styles={sortOnSelectStyles}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              options={[
+                ...sortOnOptions.map((k) => ({
+                  value: k,
+                  label:
+                    sortable_indexes[k]?.title ||
+                    k ||
+                    intl.formatMessage(messages.noSelection),
+                })),
+              ]}
+              isSearchable={false}
+              value={value}
+              onChange={(data) => {
+                !isEditMode && setSortOn(data.value);
+              }}
+            />
+          </>
+        ) : (
+          <span className="sorted-label">
+            {intl.formatMessage(messages.sortedOn)}
+            <span className="sorted-label-value">{value.label}</span>
+          </span>
+        )}
       </div>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.ascending)}
-        className={cx({
-          active: sortOrder === 'ascending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('ascending');
-        }}
-      >
-        <Icon name={upSVG} size="25px" />
-      </Button>
-      <Button
-        icon
-        basic
-        compact
-        title={intl.formatMessage(messages.descending)}
-        className={cx({
-          active: sortOrder === 'descending',
-        })}
-        onClick={() => {
-          !isEditMode && setSortOrder('descending');
-        }}
-      >
-        <Icon name={downSVG} size="25px" />
-      </Button>
+      {activeSortOn ? (
+        <>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.ascending)}
+            className={cx({
+              active: sortOrder === 'ascending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('ascending');
+            }}
+          >
+            <Icon name={downSVG} size="25px" />
+          </Button>
+          <Button
+            icon
+            basic
+            compact
+            title={intl.formatMessage(messages.descending)}
+            className={cx({
+              active: sortOrder === 'descending',
+            })}
+            onClick={() => {
+              !isEditMode && setSortOrder('descending');
+            }}
+          >
+            <Icon name={upSVG} size="25px" />
+          </Button>
+        </>
+      ) : null}
     </div>
   );
 };

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

@@ -321,7 +321,7 @@ const withSearch = (options) => (WrappedComponent) => {
     const previousUrlQuery = usePrevious(urlQuery);
 
     // During first render the previousUrlQuery is undefined and urlQuery
-    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // is empty so it resetting the facet when you are navigating but during reload we have urlQuery and we need
     // to set the facet at first render.
     const preventOverrideOfFacetState =
       previousUrlQuery === undefined && urlQuery.length === 0;
@@ -404,12 +404,12 @@ const withSearch = (options) => (WrappedComponent) => {
               query: data.query || {},
               facets: toSearchFacets || facets,
               searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || sortOn,
+              sortOn: toSortOn || undefined,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
-            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOn) setSortOn(toSortOn || undefined);
             if (toSortOrder) setSortOrder(toSortOrder);
             setSearchData(newSearchData);
             setLocationSearchData(getSearchFields(newSearchData));

package/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx

@@ -3,13 +3,13 @@
  * @module components/manage/Widgets/SelectWidget
  */
 
-import { map, intersection, filter, toPairs, groupBy } from 'lodash';
-import React, { Component } from 'react';
+import { map, filter, toPairs, groupBy } from 'lodash';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import withQueryString from './../hocs/withQueryString';
 import { defineMessages } from 'react-intl';
 
@@ -30,187 +30,118 @@ const messages = defineMessages({
 });
 
 /**
- * SelectWidget component class.
+ * SelectWidget component function.
  * @function SelectWidget
  * @returns {string} Markup of the component.
  */
-class SelectWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    loading: PropTypes.bool,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.bool,
-    ]),
-    onChange: PropTypes.func.isRequired,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onEdit: PropTypes.func,
-    onDelete: PropTypes.func,
-    wrapped: PropTypes.bool,
-    querystring: PropTypes.object,
-  };
+const SelectWidget = (props) => {
+  const { choices, vocabBaseUrl, getVocabulary } = props;
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    items: {
-      vocabulary: null,
-    },
-    widgetOptions: {
-      vocabulary: null,
-    },
-    error: [],
-    choices: [],
-    loading: false,
-    value: null,
-    onChange: () => {},
-    onBlur: () => {},
-    onClick: () => {},
-    onEdit: null,
-    onDelete: null,
-  };
-
-  state = {
-    selectedOption: this.props.value
-      ? { label: this.props.value.title, value: this.props.value.value }
-      : {},
-  };
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (!this.props.choices && this.props.vocabBaseUrl) {
-      this.props.getVocabulary({ vocabNameOrURL: this.props.vocabBaseUrl });
+  useEffect(() => {
+    if (!choices && vocabBaseUrl) {
+      getVocabulary({ vocabNameOrURL: vocabBaseUrl });
     }
-  }
-
-  /**
-   * Initiate search with new query
-   * @method loadOptions
-   * @param {string} search Search query.
-   * @param {string} previousOptions The previous options rendered.
-   * @param {string} additional Additional arguments to pass to the next loadOptions.
-   * @returns {undefined}
-   */
-  loadOptions = (search, previousOptions, additional) => {
-    let hasMore = this.props.itemsTotal > previousOptions.length;
-    if (hasMore) {
-      const offset = this.state.search !== search ? 0 : additional.offset;
-      this.props.getVocabulary({
-        vocabNameOrURL: this.props.vocabBaseUrl,
-        query: search,
-        start: offset,
-      });
-      this.setState({ search });
-
-      return {
-        options:
-          intersection(previousOptions, this.props.choices).length ===
-          this.props.choices.length
-            ? []
-            : this.props.choices,
-        hasMore: hasMore,
-        additional: {
-          offset: offset === additional.offset ? offset + 25 : offset,
-        },
-      };
-    }
-    return null;
-  };
-
-  /* Customized to pass object instead of plain string value */
-  handleChange = (selectedOption) => {
-    this.setState({ selectedOption });
-    this.props.onChange(this.props.id, {
-      value: selectedOption.value,
-      title: selectedOption.label,
-    });
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      // choices,
-      value,
-      onChange,
-      placeholder,
-      querystring,
-      filterOptions = identity,
-    } = this.props;
-    const isDisabled = false;
-    const { indexes = [] } = querystring;
-
-    const Select = this.props.reactSelect.default;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <Select
-          id={`field-${id}`}
-          name={id}
-          placeholder={
-            placeholder ?? this.props.intl.formatMessage(messages.select)
-          }
-          isDisabled={isDisabled}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={map(
-            toPairs(
-              groupBy(toPairs(filterOptions(indexes)), (item) => item[1].group),
+  }, [choices, vocabBaseUrl, getVocabulary]);
+
+  const {
+    id,
+    value,
+    onChange,
+    placeholder,
+    querystring,
+    filterOptions = identity,
+  } = props;
+
+  const isDisabled = false;
+  const { indexes = [] } = querystring;
+  const Select = props.reactSelect.default;
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Select
+        id={`field-${id}`}
+        name={id}
+        placeholder={placeholder ?? props.intl.formatMessage(messages.select)}
+        isDisabled={isDisabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={map(
+          toPairs(
+            groupBy(toPairs(filterOptions(indexes)), (item) => item[1].group),
+          ),
+          (group) => ({
+            label: group[0],
+            options: map(
+              filter(group[1], (item) => item[1].enabled),
+              (field) => ({
+                label: field[1].title,
+                value: field[0],
+              }),
             ),
-            (group) => ({
-              label: group[0],
-              options: map(
-                filter(group[1], (item) => item[1].enabled),
-                (field) => ({
-                  label: field[1].title,
-                  value: field[0],
-                }),
-              ),
-            }),
-          )}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          value={{ value: value?.value, label: indexes[value?.value]?.title }}
-          onChange={(data) => {
-            let dataValue = [];
-            if (Array.isArray(data)) {
-              for (let obj of data) {
-                dataValue.push(obj.value);
-              }
-              return onChange(id, dataValue);
+          }),
+        )}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        value={{
+          value: value?.value,
+          label: indexes[value?.value]?.title,
+        }}
+        onChange={(data) => {
+          let dataValue = [];
+          if (Array.isArray(data)) {
+            for (let obj of data) {
+              dataValue.push(obj.value);
             }
-            return onChange(id, data);
-          }}
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
+            return onChange(id, dataValue);
+          }
+          return onChange(id, data);
+        }}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+SelectWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  loading: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  wrapped: PropTypes.bool,
+  querystring: PropTypes.object,
+};
+
+SelectWidget.defaultProps = {
+  description: null,
+  required: false,
+  items: {
+    vocabulary: null,
+  },
+  widgetOptions: {
+    vocabulary: null,
+  },
+  error: [],
+  choices: [],
+  loading: false,
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+};
 
 export default compose(
   withQueryString,

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -1,9 +1,18 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
-import { BlockDataForm, Icon } from '@plone/volto/components';
+import { toast } from 'react-toastify';
+import { Icon, Toast } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import {
+  flattenToAppURL,
+  messages as defaultMessages,
+} from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
 import { isEmpty } from 'lodash';
 
+import reloadSVG from '@plone/volto/icons/reload.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
@@ -11,11 +20,27 @@ const messages = defineMessages({
     id: 'Reset the block',
     defaultMessage: 'Reset the block',
   },
+  refreshTeaser: {
+    id: 'Refresh source content',
+    defaultMessage: 'Refresh source content',
+  },
+  invalidTeaser: {
+    id: 'Invalid teaser source',
+    defaultMessage: 'Invalid teaser source',
+  },
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    block,
+    blocksConfig,
+    blocksErrors,
+    data,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
+  const dispatch = useDispatch();
   const intl = useIntl();
 
   const reset = () => {
@@ -28,6 +53,64 @@ const TeaserData = (props) => {
     });
   };
 
+  const dataTransformer = (resp, data) => {
+    let hrefData = {
+      '@id': flattenToAppURL(resp['@id']),
+      '@type': resp?.['@type'],
+      Description: resp?.description,
+      Title: resp.title,
+      hasPreviewImage: resp?.preview_image ? true : false,
+      head_title: resp.head_title ?? null,
+      image_field: resp?.preview_image
+        ? 'preview_image'
+        : resp?.image
+          ? 'image'
+          : null,
+      image_scales: {
+        preview_image: [resp?.preview_image],
+        image: [resp?.image],
+      },
+      title: resp.title,
+    };
+    let blockData = {
+      '@type': data['@type'],
+      description: resp?.description,
+      head_title: resp?.head_title,
+      overwrite: data.overwrite,
+      href: [hrefData],
+      styles: data.styles,
+      title: resp.title,
+    };
+    return blockData;
+  };
+
+  const refresh = () => {
+    if (data.href?.[0]?.['@id']) {
+      dispatch(
+        getContent(
+          flattenToAppURL(data.href[0]['@id']),
+          null,
+          `${block}-teaser`,
+        ),
+      )
+        .then((resp) => {
+          if (resp) {
+            let blockData = dataTransformer(resp, data);
+            onChangeBlock(block, blockData);
+          }
+        })
+        .catch((e) => {
+          toast.error(
+            <Toast
+              error
+              title={props.intl.formatMessage(defaultMessages.error)}
+              content={props.intl.formatMessage(messages.invalidTeaser)}
+            />,
+          );
+        });
+    }
+  };
+
   const isReseteable =
     isEmpty(data.href) && !data.title && !data.description && !data.head_title;
 
@@ -44,7 +127,24 @@ const TeaserData = (props) => {
     </Button.Group>
   );
 
-  const schema = blocksConfig[data['@type']].blockSchema({ intl });
+  const ActionButton = (
+    <Button.Group className="refresh teaser">
+      <Button
+        aria-label={intl.formatMessage(messages.refreshTeaser)}
+        basic
+        onClick={() => refresh()}
+        disabled={isEmpty(data.href)}
+      >
+        {intl.formatMessage(messages.refreshTeaser)}
+        <Icon name={reloadSVG} size="20px" color="#00000099" />
+      </Button>
+    </Button.Group>
+  );
+
+  const schema = blocksConfig[data['@type']].blockSchema({
+    data,
+    intl,
+  });
   const dataAdapter = blocksConfig[data['@type']].dataAdapter;
 
   return (
@@ -65,8 +165,10 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      actionButton={data.overwrite && ActionButton}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -22,6 +22,7 @@ const TeaserDefaultTemplate = (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 { openExternalLinkInNewTab } = config.settings;
@@ -50,16 +51,22 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {(href.hasPreviewImage || href.image_field || image) && (
+              {url && !image?.image_field ? (
                 <div className="image-wrapper">
-                  <Image
-                    item={image || href}
-                    imageField={image ? image.image_field : href.image_field}
-                    alt=""
-                    loading="lazy"
-                    responsive={true}
-                  />
+                  <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">
                 {data?.head_title && (