@gustavo-valsechi/client 1.4.36 → 1.4.37
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.
|
@@ -35,24 +35,21 @@ __export(target_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(target_exports);
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
+
var import_styles = require("./styles");
|
|
38
39
|
var import_lodash = __toESM(require("lodash"));
|
|
39
40
|
const TargetContext = (0, import_react.createContext)({});
|
|
40
41
|
const TargetProviderContainer = ({ children }) => {
|
|
41
42
|
const [targets, setTargets] = (0, import_react.useState)([]);
|
|
42
43
|
(0, import_react.useEffect)(() => {
|
|
43
|
-
let newTargets = [...targets];
|
|
44
44
|
import_lodash.default.forEach(targets, (target, index) => {
|
|
45
45
|
var _a;
|
|
46
46
|
const element = (_a = target.ref) == null ? void 0 : _a.current;
|
|
47
47
|
if (!element) return;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
newTargets.splice(index2, 1, { ...target, show: !target.show });
|
|
48
|
+
element.addEventListener("click", () => {
|
|
49
|
+
const newTargets = [...targets];
|
|
50
|
+
newTargets.splice(index, 1, { ...target, show: !target.show });
|
|
52
51
|
setTargets(newTargets);
|
|
53
|
-
};
|
|
54
|
-
element.addEventListener("click", handleClick);
|
|
55
|
-
return () => element.removeEventListener("click", handleClick);
|
|
52
|
+
});
|
|
56
53
|
});
|
|
57
54
|
}, [targets]);
|
|
58
55
|
const getCoords = (target) => {
|
|
@@ -88,7 +85,7 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
88
85
|
import_lodash.default.map(
|
|
89
86
|
targets,
|
|
90
87
|
(target, index) => target.show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
-
|
|
88
|
+
import_styles.Container,
|
|
92
89
|
{
|
|
93
90
|
style: getCoords(target.ref.current),
|
|
94
91
|
children: target.component
|
|
@@ -1,24 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
4
|
+
import { Container } from "./styles";
|
|
4
5
|
import _ from "lodash";
|
|
5
6
|
const TargetContext = createContext({});
|
|
6
7
|
const TargetProviderContainer = ({ children }) => {
|
|
7
8
|
const [targets, setTargets] = useState([]);
|
|
8
9
|
useEffect(() => {
|
|
9
|
-
let newTargets = [...targets];
|
|
10
10
|
_.forEach(targets, (target, index) => {
|
|
11
11
|
var _a;
|
|
12
12
|
const element = (_a = target.ref) == null ? void 0 : _a.current;
|
|
13
13
|
if (!element) return;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
newTargets.splice(index2, 1, { ...target, show: !target.show });
|
|
14
|
+
element.addEventListener("click", () => {
|
|
15
|
+
const newTargets = [...targets];
|
|
16
|
+
newTargets.splice(index, 1, { ...target, show: !target.show });
|
|
18
17
|
setTargets(newTargets);
|
|
19
|
-
};
|
|
20
|
-
element.addEventListener("click", handleClick);
|
|
21
|
-
return () => element.removeEventListener("click", handleClick);
|
|
18
|
+
});
|
|
22
19
|
});
|
|
23
20
|
}, [targets]);
|
|
24
21
|
const getCoords = (target) => {
|
|
@@ -54,7 +51,7 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
54
51
|
_.map(
|
|
55
52
|
targets,
|
|
56
53
|
(target, index) => target.show && /* @__PURE__ */ jsx(
|
|
57
|
-
|
|
54
|
+
Container,
|
|
58
55
|
{
|
|
59
56
|
style: getCoords(target.ref.current),
|
|
60
57
|
children: target.component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -28,103 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styles_exports = {};
|
|
30
30
|
__export(styles_exports, {
|
|
31
|
-
|
|
31
|
+
Container: () => Container
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(styles_exports);
|
|
34
34
|
var import_styled_components = __toESM(require("styled-components"));
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
const color = isBorder ? theme.t05 : theme.tooltip;
|
|
38
|
-
const defaultPosition = `
|
|
39
|
-
transform: translateX(-50%);
|
|
40
|
-
bottom: -${coord}px;
|
|
41
|
-
left: 50%;
|
|
42
|
-
border-left: 8px solid transparent;
|
|
43
|
-
border-right: 8px solid transparent;
|
|
44
|
-
border-top: 8px solid ${color};
|
|
45
|
-
`;
|
|
46
|
-
switch (position) {
|
|
47
|
-
case "bottom":
|
|
48
|
-
return `
|
|
49
|
-
transform: translateX(-50%);
|
|
50
|
-
top: -${coord}px;
|
|
51
|
-
left: 50%;
|
|
52
|
-
border-left: 8px solid transparent;
|
|
53
|
-
border-right: 8px solid transparent;
|
|
54
|
-
border-bottom: 8px solid ${color};
|
|
55
|
-
`;
|
|
56
|
-
case "left":
|
|
57
|
-
return `
|
|
58
|
-
transform: translateY(-50%);
|
|
59
|
-
right: -${coord}px;
|
|
60
|
-
top: 50%;
|
|
61
|
-
border-top: 8px solid transparent;
|
|
62
|
-
border-bottom: 8px solid transparent;
|
|
63
|
-
border-left: 8px solid ${color};
|
|
64
|
-
`;
|
|
65
|
-
case "right":
|
|
66
|
-
return `
|
|
67
|
-
transform: translateY(-50%);
|
|
68
|
-
left: -${coord}px;
|
|
69
|
-
top: 50%;
|
|
70
|
-
border-top: 8px solid transparent;
|
|
71
|
-
border-bottom: 8px solid transparent;
|
|
72
|
-
border-right: 8px solid ${color};
|
|
73
|
-
`;
|
|
74
|
-
case "top":
|
|
75
|
-
return defaultPosition;
|
|
76
|
-
default:
|
|
77
|
-
return defaultPosition;
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const Tooltip = import_styled_components.default.div`
|
|
81
|
-
position: fixed;
|
|
82
|
-
background: ${({ theme }) => theme.tooltip};
|
|
83
|
-
color: ${({ theme }) => theme.t6};
|
|
84
|
-
font-size: .8rem;
|
|
85
|
-
font-weight: 500;
|
|
86
|
-
text-align: center;
|
|
87
|
-
padding: .3rem .8rem;
|
|
88
|
-
border-radius: 5px;
|
|
89
|
-
z-index: 10;
|
|
90
|
-
border: 1px solid ${({ theme }) => theme.t05};
|
|
91
|
-
transform: ${({ position = "top" }) => {
|
|
92
|
-
const defaultPosition = "translateX(-50%)";
|
|
93
|
-
switch (position) {
|
|
94
|
-
case "left":
|
|
95
|
-
return "translateX(0)";
|
|
96
|
-
case "right":
|
|
97
|
-
return "translateX(-100%)";
|
|
98
|
-
case "bottom":
|
|
99
|
-
return defaultPosition;
|
|
100
|
-
case "top":
|
|
101
|
-
return defaultPosition;
|
|
102
|
-
default:
|
|
103
|
-
return defaultPosition;
|
|
104
|
-
}
|
|
105
|
-
}};
|
|
106
|
-
|
|
107
|
-
@media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
|
|
108
|
-
display: none;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&::before {
|
|
112
|
-
content: "";
|
|
113
|
-
position: absolute;
|
|
114
|
-
width: 0;
|
|
115
|
-
height: 0;
|
|
116
|
-
${(props) => setPosition(props, true)}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
&::after {
|
|
120
|
-
content: "";
|
|
121
|
-
position: absolute;
|
|
122
|
-
width: 0;
|
|
123
|
-
height: 0;
|
|
124
|
-
${(props) => setPosition(props)}
|
|
125
|
-
}
|
|
35
|
+
const Container = import_styled_components.default.div`
|
|
36
|
+
position: absolute;
|
|
126
37
|
`;
|
|
127
38
|
// Annotate the CommonJS export names for ESM import in node:
|
|
128
39
|
0 && (module.exports = {
|
|
129
|
-
|
|
40
|
+
Container
|
|
130
41
|
});
|
|
@@ -1,96 +1,7 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const color = isBorder ? theme.t05 : theme.tooltip;
|
|
5
|
-
const defaultPosition = `
|
|
6
|
-
transform: translateX(-50%);
|
|
7
|
-
bottom: -${coord}px;
|
|
8
|
-
left: 50%;
|
|
9
|
-
border-left: 8px solid transparent;
|
|
10
|
-
border-right: 8px solid transparent;
|
|
11
|
-
border-top: 8px solid ${color};
|
|
12
|
-
`;
|
|
13
|
-
switch (position) {
|
|
14
|
-
case "bottom":
|
|
15
|
-
return `
|
|
16
|
-
transform: translateX(-50%);
|
|
17
|
-
top: -${coord}px;
|
|
18
|
-
left: 50%;
|
|
19
|
-
border-left: 8px solid transparent;
|
|
20
|
-
border-right: 8px solid transparent;
|
|
21
|
-
border-bottom: 8px solid ${color};
|
|
22
|
-
`;
|
|
23
|
-
case "left":
|
|
24
|
-
return `
|
|
25
|
-
transform: translateY(-50%);
|
|
26
|
-
right: -${coord}px;
|
|
27
|
-
top: 50%;
|
|
28
|
-
border-top: 8px solid transparent;
|
|
29
|
-
border-bottom: 8px solid transparent;
|
|
30
|
-
border-left: 8px solid ${color};
|
|
31
|
-
`;
|
|
32
|
-
case "right":
|
|
33
|
-
return `
|
|
34
|
-
transform: translateY(-50%);
|
|
35
|
-
left: -${coord}px;
|
|
36
|
-
top: 50%;
|
|
37
|
-
border-top: 8px solid transparent;
|
|
38
|
-
border-bottom: 8px solid transparent;
|
|
39
|
-
border-right: 8px solid ${color};
|
|
40
|
-
`;
|
|
41
|
-
case "top":
|
|
42
|
-
return defaultPosition;
|
|
43
|
-
default:
|
|
44
|
-
return defaultPosition;
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const Tooltip = styled.div`
|
|
48
|
-
position: fixed;
|
|
49
|
-
background: ${({ theme }) => theme.tooltip};
|
|
50
|
-
color: ${({ theme }) => theme.t6};
|
|
51
|
-
font-size: .8rem;
|
|
52
|
-
font-weight: 500;
|
|
53
|
-
text-align: center;
|
|
54
|
-
padding: .3rem .8rem;
|
|
55
|
-
border-radius: 5px;
|
|
56
|
-
z-index: 10;
|
|
57
|
-
border: 1px solid ${({ theme }) => theme.t05};
|
|
58
|
-
transform: ${({ position = "top" }) => {
|
|
59
|
-
const defaultPosition = "translateX(-50%)";
|
|
60
|
-
switch (position) {
|
|
61
|
-
case "left":
|
|
62
|
-
return "translateX(0)";
|
|
63
|
-
case "right":
|
|
64
|
-
return "translateX(-100%)";
|
|
65
|
-
case "bottom":
|
|
66
|
-
return defaultPosition;
|
|
67
|
-
case "top":
|
|
68
|
-
return defaultPosition;
|
|
69
|
-
default:
|
|
70
|
-
return defaultPosition;
|
|
71
|
-
}
|
|
72
|
-
}};
|
|
73
|
-
|
|
74
|
-
@media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
|
|
75
|
-
display: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&::before {
|
|
79
|
-
content: "";
|
|
80
|
-
position: absolute;
|
|
81
|
-
width: 0;
|
|
82
|
-
height: 0;
|
|
83
|
-
${(props) => setPosition(props, true)}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
&::after {
|
|
87
|
-
content: "";
|
|
88
|
-
position: absolute;
|
|
89
|
-
width: 0;
|
|
90
|
-
height: 0;
|
|
91
|
-
${(props) => setPosition(props)}
|
|
92
|
-
}
|
|
2
|
+
const Container = styled.div`
|
|
3
|
+
position: absolute;
|
|
93
4
|
`;
|
|
94
5
|
export {
|
|
95
|
-
|
|
6
|
+
Container
|
|
96
7
|
};
|