@gustavo-valsechi/client 1.4.70 → 1.4.72

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 (5) hide show
  1. package/dist/contexts/target/index.js +27 -18
  2. package/dist/contexts/target/index.mjs +28 -19
  3. package/dist/contexts/target/styles.js +2 -1
  4. package/dist/contexts/target/styles.mjs +2 -1
  5. 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,21 @@ 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(showMemory, (data) => data.index === index);
71
+ if (!config) {
72
+ element.style.opacity = "0";
73
+ element.style.zIndex = "-1";
74
+ return;
75
+ }
76
+ element.style.top = `${config.coords.top}px`;
77
+ element.style.left = `${config.coords.left}px`;
78
+ element.style.opacity = "1";
79
+ element.style.zIndex = "10";
80
+ });
81
+ }, [showMemory, containerRef]);
66
82
  const getCoords = (target) => {
67
83
  const rect = target.getBoundingClientRect();
68
84
  const targetTop = rect.top + window.scrollY;
@@ -88,23 +104,6 @@ const TargetProviderContainer = ({ children }) => {
88
104
  memory.slice(index, 1);
89
105
  setTargets(memory);
90
106
  };
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
107
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
109
108
  TargetContext.Provider,
110
109
  {
@@ -113,7 +112,17 @@ const TargetProviderContainer = ({ children }) => {
113
112
  remove
114
113
  },
115
114
  children: [
116
- import_lodash.default.map(targets, (target, index) => renderTarget(target, index)),
115
+ import_lodash.default.map(
116
+ targets,
117
+ (target, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ import_styles.Container,
119
+ {
120
+ ref: (element) => containerRef.current[index] = element,
121
+ children: target.component
122
+ },
123
+ index
124
+ )
125
+ ),
117
126
  children
118
127
  ]
119
128
  }
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,21 @@ 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(showMemory, (data) => data.index === index);
37
+ if (!config) {
38
+ element.style.opacity = "0";
39
+ element.style.zIndex = "-1";
40
+ return;
41
+ }
42
+ element.style.top = `${config.coords.top}px`;
43
+ element.style.left = `${config.coords.left}px`;
44
+ element.style.opacity = "1";
45
+ element.style.zIndex = "10";
46
+ });
47
+ }, [showMemory, containerRef]);
32
48
  const getCoords = (target) => {
33
49
  const rect = target.getBoundingClientRect();
34
50
  const targetTop = rect.top + window.scrollY;
@@ -54,23 +70,6 @@ const TargetProviderContainer = ({ children }) => {
54
70
  memory.slice(index, 1);
55
71
  setTargets(memory);
56
72
  };
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
73
  return /* @__PURE__ */ jsxs(
75
74
  TargetContext.Provider,
76
75
  {
@@ -79,7 +78,17 @@ const TargetProviderContainer = ({ children }) => {
79
78
  remove
80
79
  },
81
80
  children: [
82
- _.map(targets, (target, index) => renderTarget(target, index)),
81
+ _.map(
82
+ targets,
83
+ (target, index) => /* @__PURE__ */ jsx(
84
+ Container,
85
+ {
86
+ ref: (element) => containerRef.current[index] = element,
87
+ children: target.component
88
+ },
89
+ index
90
+ )
91
+ ),
83
92
  children
84
93
  ]
85
94
  }
package/dist/contexts/target/styles.js CHANGED
@@ -35,7 +35,8 @@ module.exports = __toCommonJS(styles_exports);
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
36
  const Container = import_styled_components.default.div`
37
37
  position: absolute;
38
- z-index: 10;
38
+ opacity: 0;
39
+ z-index: -1;
39
40
 
40
41
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
41
42
  width: 100%;
package/dist/contexts/target/styles.mjs CHANGED
@@ -2,7 +2,8 @@
2
2
  import styled from "styled-components";
3
3
  const Container = styled.div`
4
4
  position: absolute;
5
- z-index: 10;
5
+ opacity: 0;
6
+ z-index: -1;
6
7
 
7
8
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
8
9
  width: 100%;
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.72",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",