@capillarytech/cap-ui-utils 1.4.12 → 1.4.13-alpha.1
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.13-alpha.1",
|
|
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,22 @@
|
|
|
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
|
+
const templateParts = templateStr.split("/");
|
|
12
|
+
const actualParts = actualStr.split("/");
|
|
13
|
+
if (templateParts.length !== actualParts.length) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
for (let i = 0; i < templateParts.length; i++) {
|
|
17
|
+
if (templateParts[i].startsWith("{{") && templateParts[i].endsWith("}}")) {
|
|
18
|
+
actualParts[i] = templateParts[i];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return actualParts.join("/") === templateStr;
|
|
22
|
+
}
|