Refactored SelectMetadataField.jsx to functional component

packages/volto/news/5570.internal

@@ -0,0 +1 @@
+Refactored the `SelectWidget` component to a functional component. @lorstenoplo

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