fix(blueprint): add missing wizard component

Author: rvsia

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

@@ -19,8 +19,10 @@ import demoSchema from '@data-driven-forms/common/src/demoschema';
 const Summary = (props) => <div>Custom summary component.</div>;
 
 const fieldArrayState = {
-  schema: demoSchema,
+  schema: wizardSchema,
   additionalOptions: {
+    wizard: true,
+    showFormControls: false,
     initialValues: {
       number: [1, 2, 3, 4],
       minMax: [null, null, null, null]

packages/blueprint-component-mapper/package.json

@@ -72,5 +72,7 @@
     "@blueprintjs/datetime": "^3.17.0",
     "@blueprintjs/select": "^3.12.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "clsx": "^1.1.0"
+  }
 }

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

@@ -1,5 +1,45 @@
-const Wizard = (props) => {
-  return 'wizard';
+import React from 'react';
+import PropTypes from 'prop-types';
+import WizardCommon from '@data-driven-forms/common/src/wizard/wizard';
+import { FormSpy } from '@data-driven-forms/react-form-renderer';
+
+import StepButtons from './wizard/step-buttons';
+
+const WizardInternal = ({ currentStep, formOptions, onKeyDown, WizardProps, ...props }) => (
+  <div onKeyDown={onKeyDown} {...WizardProps}>
+    {currentStep.fields.map((item) => formOptions.renderForm([item], formOptions))}
+    <FormSpy subscription={{ valid: true, submitting: true, validating: true }}>
+      {({ valid, submitting, validating }) => (
+        <StepButtons isNextDisabled={!valid || submitting || validating} {...props} currentStep={currentStep} formOptions={formOptions} />
+      )}
+    </FormSpy>
+  </div>
+);
+
+WizardInternal.propTypes = {
+  currentStep: PropTypes.object,
+  onKeyDown: PropTypes.func,
+  formOptions: PropTypes.shape({
+    onCancel: PropTypes.func,
+    renderForm: PropTypes.func,
+    getState: PropTypes.func
+  }),
+  WizardProps: PropTypes.object
+};
+
+const defaultLabels = {
+  submit: 'Submit',
+  cancel: 'Cancel',
+  back: 'Back',
+  next: 'Next'
+};
+
+const Wizard = ({ buttonLabels, ...props }) => (
+  <WizardCommon Wizard={WizardInternal} {...props} buttonLabels={{ ...defaultLabels, ...buttonLabels }} />
+);
+
+Wizard.propTypes = {
+  buttonLabels: PropTypes.object
 };
 
 export default Wizard;

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import selectNext from '@data-driven-forms/common/src/wizard/select-next';
+import clsx from 'clsx';
+
+import { Button, Intent } from '@blueprintjs/core';
+
+import './step-buttons.scss';
+
+const NextButton = ({ nextStep, handleNext, buttonLabels, getState, handleSubmit, isDisabled, ...props }) => (
+  <Button
+    disabled={isDisabled}
+    onClick={() => (nextStep ? handleNext(selectNext(nextStep, getState)) : handleSubmit())}
+    rightIcon={nextStep ? 'arrow-right' : 'arrow-up'}
+    intent={Intent.SUCCESS}
+    {...props}
+  >
+    {nextStep ? buttonLabels.next : buttonLabels.submit}
+  </Button>
+);
+
+NextButton.propTypes = {
+  handleNext: PropTypes.func,
+  formOptions: PropTypes.shape({
+    onCancel: PropTypes.func,
+    renderForm: PropTypes.func,
+    getState: PropTypes.func
+  }),
+  buttonLabels: PropTypes.object,
+  nextStep: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  getState: PropTypes.func,
+  handleSubmit: PropTypes.func,
+  isDisabled: PropTypes.bool
+};
+
+const StepButtons = ({
+  handleNext,
+  currentStep,
+  formOptions,
+  activeStepIndex,
+  buttonLabels,
+  handlePrev,
+  isNextDisabled,
+  ButtonToolbarProps,
+  DirectionButtonProps,
+  CancelButtonProps,
+  BackButtonProps,
+  NextButtonProps,
+  SubmitButtonProps
+}) => (
+  <div {...ButtonToolbarProps} className={clsx('ddorg__blueprint_mapper--wizard-button-group', ButtonToolbarProps && ButtonToolbarProps.className)}>
+    <Button onClick={formOptions.onCancel} minimal {...CancelButtonProps}>
+      {buttonLabels.cancel}
+    </Button>
+    <div {...DirectionButtonProps}>
+      <Button onClick={handlePrev} disabled={activeStepIndex === 0} {...BackButtonProps}>
+        {buttonLabels.back}
+      </Button>
+      <NextButton
+        getState={formOptions.getState}
+        nextStep={currentStep.nextStep}
+        buttonLabels={buttonLabels}
+        handleNext={handleNext}
+        isDisabled={!formOptions.valid || isNextDisabled}
+        handleSubmit={formOptions.handleSubmit}
+        {...(currentStep.nextStep ? NextButtonProps : SubmitButtonProps)}
+      />
+    </div>
+  </div>
+);
+
+StepButtons.propTypes = {
+  currentStep: PropTypes.object,
+  handlePrev: PropTypes.func,
+  handleNext: PropTypes.func,
+  formOptions: PropTypes.shape({
+    onCancel: PropTypes.func,
+    renderForm: PropTypes.func,
+    getState: PropTypes.func,
+    handleSubmit: PropTypes.func,
+    valid: PropTypes.bool
+  }),
+  activeStepIndex: PropTypes.number,
+  buttonLabels: PropTypes.object,
+  isNextDisabled: PropTypes.bool,
+  ButtonToolbarProps: PropTypes.object,
+  DirectionButtonProps: PropTypes.object,
+  CancelButtonProps: PropTypes.object,
+  BackButtonProps: PropTypes.object,
+  NextButtonProps: PropTypes.object,
+  SubmitButtonProps: PropTypes.object
+};
+
+export default StepButtons;

packages/blueprint-component-mapper/src/files/wizard/step-buttons.scss

@@ -0,0 +1,9 @@
+.ddorg__blueprint_mapper--wizard-button-group {
+    margin-top: 16px;
+    display: flex;
+    justify-content: space-between;
+
+    button:not(:first-child) {
+        margin-left: 8px;
+    }
+}