Merge pull request #631 from rvsia/updateWizard

fix(ant): update wizard to latest changes

Author: rvsia

config/jest.setup.js

@@ -3,3 +3,17 @@ import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
 Element.prototype.scrollTo = () => {};
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});

packages/ant-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -83,7 +83,6 @@ const wizardSchema = {
           label: 'Hello this is a test and this shall be a text'
         },
         {
-          nextStep: 'holaname',
           fields: [
             {
               name: 'summary',

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

@@ -20,7 +20,7 @@ const App = () => (
       componentMapper={componentMapper}
       FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
-      schema={demoSchema}
+      schema={wizardSchema}
     />
   </div>
 );

packages/ant-component-mapper/src/common/form-wrapper.js

@@ -18,7 +18,7 @@ AntForm.propTypes = {
   help: PropTypes.string,
   isRequired: PropTypes.bool,
   component: PropTypes.string,
-  invalid: PropTypes.oneOfType(PropTypes.string, PropTypes.bool)
+  invalid: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 
 export default AntForm;

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import WizardStep from './wizard/wizard-step';
 import PropTypes from 'prop-types';
 import { Steps, Modal } from 'antd';
-import Wizard, { wizardProps } from '@data-driven-forms/common/src/wizard/wizard';
+import Wizard from '@data-driven-forms/common/src/wizard/wizard';
+import { WizardContext } from '@data-driven-forms/react-form-renderer';
 
 const defaultButtonLabels = {
   cancel: 'Cancel',
@@ -13,27 +14,17 @@ const defaultButtonLabels = {
 
 const { Step } = Steps;
 
-const WizardInternal = ({
-  title,
-  buttonLabels,
-  stepsInfo,
-  inModal,
-  onKeyDown,
-  formOptions,
-  handleNext,
-  handlePrev,
-  prevSteps,
-  currentStep,
-  jumpToStep,
-  activeStepIndex
-}) => {
+const WizardInternal = ({ title, buttonLabels, stepsInfo }) => {
+  const { onKeyDown, formOptions, handleNext, handlePrev, prevSteps, currentStep, jumpToStep, activeStepIndex } = useContext(WizardContext);
+
   const renderSteps = () =>
     stepsInfo.map((step, stepIndex) => <Step title={step.title} disabled={activeStepIndex < stepIndex} step={stepIndex} key={stepIndex} />);
 
   const fullButtonLabels = {
     ...defaultButtonLabels,
     ...buttonLabels
   };
+
   return (
     <div onKeyDown={onKeyDown}>
       {title && <Modal title={title} onCancel={formOptions.onCanel}></Modal>}
@@ -57,19 +48,9 @@ const WizardInternal = ({
 WizardInternal.propTypes = {
   title: PropTypes.string,
   buttonLabels: PropTypes.object,
-  stepsInfo: PropTypes.array,
-  inModal: PropTypes.bool,
-  ...wizardProps
+  stepsInfo: PropTypes.array
 };
 
-WizardInternal.defaultProps = {
-  title: undefined,
-  stepsInfo: undefined,
-  inModal: false
-};
-
-const WizardFinal = (props) => {
-  return <Wizard Wizard={WizardInternal} {...props} />;
-};
+const WizardFinal = (props) => <Wizard Wizard={WizardInternal} {...props} />;
 
 export default WizardFinal;

packages/ant-component-mapper/src/files/wizard/step-buttons.js

@@ -1,59 +1,35 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'antd';
+import selectNext from '@data-driven-forms/common/src/wizard/select-next';
 
-import { useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
-
-const SimpleNext = ({ next, handleNext, submit, buttonLabels, disabled }) => {
-  const { valid } = useFormApi();
-
+const NextButton = ({ nextStep, handleNext, handleSubmit, buttonLabels, getState, valid }) => {
   return (
-    <Button type="primary" htmlType="button" onClick={() => (valid ? handleNext(next) : submit())} disabled={disabled}>
-      {buttonLabels.next}
+    <Button
+      type="primary"
+      htmlType="button"
+      onClick={() => (nextStep ? handleNext(selectNext(nextStep, getState)) : handleSubmit())}
+      disabled={!valid}
+    >
+      {nextStep ? buttonLabels.next : buttonLabels.submit}
     </Button>
   );
 };
 
-SimpleNext.propTypes = {
-  next: PropTypes.string,
+NextButton.propTypes = {
+  nextStep: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  handleSubmit: PropTypes.func.isRequired,
+  valid: PropTypes.bool,
   handleNext: PropTypes.func.isRequired,
-  submit: PropTypes.func.isRequired,
-  buttonLabels: PropTypes.object.isRequired,
-  disabled: PropTypes.bool
-};
-
-const ConditionalNext = ({ nextStep, ...rest }) => {
-  const {
-    input: { value }
-  } = useFieldApi({ name: nextStep.when, subscription: { value: true } });
-
-  const next = nextStep.stepMapper[value];
-
-  return <SimpleNext next={next} {...rest} disabled={!next} />;
-};
-
-ConditionalNext.propTypes = {
-  nextStep: PropTypes.shape({
-    when: PropTypes.string.isRequired,
-    stepMapper: PropTypes.object.isRequired
+  getState: PropTypes.func.isRequired,
+  buttonLabels: PropTypes.shape({
+    submit: PropTypes.node.isRequired,
+    cancel: PropTypes.node.isRequired,
+    back: PropTypes.node.isRequired,
+    next: PropTypes.node.isRequired
   }).isRequired
 };
 
-const submitButton = (handleSubmit, submitText) => (
-  <Button htmlType="button" type="primary" onClick={handleSubmit}>
-    {submitText}
-  </Button>
-);
-
-const renderNextButton = ({ nextStep, handleSubmit, buttonLabels, ...rest }) =>
-  !nextStep ? (
-    submitButton(handleSubmit, buttonLabels.submit)
-  ) : typeof nextStep === 'object' ? (
-    <ConditionalNext nextStep={nextStep} buttonLabels={buttonLabels} {...rest} />
-  ) : (
-    <SimpleNext next={nextStep} buttonLabels={buttonLabels} {...rest} />
-  );
-
 const WizardStepButtons = ({ disableBack, handlePrev, nextStep, formOptions, handleNext, buttonLabels }) => (
   <Fragment>
     {formOptions.onCancel && (
@@ -64,12 +40,7 @@ const WizardStepButtons = ({ disableBack, handlePrev, nextStep, formOptions, han
     <Button htmlType="button" disabled={disableBack} onClick={handlePrev}>
       {buttonLabels.back}
     </Button>
-    {renderNextButton({
-      ...formOptions,
-      handleNext,
-      nextStep,
-      buttonLabels
-    })}
+    <NextButton {...formOptions} handleNext={handleNext} nextStep={nextStep} buttonLabels={buttonLabels} />
   </Fragment>
 );
 

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

@@ -2,10 +2,11 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import WizardStepButtons from './step-buttons';
 
+import './wizard-step.scss';
+
 const WizardStep = ({ fields, formOptions, ...rest }) => (
   <Fragment>
-    <div className="style">{fields.map((item) => formOptions.renderForm([item], formOptions))}</div>
-    {/* maybe this button could be in a sperate footer such that the position remains constant  */}
+    <div className="ddorg__ant-component-mapper_wizard-step">{fields.map((item) => formOptions.renderForm([item], formOptions))}</div>
     <WizardStepButtons formOptions={formOptions} {...rest} />
   </Fragment>
 );

packages/ant-component-mapper/src/files/wizard/wizard-step.scss

@@ -1,3 +1,4 @@
-.style {
+.ddorg__ant-component-mapper_wizard-step {
+  margin-top: 32px;
   min-height: 250px;
 }