Skip to content

Commit

Permalink
[upd] Rename steps to formQuestions outside wizards
Browse files Browse the repository at this point in the history
  • Loading branch information
tomasklim committed Sep 27, 2020
1 parent e8e35d8 commit 10ba9a8
Show file tree
Hide file tree
Showing 9 changed files with 157 additions and 208 deletions.
29 changes: 20 additions & 9 deletions src/components/FormManager.jsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
import React from 'react';
import QuestionAnswerProcessor from '../model/QuestionAnswerProcessor';
import { WizardContext } from '../contexts/WizardContext';
import { FormQuestionsContext } from '../contexts/FormQuestionsContext';
import Wizard from './wizard/Wizard';
import { FormUtils } from '../s-forms';
import Question from './Question';
import FormWindow from './FormWindow';

class FormManager extends React.Component {
getFormData = () => {
const data = this.context.getData();
const stepData = this.context.getStepData();
const formQuestionsData = this.context.getFormQuestionsData();

return QuestionAnswerProcessor.buildQuestionAnswerModel(data, stepData);
return QuestionAnswerProcessor.buildQuestionAnswerModel(data, formQuestionsData);
};

onStepChange = (question, index, change) => {
this.context.updateStepData(index, { ...question, ...change });
this.context.updateFormQuestionsData(index, { ...question, ...change });
};

render() {
const stepData = this.context.getStepData();
const { modalView } = this.props;

if (stepData.every((step) => !FormUtils.isWizardStep(step))) {
const formQuestionsData = this.context.getFormQuestionsData();

if (formQuestionsData.every((question) => !FormUtils.isWizardStep(question))) {
return (
<div className="p-4">
{stepData.map((question, index) => (
{formQuestionsData.map((question, index) => (
<Question
key={question['@id']}
question={question}
Expand All @@ -35,10 +38,18 @@ class FormManager extends React.Component {
);
}

return <Wizard {...this.props} />;
if (modalView) {
return (
<FormWindow>
<Wizard />
</FormWindow>
);
}

return <Wizard />;
}
}

FormManager.contextType = WizardContext;
FormManager.contextType = FormQuestionsContext;

export default FormManager;
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'react-bootstrap';
import { ConfigurationContext } from '../../contexts/ConfigurationContext';
import { ConfigurationContext } from '../contexts/ConfigurationContext';

const WizardWindow = React.forwardRef((props, ref) => {
const FormWindow = React.forwardRef((props, ref) => {
const { options } = React.useContext(ConfigurationContext);

return (
Expand All @@ -17,8 +17,8 @@ const WizardWindow = React.forwardRef((props, ref) => {
);
});

WizardWindow.propTypes = {
FormWindow.propTypes = {
children: PropTypes.element.isRequired
};

export default WizardWindow;
export default FormWindow;
23 changes: 12 additions & 11 deletions src/components/SForms.jsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import React, { forwardRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { FormGenContextProvider } from '../contexts/FormGenContext';
import { WizardContextProvider } from '../contexts/WizardContext';
import { FormQuestionsProvider } from '../contexts/FormQuestionsContext';
import { ConfigurationContextProvider } from '../contexts/ConfigurationContext';
import WizardGenerator from '../model/WizardGenerator';
import FormGenerator from '../model/FormGenerator';
import FormManager from './FormManager';
import { FormUtils } from '../s-forms';

const SForms = forwardRef((props, ref) => {
const [loading, setLoading] = useState(true);
const [wizardProperties, setWizardProperties] = useState(null);
const [formProperties, setFormProperties] = useState(null);
const [form, setForm] = useState(null);

useEffect(() => {
const buildWizard = async () => {
const initialiseSForms = async () => {
const intl = props.options.intl;
const [wizardProperties, structure] = await WizardGenerator.createWizard(props.form, intl);
const [formProperties, structure] = await FormGenerator.constructForm(props.form, intl);

if (wizardProperties.steps.length > 0) {
wizardProperties.steps[0].visited = true;
if (formProperties.formQuestions.some((step) => FormUtils.isWizardStep(step))) {
formProperties.formQuestions[0].visited = true;
}

setWizardProperties(wizardProperties);
setFormProperties(formProperties);
setForm(structure);
setLoading(false);
};

buildWizard();
initialiseSForms();
}, []);

if (loading) {
Expand All @@ -39,9 +40,9 @@ const SForms = forwardRef((props, ref) => {
options={props.options}
>
<FormGenContextProvider fetchTypeAheadValues={props.fetchTypeAheadValues}>
<WizardContextProvider data={form} steps={wizardProperties.steps} isFormValid={props.isFormValid}>
<FormQuestionsProvider data={form} formQuestions={formProperties.formQuestions} isFormValid={props.isFormValid}>
<FormManager ref={ref} {...props} />
</WizardContextProvider>
</FormQuestionsProvider>
</FormGenContextProvider>
</ConfigurationContextProvider>
);
Expand Down
26 changes: 13 additions & 13 deletions src/components/wizard/Wizard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ import WizardStep from './WizardStep';
import HorizontalWizardNav from './HorizontalWizardNav';
import VerticalWizardNav from './VerticalWizardNav';
import { ConfigurationContext } from '../../contexts/ConfigurationContext';
import WizardWindow from './WizardWindow';
import { WizardContext } from '../../contexts/WizardContext';
import FormWindow from '../FormWindow';
import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';

const Wizard = () => {
const wizardContext = React.useContext(WizardContext);
const wizardContext = React.useContext(FormQuestionsContext);
const { options } = React.useContext(ConfigurationContext);

const start = options.startingStep < wizardContext.getStepData().length ? options.startingStep : 0;
const start = options.startingStep < wizardContext.getFormQuestionsData().length ? options.startingStep : 0;

const [currentStep, setCurrentStep] = React.useState(start);

const onNextStep = () => {
const stepData = wizardContext.getStepData();
const stepData = wizardContext.getFormQuestionsData();
if (currentStep !== stepData.length - 1) {
stepData[currentStep + 1].visited = true;
setCurrentStep((prevCurrentStep) => prevCurrentStep + 1);
Expand All @@ -31,7 +31,7 @@ const Wizard = () => {
};

const navigate = (stepIndex) => {
const stepData = wizardContext.getStepData();
const stepData = wizardContext.getFormQuestionsData();

if (stepIndex === currentStep || stepIndex >= stepData.length) {
return;
Expand All @@ -44,16 +44,16 @@ const Wizard = () => {
};

const renderNav = () => {
if (wizardContext.getStepData().length <= 1) {
if (wizardContext.getFormQuestionsData().length <= 1) {
return null;
}

const stepData = wizardContext.getStepData();
const formQuestionsData = wizardContext.getFormQuestionsData();

return options.horizontalWizardNav ? (
<HorizontalWizardNav currentStep={currentStep} steps={stepData} onNavigate={navigate} />
<HorizontalWizardNav currentStep={currentStep} steps={formQuestionsData} onNavigate={navigate} />
) : (
<VerticalWizardNav currentStep={currentStep} steps={stepData} onNavigate={navigate} />
<VerticalWizardNav currentStep={currentStep} steps={formQuestionsData} onNavigate={navigate} />
);
};

Expand All @@ -72,7 +72,7 @@ const Wizard = () => {
};

const initComponent = () => {
const stepData = wizardContext.getStepData();
const stepData = wizardContext.getFormQuestionsData();

const step = stepData[currentStep];

Expand All @@ -84,13 +84,13 @@ const Wizard = () => {
onPreviousStep={onPreviousStep}
stepIndex={currentStep}
isFirstStep={currentStep === 0}
isLastStep={currentStep === wizardContext.getStepData().length - 1}
isLastStep={currentStep === wizardContext.getFormQuestionsData().length - 1}
/>
);
};

if (options.modalView) {
return <WizardWindow>{renderWizard()}</WizardWindow>;
return <FormWindow>{renderWizard()}</FormWindow>;
}

return renderWizard();
Expand Down
10 changes: 5 additions & 5 deletions src/components/wizard/WizardStep.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import JsonLdUtils from 'jsonld-utils';
import PropTypes from 'prop-types';
import * as Constants from '../../constants/Constants';
import HelpIcon from '../HelpIcon';
import { WizardContext } from '../../contexts/WizardContext';
import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
import { ConfigurationContext } from '../../contexts/ConfigurationContext';
import Question from '../Question';

const WizardStep = (props) => {
const wizardContext = React.useContext(WizardContext);
const wizardContext = React.useContext(FormQuestionsContext);
const { options } = React.useContext(ConfigurationContext);

const onNextStep = () => {
wizardContext.updateStepData(props.stepIndex, wizardContext.getStepData());
wizardContext.updateFormQuestionsData(props.stepIndex, wizardContext.getFormQuestionsData());
props.onNextStep();
};

Expand All @@ -22,7 +22,7 @@ const WizardStep = (props) => {
};

const _renderHelpIcon = () => {
const question = wizardContext.getStepData([props.stepIndex]);
const question = wizardContext.getFormQuestionsData([props.stepIndex]);

return question[Constants.HELP_DESCRIPTION] ? (
<HelpIcon
Expand Down Expand Up @@ -50,7 +50,7 @@ const WizardStep = (props) => {
};

const onChange = (index, change) => {
wizardContext.updateStepData(props.stepIndex || index, { ...props.step, ...change });
wizardContext.updateFormQuestionsData(props.stepIndex || index, { ...props.step, ...change });
};

return (
Expand Down
73 changes: 73 additions & 0 deletions src/contexts/FormQuestionsContext.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { useMemo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import FormUtils from '../util/FormUtils';

const INITIAL_DATA = {};
const INITIAL_FORM_QUESTIONS_DATA = [];

const FormQuestionsContext = React.createContext({});

const FormQuestionsProvider = (props) => {
const [data, setData] = useState(props.data || INITIAL_DATA);
const [formQuestionsData, setFormQuestionsData] = useState(props.formQuestions || INITIAL_FORM_QUESTIONS_DATA);

useEffect(() => {
if (props.isFormValid) {
const isValid = FormUtils.isValid(data);
props.isFormValid(isValid);
}
}, []);

const updateData = (update) => {
if (!update) return;

setData({ ...data, ...update });
};

const updateFormQuestionsData = (index, update) => {
if (!update || index < 0 || index >= formQuestionsData.length) return;

const newFormQuestionsData = [...formQuestionsData];
newFormQuestionsData[index] = { ...newFormQuestionsData[index], ...update };

setFormQuestionsData(newFormQuestionsData);

if (props.isFormValid) {
const isValid = FormUtils.isValid(data);
props.isFormValid(isValid);
}
};

const getData = () => {
return data;
};

const getFormQuestionsData = (index) => {
return index === null || index === undefined ? formQuestionsData : formQuestionsData[index];
};

const values = useMemo(
() => ({
updateData,
updateFormQuestionsData,
getData,
getFormQuestionsData
}),
[getFormQuestionsData, getData]
);

return (
<FormQuestionsContext.Provider value={values} {...props}>
{props.children}
</FormQuestionsContext.Provider>
);
};

FormQuestionsProvider.propTypes = {
children: PropTypes.element.isRequired,
data: PropTypes.object.isRequired,
formQuestions: PropTypes.array.isRequired,
isFormValid: PropTypes.func
};

export { FormQuestionsContext, FormQuestionsProvider };

0 comments on commit 10ba9a8

Please sign in to comment.