Merge pull request #1045 from rvsia/addExampleForCustomWizard

Add example for custom wizard

Author: Hyperkid123

packages/react-renderer-demo/src/components/navigation/schemas/custom-examples.schema.js

@@ -14,6 +14,10 @@ const customExamplesSchema = [
   {
     component: 'resolve-props-db',
     linkText: 'ResolveProps stored in DB'
+  },
+  {
+    component: 'custom-wizard',
+    linkText: 'Custom wizard'
   }
 ];
 

packages/react-renderer-demo/src/examples/components/examples/custom-wizard.js

@@ -0,0 +1,117 @@
+import React, { useContext, useState } from 'react';
+
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
+import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
+
+import Wizard from '@data-driven-forms/common/wizard';
+import selectNext from '@data-driven-forms/common/wizard/select-next';
+
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import Select from '@data-driven-forms/mui-component-mapper/select';
+import TextField from '@data-driven-forms/mui-component-mapper/text-field';
+
+const schema = {
+  fields: [
+    {
+      component: 'wizard',
+      name: 'custom-wizard',
+      fields: [
+        {
+          name: 'first-step',
+          title: 'Select step',
+          nextStep: ({ values }) => values['selected-step'],
+          fields: [
+            {
+              component: 'select',
+              name: 'selected-step',
+              label: 'Select next step',
+              isRequired: true,
+              validate: [{ type: 'required' }],
+              options: [
+                { label: 'Step a', value: 'step-a' },
+                { label: 'Step b', value: 'step-b' }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'step-a',
+          title: 'Step A',
+          fields: [
+            {
+              component: 'text-field',
+              name: 'a-value',
+              isRequired: true,
+              validate: [{ type: 'required' }],
+              label: 'A value'
+            }
+          ]
+        },
+        {
+          name: 'step-b',
+          title: 'Step B',
+          fields: [
+            {
+              component: 'text-field',
+              name: 'b-value',
+              isRequired: true,
+              validate: [{ type: 'required' }],
+              label: 'B value'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+const WizardInternal = (props) => {
+  const { formOptions, currentStep, handlePrev, onKeyDown, handleNext, activeStepIndex } = useContext(WizardContext);
+
+  return (
+    <div onKeyDown={onKeyDown} style={{ width: '100%' }}>
+      {currentStep.title}
+      {formOptions.renderForm(currentStep.fields)}
+      <FormSpy>
+        {() => (
+          <React.Fragment>
+            {currentStep.nextStep && (
+              <button disabled={!formOptions.getState().valid} onClick={() => handleNext(selectNext(currentStep.nextStep, formOptions.getState))}>
+                Next
+              </button>
+            )}
+            {!currentStep.nextStep && (
+              <button disabled={!formOptions.getState().valid} onClick={() => formOptions.handleSubmit()}>
+                Submit
+              </button>
+            )}
+            <button onClick={handlePrev} disabled={activeStepIndex === 0}>
+              Back
+            </button>
+          </React.Fragment>
+        )}
+      </FormSpy>
+    </div>
+  );
+};
+
+const WrappedWizard = (props) => <Wizard Wizard={WizardInternal} {...props} />;
+
+const CustomWizard = () => {
+  const [values, setValues] = useState();
+
+  return (
+    <React.Fragment>
+      <FormRenderer
+        schema={schema}
+        componentMapper={{ 'text-field': TextField, select: Select, wizard: WrappedWizard }}
+        FormTemplate={(props) => <FormTemplate {...props} showFormControls={false} />}
+        onSubmit={(values) => setValues(values)}
+      />
+      {values && <pre>{JSON.stringify(values, null, 2)}</pre>}
+    </React.Fragment>
+  );
+};
+
+export default CustomWizard;

packages/react-renderer-demo/src/pages/examples/custom-wizard.md

@@ -0,0 +1,68 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+import Wizard from '../../doc-components/examples-texts/wizard.md';
+
+<DocPage>
+
+# Custom wizard
+
+## Common wizard
+
+To implement a custom wizard form, you can use the common wizard component. This component provides basic functionality such as branching, submitting only visited values, etc. Also, this wizard is used in all of our provided mappers.
+
+When implementing custom wizard, please keep it under `wizard` component key so the schema validator won't expect that nested fields (=wizard steps definitions) have a component property. If this is not possible, you can implement a mock component that will be used as a component for wizard steps.
+
+To use the component import it from the common package:
+
+```jsx
+--- { "switchable": false } ---
+import Wizard from '@data-driven-forms/common/wizard';
+```
+
+And use your wizard component as `Wizard` prop:
+
+```jsx
+const CustomWizard = (props) => { ... }
+
+const WrappedWizard = (props) => <Wizard Wizard={CustomWizard} {...props} />
+```
+
+Custom wizard (and all other nested components) then can access the wizard api via `WizardContext`:
+
+```jsx
+--- { "switchable": false } ---
+import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
+
+const CustomWizard = (props) => {
+   const {
+    crossroads,
+    formOptions,
+    currentStep,
+    handlePrev,
+    onKeyDown,
+    jumpToStep,
+    setPrevSteps,
+    handleNext,
+    navSchema,
+    activeStepIndex,
+    maxStepIndex,
+    isDynamic
+  } = useContext(WizardContext);
+
+  ...
+}
+```
+
+You can notice that this context also contains `formOptions`. It contains the same functions as the [regular one](/hooks/use-form-api), however, some of the functions are enhanced to support wizard functionality.
+
+## Common documentation
+
+<Wizard />
+
+## Preview
+
+Following example shows only the basic custom implementation. To see other functionality as a dynamic navigation, check implementation in one of our mappers. (The [PF4 wizard](/provided-mappers/wizard?mapper=pf4) provides the most complex functionality.)
+
+<CodeExample source="components/examples/custom-wizard" mode="preview" />
+
+</DocPage>