Merge pull request #186 from rvsia/pf4-wiz-custom-func

feat(pf4wizard): allow functions in nextStep object

Author: Hyperkid123

packages/pf4-component-mapper/src/form-fields/wizard/step-buttons.js

@@ -1,19 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
+import get from 'lodash/get';
+
+export const selectNext = (nextStep, getState) => {
+  if (typeof nextStep === 'string') {
+    return nextStep;
+  }
+
+  if (typeof nextStep === 'function') {
+    return nextStep({ values: getState().values });
+  }
+
+  const selectedValue = get(getState().values, nextStep.when);
+
+  return nextStep.stepMapper[selectedValue];
+};
 
 const SimpleNext = ({
-  next,
+  nextStep,
   valid,
   handleNext,
   submit,
   nextLabel,
-}) => (
+  getState,
+}) =>  (
   <Button
     variant="primary"
     type="button"
     isDisabled={ !valid }
-    onClick={ () => valid ? handleNext(next) : submit() }
+    onClick={ () => valid ? handleNext(selectNext(nextStep, getState)) : submit() }
   >
     { nextLabel }
   </Button>
@@ -25,37 +41,16 @@ SimpleNext.propTypes = {
   handleNext: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
   nextLabel: PropTypes.string.isRequired,
-};
-
-const ConditionalNext = ({
-  nextStep,
-  FieldProvider,
-  ...rest
-}) => (
-  <FieldProvider
-    name={ nextStep.when }
-    subscription={{ value: true }}
-  >
-    { ({ input: { value }}) => <SimpleNext next={ nextStep.stepMapper[value] } { ...rest } /> }
-  </FieldProvider>
-);
-
-ConditionalNext.propTypes = {
-  nextStep: PropTypes.shape({
-    when: PropTypes.string.isRequired,
-    stepMapper: PropTypes.object.isRequired,
-  }).isRequired,
-  FieldProvider: PropTypes.func.isRequired,
+  getState: PropTypes.func.isRequired,
+  nextStep: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]).isRequired,
 };
 
 const SubmitButton = ({ handleSubmit, submitLabel }) => <Button type="button" variant="primary" onClick={ handleSubmit }>{ submitLabel }</Button>;
 
 const renderNextButton = ({ nextStep, handleSubmit, submitLabel, ...rest }) =>
-  !nextStep
-    ? <SubmitButton handleSubmit={ handleSubmit } submitLabel={ submitLabel } />
-    : typeof nextStep === 'object'
-      ? <ConditionalNext nextStep={ nextStep } { ...rest }/>
-      : <SimpleNext next={ nextStep } { ...rest } />;
+  nextStep
+    ? <SimpleNext nextStep={ nextStep } { ...rest } />
+    : <SubmitButton handleSubmit={ handleSubmit } submitLabel={ submitLabel } />;
 
 const WizardStepButtons = ({
   buttons: Buttons,
@@ -74,7 +69,7 @@ const WizardStepButtons = ({
   }}) =>
   <footer className={ `pf-c-wizard__footer ${buttonsClassName ? buttonsClassName : ''}` }>
     { Buttons ? <Buttons
-      ConditionalNext={ ConditionalNext }
+      ConditionalNext={ SimpleNext }
       SubmitButton={ SubmitButton }
       SimpleNext={ SimpleNext }
       formOptions={ formOptions }
@@ -89,18 +84,17 @@ const WizardStepButtons = ({
         ...formOptions,
         handleNext,
         nextStep,
-        FieldProvider,
         nextLabel: next,
         submitLabel: submit,
         ...args,
       }) }
+      selectNext={ selectNext }
     />
       : <React.Fragment>
         { renderNextButton({
           ...formOptions,
           handleNext,
           nextStep,
-          FieldProvider,
           nextLabel: next,
           submitLabel: submit,
         }) }
@@ -124,7 +118,7 @@ WizardStepButtons.propTypes = {
       stepMapper: PropTypes.object.isRequired,
     }),
   ]),
-  FieldProvider: PropTypes.func.isRequired,
+  FieldProvider: PropTypes.func,
   buttonLabels: PropTypes.shape({
     submit: PropTypes.string.isRequired,
     cancel: PropTypes.string.isRequired,

packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 
-import WizardStepButtons from '../../form-fields/wizard/step-buttons';
-import FieldProvider from '../../../../../__mocks__/mock-field-provider';
+import WizardStepButtons, { selectNext } from '../../form-fields/wizard/step-buttons';
 
 describe('<WizardSTepButtons', () => {
   let initialProps;
@@ -23,7 +22,6 @@ describe('<WizardSTepButtons', () => {
       },
       handlePrev: jest.fn(),
       handleNext: jest.fn(),
-      FieldProvider,
     };
   });
 
@@ -50,7 +48,10 @@ describe('<WizardSTepButtons', () => {
       <WizardStepButtons
         { ...initialProps }
         handleNext={ handleNext }
-        FieldProvider={ props => <FieldProvider input={{ value: 'foo' }} { ...props } /> }
+        formOptions={{
+          ...initialProps.formOptions,
+          getState: () => ({ values: { foo: 'foo' }}),
+        }}
         nextStep={{
           when: 'foo',
           stepMapper: {
@@ -86,4 +87,42 @@ describe('<WizardSTepButtons', () => {
     wrapper.find('button').at(1).simulate('click');
     expect(handlePrev).toHaveBeenCalled();
   });
+
+  describe('.selectNext', () => {
+    const VALUE = 'value';
+    const EXPECTED_NEXT_STEP = 'barisko';
+
+    const GET_STATE = () => ({
+      values: {
+        foo: VALUE,
+      },
+    });
+
+    it('should return string nextstep', () => {
+      const NEXTSTEP = EXPECTED_NEXT_STEP;
+
+      expect(selectNext(NEXTSTEP, GET_STATE)).toEqual(EXPECTED_NEXT_STEP);
+    }),
+
+    it('should return stepmapper nextstep', () => {
+      const NEXTSTEP = {
+        when: 'foo',
+        stepMapper: {
+          [VALUE]: EXPECTED_NEXT_STEP,
+        },
+      };
+
+      expect(selectNext(NEXTSTEP, GET_STATE)).toEqual(EXPECTED_NEXT_STEP);
+    });
+
+    it('should return custom func nextstep', () => {
+      const NEXTSTEP = ({ values }) => {
+        if (values.foo === VALUE) {
+          return EXPECTED_NEXT_STEP;
+        }
+      };
+
+      expect(selectNext(NEXTSTEP, GET_STATE)).toEqual(EXPECTED_NEXT_STEP);
+    });
+  });
 });

packages/react-renderer-demo/src/docs-components/pf4-wizard.md

@@ -66,6 +66,12 @@ nextStep: {
 },
 ```
 
+- another option is to use custom function. The custom function receives as the first argument an object with values and the function has to return a `stepKey` in string.
+
+```jsx
+nextStep: ({ values }) => (values.aws === '123' &&& values.password === 'secret') ? 'secretStep' : 'genericStep'
+```
+
 #### Buttons
 
 Each step can implement its own buttons.