Merge pull request #1376 from data-driven-forms/pf4-modal-props

Add ModalProps to pf4 wizard.

Author: Hyperkid123

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

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { Field, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ModalProps } from "@patternfly/react-core";
 
 export interface WizardButtonLabels {
   submit?: ReactNode;
@@ -92,6 +93,7 @@ export interface WizardProps {
   hasNoBodyPadding?: boolean;
   navAriaLabel?: string;
   StepTemplate?: React.ComponentType<StepTemplateProps>;
+  ModalProps?: ModalProps
 }
 
 declare const Wizard: React.ComponentType<WizardProps>;

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

@@ -44,6 +44,7 @@ const WizardInternal = ({
   StepTemplate,
   className,
   conditionalSubmitFlag,
+  ModalProps = {},
   ...rest
 }) => {
   const {
@@ -71,7 +72,10 @@ const WizardInternal = ({
   }, [inModal]);
 
   useEffect(() => {
-    if (state.container) {
+    if (ModalProps.appendTo) {
+      // override with default append to
+      dispatch({ type: 'finishLoading' });
+    } else if (state.container) {
       document.body.appendChild(state.container);
       dispatch({ type: 'finishLoading' });
     }
@@ -88,7 +92,7 @@ const WizardInternal = ({
   }
 
   return (
-    <Modal inModal={inModal} container={state.container} aria-labelledby={rest.name}>
+    <Modal inModal={inModal} container={state.container} aria-labelledby={rest.name} {...ModalProps}>
       <div
         tabIndex={inModal ? 0 : null}
         className={`pf-c-wizard ${inModal ? '' : 'no-shadow'} ddorg__pf4-component-mapper__wizard ${className ? className : ''}`}
@@ -179,6 +183,7 @@ WizardInternal.propTypes = {
   StepTemplate: PropTypes.elementType,
   className: PropTypes.string,
   conditionalSubmitFlag: PropTypes.string,
+  ModalProps: PropTypes.object,
 };
 
 const defaultLabels = {

packages/react-renderer-demo/src/doc-components/examples-texts/pf4/wizard.md

@@ -17,6 +17,7 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
 |showTitles|bool|undefined|If true, step titles will be shown in the wizard body|
 |crossroads|array|undefined|Array of field names, which change next steps|
 |StepTemplate|componenr|DefaultStepTemplate|Custom component for rendering wizard body content.|
+|ModalProps|PF4 Modal props object. Used to customize the Modal element if `inModal` is true|
 
 Also accepts these props from the original component: `titleId`, `descriptionId`, `hideClose`, `hasNoBodyPadding`, `navAriaLabel` and `closeButtonAriaLabel`.