@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
258 lines • 12.2 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, rangeHightlightselected, valueShowEs, isShowHidenCR, escapeHTMLTag, isAllowEdit } from "@light-sheet/core";
import React, { useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";
import "./index.css";
import _ from "lodash";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
import ContentEditable from "../SheetOverlay/ContentEditable";
import FormulaSearch from "../SheetOverlay/FormulaSearch";
import FormulaHint from "../SheetOverlay/FormulaHint";
import NameBox from "./NameBox";
import usePrevious from "../../hooks/usePrevious";
var FxEditor = function FxEditor() {
var _context$luckysheet_s;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
focused = _useState2[0],
setFocused = _useState2[1];
var lastKeyDownEventRef = useRef(null);
var inputContainerRef = useRef(null);
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isHidenRC = _useState4[0],
setIsHidenRC = _useState4[1];
var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
var prevFirstSelection = usePrevious(firstSelection);
var prevSheetId = usePrevious(context.currentSheetId);
var recentText = useRef("");
useEffect(function () {
// 当选中行列是处于隐藏状态的话则不允许编辑
setIsHidenRC(isShowHidenCR(context));
if (_.isEqual(prevFirstSelection, firstSelection) && context.currentSheetId === prevSheetId) {
// data change by a collabrative update should not trigger this effect
return;
}
var d = getFlowdata(context);
var value = "";
if (firstSelection) {
var _d$r;
var r = firstSelection.row_focus;
var c = firstSelection.column_focus;
if (_.isNil(r) || _.isNil(c)) return;
var cell = d === null || d === void 0 || (_d$r = d[r]) === null || _d$r === void 0 ? void 0 : _d$r[c];
if (cell) {
if (isInlineStringCell(cell)) {
value = getInlineStringNoStyle(r, c, d);
} else if (cell.f) {
value = getCellValue(r, c, d, "f");
} else {
value = valueShowEs(r, c, d);
}
}
refs.fxInput.current.innerHTML = escapeHTMLTag(escapeScriptTag(value));
} else {
refs.fxInput.current.innerHTML = "";
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [context.luckysheetfile, context.currentSheetId, context.luckysheet_select_save]);
var onFocus = useCallback(function () {
var _context$luckysheet_s2, _context$luckysheet_s3;
if (context.allowEdit === false) {
return;
}
if (((_context$luckysheet_s2 = (_context$luckysheet_s3 = context.luckysheet_select_save) === null || _context$luckysheet_s3 === void 0 ? void 0 : _context$luckysheet_s3.length) !== null && _context$luckysheet_s2 !== void 0 ? _context$luckysheet_s2 : 0) > 0 && !context.luckysheet_cell_selected_move && isAllowEdit(context, context.luckysheet_select_save)) {
setFocused(true);
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;
// formula.rangeResizeTo = $("#luckysheet-functionbox-cell");
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, refs.globalCache, setContext]);
var onKeyDown = 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":
{
// if (
// $("#luckysheet-formula-search-c").is(":visible") &&
// formula.searchFunctionCell != null
// ) {
// formula.searchFunctionEnter(
// $("#luckysheet-formula-search-c").find(
// ".luckysheet-formula-search-item-active"
// )
// );
// } else {
var lastCellUpdate = _.clone(draftCtx.luckysheetCellUpdate);
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]
}];
moveHighlightCell(draftCtx, "down", 1, "rangeOfSelect");
// $("#luckysheet-rich-text-editor").focus();
// }
e.preventDefault();
e.stopPropagation();
break;
}
case "Escape":
{
cancelNormalSelected(draftCtx);
moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
// $("#luckysheet-functionbox-cell").blur();
// $("#luckysheet-rich-text-editor").focus();
e.preventDefault();
e.stopPropagation();
break;
}
/*
case "F4": {
formula.setfreezonFuc(event);
e.preventDefault();
e.stopPropagation();
break;
}
case "ArrowUp": {
if ($("#luckysheet-formula-search-c").is(":visible")) {
let $up = $("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item-active")
.prev();
if ($up.length === 0) {
$up = $("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item")
.last();
}
$("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item")
.removeClass("luckysheet-formula-search-item-active");
$up.addClass("luckysheet-formula-search-item-active");
}
e.preventDefault();
e.stopPropagation();
break;
}
case "ArrowDown": {
if ($("#luckysheet-formula-search-c").is(":visible")) {
let $up = $("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item-active")
.next();
if ($up.length === 0) {
$up = $("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item")
.first();
}
$("#luckysheet-formula-search-c")
.find(".luckysheet-formula-search-item")
.removeClass("luckysheet-formula-search-item-active");
$up.addClass("luckysheet-formula-search-item-active");
}
e.preventDefault();
e.stopPropagation();
break;
}
*/
case "ArrowLeft":
{
rangeHightlightselected(draftCtx, refs.fxInput.current);
break;
}
case "ArrowRight":
{
rangeHightlightselected(draftCtx, refs.fxInput.current);
break;
}
default:
break;
}
}
});
}, [context.allowEdit, context.luckysheetCellUpdate.length, refs.fxInput, setContext]);
var onChange = 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) {
handleFormulaInput(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
});
}
}, [refs.cellInput, refs.fxInput, setContext]);
var allowEdit = useMemo(function () {
if (context.allowEdit === false) {
return false;
}
if (isHidenRC) {
return false;
}
if (!isAllowEdit(context, context.luckysheet_select_save)) {
return false;
}
return true;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, isHidenRC]);
return /*#__PURE__*/React.createElement("div", {
className: "fortune-fx-editor"
}, /*#__PURE__*/React.createElement(NameBox, null), /*#__PURE__*/React.createElement("div", {
className: "fortune-fx-icon"
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "fx",
width: 18,
height: 18
})), /*#__PURE__*/React.createElement("div", {
ref: inputContainerRef,
className: "fortune-fx-input-container"
}, /*#__PURE__*/React.createElement(ContentEditable, {
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,
onBlur: function onBlur() {
return setFocused(false);
},
tabIndex: 0,
allowEdit: allowEdit
}), focused && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
style: {
top: inputContainerRef.current.clientHeight
}
}), /*#__PURE__*/React.createElement(FormulaHint, {
style: {
top: inputContainerRef.current.clientHeight
}
}))));
};
export default FxEditor;