Merge pull request #648 from rvsia/pf4StepTemplate

feat(pf4): introduce StepTemplate

Author: Hyperkid123

packages/pf4-component-mapper/demo/index.js

@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {schema: selectSchema, additionalOptions: {}} 
+        this.state = {schema: wizardSchema, additionalOptions: {}} 
     }
 
     render() {

packages/pf4-component-mapper/src/files/wizard.d.ts

@@ -52,6 +52,15 @@ export interface SubstepOfObject {
   title?: ReactNode;
 }
 
+export interface StepTemplateProps {
+  title?: ReactNode;
+  formFields: ReactNode;
+  showTitles?: boolean;
+  showTitle?: boolean;
+  customTitle?: ReactNode;
+  fields: Field[];
+}
+
 export interface WizardField {
   name: string | number;
   fields: Field[];
@@ -62,6 +71,8 @@ export interface WizardField {
   customTitle?: ReactNode;
   disableForwardJumping?: boolean;
   buttons?: ReactNode | React.ComponentType<WizardButtonsProps>;
+  StepTemplate?: React.ComponentType<StepTemplateProps>;
+  hasNoBodyPadding?: boolean;
 }
 
 export interface WizardProps {
@@ -80,6 +91,7 @@ export interface WizardProps {
   closeButtonAriaLabel?: string;
   hasNoBodyPadding?: boolean;
   navAriaLabel?: string;
+  StepTemplate?: React.ComponentType<StepTemplateProps>;
 }
 
 declare const Wizard: React.ComponentType<WizardProps>;

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

@@ -38,6 +38,7 @@ const WizardInternal = ({
   closeButtonAriaLabel,
   hasNoBodyPadding,
   navAriaLabel,
+  StepTemplate,
   ...rest
 }) => {
   const {
@@ -122,15 +123,16 @@ const WizardInternal = ({
               </FormSpy>
             </WizardNav>
             <WizardStep
-              {...currentStep}
-              formOptions={formOptions}
               buttonLabels={buttonLabels}
               buttonsClassName={buttonsClassName}
               showTitles={showTitles}
+              hasNoBodyPadding={hasNoBodyPadding}
+              StepTemplate={StepTemplate}
+              {...currentStep}
+              formOptions={formOptions}
               handleNext={(nextStep) => handleNext(nextStep)}
               handlePrev={handlePrev}
               disableBack={activeStepIndex === 0}
-              hasNoBodyPadding={hasNoBodyPadding}
             />
           </div>
         </div>
@@ -157,7 +159,8 @@ WizardInternal.propTypes = {
   closeButtonAriaLabel: PropTypes.string,
   hasNoBodyPadding: PropTypes.bool,
   navAriaLabel: PropTypes.string,
-  container: PropTypes.instanceOf(Element)
+  container: PropTypes.instanceOf(Element),
+  StepTemplate: PropTypes.elementType
 };
 
 const defaultLabels = {

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

@@ -17,24 +17,65 @@ RenderTitle.propTypes = {
   customTitle: PropTypes.node
 };
 
-const WizardStep = ({ name, title, description, fields, formOptions, showTitles, showTitle, customTitle, hasNoBodyPadding, ...rest }) => {
+const DefaultStepTemplate = ({ formFields, formRef, title, customTitle, showTitle, showTitles }) => (
+  <div ref={formRef} className="pf-c-form">
+    {((showTitles && showTitle !== false) || showTitle) && <RenderTitle title={title} customTitle={customTitle} />}
+    {formFields}
+  </div>
+);
+
+DefaultStepTemplate.propTypes = {
+  title: PropTypes.node,
+  formFields: PropTypes.array.isRequired,
+  formOptions: PropTypes.shape({
+    renderForm: PropTypes.func.isRequired
+  }).isRequired,
+  showTitles: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  customTitle: PropTypes.node,
+  formRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })])
+};
+
+const WizardStep = ({
+  name,
+  title,
+  description,
+  fields,
+  formOptions,
+  showTitles,
+  showTitle,
+  customTitle,
+  hasNoBodyPadding,
+  StepTemplate,
+  ...rest
+}) => {
   const formRef = useRef();
 
   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' });
+    stepBody && stepBody.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   }, [name]);
 
   return (
     <Fragment>
       <WizardBody hasNoBodyPadding={hasNoBodyPadding}>
-        <div ref={formRef} className="pf-c-form">
-          {((showTitles && showTitle !== false) || showTitle) && <RenderTitle title={title} customTitle={customTitle} />}
-          {fields.map((item) => formOptions.renderForm([item], formOptions))}
-        </div>
+        <StepTemplate
+          formFields={fields.map((item) => formOptions.renderForm([item], formOptions))}
+          name={name}
+          title={title}
+          description={description}
+          formOptions={formOptions}
+          showTitles={showTitles}
+          showTitle={showTitle}
+          customTitle={customTitle}
+          hasNoBodyPadding={hasNoBodyPadding}
+          formRef={formRef}
+          fields={fields}
+          {...rest}
+        />
       </WizardBody>
       <WizardStepButtons formOptions={formOptions} {...rest} />
     </Fragment>
@@ -52,7 +93,12 @@ WizardStep.propTypes = {
   showTitle: PropTypes.bool,
   customTitle: PropTypes.node,
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  hasNoBodyPadding: PropTypes.bool
+  hasNoBodyPadding: PropTypes.bool,
+  StepTemplate: PropTypes.elementType
+};
+
+WizardStep.defaultProps = {
+  StepTemplate: DefaultStepTemplate
 };
 
 export default WizardStep;