[upd] Wizardless form in modal window

kbss-cvut · Sep 27, 2020 · b79df86 · b79df86
1 parent 10ba9a8
commit b79df86
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 40 deletions.
diff --git a/src/components/FormManager.jsx b/src/components/FormManager.jsx
@@ -18,35 +18,35 @@ class FormManager extends React.Component {
     this.context.updateFormQuestionsData(index, { ...question, ...change });
   };
 
+  renderWizardlessForm = () => {
+    const formQuestionsData = this.context.getFormQuestionsData();
+
+    return (
+      <div className="p-4">
+        {formQuestionsData.map((question, index) => (
+          <Question
+            key={question['@id']}
+            question={question}
+            onChange={(index, change) => this.onStepChange(question, index, change)}
+            index={index}
+          />
+        ))}
+      </div>
+    );
+  };
+
   render() {
     const { modalView } = this.props;
 
     const formQuestionsData = this.context.getFormQuestionsData();
 
-    if (formQuestionsData.every((question) => !FormUtils.isWizardStep(question))) {
-      return (
-        <div className="p-4">
-          {formQuestionsData.map((question, index) => (
-            <Question
-              key={question['@id']}
-              question={question}
-              onChange={(index, change) => this.onStepChange(question, index, change)}
-              index={index}
-            />
-          ))}
-        </div>
-      );
-    }
+    const isWizardless = formQuestionsData.every((question) => !FormUtils.isWizardStep(question));
 
     if (modalView) {
-      return (
-        <FormWindow>
-          <Wizard />
-        </FormWindow>
-      );
+      return <FormWindow>{isWizardless ? this.renderWizardlessForm() : <Wizard />}</FormWindow>;
     }
 
-    return <Wizard />;
+    return isWizardless ? this.renderWizardlessForm() : <Wizard />;
   }
 }
 

diff --git a/src/components/SForms.jsx b/src/components/SForms.jsx
@@ -41,7 +41,7 @@ const SForms = forwardRef((props, ref) => {
     >
       <FormGenContextProvider fetchTypeAheadValues={props.fetchTypeAheadValues}>
         <FormQuestionsProvider data={form} formQuestions={formProperties.formQuestions} isFormValid={props.isFormValid}>
-          <FormManager ref={ref} {...props} />
+          <FormManager ref={ref} modalView={props.options && props.options.modalView} />
         </FormQuestionsProvider>
       </FormGenContextProvider>
     </ConfigurationContextProvider>

diff --git a/src/components/wizard/Wizard.jsx b/src/components/wizard/Wizard.jsx
@@ -4,7 +4,6 @@ import WizardStep from './WizardStep';
 import HorizontalWizardNav from './HorizontalWizardNav';
 import VerticalWizardNav from './VerticalWizardNav';
 import { ConfigurationContext } from '../../contexts/ConfigurationContext';
-import FormWindow from '../FormWindow';
 import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
 
 const Wizard = () => {
@@ -57,20 +56,6 @@ const Wizard = () => {
     );
   };
 
-  const renderWizard = () => {
-    const isHorizontal = options.horizontalWizardNav;
-
-    const cardClassname = isHorizontal ? '' : 'flex-row p-2';
-    const containerClassname = isHorizontal ? 'card-body' : 'col-10 p-0';
-
-    return (
-      <Card className={cardClassname}>
-        {renderNav()}
-        <div className={containerClassname}>{initComponent()}</div>
-      </Card>
-    );
-  };
-
   const initComponent = () => {
     const stepData = wizardContext.getFormQuestionsData();
 
@@ -89,11 +74,16 @@ const Wizard = () => {
     );
   };
 
-  if (options.modalView) {
-    return <FormWindow>{renderWizard()}</FormWindow>;
-  }
+  const isHorizontal = options.horizontalWizardNav;
+  const cardClassname = isHorizontal ? '' : 'flex-row p-2';
+  const containerClassname = isHorizontal ? 'card-body' : 'col-10 p-0';
 
-  return renderWizard();
+  return (
+    <Card className={cardClassname}>
+      {renderNav()}
+      <div className={containerClassname}>{initComponent()}</div>
+    </Card>
+  );
 };
 
 export default Wizard;