@capillarytech/cap-ui-utils 1.4.5 → 1.4.6-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.5",
+  "version": "1.4.6-alpha.0",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,11 +8,14 @@
   },
   "author": "Rajshekar",
   "dependencies": {
+    "@capillarytech/cap-ui-library": "4.0.1",
+    "prop-types": "^15.8.1",
     "react": "^16.13.0",
     "react-ga": "^2.7.0",
     "tti-polyfill": "^0.2.2",
     "moment-timezone": "^0.5.25",
     "react-intl": "2.7.2",
-    "lodash": "4.17.11"
+    "lodash": "4.17.11",
+    "react-resizable": "^3.0.4"
   }
 }

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { ResizableBox } from "react-resizable";
+import PropTypes from "prop-types";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import Draggable from "react-draggable";
+import "react-resizable/css/styles.css";
+
+const ResizablePIP = ({
+  children,
+  width = 400,
+  height = 260,
+  showMaximised = false,
+  setShowMaximised,
+  minConstraints = [400, 260],
+  maxConstraints = [1404, 900],
+  closePIPContainer = () => {},
+  handleOpenInNew = () => {},
+}) => {
+  const [pipWidth, setPipWidth] = useState(width);
+  const [pipHeight, setPipHeight] = useState(height);
+  const handleMaximiseView = () => {
+    setPipWidth(1404);
+    setPipHeight(730);
+    setShowMaximised(!showMaximised);
+  };
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 8,
+        top: -56,
+      }}
+    >
+      <Draggable>
+        <div
+          style={{
+            backgroundColor: "#242d36",
+            zIndex: "100000",
+            position: "fixed",
+            fontSize: "14px",
+            fontWeight: "200",
+            lineHeight: "1.5",
+            color: "rgb(248, 248, 249)",
+            boxSizing: "content-box",
+            boxShadow:
+              "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
+            borderRadius: "0.28571429rem",
+          }}
+        >
+          <CapRow>
+            <CapRow>
+              <CapColumn span={1} offset={18}>
+                <CapIcon
+                  onClick={handleMaximiseView}
+                  style={{ marginTop: "8px" }}
+                  type="help"
+                />
+              </CapColumn>
+              <CapColumn span={1} offset={1}>
+                <CapIcon
+                  onClick={handleOpenInNew}
+                  style={{ marginTop: "8px" }}
+                  type="open-in-new"
+                />
+              </CapColumn>
+              <CapColumn span={1} offset={1}>
+                <CapIcon
+                  onClick={closePIPContainer}
+                  style={{ marginTop: "8px" }}
+                  type="close"
+                />
+              </CapColumn>
+            </CapRow>
+            <CapRow>
+              <ResizableBox
+                onMouseDown={(e) => {
+                  e.stopPropagation();
+                }}
+                style={{
+                  background: "#202429",
+                  margin: "8px",
+                  borderRadius: "4px",
+                  overflow: "auto",
+                }}
+                width={pipWidth}
+                height={pipHeight}
+                minConstraints={minConstraints}
+                maxConstraints={maxConstraints}
+              >
+                {children}
+              </ResizableBox>
+            </CapRow>
+          </CapRow>
+        </div>
+      </Draggable>
+    </div>
+  );
+};
+
+ResizablePIP.propTypes = {
+  children: PropTypes.any,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  minConstraints: PropTypes.array,
+  maxConstraints: PropTypes.array,
+  closePIPContainer: PropTypes.func,
+  handleOpenInNew: PropTypes.func,
+  setShowMaximised: PropTypes.func,
+  showMaximised: PropTypes.bool,
+};
+export default ResizablePIP;
+
+/** put this is draggable div
+ * .pipWindow:hover {
+    cursor: grab;
+  }
+  .pipWindow:active {
+    cursor: grabbing;
+    outline: -webkit-focus-ring-color auto 1px;
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 1px;
+  }
+ */

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import ResizablePIP from './ResizablePIP';
+
+const withDemoVideosAndLinks = (WrappedComponent, publicPath) => props => {
+  const [showPIP, setShowPIP] = useState(false);
+  const [PIPContentLink, setPIPContentLink] = useState('');
+  const [showMaximised, setShowMaximised] = useState(false);
+  const {
+    demoVideoAndLinkJSONData: { demoVideoAndLinkJSON = {} } = {},
+    userData: {
+      user: { lang: userLocale = '' } = {},
+      currentOrgDetails: {
+        basicDetails: { base_language: orgLocale = '' } = {},
+      } = {},
+    } = {},
+    match: { path = '' } = {},
+  } = props || {};
+  const JSONInContext = demoVideoAndLinkJSON?.[publicPath];
+  const currentPathJSON = JSONInContext?.find(
+    routeEle => routeEle.route === path,
+  );
+  const locale = userLocale || orgLocale || 'default';
+
+  const targetElements = currentPathJSON?.target_elements;
+  const cssSelectors = [];
+  if (Object.keys(targetElements)?.length) {
+    Object.keys(targetElements).map(targetElement => {
+      cssSelectors.push({
+        cssSelector: targetElement,
+        locale,
+        ...targetElements[targetElement],
+      });
+    });
+  }
+
+  cssSelectors.forEach(selector => {
+    const {
+      support_link: { target_url: linkTargetUrl = {} } = {},
+      support_video: { target_url: videoTargetUrl = {} } = {},
+      locale,
+      cssSelector,
+    } = selector || {};
+    let matchedNodes = document.querySelectorAll(selector.cssSelector);
+    const handleOnClickVideoLink = () => {
+      setPIPContentLink(videoTargetUrl?.[locale]?.href);
+      setShowPIP(true);
+    };
+    const handleOpenSupportLink = () =>
+      window.open(linkTargetUrl?.[locale]?.href, '_blank');
+
+    if (selector?.support_video?.target_url?.default?.href) {
+      matchedNodes.forEach(node => {
+        if (!document.getElementById(`demo-video-${cssSelector}`)) {
+          let videoAnchor = document.createElement('a');
+          videoAnchor.textContent = videoTargetUrl?.[locale].label;
+          videoAnchor.id = `demo-video-${cssSelector}`;
+          videoAnchor.style.marginLeft = '2px';
+          videoAnchor.onclick = handleOnClickVideoLink;
+
+          const videoIconElement = document.createElement('i');
+          videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M14.756 11.032a1.194 1.194 0 0 1 0 1.921l-2.937 2.17a1.194 1.194 0 0 1-1.904-.96v-4.34a1.194 1.194 0 0 1 1.904-.96l2.937 2.17zM12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm0 2a9 9 0 1 1 0-18 9 9 0 0 1 0 18z"
+              id="play_svg__a"
+            ></path>
+          </svg>`;
+          videoIconElement.onclick = handleOnClickVideoLink;
+          videoIconElement.style.marginLeft = '2px';
+          videoIconElement.style.cursor = 'pointer';
+          videoIconElement.style.color = '#2466eb';
+          videoIconElement.style.fontSize = '18px';
+          node.appendChild(videoIconElement);
+          node.appendChild(videoAnchor);
+        }
+      });
+    } else if (selector?.support_link?.target_url?.default?.href) {
+      matchedNodes.forEach(node => {
+        if (!document.getElementById(`support-link-${cssSelector}`)) {
+          let linkAnchor = document.createElement('a');
+          linkAnchor.href = linkTargetUrl?.[locale]?.href;
+          linkAnchor.textContent = linkTargetUrl?.[locale].label;
+          linkAnchor.target = '_blank';
+          linkAnchor.id = `support-link-${cssSelector}`;
+          linkAnchor.style.marginLeft = '2px';
+          linkAnchor.onclick = handleOpenSupportLink;
+
+          const helpIconElement = document.createElement('i');
+          helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            id="help_svg__a"
+            d="M9 16h2v-2H9v2zm1-16C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14C7.79 4 6 5.79 6 8h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+          ></path>
+        </svg>`;
+          helpIconElement.onclick = handleOpenSupportLink;
+          helpIconElement.style.marginLeft = '2px';
+          helpIconElement.style.cursor = 'pointer';
+          helpIconElement.style.fontSize = '16px';
+          helpIconElement.style.color = '#2466eb';
+
+          node.appendChild(helpIconElement);
+          node.appendChild(linkAnchor);
+        }
+      });
+    }
+  });
+
+  const handleOpenInNew = () => {
+    window.open(PIPContentLink, '_blank');
+  };
+  const handleShowMaximised = () => {
+    setShowMaximised(!showMaximised);
+  };
+  const handleClosePIPContainer = () => setShowPIP(false);
+
+  return (
+    <div>
+      {showPIP && (
+        <ResizablePIP
+          closePIPContainer={handleClosePIPContainer}
+          handleOpenInNew={handleOpenInNew}
+          handleShowMaximised={handleShowMaximised}
+          showMaximised={showMaximised}
+        >
+          <iframe
+            width="100%"
+            height="100%"
+            src={PIPContentLink}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          />
+        </ResizablePIP>
+      )}
+      <WrappedComponent {...props} />
+    </div>
+  );
+};
+
+export default withDemoVideosAndLinks;