@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/FormulaSearch/index.css

@@ -0,0 +1,65 @@
+/*函数公式查找样式*/
+#luckysheet-search-formula {
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .inpbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox div {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .inpbox input {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .selbox {
+  margin-bottom: 5px;
+}
+
+#luckysheet-search-formula .selbox select {
+  width: 50%;
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+#luckysheet-search-formula .listbox label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#formulaTypeList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.formulaList {
+  width: 300px;
+  height: 170px;
+  border: 1px solid #d4d4d4;
+  overflow-y: scroll;
+}
+
+.listBox {
+  padding: 5px;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.listBox.on {
+  background-color: #8c89fe;
+  color: #fff;
+}

package/lib/components/FormulaSearch/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./index.css";
+export declare const FormulaSearch: React.FC<{
+    onCancel: () => void;
+}>;

package/lib/components/FormulaSearch/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormulaSearch = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+require("./index.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var FormulaSearch = exports.FormulaSearch = function FormulaSearch(_a) {
+  var _onCancel = _a.onCancel;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    _c = _b.refs,
+    cellInput = _c.cellInput,
+    globalCache = _c.globalCache;
+  var _d = (0, _react.useState)(20),
+    selectedType = _d[0],
+    setSelectedType = _d[1];
+  var _e = (0, _react.useState)(0),
+    selectedFuncIndex = _e[0],
+    setSelectedFuncIndex = _e[1];
+  var _f = (0, _react.useState)(""),
+    searchText = _f[0],
+    setSearchText = _f[1];
+  var _g = (0, _fortuneCore.locale)(context),
+    formulaMore = _g.formulaMore,
+    functionlist = _g.functionlist,
+    button = _g.button;
+  var typeList = (0, _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 = (0, _react.useMemo)(function () {
+    if (searchText) {
+      var list = [];
+      var text = _lodash.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 _lodash.default.filter(functionlist, function (v) {
+      return v.t === selectedType;
+    });
+  }, [functionlist, selectedType, searchText]);
+  var onConfirm = (0, _react.useCallback)(function () {
+    var _a;
+    var last = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[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) {
+        row_index = last.row[0];
+      }
+      if (col_index == null) {
+        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 (!_lodash.default.isEmpty(spans)) {
+          (0, _fortuneCore.setCaretPosition)(ctx, spans[spans.length - 1], 0, 1);
+        }
+        ctx.functionHint = filteredFunctionList[selectedFuncIndex].n.toUpperCase();
+        ctx.functionCandidates = [];
+        if (_lodash.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 = (0, _react.useCallback)(function () {
+    setContext(function (ctx) {
+      (0, _fortuneCore.cancelNormalSelected)(ctx);
+      if (cellInput.current) {
+        cellInput.current.innerHTML = "";
+      }
+    });
+    _onCancel();
+  }, [_onCancel, cellInput, setContext]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-search-formula"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "inpbox"
+  }, /*#__PURE__*/_react.default.createElement("div", null, formulaMore.findFunctionTitle, "\uFF1A"), /*#__PURE__*/_react.default.createElement("input", {
+    className: "formulaInputFocus",
+    id: "searchFormulaListInput",
+    placeholder: formulaMore.tipInputFunctionName,
+    spellCheck: "false",
+    onChange: function onChange(e) {
+      return setSearchText(e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "selbox"
+  }, /*#__PURE__*/_react.default.createElement("span", null, formulaMore.selectCategory, "\uFF1A"), /*#__PURE__*/_react.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.createElement("option", {
+      key: v.t,
+      value: v.t
+    }, v.n);
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "listbox",
+    style: {
+      height: 200
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, formulaMore.selectFunctionTitle, "\uFF1A"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "formulaList"
+  }, filteredFunctionList.map(function (v, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "listBox".concat(index === selectedFuncIndex ? " on" : ""),
+      key: v.n,
+      onClick: function onClick() {
+        return setSelectedFuncIndex(index);
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement("div", null, v.n), /*#__PURE__*/_react.default.createElement("div", null, v.a));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-dialog-box-button-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-message-box-button button-primary",
+    onClick: onConfirm,
+    tabIndex: 0
+  }, button.confirm), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-message-box-button button-default",
+    onClick: onCancel,
+    tabIndex: 0
+  }, button.cancel)));
+};

package/lib/components/FxEditor/NameBox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const LocationBox: React.FC;
+export default LocationBox;

package/lib/components/FxEditor/NameBox.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _context = _interopRequireDefault(require("../../context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LocationBox = function LocationBox() {
+  var context = (0, _react.useContext)(_context.default).context;
+  var rangeText = (0, _react.useMemo)(function () {
+    var lastSelection = _lodash.default.last(context.luckysheet_select_save);
+    if (!(lastSelection && lastSelection.row_focus != null && lastSelection.column_focus != null)) return "";
+    var rf = lastSelection.row_focus;
+    var cf = lastSelection.column_focus;
+    if (context.config.merge != null && "".concat(rf, "_").concat(cf) in context.config.merge) {
+      return (0, _fortuneCore.getRangetxt)(context, context.currentSheetId, {
+        column: [cf, cf],
+        row: [rf, rf]
+      });
+    }
+    return (0, _fortuneCore.getRangetxt)(context, context.currentSheetId, lastSelection);
+  }, [context.currentSheetId, context.luckysheet_select_save]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-name-box-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-name-box",
+    tabIndex: 0,
+    dir: "ltr",
+    "aria-autocomplete": "list"
+  }, rangeText));
+};
+var _default = exports.default = LocationBox;

package/lib/components/FxEditor/index.css

@@ -0,0 +1,72 @@
+.fortune-fx-editor {
+  display: flex;
+  flex-direction: row;
+  height: 28px;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.fortune-fx-icon {
+  display: flex;
+  align-items: center;
+  margin: 0 12px;
+}
+
+.fortune-name-box-container {
+  width: 99px;
+  border-right: 1px solid #d4d4d4;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.fortune-name-box {
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  outline: none;
+  cursor: text;
+  /* -webkit-user-modify: read-write-plaintext-only; */
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-transform: translateZ(0);
+  background-color: white;
+  word-wrap: break-word;
+  -webkit-nbsp-mode: space;
+  -webkit-line-break: after-white-space;
+}
+
+.fortune-fx-input-container {
+  padding-left: 10px;
+  overflow: visible;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-left: 1px solid #e5e5e5;
+}
+
+.fortune-fx-input {
+  flex: 1;
+  height: 100%;
+  overflow-y: scroll;
+  padding-left: 2px;
+  font-size: 14px;
+  line-height: 14px;
+  margin: 0;
+  outline: none;
+  cursor: text;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -webkit-transform: translateZ(0);
+  -webkit-nbsp-mode: space;
+  -webkit-line-break: after-white-space;
+  background-color: white;
+  padding-top: 7px;
+  box-sizing: border-box;
+  color: black;
+  text-align: left;
+}
+.fortune-fx-input[contenteditable="true"] {
+  -webkit-user-modify: read-write-plaintext-only;
+}

package/lib/components/FxEditor/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.css";
+declare const FxEditor: React.FC;
+export default FxEditor;

package/lib/components/FxEditor/index.js

@@ -0,0 +1,176 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _ContentEditable = _interopRequireDefault(require("../SheetOverlay/ContentEditable"));
+var _NameBox = _interopRequireDefault(require("./NameBox"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var FxEditor = function FxEditor() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var lastKeyDownEventRef = (0, _react.useRef)(null);
+  var inputContainerRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)(false),
+    isHidenRC = _c[0],
+    setIsHidenRC = _c[1];
+  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var prevFirstSelection = (0, _usePrevious.default)(firstSelection);
+  var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
+  var recentText = (0, _react.useRef)("");
+  (0, _react.useEffect)(function () {
+    var _a;
+    setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
+    if (_lodash.default.isEqual(prevFirstSelection, firstSelection) && context.currentSheetId === prevSheetId) {
+      return;
+    }
+    var d = (0, _fortuneCore.getFlowdata)(context);
+    var value = "";
+    if (firstSelection) {
+      var r = firstSelection.row_focus;
+      var c = firstSelection.column_focus;
+      if (_lodash.default.isNil(r) || _lodash.default.isNil(c)) return;
+      var cell = (_a = d === null || d === void 0 ? void 0 : d[r]) === null || _a === void 0 ? void 0 : _a[c];
+      if (cell) {
+        if ((0, _fortuneCore.isInlineStringCell)(cell)) {
+          value = (0, _fortuneCore.getInlineStringNoStyle)(r, c, d);
+        } else if (cell.f) {
+          value = (0, _fortuneCore.getCellValue)(r, c, d, "f");
+        } else {
+          value = (0, _fortuneCore.valueShowEs)(r, c, d);
+        }
+      }
+      refs.fxInput.current.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value));
+    } else {
+      refs.fxInput.current.innerHTML = "";
+    }
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheet_select_save]);
+  var onFocus = (0, _react.useCallback)(function () {
+    var _a, _b;
+    if (context.allowEdit === false) {
+      return;
+    }
+    if (((_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && !context.luckysheet_cell_selected_move && (0, _fortuneCore.isAllowEdit)(context, context.luckysheet_select_save)) {
+      setContext(function (draftCtx) {
+        var last = draftCtx.luckysheet_select_save[draftCtx.luckysheet_select_save.length - 1];
+        var row_index = last.row_focus;
+        var col_index = last.column_focus;
+        draftCtx.luckysheetCellUpdate = [row_index, col_index];
+        refs.globalCache.doNotFocus = true;
+      });
+    }
+  }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, refs.globalCache, setContext]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    if (context.allowEdit === false) {
+      return;
+    }
+    lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
+    var key = e.key;
+    recentText.current = refs.fxInput.current.innerText;
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      e.stopPropagation();
+    }
+    setContext(function (draftCtx) {
+      if (context.luckysheetCellUpdate.length > 0) {
+        switch (key) {
+          case "Enter":
+            {
+              var lastCellUpdate = _lodash.default.clone(draftCtx.luckysheetCellUpdate);
+              (0, _fortuneCore.updateCell)(draftCtx, draftCtx.luckysheetCellUpdate[0], draftCtx.luckysheetCellUpdate[1], refs.fxInput.current);
+              draftCtx.luckysheet_select_save = [{
+                row: [lastCellUpdate[0], lastCellUpdate[0]],
+                column: [lastCellUpdate[1], lastCellUpdate[1]],
+                row_focus: lastCellUpdate[0],
+                column_focus: lastCellUpdate[1]
+              }];
+              (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 1, "rangeOfSelect");
+              e.preventDefault();
+              e.stopPropagation();
+              break;
+            }
+          case "Escape":
+            {
+              (0, _fortuneCore.cancelNormalSelected)(draftCtx);
+              (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
+              e.preventDefault();
+              e.stopPropagation();
+              break;
+            }
+          case "ArrowLeft":
+            {
+              (0, _fortuneCore.rangeHightlightselected)(draftCtx, refs.fxInput.current);
+              break;
+            }
+          case "ArrowRight":
+            {
+              (0, _fortuneCore.rangeHightlightselected)(draftCtx, refs.fxInput.current);
+              break;
+            }
+          default:
+            break;
+        }
+      }
+    });
+  }, [context.allowEdit, context.luckysheetCellUpdate.length, refs.fxInput, setContext]);
+  var onChange = (0, _react.useCallback)(function () {
+    var e = lastKeyDownEventRef.current;
+    if (!e) return;
+    var kcode = e.keyCode;
+    if (!kcode) return;
+    if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
+      });
+    }
+  }, [refs.cellInput, refs.fxInput, setContext]);
+  var allowEdit = (0, _react.useMemo)(function () {
+    if (context.allowEdit === false) {
+      return false;
+    }
+    if (isHidenRC) {
+      return false;
+    }
+    if (!(0, _fortuneCore.isAllowEdit)(context, context.luckysheet_select_save)) {
+      return false;
+    }
+    return true;
+  }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, isHidenRC]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-fx-editor"
+  }, /*#__PURE__*/_react.default.createElement(_NameBox.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-fx-icon"
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "fx",
+    width: 18,
+    height: 18
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: inputContainerRef,
+    className: "fortune-fx-input-container"
+  }, /*#__PURE__*/_react.default.createElement(_ContentEditable.default, {
+    innerRef: function innerRef(e) {
+      refs.fxInput.current = e;
+    },
+    className: "fortune-fx-input",
+    id: "luckysheet-functionbox-cell",
+    "aria-autocomplete": "list",
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    tabIndex: 0,
+    allowEdit: allowEdit
+  })));
+};
+var _default = exports.default = FxEditor;

package/lib/components/IFrameBoxs/iFrameBoxs.css

@@ -0,0 +1,16 @@
+.luckysheet-modal-dialog-controll {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  top: -40px;
+  left: 0;
+  z-index: 301;
+}
+
+.fortune-iframe-boxes-delete-button {
+  background-color: #ffffff;
+  border: 1px solid #e8ebec;
+  border-radius: 8px;
+  box-shadow: 0px 4px 16px -4px #00000026;
+}

package/lib/components/IFrameBoxs/iFrameBoxs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./iFrameBoxs.css";
+declare const IframeBoxs: React.FC;
+export default IframeBoxs;