@fileverse-dev/fortune-react 1.0.2-mod-25-patch-1 → 1.0.2-mod-27

package/dist/index.js

@@ -807,25 +807,77 @@ var FormulaSearch = function FormulaSearch(props) {
       key: v.n,
       "data-func": v.n,
       className: "luckysheet-formula-search-item ".concat(index === 0 ? "luckysheet-formula-search-item-active" : "")
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between"
+      }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "luckysheet-formula-search-func"
     }, v.n), /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, v.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
+      src: v.LOGO,
+      alt: "Service Logo",
+      width: 32,
+      height: 32
+    })), v.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        borderRadius: "4px",
+        width: "20px",
+        height: "20px",
+        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#F9A92B")
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+      name: "Key",
+      style: {
+        color: "white"
+      }
+    }))))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "luckysheet-formula-search-detail"
     }, v.d));
   }));
 };
 
+function lightenHexColor(hex) {
+  var amount = 100;
+  if (hex.startsWith("#")) {
+    hex = hex.slice(1);
+  }
+  var r = parseInt(hex.slice(0, 2), 16);
+  var g = parseInt(hex.slice(2, 4), 16);
+  var b = parseInt(hex.slice(4, 6), 16);
+  r = Math.min(255, r + amount);
+  g = Math.min(255, g + amount);
+  b = Math.min(255, b + amount);
+  var newHex = "#".concat((1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase());
+  return newHex;
+}
 var FormulaHint = function FormulaHint(props) {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context;
   var _locale = fortuneCore.locale(context),
     formulaMore = _locale.formulaMore;
-  if (!context.functionHint) return null;
   var fn = context.formulaCache.functionlistMap[context.functionHint];
+  var _useState = React.useState(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    _useState2 = _slicedToArray(_useState, 2),
+    API_KEY = _useState2[0],
+    setAPI_KEY = _useState2[1];
+  var _useState3 = React.useState(!API_KEY),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAPInput = _useState4[0],
+    setShowAPInput = _useState4[1];
   if (!fn) return null;
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
     id: "luckysheet-formula-help-c",
-    className: "luckysheet-formula-help-c"
+    className: "luckysheet-formula-help-c",
+    style: {
+      border: "1px solid ".concat(fn.BRAND_COLOR),
+      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+    }
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-close",
     title: "\u5173\u95ED"
@@ -839,7 +891,10 @@ var FormulaHint = function FormulaHint(props) {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-title"
+    className: "luckysheet-formula-help-title formula-title",
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+    }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-title-formula"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
@@ -863,16 +918,98 @@ var FormulaHint = function FormulaHint(props) {
     }, name, i !== fn.p.length - 1 && ", ");
   })), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
-  }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-content"
+  }, ")")), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: "flex",
+      gap: "4px"
+    }
+  }, fn.LOGO && (/*#__PURE__*/React__default['default'].createElement("img", {
+    src: fn.LOGO,
+    alt: "Service Logo",
+    width: 32,
+    height: 32
+  })), fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      borderRadius: "4px",
+      width: "20px",
+      height: "20px",
+      backgroundColor: "".concat(localStorage.getItem(fn.API_KEY) ? "#177E23" : "#F9A92B")
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: "Key",
+    style: {
+      color: "white"
+    }
+  }))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "luckysheet-formula-help-content",
+    style: {
+      backgroundColor: "".concat(fn.BRAND_COLOR ? lightenHexColor(fn.BRAND_COLOR) : "#F8F9FA")
+    }
+  }, fn.API_KEY && (/*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      borderLeft: "4px solid ".concat(API_KEY ? "#177E23" : "#fb923c"),
+      backgroundColor: "white",
+      padding: "16px",
+      margin: "4px 4px 0px 4px",
+      borderRadius: "4px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      cursor: "pointer"
+    },
+    onClick: function onClick() {
+      return setShowAPInput(!showAPInput);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("h3", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#1f2937",
+      margin: "0 0 8px 0"
+    }
+  }, "API key is required"), /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
+    name: "ChevronDown",
+    width: 24,
+    height: 24
+  })), showAPInput && (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("p", {
+    style: {
+      color: "#6b7280",
+      margin: "0 0 16px 0"
+    }
+  }, "This function is require API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      display: "flex",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ui.TextField, {
+    value: API_KEY,
+    id: "function-api-key",
+    type: "text",
+    placeholder: "API key",
+    onChange: function onChange(e) {
+      setAPI_KEY(e.target.value);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: function onClick() {
+      localStorage.setItem(fn.API_KEY, API_KEY);
+    }
+  }, "Ok")))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      backgroundColor: "white",
+      padding: "6px",
+      margin: "4px 4px 0px 4px",
+      borderRadius: "4px"
+    }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content-example"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title"
+    className: "luckysheet-arguments-help-section-title example-title"
   }, formulaMore.helpExample), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-arguments-help-formula"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-function-name"
+    className: "luckysheet-arguments-help-function-name example-value"
   }, fn.n), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
   }, "("), /*#__PURE__*/React__default['default'].createElement("span", {
@@ -886,13 +1023,16 @@ var FormulaHint = function FormulaHint(props) {
   })), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "luckysheet-arguments-paren"
   }, ")"))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-formula-help-content-detail"
+    className: "luckysheet-formula-help-content-detail",
+    style: {
+      paddingBottom: "6px"
+    }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-arguments-help-section"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name"
-  }, formulaMore.helpAbstract), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "luckysheet-arguments-help-parameter-content"
+    className: "luckysheet-arguments-help-section-title luckysheet-arguments-help-parameter-name example-title"
+  }, "About"), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "luckysheet-arguments-help-parameter-content example-value"
   }, fn.d))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-content-param"
   }, fn.p.map(function (param) {
@@ -900,15 +1040,24 @@ var FormulaHint = function FormulaHint(props) {
       className: "luckysheet-arguments-help-section",
       key: param.name
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "luckysheet-arguments-help-section-title"
+      className: "luckysheet-arguments-help-section-title example-title"
     }, param.name, param.repeat === "y" && (/*#__PURE__*/React__default['default'].createElement("span", {
-      className: "luckysheet-arguments-help-argument-info"
+      className: "luckysheet-arguments-help-argument-info example-value",
+      style: {
+        marginTop: "2px"
+      }
     }, "...-", formulaMore.allowRepeatText)), param.require === "o" && (/*#__PURE__*/React__default['default'].createElement("span", {
-      className: "luckysheet-arguments-help-argument-info"
+      className: "luckysheet-arguments-help-argument-info example-value",
+      style: {
+        marginTop: "2px"
+      }
     }, "-[", formulaMore.allowOptionText, "]"))), /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "luckysheet-arguments-help-parameter-content"
+      className: "luckysheet-arguments-help-parameter-content example-value",
+      style: {
+        marginTop: "2px"
+      }
     }, param.detail));
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+  })))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "luckysheet-formula-help-foot"
   }));
 };
@@ -4316,6 +4465,205 @@ var Option = function Option(_ref2) {
   }, children));
 };
 
+var FormulaSearch$1 = function FormulaSearch(_ref) {
+  var _onCancel = _ref.onCancel;
+  var _useContext = React.useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext,
+    _useContext$refs = _useContext.refs,
+    cellInput = _useContext$refs.cellInput,
+    globalCache = _useContext$refs.globalCache;
+  var _useState = React.useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedType = _useState2[0],
+    setSelectedType = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedFuncIndex = _useState4[0],
+    setSelectedFuncIndex = _useState4[1];
+  var _useState5 = React.useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchText = _useState6[0],
+    setSearchText = _useState6[1];
+  var _locale = fortuneCore.locale(context),
+    formulaMore = _locale.formulaMore,
+    functionlist = _locale.functionlist,
+    button = _locale.button;
+  var typeList = React.useMemo(function () {
+    return [{
+      t: 20,
+      n: formulaMore.Crypto
+    }, {
+      t: 0,
+      n: formulaMore.Math
+    }, {
+      t: 1,
+      n: formulaMore.Statistical
+    }, {
+      t: 2,
+      n: formulaMore.Lookup
+    }, {
+      t: 3,
+      n: formulaMore.luckysheet
+    }, {
+      t: 4,
+      n: formulaMore.dataMining
+    }, {
+      t: 5,
+      n: formulaMore.Database
+    }, {
+      t: 6,
+      n: formulaMore.Date
+    }, {
+      t: 7,
+      n: formulaMore.Filter
+    }, {
+      t: 8,
+      n: formulaMore.Financial
+    }, {
+      t: 9,
+      n: formulaMore.Engineering
+    }, {
+      t: 10,
+      n: formulaMore.Logical
+    }, {
+      t: 11,
+      n: formulaMore.Operator
+    }, {
+      t: 12,
+      n: formulaMore.Text
+    }, {
+      t: 13,
+      n: formulaMore.Parser
+    }, {
+      t: 14,
+      n: formulaMore.Array
+    }, {
+      t: -1,
+      n: formulaMore.other
+    }];
+  }, [formulaMore]);
+  var filteredFunctionList = React.useMemo(function () {
+    if (searchText) {
+      var list = [];
+      var text = ___default['default'].cloneDeep(searchText.toUpperCase());
+      for (var i = 0; i < functionlist.length; i += 1) {
+        if (/^[a-zA-Z]+$/.test(text)) {
+          if (functionlist[i].n.indexOf(text) !== -1) {
+            list.push(functionlist[i]);
+          }
+        } else if (functionlist[i].a.indexOf(text) !== -1) {
+          list.push(functionlist[i]);
+        }
+      }
+      return list;
+    }
+    return ___default['default'].filter(functionlist, function (v) {
+      return v.t === selectedType;
+    });
+  }, [functionlist, selectedType, searchText]);
+  var onConfirm = React.useCallback(function () {
+    var _context$luckysheet_s;
+    var last = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[context.luckysheet_select_save.length - 1];
+    var row_index = last === null || last === void 0 ? void 0 : last.row_focus;
+    var col_index = last === null || last === void 0 ? void 0 : last.column_focus;
+    if (!last) {
+      row_index = 0;
+      col_index = 0;
+    } else {
+      if (row_index == null) {
+        var _last$row = _slicedToArray(last.row, 1);
+        row_index = _last$row[0];
+      }
+      if (col_index == null) {
+        var _last$column = _slicedToArray(last.column, 1);
+        col_index = _last$column[0];
+      }
+    }
+    var formulaTxt = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">".concat(filteredFunctionList[selectedFuncIndex].n.toUpperCase(), "</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">(</span>");
+    setContext(function (ctx) {
+      if (cellInput.current != null) {
+        ctx.luckysheetCellUpdate = [row_index, col_index];
+        globalCache.doNotUpdateCell = true;
+        cellInput.current.innerHTML = formulaTxt;
+        var spans = cellInput.current.childNodes;
+        if (!___default['default'].isEmpty(spans)) {
+          fortuneCore.setCaretPosition(ctx, spans[spans.length - 1], 0, 1);
+        }
+        ctx.functionHint = filteredFunctionList[selectedFuncIndex].n.toUpperCase();
+        ctx.functionCandidates = [];
+        if (___default['default'].isEmpty(ctx.formulaCache.functionlistMap)) {
+          for (var i = 0; i < functionlist.length; i += 1) {
+            ctx.formulaCache.functionlistMap[functionlist[i].n] = functionlist[i];
+          }
+        }
+        _onCancel();
+      }
+    });
+  }, [cellInput, context.luckysheet_select_save, filteredFunctionList, globalCache, selectedFuncIndex, setContext, _onCancel, functionlist]);
+  var onCancel = React.useCallback(function () {
+    setContext(function (ctx) {
+      fortuneCore.cancelNormalSelected(ctx);
+      if (cellInput.current) {
+        cellInput.current.innerHTML = "";
+      }
+    });
+    _onCancel();
+  }, [_onCancel, cellInput, setContext]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "luckysheet-search-formula"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "inpbox"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, formulaMore.findFunctionTitle, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("input", {
+    className: "formulaInputFocus",
+    id: "searchFormulaListInput",
+    placeholder: formulaMore.tipInputFunctionName,
+    spellCheck: "false",
+    onChange: function onChange(e) {
+      return setSearchText(e.target.value);
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "selbox"
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, formulaMore.selectCategory, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("select", {
+    id: "formulaTypeSelect",
+    onChange: function onChange(e) {
+      setSelectedType(parseInt(e.target.value, 10));
+      setSelectedFuncIndex(0);
+    }
+  }, typeList.map(function (v) {
+    return /*#__PURE__*/React__default['default'].createElement("option", {
+      key: v.t,
+      value: v.t
+    }, v.n);
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "listbox",
+    style: {
+      height: 200
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, formulaMore.selectFunctionTitle, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "formulaList"
+  }, filteredFunctionList.map(function (v, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "listBox".concat(index === selectedFuncIndex ? " on" : ""),
+      key: v.n,
+      onClick: function onClick() {
+        return setSelectedFuncIndex(index);
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, v.n), /*#__PURE__*/React__default['default'].createElement("div", null, v.a));
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dialog-box-button-container"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-message-box-button button-primary",
+    onClick: onConfirm,
+    tabIndex: 0
+  }, button.confirm), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-message-box-button button-default",
+    onClick: onCancel,
+    tabIndex: 0
+  }, button.cancel)));
+};
+
 var SplitColumn = function SplitColumn() {
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
@@ -6119,10 +6467,9 @@ var Toolbar = function Toolbar(_ref) {
         }), /*#__PURE__*/React__default['default'].createElement(MenuDivider, null), /*#__PURE__*/React__default['default'].createElement(Option, {
           key: "formula",
           onClick: function onClick() {
-            var button = document.getElementById("function-button");
-            if (button) {
-              button.click();
-            }
+            showDialog(/*#__PURE__*/React__default['default'].createElement(FormulaSearch$1, {
+              onCancel: hideDialog
+            }));
             setOpen(false);
           }
         }, "".concat(formula.find, "...")));
@@ -9951,7 +10298,7 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
   }, children);
 };
 
-function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache) {
+function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY) {
   return {
     applyOp: function applyOp(ops) {
       setContext(function (ctx_) {
@@ -10252,50 +10599,6 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     celldataToData: function celldataToData(celldata, rowCount, colCount) {
       return fortuneCore.api.celldataToData(celldata, rowCount, colCount);
-    },
-    insertFunction: function insertFunction(selectedFuncIndex, filteredFunctionList, callback) {
-      var _context$luckysheet_s2;
-      var last = (_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : _context$luckysheet_s2[context.luckysheet_select_save.length - 1];
-      var row_index = last === null || last === void 0 ? void 0 : last.row_focus;
-      var col_index = last === null || last === void 0 ? void 0 : last.column_focus;
-      if (!last) {
-        row_index = 0;
-        col_index = 0;
-      } else {
-        if (row_index == null) {
-          var _last$row2 = _slicedToArray(last.row, 1);
-          row_index = _last$row2[0];
-        }
-        if (col_index == null) {
-          var _last$column2 = _slicedToArray(last.column, 1);
-          col_index = _last$column2[0];
-        }
-      }
-      var formulaTxt = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">".concat(filteredFunctionList[selectedFuncIndex].n.toUpperCase(), "</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">(</span>");
-      var _locale2 = fortuneCore.locale(context),
-        functionlist = _locale2.functionlist;
-      setContext(function (ctx) {
-        if (cellInput != null && globalCache != null) {
-          ctx.luckysheetCellUpdate = [row_index, col_index];
-          globalCache.doNotUpdateCell = true;
-          cellInput.innerHTML = formulaTxt;
-          var spans = cellInput.childNodes;
-          if (!___default['default'].isEmpty(spans)) {
-            fortuneCore.setCaretPosition(ctx, spans[spans.length - 1], 0, 1);
-          }
-          ctx.functionHint = filteredFunctionList[selectedFuncIndex].n.toUpperCase();
-          ctx.functionCandidates = [];
-          if (___default['default'].isEmpty(ctx.formulaCache.functionlistMap)) {
-            for (var i = 0; i < functionlist.length; i += 1) {
-              ctx.formulaCache.functionlistMap[functionlist[i].n] = functionlist[i];
-            }
-          }
-          callback === null || callback === void 0 ? void 0 : callback();
-        }
-      });
-    },
-    getLocaleContext: function getLocaleContext() {
-      return fortuneCore.locale(context);
     }
   };
 }
@@ -11503,8 +11806,8 @@ var Workbook = /*#__PURE__*/React__default['default'].forwardRef(function (_ref,
     };
   }, [onPaste]);
   React.useImperativeHandle(ref, function () {
-    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current, globalCache.current);
-  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, globalCache]);
+    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current);
+  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings]);
   var i = fortuneCore.getSheetIndex(context, context.currentSheetId);
   if (i == null) {
     return null;