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

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/es/components/LinkEidtCard/index.js +47 -39
  2. package/lib/components/LinkEidtCard/index.js +47 -39
  3. package/package.json +2 -2
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,
@@ -25,10 +24,16 @@ export var LinkEditCard = function LinkEditCard(_a) {
25
24
  originAddress = _a.originAddress,
26
25
  isEditing = _a.isEditing,
27
26
  position = _a.position;
28
- var _c = useContext(WorkbookContext),
29
- context = _c.context,
30
- setContext = _c.setContext,
31
- refs = _c.refs;
27
+ var _b = useContext(WorkbookContext),
28
+ context = _b.context,
29
+ setContext = _b.setContext,
30
+ refs = _b.refs;
31
+ var cardRef = useRef(null);
32
+ var linkAddressRef = useRef(null);
33
+ var linkTextRef = useRef(null);
34
+ var _c = useState(position.cellBottom),
35
+ cardTop = _c[0],
36
+ setCardTop = _c[1];
32
37
  var _d = useState(originText),
33
38
  linkText = _d[0],
34
39
  setLinkText = _d[1];
@@ -108,38 +113,41 @@ 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]);
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
+ var cellTop = position.cellBottom - 30;
131
+ newTop = cellTop - cardRect.height - 8;
132
+ } else {
133
+ newTop = position.cellBottom + 8;
134
+ }
135
+ setCardTop(newTop);
136
+ }, [position.cellBottom, isEditing]);
134
137
  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]);
138
+ if (linkAddressRef.current && !linkAddress && isEditing) {
139
+ setTimeout(function () {
140
+ var _a;
141
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus();
142
+ }, 0);
143
+ }
144
+ if (linkTextRef.current && !linkText && isEditing) {
145
+ setTimeout(function () {
146
+ var _a;
147
+ (_a = linkTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
148
+ }, 0);
149
+ }
150
+ }, [linkAddressRef, isEditing, linkTextRef]);
143
151
  if (!isEditing) {
144
152
  return /*#__PURE__*/React.createElement("div", __assign({}, containerEvent, {
145
153
  onKeyDown: function onKeyDown(e) {
@@ -182,10 +190,10 @@ export var LinkEditCard = function LinkEditCard(_a) {
182
190
  }
183
191
  return /*#__PURE__*/React.createElement("div", __assign({
184
192
  className: "fortune-link-card",
185
- ref: hintRef,
193
+ ref: cardRef,
186
194
  style: {
187
195
  left: position.cellLeft + 20,
188
- top: popupTopPx
196
+ top: cardTop
189
197
  }
190
198
  }, containerEvent), /*#__PURE__*/React.createElement(Select, {
191
199
  value: linkType,
@@ -218,13 +226,13 @@ export var LinkEditCard = function LinkEditCard(_a) {
218
226
  }, /*#__PURE__*/React.createElement(LucideIcon, {
219
227
  name: "ALargeSmall"
220
228
  })), /*#__PURE__*/React.createElement(TextField, {
229
+ ref: linkTextRef,
221
230
  placeholder: "Display text",
222
231
  value: linkText,
223
232
  onChange: function onChange(e) {
224
233
  return setLinkText(e.target.value);
225
234
  },
226
- className: "fortune-link-input",
227
- autoFocus: !linkText
235
+ className: "fortune-link-input"
228
236
  })), linkType === "webpage" && (/*#__PURE__*/React.createElement("div", {
229
237
  className: "fortune-input-with-icon"
230
238
  }, /*#__PURE__*/React.createElement("div", {
@@ -234,9 +242,9 @@ export var LinkEditCard = function LinkEditCard(_a) {
234
242
  width: 16,
235
243
  height: 16
236
244
  })), /*#__PURE__*/React.createElement(TextField, {
245
+ ref: linkAddressRef,
237
246
  placeholder: "Paste URL",
238
247
  value: linkAddress,
239
- autoFocus: !!linkText,
240
248
  onChange: function onChange(e) {
241
249
  return setLinkAddress(e.target.value);
242
250
  },
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,
@@ -34,10 +33,16 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
34
33
  originAddress = _a.originAddress,
35
34
  isEditing = _a.isEditing,
36
35
  position = _a.position;
37
- var _c = (0, _react.useContext)(_context.default),
38
- context = _c.context,
39
- setContext = _c.setContext,
40
- refs = _c.refs;
36
+ var _b = (0, _react.useContext)(_context.default),
37
+ context = _b.context,
38
+ setContext = _b.setContext,
39
+ refs = _b.refs;
40
+ var cardRef = (0, _react.useRef)(null);
41
+ var linkAddressRef = (0, _react.useRef)(null);
42
+ var linkTextRef = (0, _react.useRef)(null);
43
+ var _c = (0, _react.useState)(position.cellBottom),
44
+ cardTop = _c[0],
45
+ setCardTop = _c[1];
41
46
  var _d = (0, _react.useState)(originText),
42
47
  linkText = _d[0],
43
48
  setLinkText = _d[1];
@@ -117,38 +122,41 @@ 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]);
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
+ var cellTop = position.cellBottom - 30;
140
+ newTop = cellTop - cardRect.height - 8;
141
+ } else {
142
+ newTop = position.cellBottom + 8;
143
+ }
144
+ setCardTop(newTop);
145
+ }, [position.cellBottom, isEditing]);
143
146
  (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]);
147
+ if (linkAddressRef.current && !linkAddress && isEditing) {
148
+ setTimeout(function () {
149
+ var _a;
150
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus();
151
+ }, 0);
152
+ }
153
+ if (linkTextRef.current && !linkText && isEditing) {
154
+ setTimeout(function () {
155
+ var _a;
156
+ (_a = linkTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
157
+ }, 0);
158
+ }
159
+ }, [linkAddressRef, isEditing, linkTextRef]);
152
160
  if (!isEditing) {
153
161
  return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
154
162
  onKeyDown: function onKeyDown(e) {
@@ -191,10 +199,10 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
191
199
  }
192
200
  return /*#__PURE__*/_react.default.createElement("div", __assign({
193
201
  className: "fortune-link-card",
194
- ref: hintRef,
202
+ ref: cardRef,
195
203
  style: {
196
204
  left: position.cellLeft + 20,
197
- top: popupTopPx
205
+ top: cardTop
198
206
  }
199
207
  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
200
208
  value: linkType,
@@ -227,13 +235,13 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
227
235
  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
228
236
  name: "ALargeSmall"
229
237
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
238
+ ref: linkTextRef,
230
239
  placeholder: "Display text",
231
240
  value: linkText,
232
241
  onChange: function onChange(e) {
233
242
  return setLinkText(e.target.value);
234
243
  },
235
- className: "fortune-link-input",
236
- autoFocus: !linkText
244
+ className: "fortune-link-input"
237
245
  })), linkType === "webpage" && (/*#__PURE__*/_react.default.createElement("div", {
238
246
  className: "fortune-input-with-icon"
239
247
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -243,9 +251,9 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
243
251
  width: 16,
244
252
  height: 16
245
253
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
254
+ ref: linkAddressRef,
246
255
  placeholder: "Paste URL",
247
256
  value: linkAddress,
248
- autoFocus: !!linkText,
249
257
  onChange: function onChange(e) {
250
258
  return setLinkAddress(e.target.value);
251
259
  },
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-fixes-1",
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.2.0-link-ux-1",
19
+ "@fileverse-dev/fortune-core": "1.2.0-link-ux-fixes-1",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",