@capillarytech/cap-ui-utils 1.4.15 → 1.4.16
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/cap-ui-utils",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.16",
|
|
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
|
}
|
|
@@ -0,0 +1,173 @@
|
|
|
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 = 250,
|
|
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(1100);
|
|
32
|
+
setPipHeight(690);
|
|
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 : 495,
|
|
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 ? -10 : 10,
|
|
64
|
+
left: showMaximised ? 1088 : 365,
|
|
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: pipHeight,
|
|
85
|
+
width: pipWidth,
|
|
86
|
+
opacity: isHovering ? 0.3 : 1,
|
|
87
|
+
color: "#000",
|
|
88
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
89
|
+
transition: "opacity 0.5s ease-in-out",
|
|
90
|
+
}}
|
|
91
|
+
onMouseEnter={handleMouseEnter}
|
|
92
|
+
onMouseLeave={handleMouseLeave}
|
|
93
|
+
>
|
|
94
|
+
{children}
|
|
95
|
+
</div>
|
|
96
|
+
<CapRow style={{ height: 56 }}>
|
|
97
|
+
<CapColumn span={17}>
|
|
98
|
+
<CapHeading style={{ margin: 18 }} type="h3">
|
|
99
|
+
{footerContent.videoTitle}
|
|
100
|
+
</CapHeading>
|
|
101
|
+
</CapColumn>
|
|
102
|
+
<CapLink
|
|
103
|
+
style={{
|
|
104
|
+
float: "right",
|
|
105
|
+
margin: "18px 18px 18px 0",
|
|
106
|
+
}}
|
|
107
|
+
onClick={handleOpenDoc}
|
|
108
|
+
title={
|
|
109
|
+
<CapHeading
|
|
110
|
+
type="h5"
|
|
111
|
+
style={{
|
|
112
|
+
display: "flex",
|
|
113
|
+
alignItems: "baseline",
|
|
114
|
+
marginTop: 4,
|
|
115
|
+
}}
|
|
116
|
+
>
|
|
117
|
+
<CapLabel type="label15">View docs</CapLabel>
|
|
118
|
+
<CapIcon onClick={handleOpenDoc} size="s" type="open-in-new" />
|
|
119
|
+
</CapHeading>
|
|
120
|
+
}
|
|
121
|
+
/>
|
|
122
|
+
</CapRow>
|
|
123
|
+
{/* </ResizableBox> */}
|
|
124
|
+
{isHovering && (
|
|
125
|
+
<div
|
|
126
|
+
style={{ position: "fixed" }}
|
|
127
|
+
onMouseEnter={handleMouseEnter}
|
|
128
|
+
onMouseLeave={handleMouseLeave}
|
|
129
|
+
>
|
|
130
|
+
<CapIcon
|
|
131
|
+
onClick={handleMaximiseView}
|
|
132
|
+
size="s"
|
|
133
|
+
type={showMaximised ? "minimizer" : "expander"}
|
|
134
|
+
style={{
|
|
135
|
+
float: "right",
|
|
136
|
+
position: "fixed",
|
|
137
|
+
top: showMaximised ? 660 : 224,
|
|
138
|
+
right: 12,
|
|
139
|
+
}}
|
|
140
|
+
/>
|
|
141
|
+
{!showMaximised && (
|
|
142
|
+
<button type="button" style={{ cursor: "pointer" }}>
|
|
143
|
+
<CapIcon
|
|
144
|
+
size="s"
|
|
145
|
+
type="draggable"
|
|
146
|
+
style={{
|
|
147
|
+
float: "right",
|
|
148
|
+
position: "fixed",
|
|
149
|
+
top: showMaximised ? 660 : 224,
|
|
150
|
+
right: 40,
|
|
151
|
+
}}
|
|
152
|
+
/>
|
|
153
|
+
</button>
|
|
154
|
+
)}
|
|
155
|
+
</div>
|
|
156
|
+
)}
|
|
157
|
+
</div>
|
|
158
|
+
</Draggable>
|
|
159
|
+
);
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
ResizablePIP.propTypes = {
|
|
163
|
+
children: PropTypes.any,
|
|
164
|
+
width: PropTypes.number,
|
|
165
|
+
height: PropTypes.number,
|
|
166
|
+
// minConstraints: PropTypes.array,
|
|
167
|
+
// maxConstraints: PropTypes.array,
|
|
168
|
+
closePIPContainer: PropTypes.func,
|
|
169
|
+
handleShowMaximised: PropTypes.func,
|
|
170
|
+
showMaximised: PropTypes.bool,
|
|
171
|
+
footerContent: PropTypes.object,
|
|
172
|
+
};
|
|
173
|
+
export default ResizablePIP;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import ResizablePIP from "./ResizablePIP";
|
|
4
|
+
import { getElementByXpath } from "./utils";
|
|
5
|
+
|
|
6
|
+
const WithDemoVideosAndLinks = (props) => {
|
|
7
|
+
const { children, targetElements, locale = "en" } = props;
|
|
8
|
+
const [showPIP, setShowPIP] = useState(false);
|
|
9
|
+
const [PIPContentLink, setPIPContentLink] = useState("");
|
|
10
|
+
const [PIPFooterContent, setPIPFooterContent] = useState({});
|
|
11
|
+
const [showMaximised, setShowMaximised] = useState(false);
|
|
12
|
+
const cssSelectors = [];
|
|
13
|
+
if (Object.keys(targetElements || {})?.length) {
|
|
14
|
+
Object.keys(targetElements).map((targetElement) => {
|
|
15
|
+
cssSelectors.push({
|
|
16
|
+
cssSelector: targetElement,
|
|
17
|
+
locale,
|
|
18
|
+
...targetElements[targetElement],
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
cssSelectors.forEach((selector) => {
|
|
24
|
+
const {
|
|
25
|
+
support_link: { target_url: linkTargetUrl = {} } = {},
|
|
26
|
+
support_video: { target_url: videoTargetUrl = {} } = {},
|
|
27
|
+
locale,
|
|
28
|
+
cssSelector,
|
|
29
|
+
} = selector || {};
|
|
30
|
+
let matchedNodesXpath = !!cssSelector && getElementByXpath(cssSelector);
|
|
31
|
+
const handleOnClickVideoLink = () => {
|
|
32
|
+
setPIPContentLink(videoTargetUrl?.[locale]?.href);
|
|
33
|
+
setPIPFooterContent({
|
|
34
|
+
videoTitle: videoTargetUrl?.[locale]?.videoTitle,
|
|
35
|
+
supportDoc: videoTargetUrl?.[locale]?.supportDoc,
|
|
36
|
+
});
|
|
37
|
+
setShowPIP(true);
|
|
38
|
+
};
|
|
39
|
+
const handleOpenSupportLink = () =>
|
|
40
|
+
window.open(linkTargetUrl?.[locale]?.href, "_blank");
|
|
41
|
+
|
|
42
|
+
if (selector?.support_video?.target_url?.default?.href) {
|
|
43
|
+
if (
|
|
44
|
+
!!matchedNodesXpath &&
|
|
45
|
+
!document.getElementById(`demo-video-${cssSelector}`)
|
|
46
|
+
) {
|
|
47
|
+
let videoAnchor = document.createElement("a");
|
|
48
|
+
videoAnchor.textContent = videoTargetUrl?.[locale].label;
|
|
49
|
+
videoAnchor.id = `demo-video-${cssSelector}`;
|
|
50
|
+
videoAnchor.style.marginLeft = "2px";
|
|
51
|
+
videoAnchor.style.marginTop = "2px";
|
|
52
|
+
videoAnchor.style.fontSize = "14px";
|
|
53
|
+
videoAnchor.onclick = handleOnClickVideoLink;
|
|
54
|
+
|
|
55
|
+
const videoIconElement = document.createElement("i");
|
|
56
|
+
videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
57
|
+
<path
|
|
58
|
+
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"
|
|
59
|
+
id="play_svg__a"
|
|
60
|
+
></path>
|
|
61
|
+
</svg>`;
|
|
62
|
+
videoIconElement.onclick = handleOnClickVideoLink;
|
|
63
|
+
videoIconElement.style.marginLeft = "2px";
|
|
64
|
+
videoIconElement.style.cursor = "pointer";
|
|
65
|
+
videoIconElement.style.color = "#2466eb";
|
|
66
|
+
videoIconElement.style.fontSize = "18px";
|
|
67
|
+
|
|
68
|
+
matchedNodesXpath.appendChild(videoIconElement);
|
|
69
|
+
matchedNodesXpath.appendChild(videoAnchor);
|
|
70
|
+
}
|
|
71
|
+
} else if (selector?.support_link?.target_url?.default?.href) {
|
|
72
|
+
if (
|
|
73
|
+
!!matchedNodesXpath &&
|
|
74
|
+
!document.getElementById(`support-link-${cssSelector}`)
|
|
75
|
+
) {
|
|
76
|
+
let linkAnchor = document.createElement("a");
|
|
77
|
+
linkAnchor.href = linkTargetUrl?.[locale]?.href;
|
|
78
|
+
linkAnchor.textContent = linkTargetUrl?.[locale].label;
|
|
79
|
+
linkAnchor.target = "_blank";
|
|
80
|
+
linkAnchor.id = `support-link-${cssSelector}`;
|
|
81
|
+
linkAnchor.style.marginLeft = "2px";
|
|
82
|
+
linkAnchor.style.marginTop = "2px";
|
|
83
|
+
linkAnchor.style.fontSize = "14px";
|
|
84
|
+
linkAnchor.onclick = handleOpenSupportLink;
|
|
85
|
+
|
|
86
|
+
const helpIconElement = document.createElement("i");
|
|
87
|
+
helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
88
|
+
<path
|
|
89
|
+
id="help_svg__a"
|
|
90
|
+
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"
|
|
91
|
+
></path>
|
|
92
|
+
</svg>`;
|
|
93
|
+
helpIconElement.onclick = handleOpenSupportLink;
|
|
94
|
+
helpIconElement.style.marginLeft = "2px";
|
|
95
|
+
helpIconElement.style.cursor = "pointer";
|
|
96
|
+
helpIconElement.style.fontSize = "16px";
|
|
97
|
+
helpIconElement.style.color = "#2466eb";
|
|
98
|
+
|
|
99
|
+
matchedNodesXpath.appendChild(helpIconElement);
|
|
100
|
+
matchedNodesXpath.appendChild(linkAnchor);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
const handleOpenInNew = () => {
|
|
106
|
+
window.open(PIPContentLink, "_blank");
|
|
107
|
+
};
|
|
108
|
+
const handleShowMaximised = (value) => {
|
|
109
|
+
setShowMaximised(value);
|
|
110
|
+
};
|
|
111
|
+
const handleClosePIPContainer = () => {
|
|
112
|
+
setShowMaximised(false);
|
|
113
|
+
setShowPIP(false);
|
|
114
|
+
};
|
|
115
|
+
return (
|
|
116
|
+
<div>
|
|
117
|
+
{showPIP && (
|
|
118
|
+
<ResizablePIP
|
|
119
|
+
closePIPContainer={handleClosePIPContainer}
|
|
120
|
+
handleOpenInNew={handleOpenInNew}
|
|
121
|
+
handleShowMaximised={handleShowMaximised}
|
|
122
|
+
showMaximised={showMaximised}
|
|
123
|
+
footerContent={PIPFooterContent}
|
|
124
|
+
>
|
|
125
|
+
<iframe
|
|
126
|
+
width="100%"
|
|
127
|
+
height="100%"
|
|
128
|
+
src={`${PIPContentLink}?controls=0`}
|
|
129
|
+
title="YouTube video player"
|
|
130
|
+
frameBorder="0"
|
|
131
|
+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
132
|
+
style={{ borderRadius: 4 }}
|
|
133
|
+
/>
|
|
134
|
+
</ResizablePIP>
|
|
135
|
+
)}
|
|
136
|
+
{children}
|
|
137
|
+
</div>
|
|
138
|
+
);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
WithDemoVideosAndLinks.propTypes = {
|
|
142
|
+
children: PropTypes.any,
|
|
143
|
+
locale: PropTypes.string,
|
|
144
|
+
targetElements: PropTypes.object,
|
|
145
|
+
};
|
|
146
|
+
export default WithDemoVideosAndLinks;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export const getElementByXpath = (path) =>
|
|
2
|
+
document.evaluate(
|
|
3
|
+
path,
|
|
4
|
+
document,
|
|
5
|
+
null,
|
|
6
|
+
XPathResult.FIRST_ORDERED_NODE_TYPE,
|
|
7
|
+
null
|
|
8
|
+
).singleNodeValue;
|
|
9
|
+
|
|
10
|
+
export const replaceDynamicAndCompare = (actualStr, templateStr) => {
|
|
11
|
+
templateStr = templateStr.endsWith("/")
|
|
12
|
+
? templateStr.slice(0, templateStr.length - 1)
|
|
13
|
+
: templateStr;
|
|
14
|
+
actualStr = actualStr.endsWith("/")
|
|
15
|
+
? actualStr.slice(0, actualStr.length - 1)
|
|
16
|
+
: actualStr;
|
|
17
|
+
|
|
18
|
+
const templateParts = templateStr.split("/");
|
|
19
|
+
const actualParts = actualStr.split("/");
|
|
20
|
+
if (templateParts.length !== actualParts.length) {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
for (let i = 0; i < templateParts.length; i++) {
|
|
24
|
+
if (templateParts[i].startsWith("{{") && templateParts[i].endsWith("}}")) {
|
|
25
|
+
actualParts[i] = templateParts[i];
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return actualParts.join("/") === templateStr;
|
|
29
|
+
};
|