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

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

@@ -1,15 +1,8 @@
-/**
- * Edit image block.
- * @module components/manage/Blocks/Image/Edit
- */
-
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
 
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
 import config from '@plone/volto/registry';
@@ -23,124 +16,79 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Align block handler
-   * @method onAlignBlock
-   * @param {string} align Alignment option
-   * @returns {undefined}
-   */
-  onAlignBlock(align) {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      align,
-    });
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  node = React.createRef();
+const Edit = (props) => {
+  const intl = useIntl();
+  const { data, properties, selected } = props;
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data, properties } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+  const placeholder = () =>
+    data.placeholder || intl.formatMessage(messages.ImageBlockInputPlaceholder);
 
-    const hasImage = !!properties.image;
-    const hasImageData = hasImage && !!properties.image.data;
-    const className = cx('responsive', { 'full-image': data.align === 'full' });
-    const altText = data.image_caption || properties.image_caption || '';
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const hasImage = !!properties.image;
+  const hasImageData = hasImage && !!properties.image.data;
+  const className = cx('responsive', { 'full-image': data.align === 'full' });
+  const altText = data.image_caption || properties.image_caption || '';
 
-    return (
-      <div
-        className={cx(
-          'block image align',
-          {
-            center: !Boolean(data.align),
-          },
-          data.align,
-        )}
-      >
-        {!hasImage && (
-          <Message>
-            <center>
-              <img src={imageBlockSVG} alt="" />
-              <div className="message-text">{placeholder}</div>
-            </center>
-          </Message>
-        )}
-        {hasImage && hasImageData && (
-          <img
-            className={className}
-            src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
-            width={properties.image.width}
-            height={properties.image.height}
-            alt={altText}
-            style={{
-              aspectRatio: `${properties.image.width}/${properties.image.height}`,
-            }}
-          />
-        )}
-        {hasImage && !hasImageData && (
-          <Image
-            className={className}
-            item={properties}
-            imageField="image"
-            sizes={(() => {
-              if (data.align === 'full' || data.align === 'center')
-                return '100vw';
-              if (data.align === 'left' || data.align === 'right')
-                return '50vw';
-              return undefined;
-            })()}
-            alt={altText}
-          />
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <LeadImageSidebar {...this.props} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+  return (
+    <div
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {!hasImage && (
+        <Message>
+          <center>
+            <img src={imageBlockSVG} alt="" />
+            <div className="message-text">{placeholder}</div>
+          </center>
+        </Message>
+      )}
+      {hasImage && hasImageData && (
+        <img
+          className={className}
+          src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+          width={properties.image.width}
+          height={properties.image.height}
+          alt={altText}
+          style={{
+            aspectRatio: `${properties.image.width}/${properties.image.height}`,
+          }}
+        />
+      )}
+      {hasImage && !hasImageData && (
+        <Image
+          className={className}
+          item={properties}
+          imageField="image"
+          sizes={(() => {
+            return data.align === 'full' || data.align === 'center'
+              ? '100vw'
+              : data.align === 'left' || data.align === 'right'
+                ? '50vw'
+                : undefined;
+          })()}
+          alt={altText}
+        />
+      )}
+      <SidebarPortal selected={selected}>
+        <LeadImageSidebar {...props} />
+      </SidebarPortal>
+    </div>
+  );
+};
 
-export default compose(injectIntl)(Edit);
+export default Edit;
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  pathname: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  openObjectBrowser: PropTypes.func.isRequired,
+};

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/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,