[Fix #62] Help Icon and QuestionCommentIcon Overlays are now displaye…

…d on the left when the icons are on the right part the viewport
kbss-cvut · Nov 22, 2021 · 3c68c18 · 3c68c18
1 parent c3c253e
commit 3c68c18
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
@@ -1,21 +1,33 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { QuestionCircle } from '../styles/icons';
 
 const HelpIcon = (props) => {
+  const [overlayPlacement, setOverlayPlacement] = useState("right");
+
+  const getOverlayPlacement = (el) => {
+    if (!el) return;
+
+    if (el.getBoundingClientRect().x > window.innerWidth / 2) {
+      setOverlayPlacement("left");
+    } else setOverlayPlacement("right");
+  }
+
   const tooltip = (
     <Tooltip id="help-tooltip" className="tooltip-content">
       {props.text}
     </Tooltip>
   );
 
   return (
-    <OverlayTrigger placement={props.overlayPlacement} overlay={tooltip}>
+      <div ref={el => getOverlayPlacement(el)}>
+        <OverlayTrigger placement={props.overlayPlacement || overlayPlacement} overlay={tooltip}>
       <span className={props.iconClassContainer} style={{ position: props.absolutePosition ? 'absolute' : null }}>
         <QuestionCircle className={props.iconClass} />
       </span>
-    </OverlayTrigger>
+        </OverlayTrigger>
+      </div>
   );
 };
 
@@ -30,7 +42,6 @@ HelpIcon.propTypes = {
 HelpIcon.defaultProps = {
   iconClassContainer: '',
   iconClass: '',
-  overlayPlacement: 'right',
   absolutePosition: true
 };
 

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -12,8 +12,8 @@ import ValidatorFactory from '../model/ValidatorFactory';
 import JsonLdObjectUtils from '../util/JsonLdObjectUtils';
 import PrefixIcon from './PrefixIcon';
 import MediaContent from './MediaContent';
-import { CaretSquareUp, CaretSquareDown, InfoCircle } from '../styles/icons';
-import { ConfigurationContext } from '../contexts/ConfigurationContext';
+import {CaretSquareDown, CaretSquareUp, InfoCircle} from '../styles/icons';
+import {ConfigurationContext} from '../contexts/ConfigurationContext';
 import classNames from 'classnames';
 import QuestionCommentIcon from "./comment/QuestionCommentIcon";
 
@@ -154,7 +154,9 @@ export default class Question extends React.Component {
                       {collapsible && this._renderCollapseToggle()}
                       {label}
                     </h6>
+                <div>
                   {Question.renderIcons(question, options, this.onCommentChange)}
+                </div>
               </Accordion.Toggle>
               {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}
             </Card>
@@ -333,10 +335,10 @@ export default class Question extends React.Component {
     return iconList.find(icon => icon.id === iconName);
   }
 
-  static renderQuestionHelp(question, options) {
+  static renderQuestionHelp(question, options, onCommentChange) {
     const icons = options.icons;
     const questionHelpIcon = this.getIconFromIconList(icons, Constants.ICONS.QUESTION_HELP)
-    return this.getIconComponent(questionHelpIcon, question, options);
+    return this.getIconComponent(questionHelpIcon, question, options, onCommentChange);
   }
 
   static renderQuestionComments = (question, options, onCommentChange) => {
@@ -428,6 +430,10 @@ export default class Question extends React.Component {
   _getFirstAnswerValue() {
     return FormUtils.resolveValue(this._getAnswers()[0]);
   }
+
+  static getOffset() {
+    console.log(this.inputRef.current);
+  }
 }
 
 Question.contextType = ConfigurationContext;

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -11,6 +11,7 @@ const QuestionCommentIcon = (props) => {
     const context = useContext(ConfigurationContext);
     const target = useRef(null);
     const [show, setShow] = useState(false);
+    const [overlayPlacement, setOverlayPlacement] = useState("right");
 
     const hideOverlay = () => {
         setShow(false);
@@ -54,14 +55,22 @@ const QuestionCommentIcon = (props) => {
        return _getComments().length;
     }
 
+    const getOverlayPlacement = (el) => {
+        if (!el) return;
+
+        if (el.getBoundingClientRect().x > window.innerWidth / 2) {
+            setOverlayPlacement("left");
+        } else setOverlayPlacement("right");
+    };
+
     return (
-        <>
+        <div ref={el => getOverlayPlacement(el)}>
             <span ref={target} onClick={onClickHandler}>
                 <CommentBubble/>
                 {getCommentsLength() > 0 ? <Badge className="comment-badge" pill variant="primary">{getCommentsLength()}</Badge> : null}
             </span>
 
-            <Overlay target={target.current} show={show} placement="right" rootClose={true} onHide={hideOverlay}>
+            <Overlay target={target.current} show={show} placement={overlayPlacement} rootClose={true} onHide={hideOverlay}>
                 {(overlayProps) => (
                     <Tooltip className="comment-tooltip" {...overlayProps}>
                         <span>
@@ -71,7 +80,7 @@ const QuestionCommentIcon = (props) => {
                     </Tooltip>
                 )}
             </Overlay>
-        </>
+        </div>
     );
 }