@gustavo-valsechi/client 1.4.30 → 1.4.32
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/types/form/index.js +1 -1
- package/dist/components/types/form/index.mjs +1 -1
- package/dist/components/types/form/types/select/index.js +20 -2
- package/dist/components/types/form/types/select/index.mjs +21 -3
- package/dist/components/types/form/types/select/options/index.d.ts +1 -0
- package/dist/components/types/form/types/select/options/index.js +29 -0
- package/dist/components/types/form/types/select/options/index.mjs +9 -0
- package/dist/components/types/form/types/select/options/styles.d.ts +1 -0
- package/dist/{contexts/icon → components/types/form/types/select/options}/styles.js +6 -1
- package/dist/components/types/form/types/select/options/styles.mjs +12 -0
- package/dist/components/types/form/types/select/styles.js +6 -12
- package/dist/components/types/form/types/select/styles.mjs +6 -12
- package/dist/components/types/index.d.ts +1 -0
- package/dist/components/types/index.js +3 -1
- package/dist/components/types/index.mjs +1 -0
- package/dist/components/types/tooltip/index.d.ts +2 -0
- package/dist/components/types/tooltip/index.js +33 -0
- package/dist/components/types/tooltip/index.mjs +9 -0
- package/dist/components/types/tooltip/styles.js +130 -0
- package/dist/components/types/tooltip/styles.mjs +96 -0
- package/dist/contexts/index.d.ts +3 -0
- package/dist/contexts/index.js +20 -1
- package/dist/contexts/index.mjs +13 -0
- package/dist/contexts/modal/index.js +0 -1
- package/dist/contexts/modal/index.mjs +0 -1
- package/dist/contexts/target/index.d.ts +4 -0
- package/dist/contexts/target/index.js +100 -0
- package/dist/contexts/target/index.mjs +65 -0
- package/dist/contexts/tooltip/index.d.ts +2 -4
- package/dist/contexts/tooltip/index.js +12 -10
- package/dist/contexts/tooltip/index.mjs +11 -9
- package/dist/interfaces/components/form/select/index.d.ts +3 -0
- package/dist/interfaces/components/index.d.ts +1 -0
- package/dist/interfaces/components/index.js +3 -1
- package/dist/interfaces/components/index.mjs +1 -0
- package/dist/interfaces/components/tooltip/index.d.ts +4 -0
- package/dist/interfaces/components/tooltip/index.js +16 -0
- package/dist/interfaces/components/tooltip/index.mjs +0 -0
- package/dist/interfaces/contexts/index.d.ts +4 -0
- package/dist/interfaces/contexts/index.js +3 -1
- package/dist/interfaces/contexts/index.mjs +1 -0
- package/dist/interfaces/contexts/modal/index.d.ts +1 -2
- package/dist/interfaces/contexts/target/index.d.ts +3 -0
- package/dist/interfaces/contexts/target/index.js +16 -0
- package/dist/interfaces/contexts/target/index.mjs +0 -0
- package/dist/interfaces/contexts/tooltip/index.d.ts +15 -1
- package/package.json +2 -2
- package/dist/contexts/icon/styles.mjs +0 -7
- /package/dist/{contexts/icon → components/types/tooltip}/styles.d.ts +0 -0
- /package/dist/contexts/{tooltip → target}/styles.d.ts +0 -0
- /package/dist/contexts/{tooltip → target}/styles.js +0 -0
- /package/dist/contexts/{tooltip → target}/styles.mjs +0 -0
|
@@ -37,13 +37,21 @@ var import_react = require("react");
|
|
|
37
37
|
var import_styles = require("./styles");
|
|
38
38
|
var import_label = require("../label");
|
|
39
39
|
var import_error = require("../error");
|
|
40
|
+
var import_contexts = require("../../../../../contexts");
|
|
40
41
|
var import_lodash = __toESM(require("lodash"));
|
|
42
|
+
var import_options = __toESM(require("./options"));
|
|
41
43
|
function InputSelect(props) {
|
|
44
|
+
const inputRef = (0, import_react.useRef)({});
|
|
45
|
+
const target = (0, import_contexts.useTarget)();
|
|
42
46
|
const [focus, setFocus] = (0, import_react.useState)(false);
|
|
43
47
|
const register = (props.register || ((name) => ({})))(props.name || "");
|
|
48
|
+
(0, import_react.useEffect)(() => {
|
|
49
|
+
target.add({ ref: inputRef, component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_options.default, {}) });
|
|
50
|
+
return () => target.remove(inputRef);
|
|
51
|
+
}, []);
|
|
44
52
|
const onChange = (event) => {
|
|
45
53
|
const value = event.target.value || "";
|
|
46
|
-
|
|
54
|
+
event.target.value = props.mask ? props.mask(value) : value;
|
|
47
55
|
if (props.onChange) props.onChange(value);
|
|
48
56
|
};
|
|
49
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { className: props.className, error: props.error, children: [
|
|
@@ -51,7 +59,17 @@ function InputSelect(props) {
|
|
|
51
59
|
props.label,
|
|
52
60
|
props.required ? "*" : ""
|
|
53
61
|
] }),
|
|
54
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iz-input-content", children: [
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: inputRef, className: "iz-input-content", children: [
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
"input",
|
|
65
|
+
{
|
|
66
|
+
...import_lodash.default.omit(props, ["className", "register", "mask"]),
|
|
67
|
+
type: "text",
|
|
68
|
+
maxLength: props.maxLength || 255,
|
|
69
|
+
...register,
|
|
70
|
+
onChange
|
|
71
|
+
}
|
|
72
|
+
),
|
|
55
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
74
|
"select",
|
|
57
75
|
{
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useState, useRef, useEffect } from "react";
|
|
4
4
|
import { Container } from "./styles";
|
|
5
5
|
import { InputLabel } from "../label";
|
|
6
6
|
import { InputError } from "../error";
|
|
7
|
+
import { useTarget } from "../../../../../contexts";
|
|
7
8
|
import _ from "lodash";
|
|
9
|
+
import InputSelectOption from "./options";
|
|
8
10
|
function InputSelect(props) {
|
|
11
|
+
const inputRef = useRef({});
|
|
12
|
+
const target = useTarget();
|
|
9
13
|
const [focus, setFocus] = useState(false);
|
|
10
14
|
const register = (props.register || ((name) => ({})))(props.name || "");
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
target.add({ ref: inputRef, component: /* @__PURE__ */ jsx(InputSelectOption, {}) });
|
|
17
|
+
return () => target.remove(inputRef);
|
|
18
|
+
}, []);
|
|
11
19
|
const onChange = (event) => {
|
|
12
20
|
const value = event.target.value || "";
|
|
13
|
-
|
|
21
|
+
event.target.value = props.mask ? props.mask(value) : value;
|
|
14
22
|
if (props.onChange) props.onChange(value);
|
|
15
23
|
};
|
|
16
24
|
return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
|
|
@@ -18,7 +26,17 @@ function InputSelect(props) {
|
|
|
18
26
|
props.label,
|
|
19
27
|
props.required ? "*" : ""
|
|
20
28
|
] }),
|
|
21
|
-
/* @__PURE__ */ jsxs("div", { className: "iz-input-content", children: [
|
|
29
|
+
/* @__PURE__ */ jsxs("div", { ref: inputRef, className: "iz-input-content", children: [
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
"input",
|
|
32
|
+
{
|
|
33
|
+
..._.omit(props, ["className", "register", "mask"]),
|
|
34
|
+
type: "text",
|
|
35
|
+
maxLength: props.maxLength || 255,
|
|
36
|
+
...register,
|
|
37
|
+
onChange
|
|
38
|
+
}
|
|
39
|
+
),
|
|
22
40
|
/* @__PURE__ */ jsx(
|
|
23
41
|
"select",
|
|
24
42
|
{
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function InputSelectOption(props: any): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var options_exports = {};
|
|
21
|
+
__export(options_exports, {
|
|
22
|
+
default: () => InputSelectOption
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(options_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_styles = require("./styles");
|
|
27
|
+
function InputSelectOption(props) {
|
|
28
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, {});
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Container: any;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
"use client";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -33,7 +34,11 @@ __export(styles_exports, {
|
|
|
33
34
|
module.exports = __toCommonJS(styles_exports);
|
|
34
35
|
var import_styled_components = __toESM(require("styled-components"));
|
|
35
36
|
const Container = import_styled_components.default.div`
|
|
36
|
-
|
|
37
|
+
width: 20rem;
|
|
38
|
+
height: 10rem;
|
|
39
|
+
background-color: ${({ theme }) => theme.primary};
|
|
40
|
+
border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
|
|
41
|
+
border-radius: 5px;
|
|
37
42
|
`;
|
|
38
43
|
// Annotate the CommonJS export names for ESM import in node:
|
|
39
44
|
0 && (module.exports = {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
const Container = styled.div`
|
|
4
|
+
width: 20rem;
|
|
5
|
+
height: 10rem;
|
|
6
|
+
background-color: ${({ theme }) => theme.primary};
|
|
7
|
+
border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
|
|
8
|
+
border-radius: 5px;
|
|
9
|
+
`;
|
|
10
|
+
export {
|
|
11
|
+
Container
|
|
12
|
+
};
|
|
@@ -43,16 +43,14 @@ const Container = import_styled_components.default.div`
|
|
|
43
43
|
border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
|
|
44
44
|
border-radius: 5px;
|
|
45
45
|
overflow: hidden;
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
|
|
47
|
+
background-color: ${({ theme }) => theme.primary};
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
input {
|
|
50
50
|
border: 0;
|
|
51
|
-
padding: .5rem
|
|
51
|
+
padding: .5rem 1rem;
|
|
52
52
|
width: 100%;
|
|
53
53
|
font-size: .8rem;
|
|
54
|
-
appearance: none;
|
|
55
|
-
cursor: pointer;
|
|
56
54
|
background-color: ${({ theme }) => theme.primary};
|
|
57
55
|
color: ${({ theme }) => theme.t6};
|
|
58
56
|
|
|
@@ -68,12 +66,8 @@ const Container = import_styled_components.default.div`
|
|
|
68
66
|
}
|
|
69
67
|
|
|
70
68
|
i {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
right: .8rem;
|
|
74
|
-
transform: translateY(-50%);
|
|
75
|
-
font-size: .8rem;
|
|
76
|
-
color: ${({ theme }) => theme.t6};
|
|
69
|
+
color: ${({ theme }) => theme.t3};
|
|
70
|
+
cursor: pointer;
|
|
77
71
|
}
|
|
78
72
|
}
|
|
79
73
|
`;
|
|
@@ -10,16 +10,14 @@ const Container = styled.div`
|
|
|
10
10
|
border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
|
|
11
11
|
border-radius: 5px;
|
|
12
12
|
overflow: hidden;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
|
|
14
|
+
background-color: ${({ theme }) => theme.primary};
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
input {
|
|
17
17
|
border: 0;
|
|
18
|
-
padding: .5rem
|
|
18
|
+
padding: .5rem 1rem;
|
|
19
19
|
width: 100%;
|
|
20
20
|
font-size: .8rem;
|
|
21
|
-
appearance: none;
|
|
22
|
-
cursor: pointer;
|
|
23
21
|
background-color: ${({ theme }) => theme.primary};
|
|
24
22
|
color: ${({ theme }) => theme.t6};
|
|
25
23
|
|
|
@@ -35,12 +33,8 @@ const Container = styled.div`
|
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
i {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
right: .8rem;
|
|
41
|
-
transform: translateY(-50%);
|
|
42
|
-
font-size: .8rem;
|
|
43
|
-
color: ${({ theme }) => theme.t6};
|
|
36
|
+
color: ${({ theme }) => theme.t3};
|
|
37
|
+
cursor: pointer;
|
|
44
38
|
}
|
|
45
39
|
}
|
|
46
40
|
`;
|
|
@@ -26,6 +26,7 @@ __reExport(types_exports, require("./avatar"), module.exports);
|
|
|
26
26
|
__reExport(types_exports, require("./lottie"), module.exports);
|
|
27
27
|
__reExport(types_exports, require("./credit-card"), module.exports);
|
|
28
28
|
__reExport(types_exports, require("./block"), module.exports);
|
|
29
|
+
__reExport(types_exports, require("./tooltip"), module.exports);
|
|
29
30
|
// Annotate the CommonJS export names for ESM import in node:
|
|
30
31
|
0 && (module.exports = {
|
|
31
32
|
...require("./table"),
|
|
@@ -38,5 +39,6 @@ __reExport(types_exports, require("./block"), module.exports);
|
|
|
38
39
|
...require("./avatar"),
|
|
39
40
|
...require("./lottie"),
|
|
40
41
|
...require("./credit-card"),
|
|
41
|
-
...require("./block")
|
|
42
|
+
...require("./block"),
|
|
43
|
+
...require("./tooltip")
|
|
42
44
|
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var tooltip_exports = {};
|
|
21
|
+
__export(tooltip_exports, {
|
|
22
|
+
Tooltip: () => Tooltip
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(tooltip_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_styles = require("./styles");
|
|
27
|
+
function Tooltip(props) {
|
|
28
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { ...props, children: props.children });
|
|
29
|
+
}
|
|
30
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
31
|
+
0 && (module.exports = {
|
|
32
|
+
Tooltip
|
|
33
|
+
});
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var styles_exports = {};
|
|
30
|
+
__export(styles_exports, {
|
|
31
|
+
Container: () => Container
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(styles_exports);
|
|
34
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
35
|
+
const setPosition = ({ position = "top", theme }, isBorder) => {
|
|
36
|
+
const coord = isBorder ? "9" : "8";
|
|
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 Container = 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
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
128
|
+
0 && (module.exports = {
|
|
129
|
+
Container
|
|
130
|
+
});
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const setPosition = ({ position = "top", theme }, isBorder) => {
|
|
3
|
+
const coord = isBorder ? "9" : "8";
|
|
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 Container = 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
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
export {
|
|
95
|
+
Container
|
|
96
|
+
};
|
package/dist/contexts/index.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import { IContext } from "@interfaces";
|
|
1
2
|
export * from "./icon";
|
|
2
3
|
export * from "./theme";
|
|
3
4
|
export * from "./tooltip";
|
|
4
5
|
export * from "./modal";
|
|
6
|
+
export * from "./target";
|
|
7
|
+
export declare function Context(props: IContext): import("react/jsx-runtime").JSX.Element;
|
package/dist/contexts/index.js
CHANGED
|
@@ -4,6 +4,10 @@ var __defProp = Object.defineProperty;
|
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
7
11
|
var __copyProps = (to, from, except, desc) => {
|
|
8
12
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
9
13
|
for (let key of __getOwnPropNames(from))
|
|
@@ -15,15 +19,30 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
19
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
16
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
17
21
|
var contexts_exports = {};
|
|
22
|
+
__export(contexts_exports, {
|
|
23
|
+
Context: () => Context
|
|
24
|
+
});
|
|
18
25
|
module.exports = __toCommonJS(contexts_exports);
|
|
26
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
var import_icon = require("../contexts/icon");
|
|
28
|
+
var import_modal = require("../contexts/modal");
|
|
29
|
+
var import_target = require("../contexts/target");
|
|
30
|
+
var import_tooltip = require("../contexts/tooltip");
|
|
31
|
+
var import_theme = require("../contexts/theme");
|
|
19
32
|
__reExport(contexts_exports, require("./icon"), module.exports);
|
|
20
33
|
__reExport(contexts_exports, require("./theme"), module.exports);
|
|
21
34
|
__reExport(contexts_exports, require("./tooltip"), module.exports);
|
|
22
35
|
__reExport(contexts_exports, require("./modal"), module.exports);
|
|
36
|
+
__reExport(contexts_exports, require("./target"), module.exports);
|
|
37
|
+
function Context(props) {
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme.ThemeProvider, { theme: props.theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_target.TargetProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_modal.ModalProvider, { children: props.children }) }) }) }) });
|
|
39
|
+
}
|
|
23
40
|
// Annotate the CommonJS export names for ESM import in node:
|
|
24
41
|
0 && (module.exports = {
|
|
42
|
+
Context,
|
|
25
43
|
...require("./icon"),
|
|
26
44
|
...require("./theme"),
|
|
27
45
|
...require("./tooltip"),
|
|
28
|
-
...require("./modal")
|
|
46
|
+
...require("./modal"),
|
|
47
|
+
...require("./target")
|
|
29
48
|
});
|
package/dist/contexts/index.mjs
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { IconProvider } from "../contexts/icon";
|
|
4
|
+
import { ModalProvider } from "../contexts/modal";
|
|
5
|
+
import { TargetProvider } from "../contexts/target";
|
|
6
|
+
import { TooltipProvider } from "../contexts/tooltip";
|
|
7
|
+
import { ThemeProvider } from "../contexts/theme";
|
|
2
8
|
export * from "./icon";
|
|
3
9
|
export * from "./theme";
|
|
4
10
|
export * from "./tooltip";
|
|
5
11
|
export * from "./modal";
|
|
12
|
+
export * from "./target";
|
|
13
|
+
function Context(props) {
|
|
14
|
+
return /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(IconProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TargetProvider, { children: /* @__PURE__ */ jsx(ModalProvider, { children: props.children }) }) }) }) });
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
Context
|
|
18
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ITargetProvider, ITargetContext } from "@interfaces";
|
|
2
|
+
declare const TargetProviderContainer: ({ children }: ITargetProvider) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const useTarget: () => ITargetContext;
|
|
4
|
+
export { TargetProviderContainer as TargetProvider, useTarget };
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var target_exports = {};
|
|
31
|
+
__export(target_exports, {
|
|
32
|
+
TargetProvider: () => TargetProviderContainer,
|
|
33
|
+
useTarget: () => useTarget
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(target_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var import_react = require("react");
|
|
38
|
+
var import_lodash = __toESM(require("lodash"));
|
|
39
|
+
const TargetContext = (0, import_react.createContext)({});
|
|
40
|
+
const TargetProviderContainer = ({ children }) => {
|
|
41
|
+
const [targets, setTargets] = (0, import_react.useState)([]);
|
|
42
|
+
(0, import_react.useEffect)(() => {
|
|
43
|
+
import_lodash.default.forEach(targets, ({ ref }) => {
|
|
44
|
+
ref.current.addEventListener("click", () => {
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
}, [targets]);
|
|
48
|
+
const getCoords = (target) => {
|
|
49
|
+
const rect = target.getBoundingClientRect();
|
|
50
|
+
const targetTop = rect.top + window.scrollY;
|
|
51
|
+
const targetLeft = rect.left + window.scrollX;
|
|
52
|
+
const coords = {
|
|
53
|
+
top: targetTop + (target.offsetHeight + 5),
|
|
54
|
+
left: targetLeft
|
|
55
|
+
};
|
|
56
|
+
if (rect.bottom < target.offsetHeight) {
|
|
57
|
+
coords.top = targetTop - (target.offsetHeight + 5);
|
|
58
|
+
}
|
|
59
|
+
if (rect.right < target.offsetWidth) {
|
|
60
|
+
coords.left = targetLeft + rect.offsetWidth;
|
|
61
|
+
}
|
|
62
|
+
return coords;
|
|
63
|
+
};
|
|
64
|
+
const add = (target) => {
|
|
65
|
+
target.ref.current.addEventListener("click", () => target.show = !target.show);
|
|
66
|
+
setTargets(import_lodash.default.concat(targets, target));
|
|
67
|
+
};
|
|
68
|
+
const remove = (ref) => {
|
|
69
|
+
setTargets(import_lodash.default.filter(targets, (data) => data.ref.current !== ref.current));
|
|
70
|
+
};
|
|
71
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
72
|
+
TargetContext.Provider,
|
|
73
|
+
{
|
|
74
|
+
value: {
|
|
75
|
+
add,
|
|
76
|
+
remove
|
|
77
|
+
},
|
|
78
|
+
children: [
|
|
79
|
+
import_lodash.default.map(
|
|
80
|
+
targets,
|
|
81
|
+
(target, index) => target.show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
style: getCoords(target.ref.current),
|
|
85
|
+
children: target.component
|
|
86
|
+
},
|
|
87
|
+
index
|
|
88
|
+
)
|
|
89
|
+
),
|
|
90
|
+
children
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
};
|
|
95
|
+
const useTarget = () => (0, import_react.useContext)(TargetContext);
|
|
96
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
97
|
+
0 && (module.exports = {
|
|
98
|
+
TargetProvider,
|
|
99
|
+
useTarget
|
|
100
|
+
});
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useContext, useEffect, useState } from "react";
|
|
4
|
+
import _ from "lodash";
|
|
5
|
+
const TargetContext = createContext({});
|
|
6
|
+
const TargetProviderContainer = ({ children }) => {
|
|
7
|
+
const [targets, setTargets] = useState([]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
_.forEach(targets, ({ ref }) => {
|
|
10
|
+
ref.current.addEventListener("click", () => {
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
}, [targets]);
|
|
14
|
+
const getCoords = (target) => {
|
|
15
|
+
const rect = target.getBoundingClientRect();
|
|
16
|
+
const targetTop = rect.top + window.scrollY;
|
|
17
|
+
const targetLeft = rect.left + window.scrollX;
|
|
18
|
+
const coords = {
|
|
19
|
+
top: targetTop + (target.offsetHeight + 5),
|
|
20
|
+
left: targetLeft
|
|
21
|
+
};
|
|
22
|
+
if (rect.bottom < target.offsetHeight) {
|
|
23
|
+
coords.top = targetTop - (target.offsetHeight + 5);
|
|
24
|
+
}
|
|
25
|
+
if (rect.right < target.offsetWidth) {
|
|
26
|
+
coords.left = targetLeft + rect.offsetWidth;
|
|
27
|
+
}
|
|
28
|
+
return coords;
|
|
29
|
+
};
|
|
30
|
+
const add = (target) => {
|
|
31
|
+
target.ref.current.addEventListener("click", () => target.show = !target.show);
|
|
32
|
+
setTargets(_.concat(targets, target));
|
|
33
|
+
};
|
|
34
|
+
const remove = (ref) => {
|
|
35
|
+
setTargets(_.filter(targets, (data) => data.ref.current !== ref.current));
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ jsxs(
|
|
38
|
+
TargetContext.Provider,
|
|
39
|
+
{
|
|
40
|
+
value: {
|
|
41
|
+
add,
|
|
42
|
+
remove
|
|
43
|
+
},
|
|
44
|
+
children: [
|
|
45
|
+
_.map(
|
|
46
|
+
targets,
|
|
47
|
+
(target, index) => target.show && /* @__PURE__ */ jsx(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
style: getCoords(target.ref.current),
|
|
51
|
+
children: target.component
|
|
52
|
+
},
|
|
53
|
+
index
|
|
54
|
+
)
|
|
55
|
+
),
|
|
56
|
+
children
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
const useTarget = () => useContext(TargetContext);
|
|
62
|
+
export {
|
|
63
|
+
TargetProviderContainer as TargetProvider,
|
|
64
|
+
useTarget
|
|
65
|
+
};
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
declare const TooltipProviderContainer: ({ children }:
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { ITooltipProvider } from "@interfaces";
|
|
2
|
+
declare const TooltipProviderContainer: ({ children }: ITooltipProvider) => import("react/jsx-runtime").JSX.Element;
|
|
5
3
|
declare const useTooltip: () => any;
|
|
6
4
|
export { TooltipProviderContainer as TooltipProvider, useTooltip };
|
|
@@ -35,7 +35,7 @@ __export(tooltip_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(tooltip_exports);
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
-
var
|
|
38
|
+
var import_components = require("../../components");
|
|
39
39
|
var import_lodash = __toESM(require("lodash"));
|
|
40
40
|
const TooltipContext = (0, import_react.createContext)({});
|
|
41
41
|
const TooltipProviderContainer = ({ children }) => {
|
|
@@ -43,22 +43,24 @@ const TooltipProviderContainer = ({ children }) => {
|
|
|
43
43
|
const getContent = (target) => {
|
|
44
44
|
var _a, _b;
|
|
45
45
|
const rect = target.getBoundingClientRect();
|
|
46
|
-
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.
|
|
46
|
+
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.target) || "{}");
|
|
47
|
+
const targetTop = rect.top + window.scrollY;
|
|
48
|
+
const targetLeft = rect.left + window.scrollX;
|
|
47
49
|
const coords = {
|
|
48
|
-
top:
|
|
49
|
-
left:
|
|
50
|
+
top: targetTop - (target.offsetHeight + 8),
|
|
51
|
+
left: targetLeft + target.offsetWidth / 2
|
|
50
52
|
};
|
|
51
53
|
switch (props.position) {
|
|
52
54
|
case "bottom":
|
|
53
|
-
coords.top =
|
|
55
|
+
coords.top = targetTop + (target.offsetHeight + 8);
|
|
54
56
|
break;
|
|
55
57
|
case "left":
|
|
56
|
-
coords.top =
|
|
57
|
-
coords.left =
|
|
58
|
+
coords.top = targetTop;
|
|
59
|
+
coords.left = targetLeft - target.offsetWidth;
|
|
58
60
|
break;
|
|
59
61
|
case "right":
|
|
60
|
-
coords.top =
|
|
61
|
-
coords.left =
|
|
62
|
+
coords.top = targetTop;
|
|
63
|
+
coords.left = targetLeft + target.offsetWidth;
|
|
62
64
|
break;
|
|
63
65
|
}
|
|
64
66
|
return {
|
|
@@ -109,7 +111,7 @@ const TooltipProviderContainer = ({ children }) => {
|
|
|
109
111
|
import_lodash.default.map(
|
|
110
112
|
tooltips,
|
|
111
113
|
(data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
-
|
|
114
|
+
import_components.Tooltip,
|
|
113
115
|
{
|
|
114
116
|
style: {
|
|
115
117
|
top: data.top,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useContext, useEffect, useState } from "react";
|
|
4
|
-
import { Tooltip } from "
|
|
4
|
+
import { Tooltip } from "../../components";
|
|
5
5
|
import _ from "lodash";
|
|
6
6
|
const TooltipContext = createContext({});
|
|
7
7
|
const TooltipProviderContainer = ({ children }) => {
|
|
@@ -9,22 +9,24 @@ const TooltipProviderContainer = ({ children }) => {
|
|
|
9
9
|
const getContent = (target) => {
|
|
10
10
|
var _a, _b;
|
|
11
11
|
const rect = target.getBoundingClientRect();
|
|
12
|
-
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.
|
|
12
|
+
const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.target) || "{}");
|
|
13
|
+
const targetTop = rect.top + window.scrollY;
|
|
14
|
+
const targetLeft = rect.left + window.scrollX;
|
|
13
15
|
const coords = {
|
|
14
|
-
top:
|
|
15
|
-
left:
|
|
16
|
+
top: targetTop - (target.offsetHeight + 8),
|
|
17
|
+
left: targetLeft + target.offsetWidth / 2
|
|
16
18
|
};
|
|
17
19
|
switch (props.position) {
|
|
18
20
|
case "bottom":
|
|
19
|
-
coords.top =
|
|
21
|
+
coords.top = targetTop + (target.offsetHeight + 8);
|
|
20
22
|
break;
|
|
21
23
|
case "left":
|
|
22
|
-
coords.top =
|
|
23
|
-
coords.left =
|
|
24
|
+
coords.top = targetTop;
|
|
25
|
+
coords.left = targetLeft - target.offsetWidth;
|
|
24
26
|
break;
|
|
25
27
|
case "right":
|
|
26
|
-
coords.top =
|
|
27
|
-
coords.left =
|
|
28
|
+
coords.top = targetTop;
|
|
29
|
+
coords.left = targetLeft + target.offsetWidth;
|
|
28
30
|
break;
|
|
29
31
|
}
|
|
30
32
|
return {
|
|
@@ -11,6 +11,7 @@ export * from "./avatar";
|
|
|
11
11
|
export * from "./lottie";
|
|
12
12
|
export * from "./credit-card";
|
|
13
13
|
export * from "./block";
|
|
14
|
+
export * from "./tooltip";
|
|
14
15
|
export type IComponentMap = typeof Types;
|
|
15
16
|
export type IComponentConfigMap = {
|
|
16
17
|
[K in keyof IComponentMap]: {
|
|
@@ -26,6 +26,7 @@ __reExport(components_exports, require("./avatar"), module.exports);
|
|
|
26
26
|
__reExport(components_exports, require("./lottie"), module.exports);
|
|
27
27
|
__reExport(components_exports, require("./credit-card"), module.exports);
|
|
28
28
|
__reExport(components_exports, require("./block"), module.exports);
|
|
29
|
+
__reExport(components_exports, require("./tooltip"), module.exports);
|
|
29
30
|
// Annotate the CommonJS export names for ESM import in node:
|
|
30
31
|
0 && (module.exports = {
|
|
31
32
|
...require("./table"),
|
|
@@ -38,5 +39,6 @@ __reExport(components_exports, require("./block"), module.exports);
|
|
|
38
39
|
...require("./avatar"),
|
|
39
40
|
...require("./lottie"),
|
|
40
41
|
...require("./credit-card"),
|
|
41
|
-
...require("./block")
|
|
42
|
+
...require("./block"),
|
|
43
|
+
...require("./tooltip")
|
|
42
44
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var tooltip_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(tooltip_exports);
|
|
File without changes
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { IThemeProvider } from "@interfaces";
|
|
2
3
|
export * from "./icon";
|
|
3
4
|
export * from "./theme";
|
|
4
5
|
export * from "./tooltip";
|
|
5
6
|
export * from "./modal";
|
|
7
|
+
export * from "./target";
|
|
6
8
|
export interface IBaseProvider {
|
|
7
9
|
children: React.ReactNode;
|
|
8
10
|
}
|
|
11
|
+
export interface IContext extends IThemeProvider {
|
|
12
|
+
}
|
|
@@ -19,10 +19,12 @@ __reExport(contexts_exports, require("./icon"), module.exports);
|
|
|
19
19
|
__reExport(contexts_exports, require("./theme"), module.exports);
|
|
20
20
|
__reExport(contexts_exports, require("./tooltip"), module.exports);
|
|
21
21
|
__reExport(contexts_exports, require("./modal"), module.exports);
|
|
22
|
+
__reExport(contexts_exports, require("./target"), module.exports);
|
|
22
23
|
// Annotate the CommonJS export names for ESM import in node:
|
|
23
24
|
0 && (module.exports = {
|
|
24
25
|
...require("./icon"),
|
|
25
26
|
...require("./theme"),
|
|
26
27
|
...require("./tooltip"),
|
|
27
|
-
...require("./modal")
|
|
28
|
+
...require("./modal"),
|
|
29
|
+
...require("./target")
|
|
28
30
|
});
|
|
@@ -9,8 +9,7 @@ export interface IModalConfig {
|
|
|
9
9
|
type?: "fixed" | "dinamic";
|
|
10
10
|
}
|
|
11
11
|
export interface IModalContext {
|
|
12
|
-
|
|
13
|
-
add: (value: IModalConfig) => void;
|
|
12
|
+
add: (config: IModalConfig) => void;
|
|
14
13
|
remove: (modalName: string) => void;
|
|
15
14
|
setProps: (modalName: string, props: IModal) => void;
|
|
16
15
|
toggle: (modalName: string) => void;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var target_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(target_exports);
|
|
File without changes
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { IBaseProvider } from "../..";
|
|
2
|
-
export interface
|
|
3
|
+
export interface ITargetProvider extends IBaseProvider {
|
|
4
|
+
}
|
|
5
|
+
export interface ITargetConfig {
|
|
6
|
+
ref: React.RefObject<any>;
|
|
7
|
+
component: React.ReactNode;
|
|
8
|
+
show?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface ITargetConfigCoords {
|
|
11
|
+
top: number;
|
|
12
|
+
left: number;
|
|
13
|
+
}
|
|
14
|
+
export interface ITargetContext {
|
|
15
|
+
add: (config: ITargetConfig) => void;
|
|
16
|
+
remove: (ref: React.RefObject<any>) => void;
|
|
3
17
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gustavo-valsechi/client",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.32",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@emotion/is-prop-valid": "1.3.0",
|
|
27
|
-
"@gustavo-valsechi/utils": "1.0.
|
|
27
|
+
"@gustavo-valsechi/utils": "1.0.4",
|
|
28
28
|
"@gustavo-valsechi/server": "1.0.13",
|
|
29
29
|
"@hookform/resolvers": "5.2.2",
|
|
30
30
|
"apexcharts": "3.51.0",
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|