Refactor FormFieldWrapper to Functional Component

packages/volto-slate/src/editor/less/editor.less

@@ -28,7 +28,7 @@
 
     .link-form-container {
       margin-left: 2px;
-      display: flex; 
+      display: flex;
       align-items: center;
     }
   }

packages/volto/news/6190.feature

@@ -0,0 +1 @@
+Refactor the `FormFieldWrapper` component from a class component to a functional component. @abhay-dev2901

packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
+import { Form, Grid, Icon, Label } from 'semantic-ui-react';
 import { map } from 'lodash';
 import cx from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   edit: {
@@ -23,166 +23,158 @@ const messages = defineMessages({
     defaultMessage: 'Language independent field.',
   },
 });
+
 /**
- * FormFieldWrapper component class.
- * @class FormFieldWrapper
- * @extends Component
+ * FormFieldWrapper functional component.
+ * @param {Object} props Component properties.
+ * @returns {React.Element} Rendered component.
  */
-class FormFieldWrapper extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    required: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    wrapped: PropTypes.bool,
-    columns: PropTypes.number,
-    draggable: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    onEdit: PropTypes.func,
-    className: PropTypes.string,
-    onDelete: PropTypes.func,
-    intl: PropTypes.object,
-  };
+const FormFieldWrapper = (props) => {
+  const {
+    id,
+    title,
+    description,
+    fieldSet,
+    required,
+    error,
+    wrapped,
+    columns,
+    draggable,
+    onEdit,
+    className,
+    isDisabled,
+    onDelete,
+    noForInFieldLabel,
+    multilingual_options,
+    children,
+  } = props;
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    wrapped: true,
-    columns: 2,
-    onDelete: null,
-    intl: null,
-    isDisabled: null,
-    draggable: null,
-  };
+  const intl = useIntl();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      title,
-      description,
-      fieldSet,
-      required,
-      error,
-      wrapped,
-      columns,
-      draggable,
-      onEdit,
-      className,
-      isDisabled,
-      onDelete,
-      intl,
-      noForInFieldLabel,
-      multilingual_options,
-    } = this.props;
-    const wdg = (
-      <>
-        {this.props.children}
+  const wdg = (
+    <>
+      {children}
 
-        {map(error, (message) => (
-          <Label key={message} basic color="red" className="form-error-label">
-            {message}
-          </Label>
-        ))}
-      </>
-    );
+      {map(error, (message) => (
+        <Label key={message} basic color="red" className="form-error-label">
+          {message}
+        </Label>
+      ))}
+    </>
+  );
 
-    return wrapped ? (
-      <Form.Field
-        inline
-        required={required}
-        error={error && error.length > 0}
-        className={cx(
-          description ? 'help' : '',
-          className,
-          `field-wrapper-${id}`,
-          multilingual_options?.language_independent
-            ? 'language-independent-field'
-            : null,
-        )}
-      >
-        <Grid>
-          <Grid.Row stretched>
-            {columns === 2 && (
-              <Grid.Column width="4">
-                <div className="wrapper">
-                  <label
-                    id={`fieldset-${fieldSet}-field-label-${id}`}
-                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                  >
-                    {draggable && onEdit && (
-                      <i
-                        aria-hidden="true"
-                        className="grey bars icon drag handle"
-                      />
-                    )}
-                    {title}
-                  </label>
-                </div>
-              </Grid.Column>
+  return wrapped ? (
+    <Form.Field
+      inline
+      required={required}
+      error={!!error.length}
+      className={cx(
+        description ? 'help' : '',
+        className,
+        `field-wrapper-${id}`,
+        multilingual_options?.language_independent &&
+          'language-independent-field',
+      )}
+    >
+      <Grid>
+        <Grid.Row stretched>
+          {columns === 2 && (
+            <Grid.Column width="4">
+              <div className="wrapper">
+                <label
+                  id={`fieldset-${fieldSet}-field-label-${id}`}
+                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                >
+                  {draggable && onEdit && (
+                    <i
+                      aria-hidden="true"
+                      className="grey bars icon drag handle"
+                    />
+                  )}
+                  {title}
+                </label>
+              </div>
+            </Grid.Column>
+          )}
+          <Grid.Column width={columns === 2 ? 8 : 12}>
+            {onEdit && !isDisabled && (
+              <div className="toolbar" style={{ zIndex: 2 }}>
+                <button
+                  aria-label={intl.formatMessage(messages.edit)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onEdit(id);
+                  }}
+                >
+                  <Icon name="write square" size="large" color="blue" />
+                </button>
+                <button
+                  aria-label={intl.formatMessage(messages.delete)}
+                  className="item ui noborder button"
+                  onClick={(evt) => {
+                    evt.preventDefault();
+                    onDelete(id);
+                  }}
+                >
+                  <Icon name="close" size="large" color="red" />
+                </button>
+              </div>
             )}
-            <Grid.Column width={columns === 2 ? 8 : 12}>
-              {onEdit && !isDisabled && (
-                <div className="toolbar" style={{ zIndex: '2' }}>
-                  <button
-                    aria-label={intl.formatMessage(messages.edit)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onEdit(id);
-                    }}
-                  >
-                    <IconOld name="write square" size="large" color="blue" />
-                  </button>
-                  <button
-                    aria-label={intl.formatMessage(messages.delete)}
-                    className="item ui noborder button"
-                    onClick={(evt) => {
-                      evt.preventDefault();
-                      onDelete(id);
-                    }}
-                  >
-                    <IconOld name="close" size="large" color="red" />
-                  </button>
-                </div>
-              )}
-              {wdg}
+            {wdg}
+          </Grid.Column>
+        </Grid.Row>
+        {description && (
+          <Grid.Row stretched>
+            <Grid.Column stretched width="12">
+              <p className="help">
+                {multilingual_options &&
+                  `${intl.formatMessage(messages.language_independent)} `}
+                {description}
+              </p>
             </Grid.Column>
           </Grid.Row>
-          {description && (
-            <Grid.Row stretched>
-              <Grid.Column stretched width="12">
-                <p className="help">
-                  {this.props.multilingual_options
-                    ? `${intl.formatMessage(messages.language_independent)} `
-                    : null}
-                  {description}
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          )}
-        </Grid>
-      </Form.Field>
-    ) : (
-      <>{wdg}</>
-    );
-  }
-}
+        )}
+      </Grid>
+    </Form.Field>
+  ) : (
+    <>{wdg}</>
+  );
+};
+
+FormFieldWrapper.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  fieldSet: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  wrapped: PropTypes.bool,
+  columns: PropTypes.number,
+  draggable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func,
+  className: PropTypes.string,
+  onDelete: PropTypes.func,
+  noForInFieldLabel: PropTypes.bool,
+  multilingual_options: PropTypes.object,
+  children: PropTypes.node,
+};
+
+FormFieldWrapper.defaultProps = {
+  description: null,
+  fieldSet: '',
+  required: false,
+  error: [],
+  wrapped: true,
+  columns: 2,
+  draggable: null,
+  isDisabled: null,
+  noForInFieldLabel: false,
+  multilingual_options: null,
+  children: null,
+  onEdit: null,
+  onDelete: null,
+};
 
-export default injectIntl(FormFieldWrapper);
+export default FormFieldWrapper;

packages/volto/src/components/manage/Widgets/__snapshots__/DatetimeWidget.test.jsx.snap

@@ -19,7 +19,7 @@ exports[`datetime widget converts UTC date and adapt to local datetime 1`] = `
           >
             <label
               for="field-my-field"
-              id="fieldset-undefined-field-label-my-field"
+              id="fieldset--field-label-my-field"
             >
               My field
             </label>