@fileverse-dev/fortune-react 1.2.0-patch-2 → 1.2.0-patch-link-ux-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 (9) hide show
  1. package/es/components/DataVerification/RangeDialog.js +0 -3
  2. package/es/components/LinkEidtCard/index.js +66 -16
  3. package/es/components/SheetOverlay/ColumnHeader.js +2 -1
  4. package/es/components/SheetOverlay/RowHeader.js +2 -1
  5. package/es/components/Toolbar/index.js +2 -1
  6. package/lib/components/DataVerification/RangeDialog.js +0 -3
  7. package/lib/components/LinkEidtCard/index.js +65 -15
  8. package/package.json +2 -2
  9. package/CHANGELOG.md +0 -1615
package/es/components/DataVerification/RangeDialog.js CHANGED
@@ -18,7 +18,6 @@ var RangeDialog = function RangeDialog() {
18
18
  rangeTxt2 = _c[0],
19
19
  setRangeTxt2 = _c[1];
20
20
  var close = useCallback(function () {
21
- var _a;
22
21
  setContext(function (ctx) {
23
22
  ctx.rangeDialog.show = false;
24
23
  ctx.rangeDialog.singleSelect = false;
@@ -37,8 +36,6 @@ var RangeDialog = function RangeDialog() {
37
36
  type: rulesType
38
37
  }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
39
38
  }
40
- console.log("rangeDialogType", rangeDialogType);
41
- (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
42
39
  }, [setContext, showDialog, context]);
43
40
  useEffect(function () {
44
41
  setRangeTxt2(getDisplayedRangeTxt(context));
package/es/components/LinkEidtCard/index.js CHANGED
@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
8
8
  };
9
9
  return __assign.apply(this, arguments);
10
10
  };
11
- import React, { useContext, useState, useMemo, useCallback, useLayoutEffect } from "react";
11
+ import React, { useContext, useState, useMemo, useCallback, useLayoutEffect, useRef, useEffect } from "react";
12
12
  import { locale, saveHyperlink, removeHyperlink, replaceHtml, goToLink, isLinkValid } from "@fileverse-dev/fortune-core";
13
13
  import { Button, TextField, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, LucideIcon } from "@fileverse/ui";
14
14
  import "./index.css";
@@ -28,18 +28,24 @@ export var LinkEditCard = function LinkEditCard(_a) {
28
28
  context = _b.context,
29
29
  setContext = _b.setContext,
30
30
  refs = _b.refs;
31
- var _c = useState(originText),
32
- linkText = _c[0],
33
- setLinkText = _c[1];
34
- var _d = useState(originAddress),
35
- linkAddress = _d[0],
36
- setLinkAddress = _d[1];
37
- var _e = useState(originType),
38
- linkType = _e[0],
39
- setLinkType = _e[1];
40
- var _f = locale(context),
41
- insertLink = _f.insertLink,
42
- linkTypeList = _f.linkTypeList;
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];
37
+ var _d = useState(originText),
38
+ linkText = _d[0],
39
+ setLinkText = _d[1];
40
+ var _e = useState(originAddress),
41
+ linkAddress = _e[0],
42
+ setLinkAddress = _e[1];
43
+ var _f = useState(originType),
44
+ linkType = _f[0],
45
+ setLinkType = _f[1];
46
+ var _g = locale(context),
47
+ insertLink = _g.insertLink,
48
+ linkTypeList = _g.linkTypeList;
43
49
  var isLinkAddressValid = isLinkValid(context, linkType, linkAddress);
44
50
  var isButtonDisabled = useMemo(function () {
45
51
  if (!linkText.trim()) return true;
@@ -75,13 +81,20 @@ export var LinkEditCard = function LinkEditCard(_a) {
75
81
  return e.stopPropagation();
76
82
  },
77
83
  onKeyDown: function onKeyDown(e) {
78
- return e.stopPropagation();
84
+ e.stopPropagation();
85
+ if (isButtonDisabled) return;
86
+ if (e.key === "Enter") {
87
+ _.set(refs.globalCache, "linkCard.mouseEnter", false);
88
+ setContext(function (draftCtx) {
89
+ return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
90
+ });
91
+ }
79
92
  },
80
93
  onDoubleClick: function onDoubleClick(e) {
81
94
  return e.stopPropagation();
82
95
  }
83
96
  };
84
- }, [refs.globalCache]);
97
+ }, [refs.globalCache, isButtonDisabled]);
85
98
  var renderToolbarButton = useCallback(function (iconId, onClick) {
86
99
  return /*#__PURE__*/React.createElement("div", {
87
100
  className: "fortune-toolbar-button",
@@ -100,6 +113,40 @@ export var LinkEditCard = function LinkEditCard(_a) {
100
113
  setLinkText(originText);
101
114
  setLinkType(originType);
102
115
  }, [rc, originAddress, originText, originType]);
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);
121
+ return;
122
+ }
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]);
137
+ useEffect(function () {
138
+ var _a, _b;
139
+ if (linkAddressRef.current && !linkAddress && isEditing) {
140
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus({
141
+ preventScroll: true
142
+ });
143
+ }
144
+ if (linkTextRef.current && !linkText && isEditing) {
145
+ (_b = linkTextRef.current) === null || _b === void 0 ? void 0 : _b.focus({
146
+ preventScroll: true
147
+ });
148
+ }
149
+ }, [linkAddressRef, isEditing, linkTextRef]);
103
150
  if (!isEditing) {
104
151
  return /*#__PURE__*/React.createElement("div", __assign({}, containerEvent, {
105
152
  onKeyDown: function onKeyDown(e) {
@@ -142,9 +189,10 @@ export var LinkEditCard = function LinkEditCard(_a) {
142
189
  }
143
190
  return /*#__PURE__*/React.createElement("div", __assign({
144
191
  className: "fortune-link-card",
192
+ ref: cardRef,
145
193
  style: {
146
194
  left: position.cellLeft + 20,
147
- top: position.cellBottom
195
+ top: cardTop
148
196
  }
149
197
  }, containerEvent), /*#__PURE__*/React.createElement(Select, {
150
198
  value: linkType,
@@ -177,6 +225,7 @@ export var LinkEditCard = function LinkEditCard(_a) {
177
225
  }, /*#__PURE__*/React.createElement(LucideIcon, {
178
226
  name: "ALargeSmall"
179
227
  })), /*#__PURE__*/React.createElement(TextField, {
228
+ ref: linkTextRef,
180
229
  placeholder: "Display text",
181
230
  value: linkText,
182
231
  onChange: function onChange(e) {
@@ -192,6 +241,7 @@ export var LinkEditCard = function LinkEditCard(_a) {
192
241
  width: 16,
193
242
  height: 16
194
243
  })), /*#__PURE__*/React.createElement(TextField, {
244
+ ref: linkAddressRef,
195
245
  placeholder: "Paste URL",
196
246
  value: linkAddress,
197
247
  onChange: function onChange(e) {
package/es/components/SheetOverlay/ColumnHeader.js CHANGED
@@ -1,4 +1,5 @@
1
- import { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells, showSelected, api } from "@fileverse-dev/fortune-core";
1
+ import { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells, showSelected } from "@fileverse-dev/fortune-core";
2
+ import { api } from "@fileverse-dev/fortune-core";
2
3
  import _ from "lodash";
3
4
  import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
4
5
  import WorkbookContext from "../../context";
package/es/components/SheetOverlay/RowHeader.js CHANGED
@@ -1,4 +1,5 @@
1
- import { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, handleContextMenu, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, fixRowStyleOverflowInFreeze, handleRowFreezeHandleMouseDown, getSheetIndex, showSelected, fixPositionOnFrozenCells, api } from "@fileverse-dev/fortune-core";
1
+ import { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, handleContextMenu, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, fixRowStyleOverflowInFreeze, handleRowFreezeHandleMouseDown, getSheetIndex, showSelected, fixPositionOnFrozenCells } from "@fileverse-dev/fortune-core";
2
+ import { api } from "@fileverse-dev/fortune-core";
2
3
  import _ from "lodash";
3
4
  import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
4
5
  import WorkbookContext from "../../context";
package/es/components/Toolbar/index.js CHANGED
@@ -123,7 +123,8 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
123
123
  return to.concat(ar || Array.prototype.slice.call(from));
124
124
  };
125
125
  import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
126
- import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleTextSize, normalizedCellAttr, getFlowdata, newComment, editComment, deleteComment, showHideComment, showHideAllComments, autoSelectionFormula, handleSum, locale, handleMerge, handleBorder, toolbarItemSelectedFunc, handleFreeze, insertImage, showImgChooser, updateFormat, handleSort, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, createFilter, clearFilter, applyLocation, insertDuneChart, api } from "@fileverse-dev/fortune-core";
126
+ import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleTextSize, normalizedCellAttr, getFlowdata, newComment, editComment, deleteComment, showHideComment, showHideAllComments, autoSelectionFormula, handleSum, locale, handleMerge, handleBorder, toolbarItemSelectedFunc, handleFreeze, insertImage, showImgChooser, updateFormat, handleSort, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, createFilter, clearFilter, applyLocation, insertDuneChart } from "@fileverse-dev/fortune-core";
127
+ import { api } from "@fileverse-dev/fortune-core";
127
128
  import _ from "lodash";
128
129
  import { IconButton, LucideIcon, Tooltip, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@fileverse/ui";
129
130
  import DataVerificationPortal from "./dataVerificationPortal";
package/lib/components/DataVerification/RangeDialog.js CHANGED
@@ -27,7 +27,6 @@ var RangeDialog = function RangeDialog() {
27
27
  rangeTxt2 = _c[0],
28
28
  setRangeTxt2 = _c[1];
29
29
  var close = (0, _react.useCallback)(function () {
30
- var _a;
31
30
  setContext(function (ctx) {
32
31
  ctx.rangeDialog.show = false;
33
32
  ctx.rangeDialog.singleSelect = false;
@@ -46,8 +45,6 @@ var RangeDialog = function RangeDialog() {
46
45
  type: rulesType
47
46
  }), undefined, (0, _fortuneCore.locale)(context).conditionformat["conditionformat_".concat(rulesType)]);
48
47
  }
49
- console.log("rangeDialogType", rangeDialogType);
50
- (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
51
48
  }, [setContext, showDialog, context]);
52
49
  (0, _react.useEffect)(function () {
53
50
  setRangeTxt2((0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context));
package/lib/components/LinkEidtCard/index.js CHANGED
@@ -37,18 +37,24 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
37
37
  context = _b.context,
38
38
  setContext = _b.setContext,
39
39
  refs = _b.refs;
40
- var _c = (0, _react.useState)(originText),
41
- linkText = _c[0],
42
- setLinkText = _c[1];
43
- var _d = (0, _react.useState)(originAddress),
44
- linkAddress = _d[0],
45
- setLinkAddress = _d[1];
46
- var _e = (0, _react.useState)(originType),
47
- linkType = _e[0],
48
- setLinkType = _e[1];
49
- var _f = (0, _fortuneCore.locale)(context),
50
- insertLink = _f.insertLink,
51
- linkTypeList = _f.linkTypeList;
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];
46
+ var _d = (0, _react.useState)(originText),
47
+ linkText = _d[0],
48
+ setLinkText = _d[1];
49
+ var _e = (0, _react.useState)(originAddress),
50
+ linkAddress = _e[0],
51
+ setLinkAddress = _e[1];
52
+ var _f = (0, _react.useState)(originType),
53
+ linkType = _f[0],
54
+ setLinkType = _f[1];
55
+ var _g = (0, _fortuneCore.locale)(context),
56
+ insertLink = _g.insertLink,
57
+ linkTypeList = _g.linkTypeList;
52
58
  var isLinkAddressValid = (0, _fortuneCore.isLinkValid)(context, linkType, linkAddress);
53
59
  var isButtonDisabled = (0, _react.useMemo)(function () {
54
60
  if (!linkText.trim()) return true;
@@ -84,13 +90,20 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
84
90
  return e.stopPropagation();
85
91
  },
86
92
  onKeyDown: function onKeyDown(e) {
87
- return e.stopPropagation();
93
+ e.stopPropagation();
94
+ if (isButtonDisabled) return;
95
+ if (e.key === "Enter") {
96
+ _lodash.default.set(refs.globalCache, "linkCard.mouseEnter", false);
97
+ setContext(function (draftCtx) {
98
+ return (0, _fortuneCore.saveHyperlink)(draftCtx, r, c, linkText, linkType, linkAddress);
99
+ });
100
+ }
88
101
  },
89
102
  onDoubleClick: function onDoubleClick(e) {
90
103
  return e.stopPropagation();
91
104
  }
92
105
  };
93
- }, [refs.globalCache]);
106
+ }, [refs.globalCache, isButtonDisabled]);
94
107
  var renderToolbarButton = (0, _react.useCallback)(function (iconId, onClick) {
95
108
  return /*#__PURE__*/_react.default.createElement("div", {
96
109
  className: "fortune-toolbar-button",
@@ -109,6 +122,40 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
109
122
  setLinkText(originText);
110
123
  setLinkType(originType);
111
124
  }, [rc, originAddress, originText, originType]);
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);
130
+ return;
131
+ }
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]);
146
+ (0, _react.useEffect)(function () {
147
+ var _a, _b;
148
+ if (linkAddressRef.current && !linkAddress && isEditing) {
149
+ (_a = linkAddressRef.current) === null || _a === void 0 ? void 0 : _a.focus({
150
+ preventScroll: true
151
+ });
152
+ }
153
+ if (linkTextRef.current && !linkText && isEditing) {
154
+ (_b = linkTextRef.current) === null || _b === void 0 ? void 0 : _b.focus({
155
+ preventScroll: true
156
+ });
157
+ }
158
+ }, [linkAddressRef, isEditing, linkTextRef]);
112
159
  if (!isEditing) {
113
160
  return /*#__PURE__*/_react.default.createElement("div", __assign({}, containerEvent, {
114
161
  onKeyDown: function onKeyDown(e) {
@@ -151,9 +198,10 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
151
198
  }
152
199
  return /*#__PURE__*/_react.default.createElement("div", __assign({
153
200
  className: "fortune-link-card",
201
+ ref: cardRef,
154
202
  style: {
155
203
  left: position.cellLeft + 20,
156
- top: position.cellBottom
204
+ top: cardTop
157
205
  }
158
206
  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
159
207
  value: linkType,
@@ -186,6 +234,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
186
234
  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
187
235
  name: "ALargeSmall"
188
236
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
237
+ ref: linkTextRef,
189
238
  placeholder: "Display text",
190
239
  value: linkText,
191
240
  onChange: function onChange(e) {
@@ -201,6 +250,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
201
250
  width: 16,
202
251
  height: 16
203
252
  })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
253
+ ref: linkAddressRef,
204
254
  placeholder: "Paste URL",
205
255
  value: linkAddress,
206
256
  onChange: function onChange(e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.2.0-patch-2",
3
+ "version": "1.2.0-patch-link-ux-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-patch-2",
19
+ "@fileverse-dev/fortune-core": "1.2.0-patch-link-ux-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",