@gustavo-valsechi/client 1.4.14 → 1.4.16
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/dist/components/styles.d.ts +2 -2
- package/dist/components/types/block/styles.d.ts +1 -1
- package/dist/components/types/table/index.js +2 -1
- package/dist/components/types/table/index.mjs +2 -1
- package/dist/components/types/table/modal/styles.d.ts +1 -1
- package/dist/contexts/icon/styles.d.ts +1 -1
- package/dist/contexts/modal/styles.d.ts +1 -1
- package/dist/contexts/theme/styles.d.ts +1 -1
- package/dist/contexts/tooltip/index.js +24 -5
- package/dist/contexts/tooltip/index.mjs +24 -5
- package/dist/contexts/tooltip/styles.d.ts +1 -1
- package/dist/contexts/tooltip/styles.js +64 -13
- package/dist/contexts/tooltip/styles.mjs +64 -13
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
2
|
-
export declare const RowContainer: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
2
|
+
export declare const RowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
2
|
-
export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
2
|
+
export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -125,7 +125,8 @@ function Table(props) {
|
|
|
125
125
|
"div",
|
|
126
126
|
{
|
|
127
127
|
className: "iz-table-content-elipse",
|
|
128
|
-
|
|
128
|
+
"data-tooltip": import_lodash.default.isString(body) ? body : "",
|
|
129
|
+
"data-tooltip-props": '{"position":"bottom"}',
|
|
129
130
|
children: body
|
|
130
131
|
}
|
|
131
132
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -41,13 +41,31 @@ const TooltipContext = (0, import_react.createContext)({});
|
|
|
41
41
|
const TooltipProviderContainer = ({ children }) => {
|
|
42
42
|
const [tooltips, setTooltips] = (0, import_react.useState)([]);
|
|
43
43
|
const getContent = (target) => {
|
|
44
|
-
var _a, _b;
|
|
44
|
+
var _a, _b, _c;
|
|
45
45
|
const rect = target.getBoundingClientRect();
|
|
46
|
-
|
|
46
|
+
console.log(target.dataset);
|
|
47
|
+
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a["tooltip-props"]) || "{}");
|
|
48
|
+
const coords = {
|
|
47
49
|
top: rect.top + window.scrollY - (target.offsetHeight + 8),
|
|
48
|
-
left: rect.left + window.scrollX + target.offsetWidth / 2
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
left: rect.left + window.scrollX + target.offsetWidth / 2
|
|
51
|
+
};
|
|
52
|
+
switch (props.position) {
|
|
53
|
+
case "bottom":
|
|
54
|
+
coords.top = rect.top + window.scrollY + (target.offsetHeight + 8);
|
|
55
|
+
break;
|
|
56
|
+
case "left":
|
|
57
|
+
coords.top = rect.top + window.scrollY;
|
|
58
|
+
coords.left = rect.left + window.scrollX - target.offsetWidth;
|
|
59
|
+
break;
|
|
60
|
+
case "right":
|
|
61
|
+
coords.top = rect.top + window.scrollY;
|
|
62
|
+
coords.left = rect.left + window.scrollX + target.offsetWidth;
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
return {
|
|
66
|
+
...coords,
|
|
67
|
+
content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
|
|
68
|
+
props: JSON.parse(((_c = target.dataset) == null ? void 0 : _c["tooltip-props"]) || "{}")
|
|
51
69
|
};
|
|
52
70
|
};
|
|
53
71
|
(0, import_react.useEffect)(() => {
|
|
@@ -91,6 +109,7 @@ const TooltipProviderContainer = ({ children }) => {
|
|
|
91
109
|
top: data.top,
|
|
92
110
|
left: data.left
|
|
93
111
|
},
|
|
112
|
+
...data.props,
|
|
94
113
|
children: data.content
|
|
95
114
|
},
|
|
96
115
|
index
|
|
@@ -7,13 +7,31 @@ const TooltipContext = createContext({});
|
|
|
7
7
|
const TooltipProviderContainer = ({ children }) => {
|
|
8
8
|
const [tooltips, setTooltips] = useState([]);
|
|
9
9
|
const getContent = (target) => {
|
|
10
|
-
var _a, _b;
|
|
10
|
+
var _a, _b, _c;
|
|
11
11
|
const rect = target.getBoundingClientRect();
|
|
12
|
-
|
|
12
|
+
console.log(target.dataset);
|
|
13
|
+
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a["tooltip-props"]) || "{}");
|
|
14
|
+
const coords = {
|
|
13
15
|
top: rect.top + window.scrollY - (target.offsetHeight + 8),
|
|
14
|
-
left: rect.left + window.scrollX + target.offsetWidth / 2
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
left: rect.left + window.scrollX + target.offsetWidth / 2
|
|
17
|
+
};
|
|
18
|
+
switch (props.position) {
|
|
19
|
+
case "bottom":
|
|
20
|
+
coords.top = rect.top + window.scrollY + (target.offsetHeight + 8);
|
|
21
|
+
break;
|
|
22
|
+
case "left":
|
|
23
|
+
coords.top = rect.top + window.scrollY;
|
|
24
|
+
coords.left = rect.left + window.scrollX - target.offsetWidth;
|
|
25
|
+
break;
|
|
26
|
+
case "right":
|
|
27
|
+
coords.top = rect.top + window.scrollY;
|
|
28
|
+
coords.left = rect.left + window.scrollX + target.offsetWidth;
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
return {
|
|
32
|
+
...coords,
|
|
33
|
+
content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
|
|
34
|
+
props: JSON.parse(((_c = target.dataset) == null ? void 0 : _c["tooltip-props"]) || "{}")
|
|
17
35
|
};
|
|
18
36
|
};
|
|
19
37
|
useEffect(() => {
|
|
@@ -57,6 +75,7 @@ const TooltipProviderContainer = ({ children }) => {
|
|
|
57
75
|
top: data.top,
|
|
58
76
|
left: data.left
|
|
59
77
|
},
|
|
78
|
+
...data.props,
|
|
60
79
|
children: data.content
|
|
61
80
|
},
|
|
62
81
|
index
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web",
|
|
1
|
+
export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
@@ -32,6 +32,49 @@ __export(styles_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(styles_exports);
|
|
34
34
|
var import_styled_components = __toESM(require("styled-components"));
|
|
35
|
+
const setPosition = ({ position = "top", theme }, isBorder) => {
|
|
36
|
+
const defaultPosition = `
|
|
37
|
+
transform: translateX(-50%);
|
|
38
|
+
bottom: -${isBorder ? "9" : "8"}px;
|
|
39
|
+
left: 50%;
|
|
40
|
+
border-left: 8px solid transparent;
|
|
41
|
+
border-right: 8px solid transparent;
|
|
42
|
+
border-top: 8px solid ${theme.t05};
|
|
43
|
+
`;
|
|
44
|
+
switch (position) {
|
|
45
|
+
case "bottom":
|
|
46
|
+
return `
|
|
47
|
+
transform: translateX(-50%);
|
|
48
|
+
top: -${isBorder ? "9" : "8"}px;
|
|
49
|
+
left: 50%;
|
|
50
|
+
border-left: 8px solid transparent;
|
|
51
|
+
border-right: 8px solid transparent;
|
|
52
|
+
border-bottom: 8px solid ${theme.t05};
|
|
53
|
+
`;
|
|
54
|
+
case "left":
|
|
55
|
+
return `
|
|
56
|
+
transform: translateY(-50%);
|
|
57
|
+
right: -${isBorder ? "9" : "8"}px;
|
|
58
|
+
top: 50%;
|
|
59
|
+
border-top: 8px solid transparent;
|
|
60
|
+
border-bottom: 8px solid transparent;
|
|
61
|
+
border-left: 8px solid ${theme.t05};
|
|
62
|
+
`;
|
|
63
|
+
case "right":
|
|
64
|
+
return `
|
|
65
|
+
transform: translateY(-50%);
|
|
66
|
+
left: -${isBorder ? "9" : "8"}px;
|
|
67
|
+
top: 50%;
|
|
68
|
+
border-top: 8px solid transparent;
|
|
69
|
+
border-bottom: 8px solid transparent;
|
|
70
|
+
border-right: 8px solid ${theme.t05};
|
|
71
|
+
`;
|
|
72
|
+
case "top":
|
|
73
|
+
return defaultPosition;
|
|
74
|
+
default:
|
|
75
|
+
return defaultPosition;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
35
78
|
const Tooltip = import_styled_components.default.div`
|
|
36
79
|
position: fixed;
|
|
37
80
|
background: ${({ theme }) => theme.tooltip};
|
|
@@ -41,34 +84,42 @@ const Tooltip = import_styled_components.default.div`
|
|
|
41
84
|
text-align: center;
|
|
42
85
|
padding: .3rem .8rem;
|
|
43
86
|
border-radius: 5px;
|
|
44
|
-
transform: translateX(-50%);
|
|
45
87
|
z-index: 10;
|
|
46
88
|
border: 1px solid ${({ theme }) => theme.t05};
|
|
89
|
+
transform: ${({ position = "top" }) => {
|
|
90
|
+
const defaultPosition = "translateX(-50%)";
|
|
91
|
+
switch (position) {
|
|
92
|
+
case "left":
|
|
93
|
+
return "translateX(0)";
|
|
94
|
+
case "right":
|
|
95
|
+
return "translateX(-100%)";
|
|
96
|
+
case "bottom":
|
|
97
|
+
return defaultPosition;
|
|
98
|
+
case "top":
|
|
99
|
+
return defaultPosition;
|
|
100
|
+
default:
|
|
101
|
+
return defaultPosition;
|
|
102
|
+
}
|
|
103
|
+
}};
|
|
104
|
+
|
|
105
|
+
@media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
|
|
106
|
+
display: none;
|
|
107
|
+
}
|
|
47
108
|
|
|
48
109
|
&::before {
|
|
49
110
|
content: "";
|
|
50
111
|
position: absolute;
|
|
51
|
-
bottom: -9px;
|
|
52
|
-
left: 50%;
|
|
53
|
-
transform: translateX(-50%);
|
|
54
112
|
width: 0;
|
|
55
113
|
height: 0;
|
|
56
|
-
|
|
57
|
-
border-right: 8px solid transparent;
|
|
58
|
-
border-top: 8px solid ${({ theme }) => theme.t05};
|
|
114
|
+
${(props) => setPosition(props, true)}
|
|
59
115
|
}
|
|
60
116
|
|
|
61
117
|
&::after {
|
|
62
118
|
content: "";
|
|
63
119
|
position: absolute;
|
|
64
|
-
bottom: -8px;
|
|
65
|
-
left: 50%;
|
|
66
|
-
transform: translateX(-50%);
|
|
67
120
|
width: 0;
|
|
68
121
|
height: 0;
|
|
69
|
-
|
|
70
|
-
border-right: 8px solid transparent;
|
|
71
|
-
border-top: 8px solid ${({ theme }) => theme.tooltip};
|
|
122
|
+
${(props) => setPosition(props, true)}
|
|
72
123
|
}
|
|
73
124
|
`;
|
|
74
125
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1,4 +1,47 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
+
const setPosition = ({ position = "top", theme }, isBorder) => {
|
|
3
|
+
const defaultPosition = `
|
|
4
|
+
transform: translateX(-50%);
|
|
5
|
+
bottom: -${isBorder ? "9" : "8"}px;
|
|
6
|
+
left: 50%;
|
|
7
|
+
border-left: 8px solid transparent;
|
|
8
|
+
border-right: 8px solid transparent;
|
|
9
|
+
border-top: 8px solid ${theme.t05};
|
|
10
|
+
`;
|
|
11
|
+
switch (position) {
|
|
12
|
+
case "bottom":
|
|
13
|
+
return `
|
|
14
|
+
transform: translateX(-50%);
|
|
15
|
+
top: -${isBorder ? "9" : "8"}px;
|
|
16
|
+
left: 50%;
|
|
17
|
+
border-left: 8px solid transparent;
|
|
18
|
+
border-right: 8px solid transparent;
|
|
19
|
+
border-bottom: 8px solid ${theme.t05};
|
|
20
|
+
`;
|
|
21
|
+
case "left":
|
|
22
|
+
return `
|
|
23
|
+
transform: translateY(-50%);
|
|
24
|
+
right: -${isBorder ? "9" : "8"}px;
|
|
25
|
+
top: 50%;
|
|
26
|
+
border-top: 8px solid transparent;
|
|
27
|
+
border-bottom: 8px solid transparent;
|
|
28
|
+
border-left: 8px solid ${theme.t05};
|
|
29
|
+
`;
|
|
30
|
+
case "right":
|
|
31
|
+
return `
|
|
32
|
+
transform: translateY(-50%);
|
|
33
|
+
left: -${isBorder ? "9" : "8"}px;
|
|
34
|
+
top: 50%;
|
|
35
|
+
border-top: 8px solid transparent;
|
|
36
|
+
border-bottom: 8px solid transparent;
|
|
37
|
+
border-right: 8px solid ${theme.t05};
|
|
38
|
+
`;
|
|
39
|
+
case "top":
|
|
40
|
+
return defaultPosition;
|
|
41
|
+
default:
|
|
42
|
+
return defaultPosition;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
2
45
|
const Tooltip = styled.div`
|
|
3
46
|
position: fixed;
|
|
4
47
|
background: ${({ theme }) => theme.tooltip};
|
|
@@ -8,34 +51,42 @@ const Tooltip = styled.div`
|
|
|
8
51
|
text-align: center;
|
|
9
52
|
padding: .3rem .8rem;
|
|
10
53
|
border-radius: 5px;
|
|
11
|
-
transform: translateX(-50%);
|
|
12
54
|
z-index: 10;
|
|
13
55
|
border: 1px solid ${({ theme }) => theme.t05};
|
|
56
|
+
transform: ${({ position = "top" }) => {
|
|
57
|
+
const defaultPosition = "translateX(-50%)";
|
|
58
|
+
switch (position) {
|
|
59
|
+
case "left":
|
|
60
|
+
return "translateX(0)";
|
|
61
|
+
case "right":
|
|
62
|
+
return "translateX(-100%)";
|
|
63
|
+
case "bottom":
|
|
64
|
+
return defaultPosition;
|
|
65
|
+
case "top":
|
|
66
|
+
return defaultPosition;
|
|
67
|
+
default:
|
|
68
|
+
return defaultPosition;
|
|
69
|
+
}
|
|
70
|
+
}};
|
|
71
|
+
|
|
72
|
+
@media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
14
75
|
|
|
15
76
|
&::before {
|
|
16
77
|
content: "";
|
|
17
78
|
position: absolute;
|
|
18
|
-
bottom: -9px;
|
|
19
|
-
left: 50%;
|
|
20
|
-
transform: translateX(-50%);
|
|
21
79
|
width: 0;
|
|
22
80
|
height: 0;
|
|
23
|
-
|
|
24
|
-
border-right: 8px solid transparent;
|
|
25
|
-
border-top: 8px solid ${({ theme }) => theme.t05};
|
|
81
|
+
${(props) => setPosition(props, true)}
|
|
26
82
|
}
|
|
27
83
|
|
|
28
84
|
&::after {
|
|
29
85
|
content: "";
|
|
30
86
|
position: absolute;
|
|
31
|
-
bottom: -8px;
|
|
32
|
-
left: 50%;
|
|
33
|
-
transform: translateX(-50%);
|
|
34
87
|
width: 0;
|
|
35
88
|
height: 0;
|
|
36
|
-
|
|
37
|
-
border-right: 8px solid transparent;
|
|
38
|
-
border-top: 8px solid ${({ theme }) => theme.tooltip};
|
|
89
|
+
${(props) => setPosition(props, true)}
|
|
39
90
|
}
|
|
40
91
|
`;
|
|
41
92
|
export {
|