@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

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;

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

@@ -3,8 +3,8 @@
  * @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';
@@ -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

@@ -31,8 +31,15 @@ const messages = defineMessages({
 });
 
 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();
 
@@ -161,6 +168,7 @@ const TeaserData = (props) => {
       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 && (

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import { SidebarPortal } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
@@ -6,34 +6,42 @@ import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableOfContentsSchema from './Schema';
 import View from './View';
 
-class Edit extends Component {
-  render() {
-    const schema = TableOfContentsSchema(this.props);
+const Edit = (props) => {
+  const {
+    onChangeBlock,
+    data,
+    block,
+    selected,
+    navRoot,
+    contentType,
+    blocksErrors,
+  } = props;
+  const schema = TableOfContentsSchema(props);
 
-    return (
-      <>
-        <View {...this.props} mode="edit" />
+  return (
+    <>
+      <View {...props} mode="edit" />
 
-        <SidebarPortal selected={this.props.selected}>
-          <BlockDataForm
-            schema={schema}
-            title={schema.title}
-            onChangeField={(id, value) => {
-              this.props.onChangeBlock(this.props.block, {
-                ...this.props.data,
-                [id]: value,
-              });
-            }}
-            onChangeBlock={this.props.onChangeBlock}
-            formData={this.props.data}
-            block={this.props.block}
-            navRoot={this.props.navRoot}
-            contentType={this.props.contentType}
-          />
-        </SidebarPortal>
-      </>
-    );
-  }
-}
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
 
 export default Edit;