@fileverse-dev/fortune-react 1.0.2-mod-41 → 1.0.2-mod-42

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 (7) hide show
  1. package/dist/components/Workbook/api.d.ts +1 -1
  2. package/dist/components/Workbook/index.d.ts +1 -1
  3. package/dist/index.esm.js +144 -92
  4. package/dist/index.js +144 -92
  5. package/dist/index.umd.js +2720 -4356
  6. package/dist/index.umd.min.js +9 -9
  7. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -796,12 +796,37 @@ var ContentEditable = function ContentEditable(_ref) {
796
796
  };
797
797
 
798
798
  var FormulaSearch = function FormulaSearch(props) {
799
+ var _context$luckysheet_s;
799
800
  var _useContext = React.useContext(WorkbookContext),
800
801
  context = _useContext.context;
802
+ var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
803
+ var hintRef = React.useRef(null);
804
+ var _useState = React.useState(0),
805
+ _useState2 = _slicedToArray(_useState, 2),
806
+ top = _useState2[0],
807
+ setTop = _useState2[1];
808
+ var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
809
+ var _hintRef$current;
810
+ if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
811
+ var hintHeight = hintRef.current.offsetHeight;
812
+ var inputBottom = firstSelection.top + firstSelection.height_move;
813
+ var availableBelow = window.innerHeight - inputBottom;
814
+ var hintAbove = hintHeight > availableBelow;
815
+ var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
816
+ var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
817
+ setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
818
+ };
819
+ React.useEffect(function () {
820
+ calcuatePopUpPlacement();
821
+ });
801
822
  if (___default['default'].isEmpty(context.functionCandidates)) return null;
802
823
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
824
+ ref: hintRef,
803
825
  id: "luckysheet-formula-search-c",
804
- className: "luckysheet-formula-search-c"
826
+ className: "luckysheet-formula-search-c",
827
+ style: {
828
+ top: top
829
+ }
805
830
  }), context.functionCandidates.map(function (v, index) {
806
831
  return /*#__PURE__*/React__default['default'].createElement("div", {
807
832
  key: v.n,
@@ -851,8 +876,10 @@ var FormulaSearch = function FormulaSearch(props) {
851
876
  };
852
877
 
853
878
  var FormulaHint = function FormulaHint(props) {
879
+ var _context$luckysheet_s;
854
880
  var _useContext = React.useContext(WorkbookContext),
855
881
  context = _useContext.context;
882
+ var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
856
883
  var _locale = fortuneCore.locale(context),
857
884
  formulaMore = _locale.formulaMore;
858
885
  var fn = context.formulaCache.functionlistMap[context.functionHint];
@@ -868,7 +895,7 @@ var FormulaHint = function FormulaHint(props) {
868
895
  _useState6 = _slicedToArray(_useState5, 2),
869
896
  isKeyAdded = _useState6[0],
870
897
  setApiKeyAdded = _useState6[1];
871
- var _useState7 = React.useState(false),
898
+ var _useState7 = React.useState(true),
872
899
  _useState8 = _slicedToArray(_useState7, 2),
873
900
  showFunctionBody = _useState8[0],
874
901
  setShouldShowFunctionBody = _useState8[1];
@@ -882,11 +909,66 @@ var FormulaHint = function FormulaHint(props) {
882
909
  var apiKeyPlaceholder = {
883
910
  ETHERSCAN_API_KEY: "Etherscan API key"
884
911
  };
912
+ var hintRef = React.useRef(null);
913
+ var _useState9 = React.useState(0),
914
+ _useState0 = _slicedToArray(_useState9, 2),
915
+ top = _useState0[0],
916
+ setTop = _useState0[1];
917
+ var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
918
+ var _hintRef$current;
919
+ if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
920
+ var hintHeight = 422;
921
+ var inputBottom = firstSelection.top + firstSelection.height_move;
922
+ var availableBelow = window.innerHeight - inputBottom;
923
+ var hintAbove = hintHeight > availableBelow;
924
+ var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
925
+ var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
926
+ setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
927
+ };
928
+ React.useEffect(function () {
929
+ calcuatePopUpPlacement();
930
+ });
931
+ React.useEffect(function () {
932
+ var el = document.getElementById("function-details");
933
+ var handleWheel;
934
+ if (el) {
935
+ var scrollLockTimeout = null;
936
+ var cache = {
937
+ verticalScrollLock: false,
938
+ horizontalScrollLock: false
939
+ };
940
+ handleWheel = function handleWheel(e) {
941
+ e.preventDefault();
942
+ var step = 40;
943
+ var ratio = 1;
944
+ if (e.deltaY !== 0 && !cache.verticalScrollLock) {
945
+ cache.horizontalScrollLock = true;
946
+ el.scrollTop += (e.deltaY > 0 ? 1 : -1) * step * ratio;
947
+ } else if (e.deltaX !== 0 && !cache.horizontalScrollLock) {
948
+ cache.verticalScrollLock = true;
949
+ el.scrollLeft += (e.deltaX > 0 ? 1 : -1) * step * ratio;
950
+ }
951
+ clearTimeout(scrollLockTimeout);
952
+ scrollLockTimeout = setTimeout(function () {
953
+ cache.verticalScrollLock = false;
954
+ cache.horizontalScrollLock = false;
955
+ }, 50);
956
+ };
957
+ el.addEventListener("wheel", handleWheel, {
958
+ passive: false
959
+ });
960
+ }
961
+ return function () {
962
+ if (el && handleWheel) el.removeEventListener("wheel", handleWheel);
963
+ };
964
+ }, []);
885
965
  if (!fn) return null;
886
966
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
967
+ ref: hintRef,
887
968
  id: "luckysheet-formula-help-c",
888
969
  className: "luckysheet-formula-help-c",
889
970
  style: {
971
+ top: top,
890
972
  borderWidth: "1px",
891
973
  borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
892
974
  backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
@@ -977,8 +1059,11 @@ var FormulaHint = function FormulaHint(props) {
977
1059
  height: 16
978
1060
  })))), showFunctionBody && (/*#__PURE__*/React__default['default'].createElement("div", {
979
1061
  className: "luckysheet-formula-help-content",
1062
+ id: "function-details",
980
1063
  style: {
981
- backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
1064
+ backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
1065
+ maxHeight: "318px",
1066
+ overflowY: "scroll"
982
1067
  }
983
1068
  }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
984
1069
  style: {
@@ -1115,8 +1200,12 @@ var FormulaHint = function FormulaHint(props) {
1115
1200
  borderBottomRightRadius: "10px"
1116
1201
  },
1117
1202
  className: "w-full"
1118
- }, /*#__PURE__*/React__default['default'].createElement("p", {
1119
- className: "color-text-link text-helper-text-sm"
1203
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
1204
+ onClick: function onClick() {
1205
+ var _document$getElementB;
1206
+ (_document$getElementB = document.getElementById("function-button")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
1207
+ },
1208
+ className: "color-text-link cursor-pointer text-helper-text-sm"
1120
1209
  }, "Learn More")));
1121
1210
  };
1122
1211
 
@@ -1215,6 +1304,38 @@ var InputBox = function InputBox() {
1215
1304
  var getActiveFormula = React.useCallback(function () {
1216
1305
  return document.querySelector(".luckysheet-formula-search-item-active");
1217
1306
  }, []);
1307
+ var insertSelectedFormula = React.useCallback(function (formulaName) {
1308
+ var _getrangeseleciton;
1309
+ var textEditor = document.getElementById("luckysheet-rich-text-editor");
1310
+ if (!textEditor) return;
1311
+ var searchTxt = ((_getrangeseleciton = fortuneCore.getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
1312
+ var deleteCount = searchTxt.length;
1313
+ textEditor.focus();
1314
+ var selection = window.getSelection();
1315
+ if (!selection || selection.rangeCount === 0) return;
1316
+ var range = selection.getRangeAt(0);
1317
+ if (deleteCount !== 0 && range) {
1318
+ var startOffset = Math.max(range.startOffset - deleteCount, 0);
1319
+ var endOffset = range.startOffset;
1320
+ range.setStart(range.startContainer, startOffset);
1321
+ range.setEnd(range.startContainer, endOffset);
1322
+ range.deleteContents();
1323
+ }
1324
+ var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
1325
+ var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
1326
+ if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
1327
+ range.setStart(range.startContainer.parentNode, 1);
1328
+ }
1329
+ if (parNode) range.insertNode(parNode);
1330
+ if (funcNode) range.insertNode(funcNode);
1331
+ range.collapse();
1332
+ selection.removeAllRanges();
1333
+ selection.addRange(range);
1334
+ setContext(function (draftCtx) {
1335
+ draftCtx.functionCandidates = [];
1336
+ draftCtx.functionHint = formulaName;
1337
+ });
1338
+ }, [setContext]);
1218
1339
  var clearSearchItemActiveClass = React.useCallback(function () {
1219
1340
  var activeFormula = getActiveFormula();
1220
1341
  if (activeFormula) {
@@ -1222,89 +1343,24 @@ var InputBox = function InputBox() {
1222
1343
  }
1223
1344
  }, [getActiveFormula]);
1224
1345
  var selectActiveFormula = React.useCallback(function (e) {
1225
- var activeFormula = getActiveFormula();
1226
- var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
1227
- if (formulaNameDiv) {
1228
- var formulaName = formulaNameDiv.textContent;
1229
- var textEditor = document.getElementById("luckysheet-rich-text-editor");
1230
- if (textEditor) {
1231
- var _getrangeseleciton;
1232
- var searchTxt = ((_getrangeseleciton = fortuneCore.getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
1233
- var deleteCount = searchTxt.length;
1234
- textEditor.focus();
1235
- var selection = window.getSelection();
1236
- if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
1237
- var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
1238
- if (deleteCount !== 0 && range) {
1239
- var startOffset = Math.max(range.startOffset - deleteCount, 0);
1240
- var endOffset = range.startOffset;
1241
- range.setStart(range.startContainer, startOffset);
1242
- range.setEnd(range.startContainer, endOffset);
1243
- range.deleteContents();
1244
- }
1245
- var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
1246
- var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
1247
- var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
1248
- var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
1249
- if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
1250
- range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
1251
- }
1252
- range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
1253
- range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
1254
- range === null || range === void 0 ? void 0 : range.collapse();
1255
- selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
1256
- if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
1257
- setContext(function (draftCtx) {
1258
- draftCtx.functionCandidates = [];
1259
- draftCtx.functionHint = formulaName;
1260
- });
1261
- }
1346
+ var _getActiveFormula, _getActiveFormula$que;
1347
+ var formulaName = (_getActiveFormula = getActiveFormula()) === null || _getActiveFormula === void 0 ? void 0 : (_getActiveFormula$que = _getActiveFormula.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula$que === void 0 ? void 0 : _getActiveFormula$que.textContent;
1348
+ if (formulaName) {
1349
+ insertSelectedFormula(formulaName);
1262
1350
  e.preventDefault();
1263
1351
  e.stopPropagation();
1264
1352
  }
1265
- }, [getActiveFormula, setContext]);
1353
+ }, [getActiveFormula, insertSelectedFormula]);
1266
1354
  var selectActiveFormulaOnClick = React.useCallback(function (e) {
1267
- var activeFormula = getActiveFormula();
1268
- var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
1269
- if (formulaNameDiv) {
1270
- var formulaName = formulaNameDiv.textContent;
1271
- var textEditor = document.getElementById("luckysheet-rich-text-editor");
1272
- if (textEditor) {
1273
- var _getrangeseleciton2;
1274
- var searchTxt = ((_getrangeseleciton2 = fortuneCore.getrangeseleciton()) === null || _getrangeseleciton2 === void 0 ? void 0 : _getrangeseleciton2.textContent) || "";
1275
- var deleteCount = searchTxt.length;
1276
- textEditor.focus();
1277
- var selection = window.getSelection();
1278
- if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
1279
- var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
1280
- if (deleteCount !== 0 && range) {
1281
- var startOffset = Math.max(range.startOffset - deleteCount, 0);
1282
- var endOffset = range.startOffset;
1283
- range.setStart(range.startContainer, startOffset);
1284
- range.setEnd(range.startContainer, endOffset);
1285
- range.deleteContents();
1286
- }
1287
- var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
1288
- var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
1289
- var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
1290
- var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
1291
- if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
1292
- range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
1293
- }
1294
- range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
1295
- range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
1296
- range === null || range === void 0 ? void 0 : range.collapse();
1297
- selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
1298
- if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
1299
- setContext(function (draftCtx) {
1300
- draftCtx.functionCandidates = [];
1301
- draftCtx.functionHint = formulaName;
1302
- });
1303
- }
1355
+ var _getActiveFormula2, _getActiveFormula2$qu;
1356
+ preText.current = inputRef.current.innerText;
1357
+ var formulaName = (_getActiveFormula2 = getActiveFormula()) === null || _getActiveFormula2 === void 0 ? void 0 : (_getActiveFormula2$qu = _getActiveFormula2.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula2$qu === void 0 ? void 0 : _getActiveFormula2$qu.textContent;
1358
+ if (formulaName) {
1359
+ insertSelectedFormula(formulaName);
1304
1360
  e.preventDefault();
1305
1361
  e.stopPropagation();
1306
1362
  }
1307
- }, [getActiveFormula, setContext]);
1363
+ }, [getActiveFormula, insertSelectedFormula]);
1308
1364
  var onKeyDown = React.useCallback(function (e) {
1309
1365
  lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
1310
1366
  preText.current = inputRef.current.innerText;
@@ -1421,10 +1477,7 @@ var InputBox = function InputBox() {
1421
1477
  onKeyDown: onKeyDown,
1422
1478
  onPaste: onPaste,
1423
1479
  allowEdit: edit ? !isHidenRC : edit
1424
- })), document.activeElement === inputRef.current && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
1425
- style: {
1426
- top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
1427
- },
1480
+ })), (context.functionCandidates.length > 0 || context.functionHint) && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(FormulaSearch, {
1428
1481
  onMouseOver: function onMouseOver(e) {
1429
1482
  if (document.getElementById("luckysheet-formula-search-c")) {
1430
1483
  var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -1434,14 +1487,10 @@ var InputBox = function InputBox() {
1434
1487
  }
1435
1488
  e.preventDefault();
1436
1489
  },
1437
- onClick: function onClick(e) {
1490
+ onMouseDown: function onMouseDown(e) {
1438
1491
  selectActiveFormulaOnClick(e);
1439
1492
  }
1440
- }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, {
1441
- style: {
1442
- top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
1443
- }
1444
- }))));
1493
+ }), /*#__PURE__*/React__default['default'].createElement(FormulaHint, null))));
1445
1494
  };
1446
1495
 
1447
1496
  var ScrollBar = function ScrollBar(_ref) {
@@ -4326,6 +4375,9 @@ var Sheet = function Sheet(_ref) {
4326
4375
  }
4327
4376
  }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
4328
4377
  var onWheel = React.useCallback(function (e) {
4378
+ var el = document.getElementById("function-details");
4379
+ var isMouseOver = el === null || el === void 0 ? void 0 : el.matches(":hover");
4380
+ if (el && isMouseOver) return;
4329
4381
  setContext(function (draftCtx) {
4330
4382
  fortuneCore.handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
4331
4383
  });
@@ -10547,7 +10599,7 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
10547
10599
  getLocaleContext: function getLocaleContext() {
10548
10600
  return fortuneCore.locale(context);
10549
10601
  },
10550
- getWorkbookContect: function getWorkbookContect() {
10602
+ getWorkbookContext: function getWorkbookContext() {
10551
10603
  return context;
10552
10604
  }
10553
10605
  };