[New] Implement link icon (part 1)

kbss-cvut · Nov 29, 2021 · 17235f4 · 17235f4
1 parent f1d7106
commit 17235f4
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 4 deletions.
diff --git a/src/components/LinkIcon.jsx b/src/components/LinkIcon.jsx
@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import ExternalLink from "../styles/icons/ExternalLink";
+
+const LinkIcon = (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="url-tooltip" className="tooltip-content">
+      {props.url}
+    </Tooltip>
+  );
+
+  return (
+      <div ref={el => getOverlayPlacement(el)}>
+        <OverlayTrigger placement={props.overlayPlacement || overlayPlacement} overlay={tooltip}>
+      <span className={props.iconClassContainer} style={{ position: props.absolutePosition ? 'absolute' : null }}>
+        <ExternalLink className={props.iconClass} />
+      </span>
+        </OverlayTrigger>
+      </div>
+  );
+};
+
+LinkIcon.propTypes = {
+  url: PropTypes.string.isRequired,
+  iconClassContainer: PropTypes.string,
+  iconClass: PropTypes.string,
+  overlayPlacement: PropTypes.string,
+  absolutePosition: PropTypes.bool,
+};
+
+LinkIcon.defaultProps = {
+  iconClassContainer: '',
+  iconClass: '',
+  absolutePosition: true
+};
+
+export default LinkIcon;
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -357,6 +357,19 @@ export default class Question extends React.Component {
         return null;
       }
 
+      if (icon.id === Constants.ICONS.QUESTION_LINK && question[Constants.SOURCE]) {
+        if (showIcon) {
+          return (
+              <div className={iconClassname}>
+                <LinkIcon
+                    url={Constants.SOURCE}
+                    absolutePosition={false}/>
+              </div>
+          );
+        }
+        return null;
+      }
+
       if (icon.id === Constants.ICONS.QUESTION_COMMENTS) {
         if (showIcon) {
           return (
@@ -388,6 +401,10 @@ export default class Question extends React.Component {
     return this.getIconComponentFromName(Constants.ICONS.QUESTION_HELP, question, options, onCommentChange, showIcon);
   }
 
+  static renderQuestionLink(question, options, onCommentChange, showIcon) {
+    return this.getIconComponentFromName(Constants.ICONS.QUESTION_LINK, question, options, onCommentChange, showIcon);
+  }
+
   static renderQuestionComments = (question, options, onCommentChange, showIcon) => {
     return this.getIconComponentFromName(Constants.ICONS.QUESTION_COMMENTS, question, options, onCommentChange, showIcon);
   }
@@ -411,6 +428,11 @@ export default class Question extends React.Component {
             <li key={i} className="icon-list-item">{renderQuestionHelp}</li>
         );
       }
+      if (icons[i].id === Constants.ICONS.QUESTION_LINK) {
+        iconsArray.push(
+            <li key={i} className="icon-list-item">{this.renderQuestionLink}</li>
+        );
+      }
     }
 
     return (<ol className="icon-list-items">

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -49,6 +49,7 @@ export default class Constants {
   static HAS_DATA_VALUE = 'http://onto.fel.cvut.cz/ontologies/documentation/has_data_value';
   static HAS_OBJECT_VALUE = 'http://onto.fel.cvut.cz/ontologies/documentation/has_object_value';
   static HELP_DESCRIPTION = 'http://purl.org/dc/elements/1.1/description';
+  static SOURCE = 'http://purl.org/dc/elements/1.1/source';
   static XSD = {
     MAX_EXCLUSIVE: 'http://www.w3.org/2001/XMLSchema#maxExclusive',
     MAX_INCLUSIVE: 'http://www.w3.org/2001/XMLSchema#maxInclusive',
@@ -108,7 +109,8 @@ export default class Constants {
 
   static ICONS = {
     QUESTION_COMMENTS: "questionComments",
-    QUESTION_HELP: "questionHelp"
+    QUESTION_HELP: "questionHelp",
+    QUESTION_LINK: "questionLink"
   };
 
   static ICON_BEHAVIOR = {
@@ -121,7 +123,8 @@ export default class Constants {
   static DEFAULT_OPTIONS = {
     icons: [
       {id: Constants.ICONS.QUESTION_HELP, behavior:  Constants.ICON_BEHAVIOR.ENABLE},
-      {id: Constants.ICONS.QUESTION_COMMENTS, behavior: Constants.ICON_BEHAVIOR.ON_HOVER}
+      {id: Constants.ICONS.QUESTION_COMMENTS, behavior: Constants.ICON_BEHAVIOR.ON_HOVER},
+      {id: Constants.ICONS.QUESTION_LINK, behavior: Constants.ICON_BEHAVIOR.ON_HOVER}
     ]
   };
 }
diff --git a/src/styles/icons/ExternalLink.jsx b/src/styles/icons/ExternalLink.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ExternalLink = () => (
+    <svg
+        className="external-link"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="28"
+        viewBox="0 0 24 28"
+    >
+        <path fill="#000000" fill-rule="evenodd" d="M5,2 C5.55228,2 6,2.44772 6,3 C6,3.55228 5.55228,4 5,4 L4,4 L4,12 L12,12 L12,11 C12,10.4477 12.4477,10 13,10 C13.5523,10 14,10.4477 14,11 L14,12 C14,13.1046 13.1046,14 12,14 L4,14 C2.89543,14 2,13.1046 2,12 L2,4 C2,2.89543 2.89543,2 4,2 L5,2 Z M15,1 L15,5.99814453 C15,6.55043453 14.5523,6.99814453 14,6.99814453 C13.4477,6.99814453 13,6.55043453 13,5.99814453 L13,4.41419 L8.71571,8.69846 C8.32519,9.08899 7.69202,9.08899 7.3015,8.69846 C6.91097,8.30794 6.91097,7.67477 7.3015,7.28425 L11.5858,3 L9.99619141,3 C9.44391141,3 8.99619141,2.55228 8.99619141,2 C8.99619141,1.44772 9.44391141,1 9.99619141,1 L15,1 Z"/>
+    </svg>
+);
+
+export default ExternalLink;
diff --git a/test/rendering/TestApp.jsx b/test/rendering/TestApp.jsx
@@ -69,6 +69,7 @@ class TestApp extends React.Component {
       currentUser: "http://fel.cvut.cz/people/max-chopart",
       icons: [
         {id: Constants.ICONS.QUESTION_HELP, behavior:  Constants.ICON_BEHAVIOR.ENABLE},
+        {id: Constants.ICONS.QUESTION_LINK, behavior:  Constants.ICON_BEHAVIOR.ENABLE},
         {id: Constants.ICONS.QUESTION_COMMENTS, behavior: Constants.ICON_BEHAVIOR.ENABLE}
       ]
     };

diff --git a/test/rendering/form1.json b/test/rendering/form1.json
@@ -37,6 +37,10 @@
       "description" : {
          "@id" : "http://purl.org/dc/elements/1.1/description"
       },
+      "source" : {
+        "@id" : "http://purl.org/dc/elements/1.1/source",
+        "@type" : "@id"
+      },
       "accepts-answer-value" : {
          "@id" : "http://onto.fel.cvut.cz/ontologies/form/accepts-answer-value"
       },
@@ -517,7 +521,7 @@
       },
       {
          "label" : {
-            "@value" : "Answerable section",
+            "@value" : "Answerable section with icons",
             "@language" : "en"
          },
          "has-layout-class" : [
@@ -544,7 +548,7 @@
             "@value" : "Some detailed description of the question.",
             "@language" : "en"
          },
-
+         "source" : "https://slovník.gov.cz/generický/množství/pojem/má-jednotku",
          "@type" : "doc:question"
       },
       {