@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
193 lines • 10.5 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 { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, handleContextMenu, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, fixRowStyleOverflowInFreeze, handleRowFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells } from "@light-sheet/core";
import _ from "lodash";
import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
import WorkbookContext from "../../context";
var RowHeader = function RowHeader() {
var _refs$globalCache$fre2;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
settings = _useContext.settings,
refs = _useContext.refs;
var rowChangeSizeRef = useRef(null);
var containerRef = useRef(null);
var _useState = useState({
row: -1,
row_pre: -1,
row_index: -1
}),
_useState2 = _slicedToArray(_useState, 2),
hoverLocation = _useState2[0],
setHoverLocation = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
hoverInFreeze = _useState4[0],
setHoverInFreeze = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
selectedLocation = _useState6[0],
setSelectedLocation = _useState6[1];
var sheetIndex = getSheetIndex(context, context.currentSheetId);
var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
var freezeHandleTop = useMemo(function () {
var _sheet$frozen, _sheet$frozen2, _sheet$frozen3, _sheet$frozen4;
if ((sheet === null || sheet === void 0 || (_sheet$frozen = sheet.frozen) === null || _sheet$frozen === void 0 ? void 0 : _sheet$frozen.type) === "row" || (sheet === null || sheet === void 0 || (_sheet$frozen2 = sheet.frozen) === null || _sheet$frozen2 === void 0 ? void 0 : _sheet$frozen2.type) === "rangeRow" || (sheet === null || sheet === void 0 || (_sheet$frozen3 = sheet.frozen) === null || _sheet$frozen3 === void 0 ? void 0 : _sheet$frozen3.type) === "rangeBoth" || (sheet === null || sheet === void 0 || (_sheet$frozen4 = sheet.frozen) === null || _sheet$frozen4 === void 0 ? void 0 : _sheet$frozen4.type) === "both") {
var _sheet$frozen5;
return rowLocationByIndex((sheet === null || sheet === void 0 || (_sheet$frozen5 = sheet.frozen) === null || _sheet$frozen5 === void 0 || (_sheet$frozen5 = _sheet$frozen5.range) === null || _sheet$frozen5 === void 0 ? void 0 : _sheet$frozen5.row_focus) || 0, context.visibledatarow)[1] + context.scrollTop;
}
return context.scrollTop;
}, [context.visibledatarow, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollTop]);
var onMouseMove = useCallback(function (e) {
var _refs$globalCache$fre;
if (context.luckysheet_rows_change_size) {
return;
}
var mouseY = e.pageY - containerRef.current.getBoundingClientRect().top - window.scrollY;
var _y = mouseY + containerRef.current.scrollTop;
var freeze = (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId];
var _fixPositionOnFrozenC = fixPositionOnFrozenCells(freeze, 0, _y, 0, mouseY),
y = _fixPositionOnFrozenC.y,
inHorizontalFreeze = _fixPositionOnFrozenC.inHorizontalFreeze;
var row_location = rowLocation(y, context.visibledatarow);
var _row_location = _slicedToArray(row_location, 3),
row_pre = _row_location[0],
row = _row_location[1],
row_index = _row_location[2];
if (row_pre !== hoverLocation.row_pre || row !== hoverLocation.row) {
setHoverLocation({
row_pre: row_pre,
row: row,
row_index: row_index
});
setHoverInFreeze(inHorizontalFreeze);
}
}, [context.luckysheet_rows_change_size, context.visibledatarow, hoverLocation.row, hoverLocation.row_pre, refs.globalCache.freezen, context.currentSheetId]);
var onMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleRowHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
});
}, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
var onMouseLeave = useCallback(function () {
if (context.luckysheet_rows_change_size) {
return;
}
setHoverLocation({
row: -1,
row_pre: -1,
row_index: -1
});
}, [context.luckysheet_rows_change_size]);
var onRowSizeHandleMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleRowSizeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
});
e.stopPropagation();
}, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
var onRowFreezeHandleMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleRowFreezeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
});
e.stopPropagation();
}, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
var onContextMenu = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleContextMenu(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "rowHeader");
});
}, [refs.workbookContainer, setContext, settings, refs.cellArea]);
useEffect(function () {
var s = context.luckysheet_select_save || [];
var rowTitleMap = {};
for (var i = 0; i < s.length; i += 1) {
var r1 = s[i].row[0];
var r2 = s[i].row[1];
rowTitleMap = selectTitlesMap(rowTitleMap, r1, r2);
}
var rowTitleRange = selectTitlesRange(rowTitleMap);
var selects = [];
for (var _i = 0; _i < rowTitleRange.length; _i += 1) {
var _r = rowTitleRange[_i][0];
var _r2 = rowTitleRange[_i][rowTitleRange[_i].length - 1];
var row = rowLocationByIndex(_r2, context.visibledatarow)[1];
var row_pre = rowLocationByIndex(_r, context.visibledatarow)[0];
if (_.isNumber(row_pre) && _.isNumber(row)) {
selects.push({
row: row,
row_pre: row_pre,
r1: _r,
r2: _r2
});
}
}
setSelectedLocation(selects);
}, [context.luckysheet_select_save, context.visibledatarow]);
useEffect(function () {
containerRef.current.scrollTop = context.scrollTop;
}, [context.scrollTop]);
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
className: "fortune-row-header",
style: {
width: context.rowHeaderWidth - 1.5,
height: context.cellmainHeight
},
onMouseMove: onMouseMove,
onMouseDown: onMouseDown,
onMouseLeave: onMouseLeave,
onContextMenu: onContextMenu
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-rows-freeze-handle",
onMouseDown: onRowFreezeHandleMouseDown,
style: {
top: freezeHandleTop || 0
}
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-rows-change-size",
ref: rowChangeSizeRef,
onMouseDown: onRowSizeHandleMouseDown,
style: {
top: hoverLocation.row - 3 + (hoverInFreeze ? context.scrollTop : 0),
opacity: context.luckysheet_rows_change_size ? 1 : 0
}
}), !context.luckysheet_rows_change_size && hoverLocation.row_index >= 0 ? /*#__PURE__*/React.createElement("div", {
className: "fortune-row-header-hover",
style: _.assign({
top: hoverLocation.row_pre,
height: hoverLocation.row - hoverLocation.row_pre - 1,
display: "block"
}, fixRowStyleOverflowInFreeze(context, hoverLocation.row_index, hoverLocation.row_index, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
}) : null, selectedLocation.map(function (_ref, i) {
var _refs$globalCache$fre3;
var row = _ref.row,
row_pre = _ref.row_pre,
r1 = _ref.r1,
r2 = _ref.r2;
return /*#__PURE__*/React.createElement("div", {
className: "fortune-row-header-selected",
key: i,
style: _.assign({
top: row_pre,
height: row - row_pre - 1,
display: "block",
backgroundColor: "rgba(76, 76, 76, 0.1)"
}, fixRowStyleOverflowInFreeze(context, r1, r2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
});
}), /*#__PURE__*/React.createElement("div", {
style: {
height: context.rh_height,
width: 1
},
id: "luckysheetrowHeader_0",
className: "luckysheetsheetchange"
}));
};
export default RowHeader;