fix(pf4): convert wizardstep to function

Author: rvsia

packages/pf4-component-mapper/src/files/wizard/wizard-step.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef } from 'react';
 import { Title, WizardBody } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import WizardStepButtons from './step-buttons';
@@ -17,40 +17,29 @@ RenderTitle.propTypes = {
   customTitle: PropTypes.node
 };
 
-class WizardStep extends React.Component {
-  formRef = React.createRef();
-  componentDidUpdate(prevProps) {
-    // we want to scroll to top of the new step so
-    // the user experience won't suck. For instance,
-    // when the first step contains many fields that you have to scroll down
-    // to fill all the data for the next step. If the next step contains instructions
-    // at the top, the user will miss them because the scrollbar offset will stay at
-    // the same place it was.
-    if (prevProps.name !== this.props.name) {
-      // HACK: I can not pass ref to WizardBody because it is not
-      // wrapped by forwardRef. However, the step body (the one that overflows)
-      // is the grand parent of the form element.
-      const stepBody = this.formRef.current && this.formRef.current.parentNode.parentNode;
-      stepBody.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-    }
-  }
+const WizardStep = ({ name, title, description, fields, formOptions, showTitles, showTitle, customTitle, ...rest }) => {
+  const formRef = useRef();
 
-  render() {
-    const { title, description, fields, formOptions, showTitles, showTitle, customTitle, ...rest } = this.props;
+  useEffect(() => {
+    // HACK: I can not pass ref to WizardBody because it is not
+    // wrapped by forwardRef. However, the step body (the one that overflows)
+    // is the grand parent of the form element.
+    const stepBody = formRef.current && formRef.current.parentNode.parentNode;
+    stepBody.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  }, [name]);
 
-    return (
-      <Fragment>
-        <WizardBody hasBodyPadding={true}>
-          <div ref={this.formRef} className="pf-c-form">
-            {((showTitles && showTitle !== false) || showTitle) && <RenderTitle title={title} customTitle={customTitle} />}
-            {fields.map((item) => formOptions.renderForm([item], formOptions))}
-          </div>
-        </WizardBody>
-        <WizardStepButtons formOptions={formOptions} {...rest} />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <WizardBody hasBodyPadding={true}>
+        <div ref={formRef} className="pf-c-form">
+          {((showTitles && showTitle !== false) || showTitle) && <RenderTitle title={title} customTitle={customTitle} />}
+          {fields.map((item) => formOptions.renderForm([item], formOptions))}
+        </div>
+      </WizardBody>
+      <WizardStepButtons formOptions={formOptions} {...rest} />
+    </Fragment>
+  );
+};
 
 WizardStep.propTypes = {
   title: PropTypes.node,

packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap

@@ -928,7 +928,6 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
                                     }
                                     handleNext={[Function]}
                                     handlePrev={[Function]}
-                                    name="1"
                                     nextStep="2"
                                   >
                                     <footer
@@ -2329,7 +2328,6 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                                               }
                                               handleNext={[Function]}
                                               handlePrev={[Function]}
-                                              name="1"
                                               nextStep="2"
                                             >
                                               <footer