Create and use section component to avoid code duplication

kbss-cvut · May 6, 2021 · e2fe3de · e2fe3de
1 parent 8e1f4d4
commit e2fe3de
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "s-forms-smart-components",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "scripts": {
     "dev": "parcel serve ./test/index.html --port 8080",

diff --git a/src/SmartComponents.js b/src/SmartComponents.js
@@ -7,7 +7,7 @@ import WizardStepWithAdvanced from "./components/WizardStepWithAdvanced";
 import QuestionWithUnit from "./components/QuestionWithUnit";
 import NullQuestion from "./components/NullQuestion";
 import Utils from "./Utils";
-import AnswerableSectionComposite from "./components/AnswerableSectionComposite";
+import SectionComponent from "./components/SectionComponent";
 import TypeQuestion from "./components/TypeQuestion";
 
 export default class SmartComponents {
@@ -34,8 +34,12 @@ export default class SmartComponents {
   static getComponentMapping() {
     return [
       {
-        component: AnswerableSectionComposite,
-        mapRule: AnswerableSectionComposite.mappingRule
+        component: WizardStepWithAdvanced,
+        mapRule: WizardStepWithAdvanced.mappingRule
+      },
+      {
+        component: SectionComponent,
+        mapRule: SectionComponent.mappingRule
       },
       {
         component: CompositeQuestion,
@@ -45,10 +49,6 @@ export default class SmartComponents {
         component: QuestionWithAdvanced,
         mapRule: QuestionWithAdvanced.mappingRule
       },
-      {
-        component: WizardStepWithAdvanced,
-        mapRule: WizardStepWithAdvanced.mappingRule
-      },
       {
         component: NullQuestion,
         mapRule: (q, form) => SmartComponents._cached(q, form, 'NullQuestion-unit-of-measure', () => {
@@ -63,12 +63,12 @@ export default class SmartComponents {
           return Utils.hasPropertyWithValue(parent, Constants.HAS_TYPE_QUESTION, q['@id']);
         })
       },
-      {
-        component: NullQuestion,
-        mapRule: q => {
-          return !!q[Constants.SHOW_ADVANCED_QUESTION]
-        }
-      },
+      // {
+      //   component: NullQuestion,
+      //   mapRule: q => {
+      //     return !!q[Constants.SHOW_ADVANCED_QUESTION]
+      //   }
+      // },
       {
         component: QuestionWithUnit,
         mapRule: q => {

diff --git a/src/components/QuestionWithAdvanced.jsx b/src/components/QuestionWithAdvanced.jsx
@@ -180,28 +180,28 @@ export default class QuestionWithAdvanced extends Question {
     );
   }
 
-  renderAnswers() {
-    const question = this.props.question;
-
-    if (!FormUtils.isAnswerable(question)) {
-      return super.renderAnswers();
-    }
-
-    const answer = this._getAnswers()[0];
-
-    let cls = classNames(
-      'answer',
-      Question._getQuestionCategoryClass(question),
-      Question.getEmphasizedOnRelevantClass(question)
-    );
-
-    return [(
-      <div key={'row-item-0'} className={cls} id={question['@id']}>
-        <Answer index={0} answer={answer} question={question} onChange={this.onAnswerChange} />
-        {this._renderSwitch()}
-      </div>
-    )];
-  }
+  // renderAnswers() {
+  //   const question = this.props.question;
+  //
+  //   if (!FormUtils.isAnswerable(question)) {
+  //     return super.renderAnswers();
+  //   }
+  //
+  //   const answer = this._getAnswers()[0];
+  //
+  //   let cls = classNames(
+  //     'answer',
+  //     Question._getQuestionCategoryClass(question),
+  //     Question.getEmphasizedOnRelevantClass(question)
+  //   );
+  //
+  //   return [(
+  //     <div key={'row-item-0'} className={cls} id={question['@id']}>
+  //       <Answer index={0} answer={answer} question={question} onChange={this.onAnswerChange} />
+  //       {this._renderSwitch()}
+  //     </div>
+  //   )];
+  // }
 
 }
 

diff --git a/...components/AnswerableSectionComposite.jsx → src/components/SectionComponent.jsx b/...components/AnswerableSectionComposite.jsx → src/components/SectionComponent.jsx
@@ -1,14 +1,16 @@
 import React from 'react';
+import JsonLdUtils from 'jsonld-utils';
+import { Card, Accordion } from 'react-bootstrap';
 import {Question, FormUtils, Constants as SConstants, Answer, ConfigurationContext} from 's-forms';
 import Constants from "../Constants";
 import classNames from 'classnames';
 import SmartComponents from "../SmartComponents";
 import QuestionWithAdvanced from "./QuestionWithAdvanced";
 import TypeQuestionAnswer from "./TypeQuestionAnswer";
 
-export default class AnswerableSectionComposite extends Question {
+export default class SectionComponent extends Question {
 
-  static mappingRule = q => FormUtils.isSection(q) && FormUtils.isAnswerable(q);
+  static mappingRule = q => FormUtils.isSection(q) && !FormUtils.isWizardStep(q);
 
   constructor(props) {
     super(props);
@@ -38,6 +40,20 @@ export default class AnswerableSectionComposite extends Question {
     );
   }
 
+  _renderQuestionHelp() {
+    const advancedSwitch = this._renderShowAdvanced();
+    if (advancedSwitch) {
+      return (
+        <>
+          {super._renderQuestionHelp()}
+          {advancedSwitch}
+        </>
+      );
+    }
+
+    return super._renderQuestionHelp();
+  }
+
   _renderAnswer(index, answer) {
     const question = this.props.question;
 
@@ -101,4 +117,4 @@ export default class AnswerableSectionComposite extends Question {
 
 }
 
-AnswerableSectionComposite.contextType = ConfigurationContext;
+SectionComponent.contextType = ConfigurationContext;