@capillarytech/cap-ui-utils 1.4.5 → 1.4.6-alpha1.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.
Files changed (3) hide show
  1. package/package.json +5 -2
  2. package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js +126 -0
  3. package/utils/withDemoVideosAndLinkHOC/index.js +163 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@capillarytech/cap-ui-utils",
3
- "version": "1.4.5",
3
+ "version": "1.4.6-alpha1.0",
4
4
  "description": "Utility functions shared accross all the modules",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -8,11 +8,14 @@
8
8
  },
9
9
  "author": "Rajshekar",
10
10
  "dependencies": {
11
+ "@capillarytech/cap-ui-library": "4.0.1",
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
- "lodash": "4.17.11"
18
+ "lodash": "4.17.11",
19
+ "react-resizable": "^3.0.4"
17
20
  }
18
21
  }
package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js ADDED
@@ -0,0 +1,126 @@
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 CapRow from "@capillarytech/cap-ui-library/CapRow";
7
+ import Draggable from "react-draggable";
8
+ import "react-resizable/css/styles.css";
9
+
10
+ const ResizablePIP = ({
11
+ children,
12
+ width = 400,
13
+ height = 260,
14
+ showMaximised = false,
15
+ setShowMaximised,
16
+ minConstraints = [400, 260],
17
+ maxConstraints = [1404, 900],
18
+ closePIPContainer = () => {},
19
+ handleOpenInNew = () => {},
20
+ }) => {
21
+ const [pipWidth, setPipWidth] = useState(width);
22
+ const [pipHeight, setPipHeight] = useState(height);
23
+ const handleMaximiseView = () => {
24
+ setPipWidth(1404);
25
+ setPipHeight(730);
26
+ setShowMaximised(!showMaximised);
27
+ };
28
+ return (
29
+ <div
30
+ style={{
31
+ position: "absolute",
32
+ left: 8,
33
+ top: -56,
34
+ }}
35
+ >
36
+ <Draggable>
37
+ <div
38
+ style={{
39
+ backgroundColor: "#242d36",
40
+ zIndex: "100000",
41
+ position: "fixed",
42
+ fontSize: "14px",
43
+ fontWeight: "200",
44
+ lineHeight: "1.5",
45
+ color: "rgb(248, 248, 249)",
46
+ boxSizing: "content-box",
47
+ boxShadow:
48
+ "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
49
+ borderRadius: "0.28571429rem",
50
+ }}
51
+ >
52
+ <CapRow>
53
+ <CapRow>
54
+ <CapColumn span={1} offset={18}>
55
+ <CapIcon
56
+ onClick={handleMaximiseView}
57
+ style={{ marginTop: "8px" }}
58
+ type="help"
59
+ />
60
+ </CapColumn>
61
+ <CapColumn span={1} offset={1}>
62
+ <CapIcon
63
+ onClick={handleOpenInNew}
64
+ style={{ marginTop: "8px" }}
65
+ type="open-in-new"
66
+ />
67
+ </CapColumn>
68
+ <CapColumn span={1} offset={1}>
69
+ <CapIcon
70
+ onClick={closePIPContainer}
71
+ style={{ marginTop: "8px" }}
72
+ type="close"
73
+ />
74
+ </CapColumn>
75
+ </CapRow>
76
+ <CapRow>
77
+ <ResizableBox
78
+ onMouseDown={(e) => {
79
+ e.stopPropagation();
80
+ }}
81
+ style={{
82
+ background: "#202429",
83
+ margin: "8px",
84
+ borderRadius: "4px",
85
+ overflow: "auto",
86
+ }}
87
+ width={pipWidth}
88
+ height={pipHeight}
89
+ minConstraints={minConstraints}
90
+ maxConstraints={maxConstraints}
91
+ >
92
+ {children}
93
+ </ResizableBox>
94
+ </CapRow>
95
+ </CapRow>
96
+ </div>
97
+ </Draggable>
98
+ </div>
99
+ );
100
+ };
101
+
102
+ ResizablePIP.propTypes = {
103
+ children: PropTypes.any,
104
+ width: PropTypes.number,
105
+ height: PropTypes.number,
106
+ minConstraints: PropTypes.array,
107
+ maxConstraints: PropTypes.array,
108
+ closePIPContainer: PropTypes.func,
109
+ handleOpenInNew: PropTypes.func,
110
+ setShowMaximised: PropTypes.func,
111
+ showMaximised: PropTypes.bool,
112
+ };
113
+ export default ResizablePIP;
114
+
115
+ /** put this is draggable div
116
+ * .pipWindow:hover {
117
+ cursor: grab;
118
+ }
119
+ .pipWindow:active {
120
+ cursor: grabbing;
121
+ outline: -webkit-focus-ring-color auto 1px;
122
+ outline-color: -webkit-focus-ring-color;
123
+ outline-style: auto;
124
+ outline-width: 1px;
125
+ }
126
+ */
package/utils/withDemoVideosAndLinkHOC/index.js ADDED
@@ -0,0 +1,163 @@
1
+ import React, { useState } from 'react';
2
+ import ResizablePIP from './ResizablePIP';
3
+
4
+ /** Sample targetElementsData
5
+ target_elements: {
6
+ '.loyalty-graph-header': {
7
+ support_link: {
8
+ target_url: {
9
+ default: {
10
+ label: 'Help default',
11
+ href: 'https://app.storylane.io/share/v1ilsyhwno8m',
12
+ },
13
+ en: {
14
+ label: 'Help',
15
+ href: 'https://app.storylane.io/share/v1ilsyhwno8m',
16
+ },
17
+ },
18
+ // icon: '',
19
+ // position: 'right',
20
+ // target_opening: '_blank',
21
+ },
22
+ },
23
+ '.performance-time-head-title': {
24
+ support_video: {
25
+ target_url: {
26
+ default: {
27
+ label: 'Demo',
28
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
29
+ },
30
+ en: {
31
+ label: 'Demo',
32
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
33
+ },
34
+ 'zh-CN': {
35
+ label: '演示',
36
+ href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
37
+ },
38
+ },
39
+ // icon: 'play',
40
+ // position: 'right', // right | left | top | bottom
41
+ // target_opening: '_blank',
42
+ },
43
+ },
44
+ },
45
+ */
46
+ const withDemoVideosAndLinks = (WrappedComponent, targetElements = {}, locale = 'en') => props => {
47
+ const [showPIP, setShowPIP] = useState(false);
48
+ const [PIPContentLink, setPIPContentLink] = useState('');
49
+ const [showMaximised, setShowMaximised] = useState(false);
50
+ if (Object.keys(targetElements)?.length) {
51
+ Object.keys(targetElements).map(targetElement => {
52
+ cssSelectors.push({
53
+ cssSelector: targetElement,
54
+ locale,
55
+ ...targetElements[targetElement],
56
+ });
57
+ });
58
+ }
59
+
60
+ cssSelectors.forEach(selector => {
61
+ const {
62
+ support_link: { target_url: linkTargetUrl = {} } = {},
63
+ support_video: { target_url: videoTargetUrl = {} } = {},
64
+ locale,
65
+ cssSelector,
66
+ } = selector || {};
67
+ let matchedNodes = document.querySelectorAll(selector.cssSelector);
68
+ const handleOnClickVideoLink = () => {
69
+ setPIPContentLink(videoTargetUrl?.[locale]?.href);
70
+ setShowPIP(true);
71
+ };
72
+ const handleOpenSupportLink = () =>
73
+ window.open(linkTargetUrl?.[locale]?.href, '_blank');
74
+
75
+ if (selector?.support_video?.target_url?.default?.href) {
76
+ matchedNodes.forEach(node => {
77
+ if (!document.getElementById(`demo-video-${cssSelector}`)) {
78
+ let videoAnchor = document.createElement('a');
79
+ videoAnchor.textContent = videoTargetUrl?.[locale].label;
80
+ videoAnchor.id = `demo-video-${cssSelector}`;
81
+ videoAnchor.style.marginLeft = '2px';
82
+ videoAnchor.onclick = handleOnClickVideoLink;
83
+
84
+ const videoIconElement = document.createElement('i');
85
+ videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
86
+ <path
87
+ 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"
88
+ id="play_svg__a"
89
+ ></path>
90
+ </svg>`;
91
+ videoIconElement.onclick = handleOnClickVideoLink;
92
+ videoIconElement.style.marginLeft = '2px';
93
+ videoIconElement.style.cursor = 'pointer';
94
+ videoIconElement.style.color = '#2466eb';
95
+ videoIconElement.style.fontSize = '18px';
96
+ node.appendChild(videoIconElement);
97
+ node.appendChild(videoAnchor);
98
+ }
99
+ });
100
+ } else if (selector?.support_link?.target_url?.default?.href) {
101
+ matchedNodes.forEach(node => {
102
+ if (!document.getElementById(`support-link-${cssSelector}`)) {
103
+ let linkAnchor = document.createElement('a');
104
+ linkAnchor.href = linkTargetUrl?.[locale]?.href;
105
+ linkAnchor.textContent = linkTargetUrl?.[locale].label;
106
+ linkAnchor.target = '_blank';
107
+ linkAnchor.id = `support-link-${cssSelector}`;
108
+ linkAnchor.style.marginLeft = '2px';
109
+ linkAnchor.onclick = handleOpenSupportLink;
110
+
111
+ const helpIconElement = document.createElement('i');
112
+ helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
113
+ <path
114
+ id="help_svg__a"
115
+ 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"
116
+ ></path>
117
+ </svg>`;
118
+ helpIconElement.onclick = handleOpenSupportLink;
119
+ helpIconElement.style.marginLeft = '2px';
120
+ helpIconElement.style.cursor = 'pointer';
121
+ helpIconElement.style.fontSize = '16px';
122
+ helpIconElement.style.color = '#2466eb';
123
+
124
+ node.appendChild(helpIconElement);
125
+ node.appendChild(linkAnchor);
126
+ }
127
+ });
128
+ }
129
+ });
130
+
131
+ const handleOpenInNew = () => {
132
+ window.open(PIPContentLink, '_blank');
133
+ };
134
+ const handleShowMaximised = () => {
135
+ setShowMaximised(!showMaximised);
136
+ };
137
+ const handleClosePIPContainer = () => setShowPIP(false);
138
+
139
+ return (
140
+ <div>
141
+ {showPIP && (
142
+ <ResizablePIP
143
+ closePIPContainer={handleClosePIPContainer}
144
+ handleOpenInNew={handleOpenInNew}
145
+ handleShowMaximised={handleShowMaximised}
146
+ showMaximised={showMaximised}
147
+ >
148
+ <iframe
149
+ width="100%"
150
+ height="100%"
151
+ src={PIPContentLink}
152
+ title="YouTube video player"
153
+ frameBorder="0"
154
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
155
+ />
156
+ </ResizablePIP>
157
+ )}
158
+ <WrappedComponent {...props} />
159
+ </div>
160
+ );
161
+ };
162
+
163
+ export default withDemoVideosAndLinks;