Add option to render type question as separate question

src/SmartComponents.js

@@ -8,6 +8,7 @@ import QuestionWithUnit from "./components/QuestionWithUnit";
 import NullQuestion from "./components/NullQuestion";
 import Utils from "./Utils";
 import AnswerableSectionComposite from "./components/AnswerableSectionComposite";
+import TypeQuestion from "./components/TypeQuestion";
 
 export default class SmartComponents {
 
@@ -48,6 +49,10 @@ export default class SmartComponents {
         component: WizardStepWithAdvanced,
         mapRule: WizardStepWithAdvanced.mappingRule
       },
+      {
+        component: TypeQuestion,
+        mapRule: TypeQuestion.mappingRule
+      },
       {
         component: NullQuestion,
         mapRule: (q, form) => SmartComponents._cached(q, form, 'NullQuestion', () => {

src/components/AnswerableSectionComposite.jsx

@@ -42,7 +42,8 @@ export default class AnswerableSectionComposite extends Question {
       index: index,
       answer: answer,
       question: question,
-      onChange: this.onAnswerChange
+      onChange: this.onAnswerChange,
+      isInSectionHeader: true
     });
   }
 

src/components/TypeQuestion.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Card} from 'react-bootstrap';
+import JsonLdUtils from 'jsonld-utils';
+import {Question, Constants as SConstants, FormUtils} from 's-forms';
+import Constants from "../Constants";
+import classNames from "classnames";
+import TypeQuestionAnswer from "./TypeQuestionAnswer";
+
+export default class TypeQuestion extends Question {
+
+  static mappingRule = q => !FormUtils.isSection(q) && TypeQuestionAnswer.mappingRule(q);
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderAnswers() {
+    const question = this.props.question;
+    const children = [];
+    const answers = this._getAnswers();
+
+    for (let i = 0, len = answers.length; i < len; i++) {
+
+      let cls = classNames(
+        'answer',
+        Question._getQuestionCategoryClass(question),
+        Question.getEmphasizedOnRelevantClass(question)
+      );
+
+      children.push(
+        <div key={'row-item-' + i} className={cls} id={question['@id']}>
+          <div className="answer-content type-answer" style={this._getAnswerWidthStyle()}>
+            <TypeQuestionAnswer
+              index={i}
+              answer={answers[i]}
+              question={question}
+              onChange={this.onAnswerChange}
+            />
+          </div>
+          {this._renderUnits()}
+          {this._renderPrefixes()}
+        </div>
+      );
+    }
+    return children;
+  }
+
+}

src/components/TypeQuestionAnswer.jsx

@@ -75,7 +75,9 @@ export default class TypeQuestionAnswer extends React.Component {
     if (selected) {
       for (let selectedOption of selected) {
         for (let d of selectedOption.disjoint) {
-          tree[d].disabled = true;
+          if (tree[d]) {
+            tree[d].disabled = true;
+          }
         }
       }
     }
@@ -153,12 +155,14 @@ export default class TypeQuestionAnswer extends React.Component {
     for (let relation of relations) {
 
       if (relation.type === 'parent-child') {
-        options[relation.parent].children.push(relation.child);
+        options[relation.parent]?.children.push(relation.child);
       }
 
       if (relation.type === 'disjoint') {
-        options[relation.a].disjoint.push(relation.b);
-        options[relation.b].disjoint.push(relation.a);
+        if (options[relation.a] && options[relation.b]) {
+          options[relation.a].disjoint.push(relation.b);
+          options[relation.b].disjoint.push(relation.a);
+        }
       }
     }
 
@@ -222,12 +226,21 @@ export default class TypeQuestionAnswer extends React.Component {
 
   render() {
 
+    if (this.props.isInSectionHeader) {
+      return (
+        <div className="type-answer-group">
+          {this._renderLabel()}
+          {this._renderSelect()}
+        </div>
+      );
+    }
+
     return (
-      <div className="type-answer-group">
+      <FormGroup>
         {this._renderLabel()}
         {this._renderSelect()}
-      </div>
-    )
+      </FormGroup>
+    );
   }
 
 }
@@ -238,5 +251,6 @@ TypeQuestionAnswer.propTypes = {
   index: PropTypes.number.isRequired,
   answer: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  isInSectionHeader: PropTypes.bool
 }

src/styles/components.css

@@ -60,6 +60,10 @@
     min-height: 24px;
 }
 
+.Select-control:hover {
+    box-shadow: none;
+}
+
 .type-answer-group {
     display: flex;
     position: absolute;
@@ -79,3 +83,11 @@
 .type-answer-group .Select--multi .Select-value {
     margin-top: 4px;
 }
+
+.type-answer .Select-control {
+    height: 37px;
+}
+
+.type-answer .Select--multi .Select-value {
+    margin-top: 4px;
+}

test/form2.json

@@ -249,7 +249,8 @@
       "@type": "doc:question",
       "has_related_question": [
         "as-show-advanced-888",
-        "as-checkbox-452"
+        "as-checkbox-452",
+        "provozovatel-no-section-888"
       ],
       "has-layout-class": [
         "answerable",
@@ -273,6 +274,18 @@
       "label": "show advanced",
       "show-advanced-question": true
     },
+    {
+      "@id": "provozovatel-no-section-888",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": "type-question",
+      "has-possible-value": [
+        "fyzicka-osoba--nezletila",
+        "fyzicka-osoba--chytra",
+        "fyzicka-osoba--hloupa"
+      ],
+      "label": "Fyzická osoba"
+    },
     {
       "@id": "as-checkbox-452",
       "@type": "doc:question",