[Upd #115] Refactor for readability

kbss-cvut · Mar 17, 2022 · 7708f6c · 7708f6c
1 parent 324d8a2
commit 7708f6c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 52 deletions.
diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
@@ -1,32 +1,30 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { QuestionCircle } from '../styles/icons';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Tooltip } from "react-bootstrap";
+import { QuestionCircle } from "../styles/icons";
+import IconOverlay from "./IconOverlay.jsx";
 
 const HelpIcon = (props) => {
-  const [overlayPlacement, setOverlayPlacement] = useState('right');
+  const [overlayPlacement, setOverlayPlacement] = useState("right");
 
   const getOverlayPlacement = (el) => {
     if (!el) return;
 
     if (el.getBoundingClientRect().x > window.innerWidth / 2) {
-      setOverlayPlacement('left');
-    } else setOverlayPlacement('right');
+      setOverlayPlacement("left");
+    } else setOverlayPlacement("right");
   };
 
-  const tooltip = (
-    <Tooltip id="help-tooltip" className="tooltip-content">
-      {props.text}
-    </Tooltip>
-  );
-
   return (
     <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>
+      <IconOverlay
+        id="help-icon-tooltip-"
+        overlayPlacement={props.overlayPlacement || overlayPlacement}
+        absolutePosition={props.absolutePosition}
+        tooltipContent={props.text}
+      >
+        <QuestionCircle className={props.iconClass} />
+      </IconOverlay>
     </div>
   );
 };
@@ -36,13 +34,13 @@ HelpIcon.propTypes = {
   iconClassContainer: PropTypes.string,
   iconClass: PropTypes.string,
   overlayPlacement: PropTypes.string,
-  absolutePosition: PropTypes.bool
+  absolutePosition: PropTypes.bool,
 };
 
 HelpIcon.defaultProps = {
-  iconClassContainer: '',
-  iconClass: '',
-  absolutePosition: true
+  iconClassContainer: "",
+  iconClass: "",
+  absolutePosition: true,
 };
 
 export default HelpIcon;
diff --git a/src/components/IconList.jsx b/src/components/IconList.jsx
diff --git a/src/components/LinkIcon.jsx b/src/components/LinkIcon.jsx
@@ -5,7 +5,7 @@ import IconOverlay from './IconOverlay';
 
 const LinkIcon = (props) => {
   return (
-    <IconOverlay tooltipContent={props.url['@id'] || props.url} id="url-tooltip">
+    <IconOverlay tooltipContent={props.url['@id'] || props.url} id="url-tooltip" overlayPlacement={props.overlayPlacement}>
       <a href={props.url['@id'] || props.url} target="_blank" className={props.iconClassContainer}>
         <ExternalLink className={props.iconClass} />
       </a>

diff --git a/src/stories/QuestionCommentIcon.stories.tsx b/src/stories/QuestionCommentIcon.stories.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import QuestionCommentIcon from "../../components/comment/QuestionCommentIcon";
-import question from "../assets/question.json";
-import questionWithComment from "../assets/questionWithComment.json";
+import QuestionCommentIcon from "../components/comment/QuestionCommentIcon";
+import question from "./assets/question.json";
+import questionWithComment from "./assets/questionWithComment.json";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import IntlContextProvider from "../../contexts/IntlContextProvider";
-import Constants from "../../constants/Constants";
-import { ConfigurationContextProvider } from "../../contexts/ConfigurationContext";
+import IntlContextProvider from "../contexts/IntlContextProvider";
+import Constants from "../constants/Constants";
+import { ConfigurationContextProvider } from "../contexts/ConfigurationContext";
 
 export default {
   title: "Components/QuestionCommentIcon",

diff --git a/src/stories/SForms/SForms.stories.tsx → src/stories/SForms.stories.tsx b/src/stories/SForms/SForms.stories.tsx → src/stories/SForms.stories.tsx
@@ -2,15 +2,15 @@ import React from "react";
 
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import SForms from "../../components/SForms";
-import form1 from "../assets/form1.json"; // form with wizard steps
-import form2 from "../assets/form2.json"; // form without wizard steps (proudly assembled in Semantic Form Web Editor)
-import touristDestinationForm1 from "../assets/touristDestinationForm1.json";
-import touristDestinationForm2 from "../assets/touristDestinationForm2.json";
+import SForms from "../components/SForms";
+import form1 from "./assets/form1.json"; // form with wizard steps
+import form2 from "./assets/form2.json"; // form without wizard steps (proudly assembled in Semantic Form Web Editor)
+import touristDestinationForm1 from "./assets/touristDestinationForm1.json";
+import touristDestinationForm2 from "./assets/touristDestinationForm2.json";
 
 import queryString from "query-string";
-import Constants from "../../constants/Constants";
-import IntlContextProvider from "../../contexts/IntlContextProvider";
+import Constants from "../constants/Constants";
+import IntlContextProvider from "../contexts/IntlContextProvider";
 
 const getP = (queryParameterName: string, defaultValue: string) => {
   return {