@capillarytech/cap-ui-utils 1.4.13-alpha.3 → 1.4.15
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.15",
|
|
4
4
|
"description": "Utility functions shared accross all the modules",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,15 +8,12 @@
|
|
|
8
8
|
},
|
|
9
9
|
"author": "Rajshekar",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@capillarytech/cap-ui-library": "4.1.15",
|
|
12
|
-
"prop-types": "^15.8.1",
|
|
13
11
|
"react": "^16.13.0",
|
|
14
12
|
"react-ga": "^2.7.0",
|
|
15
13
|
"tti-polyfill": "^0.2.2",
|
|
16
14
|
"moment-timezone": "^0.5.25",
|
|
17
15
|
"react-intl": "2.7.2",
|
|
18
16
|
"lodash": "4.17.11",
|
|
19
|
-
"react-resizable": "^3.0.4",
|
|
20
17
|
"handlebars": "4.0.11"
|
|
21
18
|
}
|
|
22
19
|
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
export const entityMap = {
|
|
2
|
+
reportName: "report_name",
|
|
3
|
+
chartName: "chart_name",
|
|
4
|
+
kpiCustomerName: "kpi_customer_name",
|
|
5
|
+
kpiName: "kpi_name",
|
|
6
|
+
kpiCategoryName: "kpi_category_name",
|
|
7
|
+
categoryName: "category_name",
|
|
8
|
+
kpiDescription: "kpi_description",
|
|
9
|
+
factTable: "fact_table",
|
|
10
|
+
dimensionName: "dimension_name",
|
|
11
|
+
standardFilterName: "standardfilter_name",
|
|
12
|
+
kpiVariableName: "kpi_variable_name",
|
|
13
|
+
kpiVariableDescription: "kpi_variable_description",
|
|
14
|
+
templateName: "template_name",
|
|
15
|
+
templateDescription: "template_description",
|
|
16
|
+
measureName: "measure_name",
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export function getEntityNameAsKey(type, name) {
|
|
20
|
+
const replaceChars = {
|
|
21
|
+
"%": "pc",
|
|
22
|
+
"-": "hyphen",
|
|
23
|
+
"(": "",
|
|
24
|
+
")": "",
|
|
25
|
+
"/": "",
|
|
26
|
+
".": "_",
|
|
27
|
+
};
|
|
28
|
+
const normalizedName =
|
|
29
|
+
name &&
|
|
30
|
+
name
|
|
31
|
+
.trim()
|
|
32
|
+
.replace(/\s/g, "_")
|
|
33
|
+
.toLowerCase()
|
|
34
|
+
.replace(/%|-|\(|\)|\//g, (match) => replaceChars[match]);
|
|
35
|
+
switch (type) {
|
|
36
|
+
case "kpi_name":
|
|
37
|
+
return {
|
|
38
|
+
id: `app.globals.kpis.name.kpi_${normalizedName}_name`,
|
|
39
|
+
defaultMessage: name,
|
|
40
|
+
};
|
|
41
|
+
case "category_name":
|
|
42
|
+
return {
|
|
43
|
+
id: `app.globals.category.name.category_${normalizedName}_name`,
|
|
44
|
+
defaultMessage: name,
|
|
45
|
+
};
|
|
46
|
+
case "report_name":
|
|
47
|
+
return {
|
|
48
|
+
id: `app.globals.report.name.report_${normalizedName}_name`,
|
|
49
|
+
defaultMessage: name,
|
|
50
|
+
};
|
|
51
|
+
case "chart_name":
|
|
52
|
+
return {
|
|
53
|
+
id: `app.globals.chart.name.chart_${normalizedName}_name`,
|
|
54
|
+
defaultMessage: name,
|
|
55
|
+
};
|
|
56
|
+
case "kpi_description":
|
|
57
|
+
return {
|
|
58
|
+
id: `app.globals.kpis.description.kpi_${normalizedName}_description`,
|
|
59
|
+
defaultMessage: name,
|
|
60
|
+
};
|
|
61
|
+
case "fact_table":
|
|
62
|
+
return {
|
|
63
|
+
id: `app.globals.dimensions.facttable.dim_${normalizedName}_facttable`,
|
|
64
|
+
defaultMessage: name,
|
|
65
|
+
};
|
|
66
|
+
case "dimension_name":
|
|
67
|
+
return {
|
|
68
|
+
id: `app.globals.dimensions.name.dim_${normalizedName}_name`,
|
|
69
|
+
defaultMessage: name,
|
|
70
|
+
};
|
|
71
|
+
case "standardfilter_name":
|
|
72
|
+
return {
|
|
73
|
+
id: `app.globals.stdfilter_${normalizedName}_name`,
|
|
74
|
+
defaultMessage: name,
|
|
75
|
+
};
|
|
76
|
+
case "kpi_variable_name":
|
|
77
|
+
return {
|
|
78
|
+
id: `app.globals.kpis.variable.kpi_var_${normalizedName}_name`,
|
|
79
|
+
defaultMessage: name,
|
|
80
|
+
};
|
|
81
|
+
case "kpi_variable_description":
|
|
82
|
+
return {
|
|
83
|
+
id: `app.globals.kpis.variable.kpi_var_${normalizedName}_description`,
|
|
84
|
+
defaultMessage: name,
|
|
85
|
+
};
|
|
86
|
+
case "template_name":
|
|
87
|
+
return {
|
|
88
|
+
id: `app.globals.template.name.template_${normalizedName}_name`,
|
|
89
|
+
defaultMessage: name,
|
|
90
|
+
};
|
|
91
|
+
case "template_description":
|
|
92
|
+
return {
|
|
93
|
+
id: `app.globals.template.description.template_${normalizedName}_name`,
|
|
94
|
+
defaultMessage: name,
|
|
95
|
+
};
|
|
96
|
+
case "measure_name":
|
|
97
|
+
return {
|
|
98
|
+
id: `app.globals.measure.name.measure_${normalizedName}_name`,
|
|
99
|
+
defaultMessage: name,
|
|
100
|
+
};
|
|
101
|
+
case "kpi_category_name":
|
|
102
|
+
return {
|
|
103
|
+
id: `app.globals.kpis.category.kpi_category_${normalizedName}_name`,
|
|
104
|
+
defaultMessage: name,
|
|
105
|
+
};
|
|
106
|
+
case "kpi_customer_name":
|
|
107
|
+
return {
|
|
108
|
+
id: `app.globals.kpis.description.kpi_customer_${normalizedName}_name`,
|
|
109
|
+
defaultMessage: name,
|
|
110
|
+
};
|
|
111
|
+
default:
|
|
112
|
+
return {
|
|
113
|
+
id: `app.globals.report.name.report_${normalizedName}_name`,
|
|
114
|
+
defaultMessage: name,
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -1,173 +0,0 @@
|
|
|
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;
|
|
@@ -1,146 +0,0 @@
|
|
|
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;
|
|
@@ -1,29 +0,0 @@
|
|
|
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
|
-
};
|