@fileverse-dev/fortune-react 1.1.57 → 1.1.59

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/es/components/SheetOverlay/FormulaHint/dragable-div.js +55 -18
  2. package/es/components/SheetOverlay/FormulaHint/index.js +14 -4
  3. package/lib/components/SheetOverlay/FormulaHint/dragable-div.js +55 -18
  4. package/lib/components/SheetOverlay/FormulaHint/index.js +14 -4
  5. package/package.json +2 -2
package/es/components/SheetOverlay/FormulaHint/dragable-div.js CHANGED
@@ -24,7 +24,24 @@ export var DraggableDiv = function DraggableDiv(_a) {
24
24
  }),
25
25
  dragOffset = _d[0],
26
26
  setDragOffset = _d[1];
27
+ var _e = useState({
28
+ x: 0,
29
+ y: 0
30
+ }),
31
+ initialWindowPos = _e[0],
32
+ setInitialWindowPos = _e[1];
27
33
  var divRef = useRef(null);
34
+ useEffect(function () {
35
+ if (divRef.current) {
36
+ var rect = divRef.current.getBoundingClientRect();
37
+ var left = rect.left + window.scrollX;
38
+ var top_1 = rect.top + window.scrollY;
39
+ setInitialWindowPos({
40
+ x: left,
41
+ y: top_1
42
+ });
43
+ }
44
+ }, []);
28
45
  useEffect(function () {
29
46
  setPosition({
30
47
  x: position.x,
@@ -32,22 +49,16 @@ export var DraggableDiv = function DraggableDiv(_a) {
32
49
  });
33
50
  }, [initialTop]);
34
51
  var handleMouseDown = function handleMouseDown(e) {
52
+ if (!e.target.closest("#luckysheet-formula-help-title")) return;
35
53
  setIsDragging(true);
36
- var element = document.getElementById("luckysheet-formula-help-c");
37
- if (element) {
38
- element.style.userSelect = "none";
39
- }
40
54
  setDragOffset({
41
55
  x: e.clientX - position.x,
42
56
  y: e.clientY - position.y
43
57
  });
44
58
  };
45
59
  var handleTouchStart = function handleTouchStart(e) {
60
+ if (!e.target.closest("#luckysheet-formula-help-title")) return;
46
61
  setIsDragging(true);
47
- var element = document.getElementById("luckysheet-formula-help-c");
48
- if (element) {
49
- element.style.userSelect = "none";
50
- }
51
62
  var touch = e.touches[0];
52
63
  setDragOffset({
53
64
  x: touch.clientX - position.x,
@@ -58,12 +69,27 @@ export var DraggableDiv = function DraggableDiv(_a) {
58
69
  if (!isDragging) return;
59
70
  e.preventDefault();
60
71
  dragHasMoved.current = true;
61
- setPosition(function () {
72
+ setPosition(function (current) {
73
+ var _a, _b;
62
74
  var newX = e.clientX - dragOffset.x;
63
75
  var newY = e.clientY - dragOffset.y;
76
+ var elementWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
77
+ var elementHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
78
+ if (newX + initialWindowPos.x + 150 > window.innerWidth - elementWidth) {
79
+ newX = current.x;
80
+ }
81
+ if (newY + initialWindowPos.y + 200 > window.innerHeight - elementHeight) {
82
+ newY = current.y;
83
+ }
84
+ if (newX + initialWindowPos.x < 0) {
85
+ newX = current.x;
86
+ }
87
+ if (newY + initialWindowPos.y < 0) {
88
+ newY = current.y;
89
+ }
64
90
  return {
65
- x: newX * 1.3,
66
- y: newY * 1.3
91
+ x: newX,
92
+ y: newY
67
93
  };
68
94
  });
69
95
  };
@@ -72,21 +98,32 @@ export var DraggableDiv = function DraggableDiv(_a) {
72
98
  e.preventDefault();
73
99
  dragHasMoved.current = true;
74
100
  var touch = e.touches[0];
75
- setPosition(function () {
101
+ setPosition(function (current) {
102
+ var _a, _b;
76
103
  var newX = touch.clientX - dragOffset.x;
77
104
  var newY = touch.clientY - dragOffset.y;
105
+ var elementWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
106
+ var elementHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
107
+ if (newX + initialWindowPos.x + 100 > window.innerWidth - elementWidth) {
108
+ newX = current.x;
109
+ }
110
+ if (newY + initialWindowPos.y + 200 > window.innerHeight - elementHeight) {
111
+ newY = current.y;
112
+ }
113
+ if (newX + initialWindowPos.x < 0) {
114
+ newX = current.x;
115
+ }
116
+ if (newY + initialWindowPos.y < 0) {
117
+ newY = current.y;
118
+ }
78
119
  return {
79
- x: newX * 1.3,
80
- y: newY * 1.3
120
+ x: newX,
121
+ y: newY
81
122
  };
82
123
  });
83
124
  };
84
125
  var handleMouseUp = function handleMouseUp() {
85
126
  setIsDragging(false);
86
- var element = document.getElementById("luckysheet-formula-help-c");
87
- if (element) {
88
- element.style.userSelect = "auto";
89
- }
90
127
  };
91
128
  var handleTouchEnd = function handleTouchEnd() {
92
129
  setIsDragging(false);
package/es/components/SheetOverlay/FormulaHint/index.js CHANGED
@@ -170,14 +170,20 @@ var FormulaHint = function FormulaHint(props) {
170
170
  if (!dragHasMoved.current) {
171
171
  localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
172
172
  setShouldShowFunctionBody(!showFunctionBody);
173
+ setTimeout(function () {
174
+ calcuatePopUpPlacement();
175
+ }, 50);
173
176
  }
174
177
  dragHasMoved.current = false;
175
178
  },
176
- className: "flex cursor-pointer items-start justify-between",
179
+ className: "flex !cursor-grab active:cursor-grabbing items-start justify-between",
180
+ id: "luckysheet-formula-help-title",
177
181
  style: {
178
182
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
179
183
  padding: "10px",
180
- borderRadius: "10px"
184
+ borderRadius: "10px",
185
+ cursor: "grab",
186
+ userSelect: "none"
181
187
  }
182
188
  }, /*#__PURE__*/React.createElement("div", {
183
189
  className: " flex-grow color-text-default"
@@ -212,7 +218,8 @@ var FormulaHint = function FormulaHint(props) {
212
218
  minWidth: "75px",
213
219
  height: "20px",
214
220
  alignItems: "center",
215
- gap: "6px"
221
+ gap: "6px",
222
+ cursor: "pointer"
216
223
  }
217
224
  }, fn.LOGO && (/*#__PURE__*/React.createElement("img", {
218
225
  src: fn.LOGO,
@@ -279,7 +286,10 @@ var FormulaHint = function FormulaHint(props) {
279
286
  }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React.createElement(LucideIcon, {
280
287
  name: showAPInput ? "ChevronUp" : "ChevronDown",
281
288
  width: 24,
282
- height: 24
289
+ height: 24,
290
+ style: {
291
+ cursor: "pointer"
292
+ }
283
293
  })), showAPInput && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
284
294
  style: {
285
295
  margin: "0 0 16px 0"
package/lib/components/SheetOverlay/FormulaHint/dragable-div.js CHANGED
@@ -31,7 +31,24 @@ var DraggableDiv = exports.DraggableDiv = function DraggableDiv(_a) {
31
31
  }),
32
32
  dragOffset = _d[0],
33
33
  setDragOffset = _d[1];
34
+ var _e = (0, _react.useState)({
35
+ x: 0,
36
+ y: 0
37
+ }),
38
+ initialWindowPos = _e[0],
39
+ setInitialWindowPos = _e[1];
34
40
  var divRef = (0, _react.useRef)(null);
41
+ (0, _react.useEffect)(function () {
42
+ if (divRef.current) {
43
+ var rect = divRef.current.getBoundingClientRect();
44
+ var left = rect.left + window.scrollX;
45
+ var top_1 = rect.top + window.scrollY;
46
+ setInitialWindowPos({
47
+ x: left,
48
+ y: top_1
49
+ });
50
+ }
51
+ }, []);
35
52
  (0, _react.useEffect)(function () {
36
53
  setPosition({
37
54
  x: position.x,
@@ -39,22 +56,16 @@ var DraggableDiv = exports.DraggableDiv = function DraggableDiv(_a) {
39
56
  });
40
57
  }, [initialTop]);
41
58
  var handleMouseDown = function handleMouseDown(e) {
59
+ if (!e.target.closest("#luckysheet-formula-help-title")) return;
42
60
  setIsDragging(true);
43
- var element = document.getElementById("luckysheet-formula-help-c");
44
- if (element) {
45
- element.style.userSelect = "none";
46
- }
47
61
  setDragOffset({
48
62
  x: e.clientX - position.x,
49
63
  y: e.clientY - position.y
50
64
  });
51
65
  };
52
66
  var handleTouchStart = function handleTouchStart(e) {
67
+ if (!e.target.closest("#luckysheet-formula-help-title")) return;
53
68
  setIsDragging(true);
54
- var element = document.getElementById("luckysheet-formula-help-c");
55
- if (element) {
56
- element.style.userSelect = "none";
57
- }
58
69
  var touch = e.touches[0];
59
70
  setDragOffset({
60
71
  x: touch.clientX - position.x,
@@ -65,12 +76,27 @@ var DraggableDiv = exports.DraggableDiv = function DraggableDiv(_a) {
65
76
  if (!isDragging) return;
66
77
  e.preventDefault();
67
78
  dragHasMoved.current = true;
68
- setPosition(function () {
79
+ setPosition(function (current) {
80
+ var _a, _b;
69
81
  var newX = e.clientX - dragOffset.x;
70
82
  var newY = e.clientY - dragOffset.y;
83
+ var elementWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
84
+ var elementHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
85
+ if (newX + initialWindowPos.x + 150 > window.innerWidth - elementWidth) {
86
+ newX = current.x;
87
+ }
88
+ if (newY + initialWindowPos.y + 200 > window.innerHeight - elementHeight) {
89
+ newY = current.y;
90
+ }
91
+ if (newX + initialWindowPos.x < 0) {
92
+ newX = current.x;
93
+ }
94
+ if (newY + initialWindowPos.y < 0) {
95
+ newY = current.y;
96
+ }
71
97
  return {
72
- x: newX * 1.3,
73
- y: newY * 1.3
98
+ x: newX,
99
+ y: newY
74
100
  };
75
101
  });
76
102
  };
@@ -79,21 +105,32 @@ var DraggableDiv = exports.DraggableDiv = function DraggableDiv(_a) {
79
105
  e.preventDefault();
80
106
  dragHasMoved.current = true;
81
107
  var touch = e.touches[0];
82
- setPosition(function () {
108
+ setPosition(function (current) {
109
+ var _a, _b;
83
110
  var newX = touch.clientX - dragOffset.x;
84
111
  var newY = touch.clientY - dragOffset.y;
112
+ var elementWidth = ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
113
+ var elementHeight = ((_b = divRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
114
+ if (newX + initialWindowPos.x + 100 > window.innerWidth - elementWidth) {
115
+ newX = current.x;
116
+ }
117
+ if (newY + initialWindowPos.y + 200 > window.innerHeight - elementHeight) {
118
+ newY = current.y;
119
+ }
120
+ if (newX + initialWindowPos.x < 0) {
121
+ newX = current.x;
122
+ }
123
+ if (newY + initialWindowPos.y < 0) {
124
+ newY = current.y;
125
+ }
85
126
  return {
86
- x: newX * 1.3,
87
- y: newY * 1.3
127
+ x: newX,
128
+ y: newY
88
129
  };
89
130
  });
90
131
  };
91
132
  var handleMouseUp = function handleMouseUp() {
92
133
  setIsDragging(false);
93
- var element = document.getElementById("luckysheet-formula-help-c");
94
- if (element) {
95
- element.style.userSelect = "auto";
96
- }
97
134
  };
98
135
  var handleTouchEnd = function handleTouchEnd() {
99
136
  setIsDragging(false);
package/lib/components/SheetOverlay/FormulaHint/index.js CHANGED
@@ -179,14 +179,20 @@ var FormulaHint = function FormulaHint(props) {
179
179
  if (!dragHasMoved.current) {
180
180
  localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
181
181
  setShouldShowFunctionBody(!showFunctionBody);
182
+ setTimeout(function () {
183
+ calcuatePopUpPlacement();
184
+ }, 50);
182
185
  }
183
186
  dragHasMoved.current = false;
184
187
  },
185
- className: "flex cursor-pointer items-start justify-between",
188
+ className: "flex !cursor-grab active:cursor-grabbing items-start justify-between",
189
+ id: "luckysheet-formula-help-title",
186
190
  style: {
187
191
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
188
192
  padding: "10px",
189
- borderRadius: "10px"
193
+ borderRadius: "10px",
194
+ cursor: "grab",
195
+ userSelect: "none"
190
196
  }
191
197
  }, /*#__PURE__*/_react.default.createElement("div", {
192
198
  className: " flex-grow color-text-default"
@@ -221,7 +227,8 @@ var FormulaHint = function FormulaHint(props) {
221
227
  minWidth: "75px",
222
228
  height: "20px",
223
229
  alignItems: "center",
224
- gap: "6px"
230
+ gap: "6px",
231
+ cursor: "pointer"
225
232
  }
226
233
  }, fn.LOGO && (/*#__PURE__*/_react.default.createElement("img", {
227
234
  src: fn.LOGO,
@@ -288,7 +295,10 @@ var FormulaHint = function FormulaHint(props) {
288
295
  }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
289
296
  name: showAPInput ? "ChevronUp" : "ChevronDown",
290
297
  width: 24,
291
- height: 24
298
+ height: 24,
299
+ style: {
300
+ cursor: "pointer"
301
+ }
292
302
  })), showAPInput && (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
293
303
  style: {
294
304
  margin: "0 0 16px 0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.1.57",
3
+ "version": "1.1.59",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,7 +16,7 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.1.57",
19
+ "@fileverse-dev/fortune-core": "1.1.59",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",