@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
593 lines (590 loc) • 27.9 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useContext, useCallback, useRef, useEffect, useLayoutEffect, useMemo } from "react";
import "./index.css";
import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchMove, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@light-sheet/core";
import _ from "lodash";
import WorkbookContext from "../../context";
import { RightPanelContext } from "../../context/rightPanel";
import ColumnHeader from "./ColumnHeader";
import RowHeader from "./RowHeader";
import InputBox from "./InputBox";
import ScrollBar from "./ScrollBar";
import SearchReplace from "../SearchReplace";
import LinkEditCard from "../LinkEidtCard";
import FilterOptions from "../FilterOption";
import { useAlert } from "../../hooks/useAlert";
import ImgBoxs from "../ImgBoxs";
import NotationBoxes from "../NotationBoxes";
import RangeDialog from "../DataVerification/RangeDialog";
import { useDialog } from "../../hooks/useDialog";
import SVGIcon from "../SVGIcon";
import DropDownList from "../DataVerification/DropdownList";
import RightPanel from "./RightPanel";
var SheetOverlay = function SheetOverlay() {
var _refs$cellArea$curren, _refs$cellArea$curren2, _context$luckysheet_s, _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4, _context$luckysheet_s5, _context$luckysheet_s6, _context$presences$le, _context$presences, _context$linkCard, _context$rangeDialog;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
settings = _useContext.settings,
refs = _useContext.refs;
var _useContext2 = useContext(RightPanelContext),
rightPanelValue = _useContext2.value;
var _locale = locale(context),
info = _locale.info,
rightclick = _locale.rightclick;
var _useDialog = useDialog(),
showDialog = _useDialog.showDialog;
var containerRef = useRef(null);
var bottomAddRowInputRef = useRef(null);
var dataVerificationHintBoxRef = useRef(null);
var _useAlert = useAlert(),
showAlert = _useAlert.showAlert;
// const isMobile = browser.mobilecheck();
var cellAreaMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
if (e.button !== 2) {
// onContextMenu event will not call onMouseDown
setContext(function (draftCtx) {
var _draftCtx$luckysheet_;
handleCellAreaMouseDown(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.cellArea.current, refs.fxInput.current, refs.canvas.current.getContext("2d"));
if (!_.isEmpty((_draftCtx$luckysheet_ = draftCtx.luckysheet_select_save) === null || _draftCtx$luckysheet_ === void 0 ? void 0 : _draftCtx$luckysheet_[0]) && refs.cellInput.current) {
setTimeout(function () {
var _refs$cellInput$curre;
(_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 || _refs$cellInput$curre.focus();
});
}
});
}
}, [setContext, refs.globalCache, refs.cellInput, refs.cellArea, refs.fxInput, refs.canvas]);
var cellAreaContextMenu = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleContextMenu(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "cell");
});
}, [refs.workbookContainer, setContext, settings, refs.cellArea]);
var cellAreaDoubleClick = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleCellAreaDoubleClick(draftCtx, refs.globalCache, settings, nativeEvent, refs.cellArea.current);
});
}, [refs.cellArea, refs.globalCache, setContext, settings]);
var onLeftTopClick = useCallback(function () {
setContext(function (draftCtx) {
selectAll(draftCtx);
});
}, [setContext]);
var debouncedShowLinkCard = useMemo(function () {
return _.debounce(function (globalCache, r, c, isEditing) {
var _globalCache$linkCard;
var skip = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
if (skip || (_globalCache$linkCard = globalCache.linkCard) !== null && _globalCache$linkCard !== void 0 && _globalCache$linkCard.mouseEnter) return;
setContext(function (draftCtx) {
showLinkCard(draftCtx, r, c, isEditing);
});
}, 800);
}, [setContext]);
var overShowLinkCard = useCallback(function (ctx, globalCache, e, container, scrollX, scrollY) {
var rc = getCellRowColumn(ctx, e, container, scrollX, scrollY);
if (rc == null) return;
var link = getCellHyperlink(ctx, rc.r, rc.c);
if (link == null) {
debouncedShowLinkCard(globalCache, rc.r, rc.c, false);
} else {
showLinkCard(ctx, rc.r, rc.c, false);
debouncedShowLinkCard(globalCache, rc.r, rc.c, false, true);
}
}, [debouncedShowLinkCard]);
var onMouseMove = useCallback(function (nativeEvent) {
setContext(function (draftCtx) {
overShowLinkCard(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.scrollbarX.current, refs.scrollbarY.current);
handleOverlayMouseMove(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current, refs.fxInput.current);
});
}, [overShowLinkCard, refs.cellInput, refs.fxInput, refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
var onMouseUp = useCallback(function (nativeEvent) {
setContext(function (draftCtx) {
try {
handleOverlayMouseUp(draftCtx, refs.globalCache, settings, nativeEvent, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current, refs.cellInput.current, refs.fxInput.current);
} catch (e) {
showAlert(e.message);
}
});
}, [refs.cellInput, refs.fxInput, refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext, settings, showAlert]);
var onKeyDownForZoom = useCallback(function (ev) {
var newZoom = handleKeydownForZoom(ev, context.zoomRatio);
if (newZoom !== context.zoomRatio) {
setContext(function (ctx) {
ctx.zoomRatio = newZoom;
ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)].zoomRatio = newZoom;
});
}
}, [context.zoomRatio, setContext]);
var onTouchStart = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftContext) {
handleOverlayTouchStart(draftContext, nativeEvent, refs.globalCache);
});
e.stopPropagation();
}, [refs.globalCache, setContext]);
var onTouchMove = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleOverlayTouchMove(draftCtx, nativeEvent, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
});
// e.stopPropagation();
}, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
var onTouchEnd = useCallback(function () {
handleOverlayTouchEnd(refs.globalCache);
}, [refs.globalCache]);
var handleBottomAddRow = useCallback(function () {
var _bottomAddRowInputRef;
var valueStr = ((_bottomAddRowInputRef = bottomAddRowInputRef.current) === null || _bottomAddRowInputRef === void 0 ? void 0 : _bottomAddRowInputRef.value) || context.addDefaultRows.toString();
var value = parseInt(valueStr, 10);
if (Number.isNaN(value)) {
return;
}
if (value < 1) {
return;
}
var insertRowColOp = {
type: "row",
index: context.luckysheetfile[getSheetIndex(context, context.currentSheetId)].data.length - 1,
count: value,
direction: "rightbottom",
id: context.currentSheetId
};
setContext(function (draftCtx) {
try {
insertRowCol(draftCtx, insertRowColOp, false);
} catch (err) {
if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit);
}
}, {
insertRowColOp: insertRowColOp
});
}, [context, rightclick.rowOverLimit, setContext, showAlert]);
// 提醒弹窗
useEffect(function () {
if (context.warnDialog) {
setTimeout(function () {
showDialog(context.warnDialog, "ok");
}, 240);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [context.warnDialog]);
useEffect(function () {
refs.cellArea.current.scrollLeft = context.scrollLeft;
refs.cellArea.current.scrollTop = context.scrollTop;
}, [context.scrollLeft, context.scrollTop, refs.cellArea, (_refs$cellArea$curren = refs.cellArea.current) === null || _refs$cellArea$curren === void 0 ? void 0 : _refs$cellArea$curren.scrollLeft, (_refs$cellArea$curren2 = refs.cellArea.current) === null || _refs$cellArea$curren2 === void 0 ? void 0 : _refs$cellArea$curren2.scrollTop]);
// useEffect(() => {
// // ensure cell input is always focused to accept first key stroke on cell
// if (!context.editingCommentBox) {
// refs.cellInput.current?.focus({ preventScroll: true });
// }
// }, [
// context.editingCommentBox,
// context.luckysheet_select_save,
// refs.cellInput,
// ]);
useLayoutEffect(function () {
if (context.commentBoxes || context.hoveredCommentBox || context.editingCommentBox) {
var _context$commentBoxes;
_.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
var _context$editingComme;
return v.rc !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
}), [context.hoveredCommentBox, context.editingCommentBox]).forEach(function (box) {
if (box) {
drawArrow(box.rc, box.size);
}
});
}
}, [context.commentBoxes, context.hoveredCommentBox, context.editingCommentBox]);
useEffect(function () {
document.addEventListener("mousemove", onMouseMove);
return function () {
document.removeEventListener("mousemove", onMouseMove);
};
}, [onMouseMove]);
useEffect(function () {
document.addEventListener("mouseup", onMouseUp);
return function () {
document.removeEventListener("mouseup", onMouseUp);
};
}, [onMouseUp]);
useEffect(function () {
document.addEventListener("keydown", onKeyDownForZoom);
return function () {
document.removeEventListener("keydown", onKeyDownForZoom);
};
}, [onKeyDownForZoom]);
return /*#__PURE__*/React.createElement("div", {
className: "fortune-sheet-overlay",
ref: containerRef,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
tabIndex: -1,
style: {
width: context.luckysheetTableContentHW[0],
height: context.luckysheetTableContentHW[1]
}
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-col-header-wrap"
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-left-top",
onClick: onLeftTopClick,
tabIndex: 0,
style: {
width: context.rowHeaderWidth - 1.5,
height: context.columnHeaderHeight - 1.5
}
}), /*#__PURE__*/React.createElement(ColumnHeader, null)), (context.showSearch || context.showReplace) && /*#__PURE__*/React.createElement(SearchReplace, {
getContainer: function getContainer() {
return containerRef.current;
}
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-row-body"
}, /*#__PURE__*/React.createElement(RowHeader, null), /*#__PURE__*/React.createElement(ScrollBar, {
axis: "x"
}), /*#__PURE__*/React.createElement(ScrollBar, {
axis: "y"
}), context.rightPanelVisible && /*#__PURE__*/React.createElement(RightPanel, _extends({}, rightPanelValue, {
width: context.rightPanelWidth || 130
})), /*#__PURE__*/React.createElement("div", {
ref: refs.cellArea,
className: "fortune-cell-area",
onMouseDown: cellAreaMouseDown,
onDoubleClick: cellAreaDoubleClick,
onContextMenu: cellAreaContextMenu,
style: {
width: context.cellmainWidth,
height: context.cellmainHeight,
cursor: context.luckysheet_cell_selected_extend ? "crosshair" : "default"
}
}, /*#__PURE__*/React.createElement("div", {
id: "fortune-formula-functionrange"
}), context.formulaRangeSelect && /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy fortune-formula-functionrange-select",
style: context.formulaRangeSelect
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-top fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-right fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-bottom fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-left fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-hc"
})), context.formulaRangeHighlight.map(function (v) {
var rangeIndex = v.rangeIndex,
backgroundColor = v.backgroundColor;
return /*#__PURE__*/React.createElement("div", {
key: rangeIndex,
id: "fortune-formula-functionrange-highlight",
className: "fortune-selection-highlight fortune-formula-functionrange-highlight",
style: _.omit(v, "backgroundColor")
}, ["top", "right", "bottom", "left"].map(function (d) {
return /*#__PURE__*/React.createElement("div", {
key: d,
"data-type": d,
className: "fortune-selection-copy-".concat(d, " fortune-copy"),
style: {
backgroundColor: backgroundColor
}
});
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-hc",
style: {
backgroundColor: backgroundColor
}
}), ["lt", "rt", "lb", "rb"].map(function (d) {
return /*#__PURE__*/React.createElement("div", {
key: d,
"data-type": d,
className: "fortune-selection-highlight-".concat(d, " luckysheet-highlight"),
style: {
backgroundColor: backgroundColor
}
});
}));
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-row-count-show luckysheet-count-show",
id: "luckysheet-row-count-show"
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-column-count-show luckysheet-count-show",
id: "luckysheet-column-count-show"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-change-size-line",
hidden: !context.luckysheet_cols_change_size && !context.luckysheet_rows_change_size && !context.luckysheet_cols_freeze_drag && !context.luckysheet_rows_freeze_drag
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-freeze-drag-line",
hidden: !context.luckysheet_cols_freeze_drag && !context.luckysheet_rows_freeze_drag
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cell-selected-focus",
style: ((_context$luckysheet_s = (_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : _context$luckysheet_s2.length) !== null && _context$luckysheet_s !== void 0 ? _context$luckysheet_s : 0) > 0 ? function (_refs$globalCache$fre, _refs$globalCache$fre2) {
var selection = _.last(context.luckysheet_select_save);
return _.assign({
left: selection.left,
top: selection.top,
width: selection.width,
height: selection.height,
display: "block"
}, fixRowStyleOverflowInFreeze(context, selection.row_focus || 0, selection.row_focus || 0, (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId]), fixColumnStyleOverflowInFreeze(context, selection.column_focus || 0, selection.column_focus || 0, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]));
}() : {},
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), ((_context$luckysheet_s3 = (_context$luckysheet_s4 = context.luckysheet_selection_range) === null || _context$luckysheet_s4 === void 0 ? void 0 : _context$luckysheet_s4.length) !== null && _context$luckysheet_s3 !== void 0 ? _context$luckysheet_s3 : 0) > 0 && /*#__PURE__*/React.createElement("div", {
id: "fortune-selection-copy"
}, context.luckysheet_selection_range.map(function (range) {
var r1 = range.row[0];
var r2 = range.row[1];
var c1 = range.column[0];
var c2 = range.column[1];
var row = context.visibledatarow[r2];
var row_pre = r1 - 1 === -1 ? 0 : context.visibledatarow[r1 - 1];
var col = context.visibledatacolumn[c2];
var col_pre = c1 - 1 === -1 ? 0 : context.visibledatacolumn[c1 - 1];
return /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy",
key: "".concat(r1, "-").concat(r2, "-").concat(c1, "-").concat(c2),
style: {
left: col_pre,
width: col - col_pre - 1,
top: row_pre,
height: row - row_pre - 1
}
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-top fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-right fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-bottom fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-left fortune-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-selection-copy-hc"
}));
})), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-chart-rangeShow"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-cell-selected-extend"
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-cell-selected-move",
id: "fortune-cell-selected-move",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), ((_context$luckysheet_s5 = (_context$luckysheet_s6 = context.luckysheet_select_save) === null || _context$luckysheet_s6 === void 0 ? void 0 : _context$luckysheet_s6.length) !== null && _context$luckysheet_s5 !== void 0 ? _context$luckysheet_s5 : 0) > 0 && /*#__PURE__*/React.createElement("div", {
id: "luckysheet-cell-selected-boxs"
}, context.luckysheet_select_save.map(function (selection, index) {
var _refs$globalCache$fre3, _refs$globalCache$fre4;
return /*#__PURE__*/React.createElement("div", {
key: index,
id: "luckysheet-cell-selected",
className: "luckysheet-cell-selected",
style: _.assign({
left: selection.left_move,
top: selection.top_move,
width: selection.width_move,
height: selection.height_move,
display: "block"
}, fixRowStyleOverflowInFreeze(context, selection.row[0], selection.row[1], (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]), fixColumnStyleOverflowInFreeze(context, selection.column[0], selection.column[1], (_refs$globalCache$fre4 = refs.globalCache.freezen) === null || _refs$globalCache$fre4 === void 0 ? void 0 : _refs$globalCache$fre4[context.currentSheetId])),
onMouseDown: function onMouseDown(e) {
e.stopPropagation();
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
onCellsMoveStart(draftCtx, refs.globalCache, nativeEvent, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current);
});
}
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-inner-border"
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-fillhandle",
onMouseDown: function onMouseDown(e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftContext) {
createDropCellRange(draftContext, nativeEvent, containerRef.current);
});
e.stopPropagation();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-inner-border"
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-draghandle-top luckysheet-cs-draghandle",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-draghandle-bottom luckysheet-cs-draghandle",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-draghandle-left luckysheet-cs-draghandle",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-draghandle-right luckysheet-cs-draghandle",
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
}
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-touchhandle luckysheet-cs-touchhandle-lt"
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-touchhandle-btn"
})), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-touchhandle luckysheet-cs-touchhandle-rb"
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cs-touchhandle-btn"
})));
})), ((_context$presences$le = (_context$presences = context.presences) === null || _context$presences === void 0 ? void 0 : _context$presences.length) !== null && _context$presences$le !== void 0 ? _context$presences$le : 0) > 0 && context.presences.map(function (presence, index) {
if (presence.sheetId !== context.currentSheetId) {
return null;
}
var _presence$selection = presence.selection,
r = _presence$selection.r,
c = _presence$selection.c,
color = presence.color;
var row_pre = r - 1 === -1 ? 0 : context.visibledatarow[r - 1];
var col_pre = c - 1 === -1 ? 0 : context.visibledatacolumn[c - 1];
var row = context.visibledatarow[r];
var col = context.visibledatacolumn[c];
var width = col - col_pre - 1;
var height = row - row_pre - 1;
var usernameStyle = {
maxWidth: width + 1,
backgroundColor: color
};
_.set(usernameStyle, r === 0 ? "top" : "bottom", height);
return /*#__PURE__*/React.createElement("div", {
key: (presence === null || presence === void 0 ? void 0 : presence.userId) || index,
className: "fortune-presence-selection",
style: {
left: col_pre,
top: row_pre - 2,
width: width,
height: height,
borderColor: color,
borderWidth: 1
}
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-presence-username",
style: usernameStyle
}, presence.username));
}), ((_context$linkCard = context.linkCard) === null || _context$linkCard === void 0 ? void 0 : _context$linkCard.sheetId) === context.currentSheetId && /*#__PURE__*/React.createElement(LinkEditCard, context.linkCard), ((_context$rangeDialog = context.rangeDialog) === null || _context$rangeDialog === void 0 ? void 0 : _context$rangeDialog.show) && /*#__PURE__*/React.createElement(RangeDialog, null), /*#__PURE__*/React.createElement(FilterOptions, {
getContainer: function getContainer() {
return containerRef.current;
}
}), /*#__PURE__*/React.createElement(InputBox, null), /*#__PURE__*/React.createElement(NotationBoxes, null), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-multipleRange-show"
}), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-dynamicArray-hightShow"
}), /*#__PURE__*/React.createElement(ImgBoxs, null), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-dataVerification-dropdown-btn",
onClick: function onClick() {
setContext(function (ctx) {
ctx.dataVerificationDropDownList = true;
dataVerificationHintBoxRef.current.style.display = "none";
});
},
tabIndex: 0,
style: {
display: "none"
}
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "combo-arrow",
width: 16
})), context.dataVerificationDropDownList && /*#__PURE__*/React.createElement(DropDownList, null), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-dataVerification-showHintBox",
className: "luckysheet-mousedown-cancel",
ref: dataVerificationHintBoxRef
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cell-copy"
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-grdblkflowpush"
}), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-cell-flow_0",
className: "luckysheet-cell-flow luckysheetsheetchange"
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cell-flow-clip"
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-grdblkpush"
}), /*#__PURE__*/React.createElement("div", {
id: "luckysheetcoltable_0",
className: "luckysheet-cell-flow-col"
}, /*#__PURE__*/React.createElement("div", {
id: "luckysheet-sheettable_0",
className: "luckysheet-cell-sheettable",
style: {
height: context.rh_height,
width: context.ch_width
}
}), /*#__PURE__*/React.createElement("div", {
id: "luckysheet-bottom-controll-row",
className: "luckysheet-bottom-controll-row",
onMouseDown: function onMouseDown(e) {
return e.stopPropagation();
},
onMouseUp: function onMouseUp(e) {
return e.stopPropagation();
}
// onMouseMove={(e) => {
// e.stopPropagation();
// e.preventDefault();
// }}
,
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
onKeyUp: function onKeyUp(e) {
return e.stopPropagation();
},
onKeyPress: function onKeyPress(e) {
return e.stopPropagation();
},
onClick: function onClick(e) {
return e.stopPropagation();
},
onDoubleClick: function onDoubleClick(e) {
return e.stopPropagation();
},
tabIndex: 0,
style: {
left: context.scrollLeft,
display: context.allowEdit ? "block" : "none"
}
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-add-row-button",
onClick: function onClick() {
handleBottomAddRow();
},
tabIndex: 0
}, info.add), /*#__PURE__*/React.createElement("input", {
ref: bottomAddRowInputRef,
type: "text",
style: {
width: 50
},
placeholder: context.addDefaultRows.toString()
}), " ", /*#__PURE__*/React.createElement("span", {
style: {
fontSize: 14
}
}, info.row), " ", /*#__PURE__*/React.createElement("span", {
style: {
fontSize: 14,
color: "#9c9c9c"
}
}, "(", info.addLast, ")"), /*#__PURE__*/React.createElement("span", {
className: "fortune-add-row-button",
onClick: function onClick() {
setContext(function (ctx) {
ctx.scrollTop = 0;
});
},
tabIndex: 0
}, info.backTop))))))));
};
export default SheetOverlay;