Render help for show advanced switch

kbss-cvut · Mar 17, 2021 · f2c664d · f2c664d
1 parent fedcda3
commit f2c664d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
@@ -11,8 +11,8 @@ const HelpIcon = (props) => {
   );
 
   return (
-    <OverlayTrigger placement="right" overlay={tooltip}>
-      <span className={props.iconClassContainer} style={{ position: 'absolute' }}>
+    <OverlayTrigger placement={props.overlayPlacement} overlay={tooltip}>
+      <span className={props.iconClassContainer} style={{ position: props.absolutePosition ? 'absolute' : null }}>
         <QuestionCircle className={props.iconClass} />
       </span>
     </OverlayTrigger>
@@ -22,12 +22,16 @@ const HelpIcon = (props) => {
 HelpIcon.propTypes = {
   text: PropTypes.string.isRequired,
   iconClassContainer: PropTypes.string,
-  iconClass: PropTypes.string
+  iconClass: PropTypes.string,
+  overlayPlacement: PropTypes.string,
+  absolutePosition: PropTypes.bool,
 };
 
 HelpIcon.defaultProps = {
   iconClassContainer: '',
-  iconClass: ''
+  iconClass: '',
+  overlayPlacement: 'right',
+  absolutePosition: true
 };
 
 export default HelpIcon;
diff --git a/src/components/QuestionWithAdvanced.jsx b/src/components/QuestionWithAdvanced.jsx
@@ -7,6 +7,7 @@ import Question from './Question';
 import classNames from 'classnames';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import JsonldUtils from 'jsonld-utils';
+import HelpIcon from './HelpIcon';
 
 export default class QuestionWithAdvanced extends Question {
 
@@ -76,6 +77,23 @@ export default class QuestionWithAdvanced extends Question {
     this._onChange(Constants.HAS_SUBQUESTION, index, question);
   };
 
+  _renderShowAdvancedHelp() {
+    const { question } = this._getShowAdvancedQuestion();
+
+    if (question[Constants.HELP_DESCRIPTION]) {
+      return (
+        <HelpIcon
+          absolutePosition={false}
+          overlayPlacement="left"
+          text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], this.context.options.intl)}
+          iconClassContainer="help-icon-section"
+        />
+      );
+    }
+
+    return null;
+  }
+
   render() {
     const question = this.props.question;
 
@@ -116,16 +134,20 @@ export default class QuestionWithAdvanced extends Question {
               {label}
             </h6>
 
-            <Form.Switch
-              onChange={this._toggleAdvanced}
-              id={'--switch-' + showAdvancedQuestion['@id']}
-              label={advancedQuestionLabel}
-              checked={this.state.showAdvanced}
-              inline
-              style={{float: 'right'}}
-            />
-
             {this._renderQuestionHelp()}
+
+            <div style={{float: 'right'}}>
+              <Form.Switch
+                onChange={this._toggleAdvanced}
+                id={'--switch-' + showAdvancedQuestion['@id']}
+                label={advancedQuestionLabel}
+                checked={this.state.showAdvanced}
+                inline
+              />
+
+              {this._renderShowAdvancedHelp()}
+            </div>
+
           </Accordion.Toggle>
           {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}