@gustavo-valsechi/client 1.4.70 → 1.4.71

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/dist/contexts/target/index.js +25 -18
  2. package/dist/contexts/target/index.mjs +26 -19
  3. package/package.json +1 -1
package/dist/contexts/target/index.js CHANGED
@@ -41,6 +41,7 @@ const TargetContext = (0, import_react.createContext)({});
41
41
  const memory = [];
42
42
  const showMemory = [];
43
43
  const TargetProviderContainer = ({ children }) => {
44
+ const containerRef = (0, import_react.useRef)([]);
44
45
  const [targets, setTargets] = (0, import_react.useState)([]);
45
46
  const [show, setShow] = (0, import_react.useState)([]);
46
47
  (0, import_react.useEffect)(() => {
@@ -63,6 +64,19 @@ const TargetProviderContainer = ({ children }) => {
63
64
  });
64
65
  });
65
66
  }, [targets]);
67
+ (0, import_react.useEffect)(() => {
68
+ if (!containerRef.current) return;
69
+ import_lodash.default.forEach(containerRef.current, (element, index) => {
70
+ const config = import_lodash.default.find(show, (data) => data.index === index);
71
+ if (!config) {
72
+ element.style.display = "none";
73
+ return;
74
+ }
75
+ element.style.top = `${config.coords.top}px`;
76
+ element.style.left = `${config.coords.left}px`;
77
+ element.style.display = "block";
78
+ });
79
+ }, [show, containerRef]);
66
80
  const getCoords = (target) => {
67
81
  const rect = target.getBoundingClientRect();
68
82
  const targetTop = rect.top + window.scrollY;
@@ -88,23 +102,6 @@ const TargetProviderContainer = ({ children }) => {
88
102
  memory.slice(index, 1);
89
103
  setTargets(memory);
90
104
  };
91
- console.log("show fora", show);
92
- const renderTarget = (0, import_react.useCallback)((target, index) => {
93
- console.log("show dentro", show);
94
- const targetContent = import_lodash.default.find(show, (data) => data.index === index);
95
- console.log("targetContent", targetContent);
96
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
97
- import_styles.Container,
98
- {
99
- style: {
100
- ...(targetContent == null ? void 0 : targetContent.coords) || {},
101
- visibility: !!targetContent ? "visible" : "hidden"
102
- },
103
- children: target.component
104
- },
105
- index
106
- );
107
- }, [show]);
108
105
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
109
106
  TargetContext.Provider,
110
107
  {
@@ -113,7 +110,17 @@ const TargetProviderContainer = ({ children }) => {
113
110
  remove
114
111
  },
115
112
  children: [
116
- import_lodash.default.map(targets, (target, index) => renderTarget(target, index)),
113
+ import_lodash.default.map(
114
+ targets,
115
+ (target, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
116
+ import_styles.Container,
117
+ {
118
+ ref: (element) => containerRef.current[index] = element,
119
+ children: target.component
120
+ },
121
+ index
122
+ )
123
+ ),
117
124
  children
118
125
  ]
119
126
  }
package/dist/contexts/target/index.mjs CHANGED
@@ -1,12 +1,13 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { createContext, useContext, useEffect, useState, useCallback } from "react";
3
+ import { createContext, useContext, useEffect, useState, useRef } from "react";
4
4
  import { Container } from "./styles";
5
5
  import _ from "lodash";
6
6
  const TargetContext = createContext({});
7
7
  const memory = [];
8
8
  const showMemory = [];
9
9
  const TargetProviderContainer = ({ children }) => {
10
+ const containerRef = useRef([]);
10
11
  const [targets, setTargets] = useState([]);
11
12
  const [show, setShow] = useState([]);
12
13
  useEffect(() => {
@@ -29,6 +30,19 @@ const TargetProviderContainer = ({ children }) => {
29
30
  });
30
31
  });
31
32
  }, [targets]);
33
+ useEffect(() => {
34
+ if (!containerRef.current) return;
35
+ _.forEach(containerRef.current, (element, index) => {
36
+ const config = _.find(show, (data) => data.index === index);
37
+ if (!config) {
38
+ element.style.display = "none";
39
+ return;
40
+ }
41
+ element.style.top = `${config.coords.top}px`;
42
+ element.style.left = `${config.coords.left}px`;
43
+ element.style.display = "block";
44
+ });
45
+ }, [show, containerRef]);
32
46
  const getCoords = (target) => {
33
47
  const rect = target.getBoundingClientRect();
34
48
  const targetTop = rect.top + window.scrollY;
@@ -54,23 +68,6 @@ const TargetProviderContainer = ({ children }) => {
54
68
  memory.slice(index, 1);
55
69
  setTargets(memory);
56
70
  };
57
- console.log("show fora", show);
58
- const renderTarget = useCallback((target, index) => {
59
- console.log("show dentro", show);
60
- const targetContent = _.find(show, (data) => data.index === index);
61
- console.log("targetContent", targetContent);
62
- return /* @__PURE__ */ jsx(
63
- Container,
64
- {
65
- style: {
66
- ...(targetContent == null ? void 0 : targetContent.coords) || {},
67
- visibility: !!targetContent ? "visible" : "hidden"
68
- },
69
- children: target.component
70
- },
71
- index
72
- );
73
- }, [show]);
74
71
  return /* @__PURE__ */ jsxs(
75
72
  TargetContext.Provider,
76
73
  {
@@ -79,7 +76,17 @@ const TargetProviderContainer = ({ children }) => {
79
76
  remove
80
77
  },
81
78
  children: [
82
- _.map(targets, (target, index) => renderTarget(target, index)),
79
+ _.map(
80
+ targets,
81
+ (target, index) => /* @__PURE__ */ jsx(
82
+ Container,
83
+ {
84
+ ref: (element) => containerRef.current[index] = element,
85
+ children: target.component
86
+ },
87
+ index
88
+ )
89
+ ),
83
90
  children
84
91
  ]
85
92
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.70",
3
+ "version": "1.4.71",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",