@capillarytech/cap-ui-utils 1.4.6-alpha5.0 → 1.4.6-alpha7.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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/cap-ui-utils",
|
|
3
|
-
"version": "1.4.6-
|
|
3
|
+
"version": "1.4.6-alpha7.0",
|
|
4
4
|
"description": "Utility functions shared accross all the modules",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"author": "Rajshekar",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@capillarytech/cap-ui-library": "4.
|
|
11
|
+
"@capillarytech/cap-ui-library": "4.1.15",
|
|
12
12
|
"prop-types": "^15.8.1",
|
|
13
13
|
"react": "^16.13.0",
|
|
14
14
|
"react-ga": "^2.7.0",
|
|
@@ -3,6 +3,8 @@ 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";
|
|
6
|
+
import CapLink from "@capillarytech/cap-ui-library/CapLink";
|
|
7
|
+
import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
|
|
6
8
|
import CapRow from "@capillarytech/cap-ui-library/CapRow";
|
|
7
9
|
import Draggable from "react-draggable";
|
|
8
10
|
import "react-resizable/css/styles.css";
|
|
@@ -10,114 +12,124 @@ import "react-resizable/css/styles.css";
|
|
|
10
12
|
const ResizablePIP = ({
|
|
11
13
|
children,
|
|
12
14
|
width = 400,
|
|
13
|
-
height =
|
|
15
|
+
height = 310,
|
|
14
16
|
showMaximised = false,
|
|
15
17
|
handleShowMaximised,
|
|
16
|
-
minConstraints = [400,
|
|
17
|
-
maxConstraints = [
|
|
18
|
+
minConstraints = [400, 310],
|
|
19
|
+
maxConstraints = [1104, 722],
|
|
18
20
|
closePIPContainer = () => {},
|
|
19
|
-
|
|
20
|
-
PIPPosition = '',
|
|
21
|
+
footerContent = {},
|
|
21
22
|
}) => {
|
|
22
23
|
const [pipWidth, setPipWidth] = useState(width);
|
|
23
24
|
const [pipHeight, setPipHeight] = useState(height);
|
|
25
|
+
const [isHovering, setIsHovering] = useState(false);
|
|
26
|
+
const handleMouseEnter = () => setIsHovering(true);
|
|
27
|
+
const handleMouseLeave = () => setIsHovering(false);
|
|
24
28
|
const handleMaximiseView = () => {
|
|
25
29
|
if (!showMaximised) {
|
|
26
|
-
setPipWidth(
|
|
27
|
-
setPipHeight(
|
|
30
|
+
setPipWidth(1104);
|
|
31
|
+
setPipHeight(722);
|
|
28
32
|
} else {
|
|
29
33
|
setPipWidth(width);
|
|
30
34
|
setPipHeight(height);
|
|
31
35
|
}
|
|
32
36
|
handleShowMaximised(!showMaximised);
|
|
33
37
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
switch (PIPPosition) {
|
|
38
|
-
case 'topLeft':
|
|
39
|
-
positionStyle.left = 8;
|
|
40
|
-
positionStyle.top = 8;
|
|
41
|
-
break;
|
|
42
|
-
case 'topRight':
|
|
43
|
-
positionStyle.right = '-70vw';
|
|
44
|
-
positionStyle.top = 8;
|
|
45
|
-
break;
|
|
46
|
-
case 'bottomLeft':
|
|
47
|
-
positionStyle.left = 8;
|
|
48
|
-
positionStyle.bottom = '-33vw';
|
|
49
|
-
break;
|
|
50
|
-
case 'bottomRight':
|
|
51
|
-
positionStyle.right = '-70vw';
|
|
52
|
-
positionStyle.bottom = '-33vw';
|
|
53
|
-
break;
|
|
54
|
-
|
|
55
|
-
default:
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
38
|
+
|
|
39
|
+
const handleOpenDoc = () => window.open(footerContent.supportDoc, "_blank");
|
|
58
40
|
return (
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
41
|
+
<Draggable>
|
|
42
|
+
<div
|
|
43
|
+
style={{
|
|
44
|
+
zIndex: "100000",
|
|
45
|
+
position: "absolute",
|
|
46
|
+
left: showMaximised ? 168 : 24,
|
|
47
|
+
top: showMaximised ? 60 : 450,
|
|
48
|
+
boxSizing: "content-box",
|
|
49
|
+
boxShadow:
|
|
50
|
+
"1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
|
|
51
|
+
borderRadius: 4,
|
|
52
|
+
backgroundColor: "#fff",
|
|
53
|
+
}}
|
|
54
|
+
>
|
|
55
|
+
<ResizableBox
|
|
56
|
+
onMouseDown={(e) => {
|
|
57
|
+
e.stopPropagation();
|
|
76
58
|
}}
|
|
59
|
+
width={pipWidth}
|
|
60
|
+
height={pipHeight}
|
|
61
|
+
minConstraints={minConstraints}
|
|
62
|
+
maxConstraints={maxConstraints}
|
|
77
63
|
>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
64
|
+
<div
|
|
65
|
+
style={{
|
|
66
|
+
height: "calc(100% - 56px)",
|
|
67
|
+
opacity: isHovering ? 0.3 : 1,
|
|
68
|
+
color: "#000",
|
|
69
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
70
|
+
transition: "opacity 0.2s ease-in-out",
|
|
71
|
+
}}
|
|
72
|
+
onMouseEnter={handleMouseEnter}
|
|
73
|
+
onMouseLeave={handleMouseLeave}
|
|
74
|
+
>
|
|
75
|
+
{isHovering && (
|
|
76
|
+
<CapIcon
|
|
77
|
+
onClick={closePIPContainer}
|
|
78
|
+
size="m"
|
|
79
|
+
type="close"
|
|
80
|
+
style={{
|
|
81
|
+
position: "fixed",
|
|
82
|
+
top: showMaximised ? "-10px" : "10px",
|
|
83
|
+
left: showMaximised ? "1093px" : "365px",
|
|
84
|
+
backgroundColor: showMaximised ? "#dfe2e7" : "unset",
|
|
85
|
+
borderRadius: 48,
|
|
86
|
+
}}
|
|
87
|
+
/>
|
|
88
|
+
)}
|
|
89
|
+
{children}
|
|
90
|
+
{isHovering && (
|
|
91
|
+
<>
|
|
81
92
|
<CapIcon
|
|
82
93
|
onClick={handleMaximiseView}
|
|
83
|
-
|
|
84
|
-
type="help"
|
|
85
|
-
/>
|
|
86
|
-
<CapIcon
|
|
87
|
-
onClick={handleOpenInNew}
|
|
88
|
-
style={{ marginTop: 8, marginLeft: 4 }}
|
|
94
|
+
size="m"
|
|
89
95
|
type="open-in-new"
|
|
96
|
+
style={{
|
|
97
|
+
float: "right",
|
|
98
|
+
position: "fixed",
|
|
99
|
+
top: showMaximised ? 635 : 224,
|
|
100
|
+
right: 12,
|
|
101
|
+
}}
|
|
90
102
|
/>
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
103
|
+
</>
|
|
104
|
+
)}
|
|
105
|
+
</div>
|
|
106
|
+
<CapRow style={{ height: 56 }}>
|
|
107
|
+
<CapColumn span={17}>
|
|
108
|
+
<CapHeading style={{ margin: 18 }} type="h3">
|
|
109
|
+
{footerContent.videoTitle}
|
|
110
|
+
</CapHeading>
|
|
111
|
+
</CapColumn>
|
|
112
|
+
<CapLink
|
|
113
|
+
style={{
|
|
114
|
+
float: "right",
|
|
115
|
+
margin: "18px 18px 18px 0",
|
|
116
|
+
}}
|
|
117
|
+
onClick={handleOpenDoc}
|
|
118
|
+
title={
|
|
119
|
+
<CapHeading type="h5">
|
|
120
|
+
View docs
|
|
121
|
+
<CapIcon
|
|
122
|
+
onClick={handleOpenDoc}
|
|
123
|
+
size="s"
|
|
124
|
+
type="open-in-new"
|
|
125
|
+
/>
|
|
126
|
+
</CapHeading>
|
|
127
|
+
}
|
|
128
|
+
/>
|
|
117
129
|
</CapRow>
|
|
118
|
-
</
|
|
119
|
-
</
|
|
120
|
-
</
|
|
130
|
+
</ResizableBox>
|
|
131
|
+
</div>
|
|
132
|
+
</Draggable>
|
|
121
133
|
);
|
|
122
134
|
};
|
|
123
135
|
|
|
@@ -128,22 +140,8 @@ ResizablePIP.propTypes = {
|
|
|
128
140
|
minConstraints: PropTypes.array,
|
|
129
141
|
maxConstraints: PropTypes.array,
|
|
130
142
|
closePIPContainer: PropTypes.func,
|
|
131
|
-
handleOpenInNew: PropTypes.func,
|
|
132
143
|
handleShowMaximised: PropTypes.func,
|
|
133
144
|
showMaximised: PropTypes.bool,
|
|
134
|
-
|
|
145
|
+
footerContent: PropTypes.object,
|
|
135
146
|
};
|
|
136
147
|
export default ResizablePIP;
|
|
137
|
-
|
|
138
|
-
/** put this is draggable div
|
|
139
|
-
* .pipWindow:hover {
|
|
140
|
-
cursor: grab;
|
|
141
|
-
}
|
|
142
|
-
.pipWindow:active {
|
|
143
|
-
cursor: grabbing;
|
|
144
|
-
outline: -webkit-focus-ring-color auto 1px;
|
|
145
|
-
outline-color: -webkit-focus-ring-color;
|
|
146
|
-
outline-style: auto;
|
|
147
|
-
outline-width: 1px;
|
|
148
|
-
}
|
|
149
|
-
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import ResizablePIP from './ResizablePIP';
|
|
1
|
+
import React, { useState } from "react";
|
|
3
2
|
import PropTypes from "prop-types";
|
|
3
|
+
import ResizablePIP from "./ResizablePIP";
|
|
4
4
|
|
|
5
5
|
/** Sample targetElementsData
|
|
6
6
|
target_elements: {
|
|
@@ -45,14 +45,14 @@ import PropTypes from "prop-types";
|
|
|
45
45
|
},
|
|
46
46
|
*/
|
|
47
47
|
const WithDemoVideosAndLinks = (props) => {
|
|
48
|
-
const { children, targetElements, locale =
|
|
48
|
+
const { children, targetElements, locale = "en" } = props;
|
|
49
49
|
const [showPIP, setShowPIP] = useState(false);
|
|
50
|
-
const [PIPContentLink, setPIPContentLink] = useState(
|
|
51
|
-
const [
|
|
50
|
+
const [PIPContentLink, setPIPContentLink] = useState("");
|
|
51
|
+
const [PIPFooterContent, setPIPFooterContent] = useState({});
|
|
52
52
|
const [showMaximised, setShowMaximised] = useState(false);
|
|
53
53
|
const cssSelectors = [];
|
|
54
54
|
if (Object.keys(targetElements || {})?.length) {
|
|
55
|
-
Object.keys(targetElements).map(targetElement => {
|
|
55
|
+
Object.keys(targetElements).map((targetElement) => {
|
|
56
56
|
cssSelectors.push({
|
|
57
57
|
cssSelector: targetElement,
|
|
58
58
|
locale,
|
|
@@ -61,32 +61,35 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
cssSelectors.forEach(selector => {
|
|
64
|
+
cssSelectors.forEach((selector) => {
|
|
65
65
|
const {
|
|
66
66
|
support_link: { target_url: linkTargetUrl = {} } = {},
|
|
67
|
-
support_video: { target_url: videoTargetUrl = {}
|
|
67
|
+
support_video: { target_url: videoTargetUrl = {} } = {},
|
|
68
68
|
locale,
|
|
69
69
|
cssSelector,
|
|
70
70
|
} = selector || {};
|
|
71
71
|
let matchedNodes = document.querySelectorAll(selector.cssSelector);
|
|
72
72
|
const handleOnClickVideoLink = () => {
|
|
73
73
|
setPIPContentLink(videoTargetUrl?.[locale]?.href);
|
|
74
|
-
|
|
74
|
+
setPIPFooterContent({
|
|
75
|
+
videoTitle: videoTargetUrl?.[locale]?.videoTitle,
|
|
76
|
+
supportDoc: videoTargetUrl?.[locale]?.supportDoc,
|
|
77
|
+
});
|
|
75
78
|
setShowPIP(true);
|
|
76
79
|
};
|
|
77
80
|
const handleOpenSupportLink = () =>
|
|
78
|
-
window.open(linkTargetUrl?.[locale]?.href,
|
|
81
|
+
window.open(linkTargetUrl?.[locale]?.href, "_blank");
|
|
79
82
|
|
|
80
83
|
if (selector?.support_video?.target_url?.default?.href) {
|
|
81
|
-
matchedNodes.forEach(node => {
|
|
84
|
+
matchedNodes.forEach((node) => {
|
|
82
85
|
if (!document.getElementById(`demo-video-${cssSelector}`)) {
|
|
83
|
-
let videoAnchor = document.createElement(
|
|
86
|
+
let videoAnchor = document.createElement("a");
|
|
84
87
|
videoAnchor.textContent = videoTargetUrl?.[locale].label;
|
|
85
88
|
videoAnchor.id = `demo-video-${cssSelector}`;
|
|
86
|
-
videoAnchor.style.marginLeft =
|
|
89
|
+
videoAnchor.style.marginLeft = "2px";
|
|
87
90
|
videoAnchor.onclick = handleOnClickVideoLink;
|
|
88
91
|
|
|
89
|
-
const videoIconElement = document.createElement(
|
|
92
|
+
const videoIconElement = document.createElement("i");
|
|
90
93
|
videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
91
94
|
<path
|
|
92
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"
|
|
@@ -94,26 +97,26 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
94
97
|
></path>
|
|
95
98
|
</svg>`;
|
|
96
99
|
videoIconElement.onclick = handleOnClickVideoLink;
|
|
97
|
-
videoIconElement.style.marginLeft =
|
|
98
|
-
videoIconElement.style.cursor =
|
|
99
|
-
videoIconElement.style.color =
|
|
100
|
-
videoIconElement.style.fontSize =
|
|
100
|
+
videoIconElement.style.marginLeft = "2px";
|
|
101
|
+
videoIconElement.style.cursor = "pointer";
|
|
102
|
+
videoIconElement.style.color = "#2466eb";
|
|
103
|
+
videoIconElement.style.fontSize = "18px";
|
|
101
104
|
node.appendChild(videoIconElement);
|
|
102
105
|
node.appendChild(videoAnchor);
|
|
103
106
|
}
|
|
104
107
|
});
|
|
105
108
|
} else if (selector?.support_link?.target_url?.default?.href) {
|
|
106
|
-
matchedNodes.forEach(node => {
|
|
109
|
+
matchedNodes.forEach((node) => {
|
|
107
110
|
if (!document.getElementById(`support-link-${cssSelector}`)) {
|
|
108
|
-
let linkAnchor = document.createElement(
|
|
111
|
+
let linkAnchor = document.createElement("a");
|
|
109
112
|
linkAnchor.href = linkTargetUrl?.[locale]?.href;
|
|
110
113
|
linkAnchor.textContent = linkTargetUrl?.[locale].label;
|
|
111
|
-
linkAnchor.target =
|
|
114
|
+
linkAnchor.target = "_blank";
|
|
112
115
|
linkAnchor.id = `support-link-${cssSelector}`;
|
|
113
|
-
linkAnchor.style.marginLeft =
|
|
116
|
+
linkAnchor.style.marginLeft = "2px";
|
|
114
117
|
linkAnchor.onclick = handleOpenSupportLink;
|
|
115
118
|
|
|
116
|
-
const helpIconElement = document.createElement(
|
|
119
|
+
const helpIconElement = document.createElement("i");
|
|
117
120
|
helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
|
|
118
121
|
<path
|
|
119
122
|
id="help_svg__a"
|
|
@@ -121,10 +124,10 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
121
124
|
></path>
|
|
122
125
|
</svg>`;
|
|
123
126
|
helpIconElement.onclick = handleOpenSupportLink;
|
|
124
|
-
helpIconElement.style.marginLeft =
|
|
125
|
-
helpIconElement.style.cursor =
|
|
126
|
-
helpIconElement.style.fontSize =
|
|
127
|
-
helpIconElement.style.color =
|
|
127
|
+
helpIconElement.style.marginLeft = "2px";
|
|
128
|
+
helpIconElement.style.cursor = "pointer";
|
|
129
|
+
helpIconElement.style.fontSize = "16px";
|
|
130
|
+
helpIconElement.style.color = "#2466eb";
|
|
128
131
|
|
|
129
132
|
node.appendChild(helpIconElement);
|
|
130
133
|
node.appendChild(linkAnchor);
|
|
@@ -134,16 +137,12 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
134
137
|
});
|
|
135
138
|
|
|
136
139
|
const handleOpenInNew = () => {
|
|
137
|
-
window.open(PIPContentLink,
|
|
140
|
+
window.open(PIPContentLink, "_blank");
|
|
138
141
|
};
|
|
139
|
-
const handleShowMaximised = value => {
|
|
142
|
+
const handleShowMaximised = (value) => {
|
|
140
143
|
setShowMaximised(value);
|
|
141
144
|
};
|
|
142
|
-
const handleClosePIPContainer = () =>
|
|
143
|
-
setShowPIP(false);
|
|
144
|
-
setPIPPosition('');
|
|
145
|
-
}
|
|
146
|
-
|
|
145
|
+
const handleClosePIPContainer = () => setShowPIP(false);
|
|
147
146
|
return (
|
|
148
147
|
<div>
|
|
149
148
|
{showPIP && (
|
|
@@ -152,15 +151,16 @@ const WithDemoVideosAndLinks = (props) => {
|
|
|
152
151
|
handleOpenInNew={handleOpenInNew}
|
|
153
152
|
handleShowMaximised={handleShowMaximised}
|
|
154
153
|
showMaximised={showMaximised}
|
|
155
|
-
|
|
154
|
+
footerContent={PIPFooterContent}
|
|
156
155
|
>
|
|
157
156
|
<iframe
|
|
158
157
|
width="100%"
|
|
159
158
|
height="100%"
|
|
160
|
-
src={PIPContentLink}
|
|
159
|
+
src={`${PIPContentLink}?controls=0`}
|
|
161
160
|
title="YouTube video player"
|
|
162
161
|
frameBorder="0"
|
|
163
162
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
163
|
+
style={{ borderRadius: 4 }}
|
|
164
164
|
/>
|
|
165
165
|
</ResizablePIP>
|
|
166
166
|
)}
|