@capillarytech/cap-ui-utils 1.4.12 → 1.4.13-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +4 -1
  2. package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js +174 -0
  3. package/utils/withDemoVideosAndLinkHOC/index.js +180 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@capillarytech/cap-ui-utils",
3
- "version": "1.4.12",
3
+ "version": "1.4.13-alpha.0",
4
4
  "description": "Utility functions shared accross all the modules",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -8,12 +8,15 @@
8
8
  },
9
9
  "author": "Rajshekar",
10
10
  "dependencies": {
11
+ "@capillarytech/cap-ui-library": "4.1.15",
12
+ "prop-types": "^15.8.1",
11
13
  "react": "^16.13.0",
12
14
  "react-ga": "^2.7.0",
13
15
  "tti-polyfill": "^0.2.2",
14
16
  "moment-timezone": "^0.5.25",
15
17
  "react-intl": "2.7.2",
16
18
  "lodash": "4.17.11",
19
+ "react-resizable": "^3.0.4",
17
20
  "handlebars": "4.0.11"
18
21
  }
19
22
  }
package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js ADDED
@@ -0,0 +1,174 @@
1
+ import React, { useState } from "react";
2
+ import { ResizableBox } from "react-resizable";
3
+ import PropTypes from "prop-types";
4
+ import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
5
+ import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
6
+ import CapLink from "@capillarytech/cap-ui-library/CapLink";
7
+ import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
8
+ import CapRow from "@capillarytech/cap-ui-library/CapRow";
9
+ import Draggable from "react-draggable";
10
+ import "react-resizable/css/styles.css";
11
+ import { CapLabel } from "@capillarytech/cap-ui-library";
12
+
13
+ const ResizablePIP = ({
14
+ children,
15
+ width = 400,
16
+ height = 310,
17
+ showMaximised = false,
18
+ handleShowMaximised,
19
+ minConstraints = [400, 310],
20
+ maxConstraints = [1104, 722],
21
+ closePIPContainer = () => {},
22
+ footerContent = {},
23
+ }) => {
24
+ const [pipWidth, setPipWidth] = useState(width);
25
+ const [pipHeight, setPipHeight] = useState(height);
26
+ const [isHovering, setIsHovering] = useState(false);
27
+ const handleMouseEnter = () => setIsHovering(true);
28
+ const handleMouseLeave = () => setIsHovering(false);
29
+ const handleMaximiseView = () => {
30
+ if (!showMaximised) {
31
+ setPipWidth(1104);
32
+ setPipHeight(722);
33
+ } else {
34
+ setPipWidth(width);
35
+ setPipHeight(height);
36
+ }
37
+ handleShowMaximised(!showMaximised);
38
+ };
39
+
40
+ const handleOpenDoc = () => window.open(footerContent.supportDoc, "_blank");
41
+ return (
42
+ <Draggable handle="button">
43
+ <div
44
+ style={{
45
+ zIndex: "1000",
46
+ position: "absolute",
47
+ left: showMaximised ? 168 : 24,
48
+ top: showMaximised ? 60 : 450,
49
+ boxSizing: "content-box",
50
+ boxShadow:
51
+ "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
52
+ borderRadius: 4,
53
+ backgroundColor: "#fff",
54
+ }}
55
+ >
56
+ {(isHovering || showMaximised) && (
57
+ <CapIcon
58
+ onClick={closePIPContainer}
59
+ size="m"
60
+ type="close"
61
+ style={{
62
+ position: "fixed",
63
+ top: showMaximised ? "-10px" : "10px",
64
+ left: showMaximised ? "1093px" : "365px",
65
+ backgroundColor: showMaximised ? "#dfe2e7" : "unset",
66
+ borderRadius: 48,
67
+ zIndex: 10001,
68
+ }}
69
+ onMouseEnter={handleMouseEnter}
70
+ onMouseLeave={handleMouseLeave}
71
+ />
72
+ )}
73
+ <ResizableBox
74
+ onMouseDown={(e) => {
75
+ e.stopPropagation();
76
+ }}
77
+ width={pipWidth}
78
+ height={pipHeight}
79
+ minConstraints={minConstraints}
80
+ maxConstraints={maxConstraints}
81
+ >
82
+ <div
83
+ style={{
84
+ height: "calc(100% - 56px)",
85
+ opacity: isHovering ? 0.3 : 1,
86
+ color: "#000",
87
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
88
+ transition: "opacity 0.5s ease-in-out",
89
+ }}
90
+ onMouseEnter={handleMouseEnter}
91
+ onMouseLeave={handleMouseLeave}
92
+ >
93
+ {children}
94
+ </div>
95
+ <CapRow style={{ height: 56 }}>
96
+ <CapColumn span={17}>
97
+ <CapHeading style={{ margin: 18 }} type="h3">
98
+ {footerContent.videoTitle}
99
+ </CapHeading>
100
+ </CapColumn>
101
+ <CapLink
102
+ style={{
103
+ float: "right",
104
+ margin: "18px 18px 18px 0",
105
+ }}
106
+ onClick={handleOpenDoc}
107
+ title={
108
+ <CapHeading
109
+ type="h5"
110
+ style={{
111
+ display: "flex",
112
+ alignItems: "baseline",
113
+ marginTop: 4,
114
+ }}
115
+ >
116
+ <CapLabel type="label15">View docs</CapLabel>
117
+ <CapIcon
118
+ onClick={handleOpenDoc}
119
+ size="s"
120
+ type="open-in-new"
121
+ />
122
+ </CapHeading>
123
+ }
124
+ />
125
+ </CapRow>
126
+ </ResizableBox>
127
+ {isHovering && (
128
+ <div
129
+ style={{ position: "fixed" }}
130
+ onMouseEnter={handleMouseEnter}
131
+ onMouseLeave={handleMouseLeave}
132
+ >
133
+ <CapIcon
134
+ onClick={handleMaximiseView}
135
+ size="s"
136
+ type="expander"
137
+ style={{
138
+ float: "right",
139
+ position: "fixed",
140
+ top: showMaximised ? 635 : 224,
141
+ right: 12,
142
+ }}
143
+ />
144
+ <button type="button">
145
+ <CapIcon
146
+ size="s"
147
+ type="draggable"
148
+ style={{
149
+ float: "right",
150
+ position: "fixed",
151
+ top: showMaximised ? 635 : 224,
152
+ right: 40,
153
+ }}
154
+ />
155
+ </button>
156
+ </div>
157
+ )}
158
+ </div>
159
+ </Draggable>
160
+ );
161
+ };
162
+
163
+ ResizablePIP.propTypes = {
164
+ children: PropTypes.any,
165
+ width: PropTypes.number,
166
+ height: PropTypes.number,
167
+ minConstraints: PropTypes.array,
168
+ maxConstraints: PropTypes.array,
169
+ closePIPContainer: PropTypes.func,
170
+ handleShowMaximised: PropTypes.func,
171
+ showMaximised: PropTypes.bool,
172
+ footerContent: PropTypes.object,
173
+ };
174
+ export default ResizablePIP;
package/utils/withDemoVideosAndLinkHOC/index.js ADDED
@@ -0,0 +1,180 @@
1
+ import React, { useState } from "react";
2
+ import PropTypes from "prop-types";
3
+ import ResizablePIP from "./ResizablePIP";
4
+
5
+ /** Sample targetElementsData
6
+ target_elements: {
7
+ '.loyalty-graph-header': {
8
+ support_link: {
9
+ target_url: {
10
+ default: {
11
+ label: 'Help default',
12
+ href: 'https://app.storylane.io/share/v1ilsyhwno8m',
13
+ },
14
+ en: {
15
+ label: 'Help',
16
+ href: 'https://app.storylane.io/share/v1ilsyhwno8m',
17
+ },
18
+ },
19
+ // icon: '',
20
+ // position: 'right',
21
+ // target_opening: '_blank',
22
+ },
23
+ },
24
+ '.performance-time-head-title': {
25
+ support_video: {
26
+ target_url: {
27
+ default: {
28
+ label: 'Demo',
29
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
30
+ },
31
+ en: {
32
+ label: 'Demo',
33
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
34
+ },
35
+ 'zh-CN': {
36
+ label: '演示',
37
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
38
+ },
39
+ },
40
+ // icon: 'play',
41
+ // position: 'right', // right | left | top | bottom
42
+ // target_opening: '_blank',
43
+ },
44
+ },
45
+ },
46
+ */
47
+ const WithDemoVideosAndLinks = (props) => {
48
+ const { children, targetElements, locale = "en" } = props;
49
+ const [showPIP, setShowPIP] = useState(false);
50
+ const [PIPContentLink, setPIPContentLink] = useState("");
51
+ const [PIPFooterContent, setPIPFooterContent] = useState({});
52
+ const [showMaximised, setShowMaximised] = useState(false);
53
+ const cssSelectors = [];
54
+ if (Object.keys(targetElements || {})?.length) {
55
+ Object.keys(targetElements).map((targetElement) => {
56
+ cssSelectors.push({
57
+ cssSelector: targetElement,
58
+ locale,
59
+ ...targetElements[targetElement],
60
+ });
61
+ });
62
+ }
63
+
64
+ cssSelectors.forEach((selector) => {
65
+ const {
66
+ support_link: { target_url: linkTargetUrl = {} } = {},
67
+ support_video: { target_url: videoTargetUrl = {} } = {},
68
+ locale,
69
+ cssSelector,
70
+ } = selector || {};
71
+ let matchedNodes = document.querySelectorAll(selector.cssSelector);
72
+ const handleOnClickVideoLink = () => {
73
+ setPIPContentLink(videoTargetUrl?.[locale]?.href);
74
+ setPIPFooterContent({
75
+ videoTitle: videoTargetUrl?.[locale]?.videoTitle,
76
+ supportDoc: videoTargetUrl?.[locale]?.supportDoc,
77
+ });
78
+ setShowPIP(true);
79
+ };
80
+ const handleOpenSupportLink = () =>
81
+ window.open(linkTargetUrl?.[locale]?.href, "_blank");
82
+
83
+ if (selector?.support_video?.target_url?.default?.href) {
84
+ matchedNodes.forEach((node) => {
85
+ if (!document.getElementById(`demo-video-${cssSelector}`)) {
86
+ let videoAnchor = document.createElement("a");
87
+ videoAnchor.textContent = videoTargetUrl?.[locale].label;
88
+ videoAnchor.id = `demo-video-${cssSelector}`;
89
+ videoAnchor.style.marginLeft = "2px";
90
+ videoAnchor.onclick = handleOnClickVideoLink;
91
+
92
+ const videoIconElement = document.createElement("i");
93
+ videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
94
+ <path
95
+ 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"
96
+ id="play_svg__a"
97
+ ></path>
98
+ </svg>`;
99
+ videoIconElement.onclick = handleOnClickVideoLink;
100
+ videoIconElement.style.marginLeft = "2px";
101
+ videoIconElement.style.cursor = "pointer";
102
+ videoIconElement.style.color = "#2466eb";
103
+ videoIconElement.style.fontSize = "18px";
104
+ node.appendChild(videoIconElement);
105
+ node.appendChild(videoAnchor);
106
+ }
107
+ });
108
+ } else if (selector?.support_link?.target_url?.default?.href) {
109
+ matchedNodes.forEach((node) => {
110
+ if (!document.getElementById(`support-link-${cssSelector}`)) {
111
+ let linkAnchor = document.createElement("a");
112
+ linkAnchor.href = linkTargetUrl?.[locale]?.href;
113
+ linkAnchor.textContent = linkTargetUrl?.[locale].label;
114
+ linkAnchor.target = "_blank";
115
+ linkAnchor.id = `support-link-${cssSelector}`;
116
+ linkAnchor.style.marginLeft = "2px";
117
+ linkAnchor.onclick = handleOpenSupportLink;
118
+
119
+ const helpIconElement = document.createElement("i");
120
+ helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
121
+ <path
122
+ id="help_svg__a"
123
+ 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"
124
+ ></path>
125
+ </svg>`;
126
+ helpIconElement.onclick = handleOpenSupportLink;
127
+ helpIconElement.style.marginLeft = "2px";
128
+ helpIconElement.style.cursor = "pointer";
129
+ helpIconElement.style.fontSize = "16px";
130
+ helpIconElement.style.color = "#2466eb";
131
+
132
+ node.appendChild(helpIconElement);
133
+ node.appendChild(linkAnchor);
134
+ }
135
+ });
136
+ }
137
+ });
138
+
139
+ const handleOpenInNew = () => {
140
+ window.open(PIPContentLink, "_blank");
141
+ };
142
+ const handleShowMaximised = (value) => {
143
+ setShowMaximised(value);
144
+ };
145
+ const handleClosePIPContainer = () => {
146
+ setShowMaximised(false);
147
+ setShowPIP(false);
148
+ };
149
+ return (
150
+ <div>
151
+ {showPIP && (
152
+ <ResizablePIP
153
+ closePIPContainer={handleClosePIPContainer}
154
+ handleOpenInNew={handleOpenInNew}
155
+ handleShowMaximised={handleShowMaximised}
156
+ showMaximised={showMaximised}
157
+ footerContent={PIPFooterContent}
158
+ >
159
+ <iframe
160
+ width="100%"
161
+ height="100%"
162
+ src={`${PIPContentLink}?controls=0`}
163
+ title="YouTube video player"
164
+ frameBorder="0"
165
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
166
+ style={{ borderRadius: 4 }}
167
+ />
168
+ </ResizablePIP>
169
+ )}
170
+ {children}
171
+ </div>
172
+ );
173
+ };
174
+
175
+ WithDemoVideosAndLinks.propTypes = {
176
+ children: PropTypes.any,
177
+ locale: PropTypes.string,
178
+ targetElements: PropTypes.object,
179
+ };
180
+ export default WithDemoVideosAndLinks;