@capillarytech/cap-ui-utils 1.4.13-alpha.0 → 1.4.13-alpha.2
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,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { ResizableBox } from "react-resizable";
|
|
2
|
+
// import { ResizableBox } from "react-resizable";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
|
|
5
5
|
import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
|
|
@@ -13,11 +13,11 @@ import { CapLabel } from "@capillarytech/cap-ui-library";
|
|
|
13
13
|
const ResizablePIP = ({
|
|
14
14
|
children,
|
|
15
15
|
width = 400,
|
|
16
|
-
height =
|
|
16
|
+
height = 250,
|
|
17
17
|
showMaximised = false,
|
|
18
18
|
handleShowMaximised,
|
|
19
|
-
minConstraints = [400, 310],
|
|
20
|
-
maxConstraints = [1104, 722],
|
|
19
|
+
// minConstraints = [400, 310],
|
|
20
|
+
// maxConstraints = [1104, 722],
|
|
21
21
|
closePIPContainer = () => {},
|
|
22
22
|
footerContent = {},
|
|
23
23
|
}) => {
|
|
@@ -28,8 +28,8 @@ const ResizablePIP = ({
|
|
|
28
28
|
const handleMouseLeave = () => setIsHovering(false);
|
|
29
29
|
const handleMaximiseView = () => {
|
|
30
30
|
if (!showMaximised) {
|
|
31
|
-
setPipWidth(
|
|
32
|
-
setPipHeight(
|
|
31
|
+
setPipWidth(1100);
|
|
32
|
+
setPipHeight(690);
|
|
33
33
|
} else {
|
|
34
34
|
setPipWidth(width);
|
|
35
35
|
setPipHeight(height);
|
|
@@ -45,7 +45,7 @@ const ResizablePIP = ({
|
|
|
45
45
|
zIndex: "1000",
|
|
46
46
|
position: "absolute",
|
|
47
47
|
left: showMaximised ? 168 : 24,
|
|
48
|
-
top: showMaximised ? 60 :
|
|
48
|
+
top: showMaximised ? 60 : 495,
|
|
49
49
|
boxSizing: "content-box",
|
|
50
50
|
boxShadow:
|
|
51
51
|
"1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
|
|
@@ -60,8 +60,8 @@ const ResizablePIP = ({
|
|
|
60
60
|
type="close"
|
|
61
61
|
style={{
|
|
62
62
|
position: "fixed",
|
|
63
|
-
top: showMaximised ?
|
|
64
|
-
left: showMaximised ?
|
|
63
|
+
top: showMaximised ? -10 : 10,
|
|
64
|
+
left: showMaximised ? 1088 : 365,
|
|
65
65
|
backgroundColor: showMaximised ? "#dfe2e7" : "unset",
|
|
66
66
|
borderRadius: 48,
|
|
67
67
|
zIndex: 10001,
|
|
@@ -70,7 +70,7 @@ const ResizablePIP = ({
|
|
|
70
70
|
onMouseLeave={handleMouseLeave}
|
|
71
71
|
/>
|
|
72
72
|
)}
|
|
73
|
-
<ResizableBox
|
|
73
|
+
{/* <ResizableBox
|
|
74
74
|
onMouseDown={(e) => {
|
|
75
75
|
e.stopPropagation();
|
|
76
76
|
}}
|
|
@@ -78,52 +78,49 @@ const ResizablePIP = ({
|
|
|
78
78
|
height={pipHeight}
|
|
79
79
|
minConstraints={minConstraints}
|
|
80
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}
|
|
81
93
|
>
|
|
82
|
-
|
|
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
|
|
83
103
|
style={{
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
color: "#000",
|
|
87
|
-
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
88
|
-
transition: "opacity 0.5s ease-in-out",
|
|
104
|
+
float: "right",
|
|
105
|
+
margin: "18px 18px 18px 0",
|
|
89
106
|
}}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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" />
|
|
99
119
|
</CapHeading>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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>
|
|
120
|
+
}
|
|
121
|
+
/>
|
|
122
|
+
</CapRow>
|
|
123
|
+
{/* </ResizableBox> */}
|
|
127
124
|
{isHovering && (
|
|
128
125
|
<div
|
|
129
126
|
style={{ position: "fixed" }}
|
|
@@ -133,26 +130,28 @@ const ResizablePIP = ({
|
|
|
133
130
|
<CapIcon
|
|
134
131
|
onClick={handleMaximiseView}
|
|
135
132
|
size="s"
|
|
136
|
-
type="expander"
|
|
133
|
+
type={showMaximised ? "minimizer" : "expander"}
|
|
137
134
|
style={{
|
|
138
135
|
float: "right",
|
|
139
136
|
position: "fixed",
|
|
140
|
-
top: showMaximised ?
|
|
137
|
+
top: showMaximised ? 660 : 224,
|
|
141
138
|
right: 12,
|
|
142
139
|
}}
|
|
143
140
|
/>
|
|
144
|
-
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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
|
+
)}
|
|
156
155
|
</div>
|
|
157
156
|
)}
|
|
158
157
|
</div>
|
|
@@ -164,8 +163,8 @@ ResizablePIP.propTypes = {
|
|
|
164
163
|
children: PropTypes.any,
|
|
165
164
|
width: PropTypes.number,
|
|
166
165
|
height: PropTypes.number,
|
|
167
|
-
minConstraints: PropTypes.array,
|
|
168
|
-
maxConstraints: PropTypes.array,
|
|
166
|
+
// minConstraints: PropTypes.array,
|
|
167
|
+
// maxConstraints: PropTypes.array,
|
|
169
168
|
closePIPContainer: PropTypes.func,
|
|
170
169
|
handleShowMaximised: PropTypes.func,
|
|
171
170
|
showMaximised: PropTypes.bool,
|
|
@@ -1,49 +1,8 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import ResizablePIP from "./ResizablePIP";
|
|
4
|
+
import { getElementByXpath } from "./utils";
|
|
4
5
|
|
|
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
6
|
const WithDemoVideosAndLinks = (props) => {
|
|
48
7
|
const { children, targetElements, locale = "en" } = props;
|
|
49
8
|
const [showPIP, setShowPIP] = useState(false);
|
|
@@ -68,7 +27,7 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
68
27
|
locale,
|
|
69
28
|
cssSelector,
|
|
70
29
|
} = selector || {};
|
|
71
|
-
let
|
|
30
|
+
let matchedNodesXpath = !!cssSelector && getElementByXpath(cssSelector);
|
|
72
31
|
const handleOnClickVideoLink = () => {
|
|
73
32
|
setPIPContentLink(videoTargetUrl?.[locale]?.href);
|
|
74
33
|
setPIPFooterContent({
|
|
@@ -81,58 +40,65 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
81
40
|
window.open(linkTargetUrl?.[locale]?.href, "_blank");
|
|
82
41
|
|
|
83
42
|
if (selector?.support_video?.target_url?.default?.href) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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;
|
|
91
54
|
|
|
92
|
-
|
|
93
|
-
|
|
55
|
+
const videoIconElement = document.createElement("i");
|
|
56
|
+
videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
94
57
|
<path
|
|
95
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"
|
|
96
59
|
id="play_svg__a"
|
|
97
60
|
></path>
|
|
98
61
|
</svg>`;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
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
|
+
}
|
|
108
71
|
} else if (selector?.support_link?.target_url?.default?.href) {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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;
|
|
118
85
|
|
|
119
|
-
|
|
120
|
-
|
|
86
|
+
const helpIconElement = document.createElement("i");
|
|
87
|
+
helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
121
88
|
<path
|
|
122
89
|
id="help_svg__a"
|
|
123
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"
|
|
124
91
|
></path>
|
|
125
92
|
</svg>`;
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
93
|
+
helpIconElement.onclick = handleOpenSupportLink;
|
|
94
|
+
helpIconElement.style.marginLeft = "2px";
|
|
95
|
+
helpIconElement.style.cursor = "pointer";
|
|
96
|
+
helpIconElement.style.fontSize = "16px";
|
|
97
|
+
helpIconElement.style.color = "#2466eb";
|
|
131
98
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
});
|
|
99
|
+
matchedNodesXpath.appendChild(helpIconElement);
|
|
100
|
+
matchedNodesXpath.appendChild(linkAnchor);
|
|
101
|
+
}
|
|
136
102
|
}
|
|
137
103
|
});
|
|
138
104
|
|
|
@@ -0,0 +1,25 @@
|
|
|
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 (
|
|
18
|
+
templateParts[i].startsWith('{{') &&
|
|
19
|
+
templateParts[i].endsWith('}}')
|
|
20
|
+
) {
|
|
21
|
+
actualParts[i] = templateParts[i];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return actualParts.join('/') === templateStr;
|
|
25
|
+
}
|