@fileverse-dev/fortune-react 1.2.0-link-ux-1 → 1.2.0-link-ux-2

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/LinkEidtCard/index.d.ts +3 -1
  2. package/es/components/LinkEidtCard/index.js +33 -38
  3. package/lib/components/LinkEidtCard/index.d.ts +3 -1
  4. package/lib/components/LinkEidtCard/index.js +33 -38
  5. package/package.json +3 -2
package/es/components/LinkEidtCard/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
2
  import { LinkCardProps } from "@fileverse-dev/fortune-core";
3
3
  import "./index.css";
4
- export declare const LinkEditCard: React.FC<LinkCardProps>;
4
+ export declare const LinkEditCard: React.FC<LinkCardProps & {
5
+ selectionHeight?: number;
6
+ }>;
5
7
  export default LinkEditCard;
package/es/components/LinkEidtCard/index.js CHANGED
@@ -16,7 +16,6 @@ import _ from "lodash";
16
16
  import WorkbookContext from "../../context";
17
17
  import SVGIcon from "../SVGIcon";
18
18
  export var LinkEditCard = function LinkEditCard(_a) {
19
- var _b;
20
19
  var r = _a.r,
21
20
  c = _a.c,
22
21
  rc = _a.rc,
@@ -24,11 +23,17 @@ export var LinkEditCard = function LinkEditCard(_a) {
24
23
  originType = _a.originType,
25
24
  originAddress = _a.originAddress,
26
25
  isEditing = _a.isEditing,
27
- position = _a.position;
28
- var _c = useContext(WorkbookContext),
29
- context = _c.context,
30
- setContext = _c.setContext,
31
- refs = _c.refs;
26
+ position = _a.position,
27
+ selectionHeight = _a.selectionHeight;
28
+ var _b = useContext(WorkbookContext),
29
+ context = _b.context,
30
+ setContext = _b.setContext,
31
+ refs = _b.refs;
32
+ var cardRef = useRef(null);
33
+ var _c = useState(position.cellBottom + 8),
34
+ cardTop = _c[0],
35
+ setCardTop = _c[1];
36
+ var cellTop = position.cellBottom - (typeof selectionHeight === "number" ? selectionHeight : 30);
32
37
  var _d = useState(originText),
33
38
  linkText = _d[0],
34
39
  setLinkText = _d[1];
@@ -108,38 +113,26 @@ export var LinkEditCard = function LinkEditCard(_a) {
108
113
  setLinkText(originText);
109
114
  setLinkType(originType);
110
115
  }, [rc, originAddress, originText, originType]);
111
- var hintRef = useRef(null);
112
- var _h = useState(((_b = position === null || position === void 0 ? void 0 : position.cellBottom) !== null && _b !== void 0 ? _b : 0) + 4),
113
- popupTopPx = _h[0],
114
- setPopupTopPx = _h[1];
115
- var calculatePopupPlacement = useCallback(function () {
116
- var _a, _b, _c, _d, _e, _f;
117
- var firstSelection = (_a = context === null || context === void 0 ? void 0 : context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
118
- if (!((_c = (_b = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) || !((_e = (_d = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) === null || _d === void 0 ? void 0 : _d.toString) === null || _e === void 0 ? void 0 : _e.call(_d)) || !hintRef.current) {
116
+ useEffect(function () {
117
+ var dragHandle = document.querySelector(".luckysheet-cs-draghandle-top.luckysheet-cs-draghandle");
118
+ var card = cardRef.current;
119
+ if (!dragHandle || !card) {
120
+ setCardTop(position.cellBottom + 8);
119
121
  return;
120
122
  }
121
- var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
122
- var cellBottom = position === null || position === void 0 ? void 0 : position.cellBottom;
123
- var cellTop = cellBottom - selectionHeight;
124
- var inputBottom = cellTop + selectionHeight;
125
- var availableBelow = window.innerHeight - inputBottom;
126
- var divOffset = (_f = hintRef.current) === null || _f === void 0 ? void 0 : _f.offsetHeight;
127
- var hintAbove = divOffset > availableBelow;
128
- var nextTop = hintAbove ? Math.max(0, cellTop - (divOffset + 30)) : cellBottom + 4;
129
- setPopupTopPx(nextTop);
130
- }, [context === null || context === void 0 ? void 0 : context.luckysheet_select_save, position === null || position === void 0 ? void 0 : position.cellBottom]);
131
- useLayoutEffect(function () {
132
- calculatePopupPlacement();
133
- }, [calculatePopupPlacement, isEditing, rc, position]);
134
- useEffect(function () {
135
- var onResize = function onResize() {
136
- return calculatePopupPlacement();
137
- };
138
- window.addEventListener("resize", onResize);
139
- return function () {
140
- return window.removeEventListener("resize", onResize);
141
- };
142
- }, [calculatePopupPlacement]);
123
+ var dragRect = dragHandle.getBoundingClientRect();
124
+ var cardRect = card.getBoundingClientRect();
125
+ var viewportHeight = window.innerHeight;
126
+ var spaceBelow = viewportHeight - dragRect.bottom;
127
+ var spaceAbove = dragRect.top;
128
+ var newTop;
129
+ if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
130
+ newTop = cellTop - cardRect.height - 8;
131
+ } else {
132
+ newTop = position.cellBottom + 8;
133
+ }
134
+ setCardTop(newTop);
135
+ }, [cellTop, position.cellBottom, isEditing, originText, originAddress, originType]);
143
136
  if (!isEditing) {
144
137
  return /*#__PURE__*/React.createElement("div", __assign({}, containerEvent, {
145
138
  onKeyDown: function onKeyDown(e) {
@@ -182,10 +175,12 @@ export var LinkEditCard = function LinkEditCard(_a) {
182
175
  }
183
176
  return /*#__PURE__*/React.createElement("div", __assign({
184
177
  className: "fortune-link-card",
185
- ref: hintRef,
178
+ ref: cardRef,
186
179
  style: {
187
180
  left: position.cellLeft + 20,
188
- top: popupTopPx
181
+ top: cardTop,
182
+ position: "absolute",
183
+ zIndex: 1000
189
184
  }
190
185
  }, containerEvent), /*#__PURE__*/React.createElement(Select, {
191
186
  value: linkType,
package/lib/components/LinkEidtCard/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
2
  import { LinkCardProps } from "@fileverse-dev/fortune-core";
3
3
  import "./index.css";
4
- export declare const LinkEditCard: React.FC<LinkCardProps>;
4
+ export declare const LinkEditCard: React.FC<LinkCardProps & {
5
+ selectionHeight?: number;
6
+ }>;
5
7
  export default LinkEditCard;
package/lib/components/LinkEidtCard/index.js CHANGED
@@ -25,7 +25,6 @@ var __assign = void 0 && (void 0).__assign || function () {
25
25
  return __assign.apply(this, arguments);
26
26
  };
27
27
  var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
28
- var _b;
29
28
  var r = _a.r,
30
29
  c = _a.c,
31
30
  rc = _a.rc,
@@ -33,11 +32,17 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
33
32
  originType = _a.originType,
34
33
  originAddress = _a.originAddress,
35
34
  isEditing = _a.isEditing,
36
- position = _a.position;
37
- var _c = (0, _react.useContext)(_context.default),
38
- context = _c.context,
39
- setContext = _c.setContext,
40
- refs = _c.refs;
35
+ position = _a.position,
36
+ selectionHeight = _a.selectionHeight;
37
+ var _b = (0, _react.useContext)(_context.default),
38
+ context = _b.context,
39
+ setContext = _b.setContext,
40
+ refs = _b.refs;
41
+ var cardRef = (0, _react.useRef)(null);
42
+ var _c = (0, _react.useState)(position.cellBottom + 8),
43
+ cardTop = _c[0],
44
+ setCardTop = _c[1];
45
+ var cellTop = position.cellBottom - (typeof selectionHeight === "number" ? selectionHeight : 30);
41
46
  var _d = (0, _react.useState)(originText),
42
47
  linkText = _d[0],
43
48
  setLinkText = _d[1];
@@ -117,38 +122,26 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
117
122
  setLinkText(originText);
118
123
  setLinkType(originType);
119
124
  }, [rc, originAddress, originText, originType]);
120
- var hintRef = (0, _react.useRef)(null);
121
- var _h = (0, _react.useState)(((_b = position === null || position === void 0 ? void 0 : position.cellBottom) !== null && _b !== void 0 ? _b : 0) + 4),
122
- popupTopPx = _h[0],
123
- setPopupTopPx = _h[1];
124
- var calculatePopupPlacement = (0, _react.useCallback)(function () {
125
- var _a, _b, _c, _d, _e, _f;
126
- var firstSelection = (_a = context === null || context === void 0 ? void 0 : context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
127
- if (!((_c = (_b = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) || !((_e = (_d = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) === null || _d === void 0 ? void 0 : _d.toString) === null || _e === void 0 ? void 0 : _e.call(_d)) || !hintRef.current) {
125
+ (0, _react.useEffect)(function () {
126
+ var dragHandle = document.querySelector(".luckysheet-cs-draghandle-top.luckysheet-cs-draghandle");
127
+ var card = cardRef.current;
128
+ if (!dragHandle || !card) {
129
+ setCardTop(position.cellBottom + 8);
128
130
  return;
129
131
  }
130
- var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
131
- var cellBottom = position === null || position === void 0 ? void 0 : position.cellBottom;
132
- var cellTop = cellBottom - selectionHeight;
133
- var inputBottom = cellTop + selectionHeight;
134
- var availableBelow = window.innerHeight - inputBottom;
135
- var divOffset = (_f = hintRef.current) === null || _f === void 0 ? void 0 : _f.offsetHeight;
136
- var hintAbove = divOffset > availableBelow;
137
- var nextTop = hintAbove ? Math.max(0, cellTop - (divOffset + 30)) : cellBottom + 4;
138
- setPopupTopPx(nextTop);
139
- }, [context === null || context === void 0 ? void 0 : context.luckysheet_select_save, position === null || position === void 0 ? void 0 : position.cellBottom]);
140
- (0, _react.useLayoutEffect)(function () {
141
- calculatePopupPlacement();
142
- }, [calculatePopupPlacement, isEditing, rc, position]);
143
- (0, _react.useEffect)(function () {
144
- var onResize = function onResize() {
145
- return calculatePopupPlacement();
146
- };
147
- window.addEventListener("resize", onResize);
148
- return function () {
149
- return window.removeEventListener("resize", onResize);
150
- };
151
- }, [calculatePopupPlacement]);
132
+ var dragRect = dragHandle.getBoundingClientRect();
133
+ var cardRect = card.getBoundingClientRect();
134
+ var viewportHeight = window.innerHeight;
135
+ var spaceBelow = viewportHeight - dragRect.bottom;
136
+ var spaceAbove = dragRect.top;
137
+ var newTop;
138
+ if (spaceBelow < cardRect.height + 16 && spaceAbove > cardRect.height + 16) {
139
+ newTop = cellTop - cardRect.height - 8;
140
+ } else {
141
+ newTop = position.cellBottom + 8;
142
+ }
143
+ setCardTop(newTop);
144
+ }, [cellTop, position.cellBottom, isEditing, originText, originAddress, originType]);
152
145
  if (!isEditing) {
153
146
  return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
154
147
  onKeyDown: function onKeyDown(e) {
@@ -191,10 +184,12 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
191
184
  }
192
185
  return /*#__PURE__*/_react.default.createElement("div", __assign({
193
186
  className: "fortune-link-card",
194
- ref: hintRef,
187
+ ref: cardRef,
195
188
  style: {
196
189
  left: position.cellLeft + 20,
197
- top: popupTopPx
190
+ top: cardTop,
191
+ position: "absolute",
192
+ zIndex: 1000
198
193
  }
199
194
  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
200
195
  value: linkType,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.2.0-link-ux-1",
3
+ "version": "1.2.0-link-ux-2",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,12 +16,13 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.2.0-link-ux-1",
19
+ "@fileverse-dev/fortune-core": "1.2.0-link-ux-2",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",
23
23
  "immer": "^9.0.12",
24
24
  "lodash": "^4.17.21",
25
+ "react-intersection-observer": "^9.16.0",
25
26
  "regenerator-runtime": "^0.14.1"
26
27
  },
27
28
  "peerDependencies": {