[Enhancement #62] Comments and Help features refactored

kbss-cvut · Oct 25, 2021 · 757b027 · blcham · Oct 26, 2021 · blcham
1 parent 344d3ed
commit 757b027
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 85 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -146,29 +146,10 @@ const Answer = (props) => {
       />
     ) : null;
 
-    const _renderQuestionCommentIcon = () => {
-      if (options.enableComments) {
-        return (
-            <Col className="no-padding-left" lg="auto">
-              <QuestionCommentIcon
-                  question={question}
-                  onChange={props.onCommentChange}
-              />
-            </Col>
-        );
-      } else return null;
-    }
-
     return (
-        <Row>
+        <Row lg="auto">
           <Col className="no-padding-right" lg="auto">{label}</Col>
-          {questionHelp ?
-              <>
-                <Col className="no-padding-left" lg="1" >{questionHelp}</Col>
-                {_renderQuestionCommentIcon()}
-              </>
-              : _renderQuestionCommentIcon()
-          }
+          {props.icons}
         </Row>
     );
   }

diff --git a/src/components/IconsLayout.jsx b/src/components/IconsLayout.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {Col} from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const IconsLayout = (props) => {
+    return (
+        React.Children.map(props.children, child => {
+            if (child) return <Col className={props.layout} lg="auto">{child}</Col>
+            return null;
+        })
+    );
+}
+
+IconsLayout.propTypes = {
+    layout: PropTypes.string.isRequired
+}
+
+export default IconsLayout;
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -16,6 +16,7 @@ import { CaretSquareUp, CaretSquareDown, InfoCircle } from '../styles/icons';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import classNames from 'classnames';
 import QuestionCommentIcon from "./comment/QuestionCommentIcon";
+import IconsLayout from "./IconsLayout";
 
 // TODO Remove once the pretty layout is tested
 const PRETTY_ANSWERABLE_LAYOUT = true;
@@ -155,15 +156,7 @@ export default class Question extends React.Component {
                       {label}
                     </h6>
                   </Col>
-                  {this._renderQuestionHelp() ?
-                      <>
-                        <Col className="no-padding-left" lg="auto">
-                          {this._renderQuestionHelp()}
-                        </Col>
-                          {this._renderQuestionComment()}
-                      </>
-                      : this._renderQuestionComment()
-                  }
+                  {this._renderIcons()}
                 </Row>
               </Accordion.Toggle>
               {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}
@@ -240,7 +233,9 @@ export default class Question extends React.Component {
                 answer={answers[i]}
                 question={question}
                 onChange={this.onAnswerChange}
-                onCommentChange={this.onCommentChange}/>
+                onCommentChange={this.onCommentChange}
+                icons={this._renderIcons()}
+            />
           </div>
           {this._renderUnits()}
           {this._renderPrefixes()}
@@ -320,30 +315,39 @@ export default class Question extends React.Component {
     );
   }
 
-  _renderQuestionHelp() {
-    const question = this.props.question;
-    let helpClass = FormUtils.isCheckbox(question) ? 'help-icon-checkbox' : 'help-icon-text-input';
-    if (FormUtils.isSection(question)) {
-      helpClass = 'help-icon-section';
+  static _renderQuestionHelp(question, intl) {
+    if (question[Constants.HELP_DESCRIPTION]) {
+      return <HelpIcon
+          text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], intl)}/>
     }
-    return question[Constants.HELP_DESCRIPTION] ? (
-      <HelpIcon
-        text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], this.context.options.intl)}
-        iconClassContainer={helpClass}
-      />
-    ) : null;
+    return null;
   }
 
   _renderQuestionComment() {
-    if (this.context.options.enableComments) {
-      return (
-          <Col className="no-padding-left" lg="auto">
-            <QuestionCommentIcon
+    if (this.context.options.questionComments === "enable") {
+      return <QuestionCommentIcon
                 question={this.props.question}
-                onChange={this.onCommentChange} />
-          </Col>
-      );
-    } else return null;
+                onChange={this.onCommentChange}/>
+    }
+    return null;
+  }
+
+  _renderIcons() {
+    const question = this.props.question;
+    const intl = this.context.options.intl;
+    const renderQuestionHelp = Question._renderQuestionHelp(question, intl);
+    const renderQuestionComment = this._renderQuestionComment();
+
+    return (
+        <IconsLayout layout={Question.setIconsLayout()}>
+          {renderQuestionHelp}
+          {renderQuestionComment}
+        </IconsLayout>
+    );
+  }
+
+  static setIconsLayout() {
+    return "icon-layout";
   }
 
   _renderPrefixes() {

diff --git a/src/components/wizard/WizardStep.jsx b/src/components/wizard/WizardStep.jsx
@@ -3,11 +3,11 @@ import {Button, ButtonToolbar, Card, Col, Row} from 'react-bootstrap';
 import JsonLdUtils from 'jsonld-utils';
 import PropTypes from 'prop-types';
 import Constants from '../../constants/Constants';
-import HelpIcon from '../HelpIcon';
 import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
 import Question from '../Question';
 import QuestionCommentIcon from "../comment/QuestionCommentIcon";
 import JsonLdObjectMap from "../../util/JsonLdObjectMap";
+import IconsLayout from "../IconsLayout";
 
 
 export default class WizardStep extends React.Component {
@@ -25,29 +25,14 @@ export default class WizardStep extends React.Component {
     this.props.onPreviousStep();
   };
 
-  _renderHelpIcon = () => {
+  _renderQuestionComment = () => {
     const question = this.context.getFormQuestionsData([this.props.stepIndex]);
+    const comments = this.props.options.questionComments;
 
-    return question[Constants.HELP_DESCRIPTION] ? (
-      <HelpIcon
-        text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], this.props.options.intl)}
-        iconClass="help-icon-section"
-      />
-    ) : null;
-  };
-
-  _renderQuestionCommentIcon = () => {
-    const question = this.context.getFormQuestionsData([this.props.stepIndex]);
-
-    if (this.props.options.enableComments) {
-      return (
-          <Col className="no-padding-left" lg="auto">
-            <QuestionCommentIcon
+    if (comments) {
+      return <QuestionCommentIcon
                 question={question}
-                onChange={this.onCommentChange}
-            />
-          </Col>
-      );
+                onChange={this.onCommentChange}/>
     } else return null;
   }
 
@@ -84,6 +69,21 @@ export default class WizardStep extends React.Component {
     this.context.updateFormQuestionsData(this.props.stepIndex || index, { ...this.props.step, ...change });
   };
 
+  _renderIcons = () => {
+    const question = this.context.getFormQuestionsData([this.props.stepIndex]);
+    const intl = this.props.options.intl;
+
+    const renderQuestionHelp = Question._renderQuestionHelp(question, intl);
+    const renderQuestionComment = this._renderQuestionComment();
+
+    return (
+        <IconsLayout layout={Question.setIconsLayout()}>
+          {renderQuestionHelp}
+          {renderQuestionComment}
+        </IconsLayout>
+    );
+  }
+
   render() {
 
     const categoryClass = Question._getQuestionCategoryClass(this.props.step);
@@ -102,13 +102,7 @@ export default class WizardStep extends React.Component {
           <Card.Header className="bg-primary text-white" as="h6" id={this.props.step['@id']}>
             <Row>
               <Col className="no-padding-right" lg="auto">{JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}</Col>
-              {this._renderHelpIcon() ?
-                  <>
-                    <Col className="no-padding-left" lg="auto">{this._renderHelpIcon()}</Col>
-                    {this._renderQuestionCommentIcon()}
-                  </>
-                  : this._renderQuestionCommentIcon()
-              }
+              {this._renderIcons()}
             </Row>
           </Card.Header>
           <Card.Body className={categoryClass}>

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -56,7 +56,7 @@ svg {
   padding-right: 0;
 }
 
-.no-padding-left {
+.icon-layout {
   padding-left: 0;
 }
 
@@ -83,11 +83,6 @@ svg {
   margin-left: -5px;
 }
 
-.help-icon-text-input {
-  margin-bottom: 25px;
-  bottom: 0;
-}
-
 .has-unit-label {
   font-weight: bold;
   margin-top: 12px;

diff --git a/test/rendering/TestApp.jsx b/test/rendering/TestApp.jsx
@@ -66,7 +66,8 @@ class TestApp extends React.Component {
           {id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart"},
           {id: "http://fel.cvut.cz/people/miroslav-blasko", label: "Miroslav Blasko"}],
       currentUser: "http://fel.cvut.cz/people/max-chopart",
-      enableComments: false
+      questionComments: "enable", // enable | disable | <onHover>
+      questionHelp: "enable" // <enable> | disable | onHover
     };
 
     return (