@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
220 lines • 11.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 { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, handleContextMenu, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells } from "@light-sheet/core";
import _ from "lodash";
import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
var ColumnHeader = function ColumnHeader() {
var _refs$globalCache$fre2;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
settings = _useContext.settings,
refs = _useContext.refs;
var containerRef = useRef(null);
var colChangeSizeRef = useRef(null);
var _useState = useState({
col: -1,
col_pre: -1,
col_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 allowEditRef = useRef(true);
var sheetIndex = getSheetIndex(context, context.currentSheetId);
var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
var freezeHandleLeft = 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) === "column" || (sheet === null || sheet === void 0 || (_sheet$frozen2 = sheet.frozen) === null || _sheet$frozen2 === void 0 ? void 0 : _sheet$frozen2.type) === "rangeColumn" || (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 colLocationByIndex((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.column_focus) || 0, context.visibledatacolumn)[1] - 2 + context.scrollLeft;
}
return context.scrollLeft;
}, [context.visibledatacolumn, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollLeft]);
var onMouseMove = useCallback(function (e) {
var _refs$globalCache$fre;
if (context.luckysheet_cols_change_size) {
return;
}
var mouseX = e.pageX - containerRef.current.getBoundingClientRect().left - window.scrollX;
var _x = mouseX + containerRef.current.scrollLeft;
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, _x, 0, mouseX, 0),
x = _fixPositionOnFrozenC.x,
inVerticalFreeze = _fixPositionOnFrozenC.inVerticalFreeze;
var col_location = colLocation(x, context.visibledatacolumn);
var _col_location = _slicedToArray(col_location, 3),
col_pre = _col_location[0],
col = _col_location[1],
col_index = _col_location[2];
if (col_index !== hoverLocation.col_index) {
setHoverLocation({
col_pre: col_pre,
col: col,
col_index: col_index
});
setHoverInFreeze(inVerticalFreeze);
}
var flowdata = getFlowdata(context);
if (!_.isNil(flowdata)) allowEditRef.current = isAllowEdit(context) && isAllowEdit(context, [{
row: [0, flowdata.length - 1],
column: col_location
}]);
}, [context, hoverLocation.col_index, refs.globalCache.freezen]);
var onMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleColumnHeaderMouseDown(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_cols_change_size) {
return;
}
setHoverLocation({
col: -1,
col_pre: -1,
col_index: -1
});
}, [context.luckysheet_cols_change_size]);
var onColSizeHandleMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleColSizeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
});
e.stopPropagation();
}, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
var onColFreezeHandleMouseDown = useCallback(function (e) {
var nativeEvent = e.nativeEvent;
setContext(function (draftCtx) {
handleColFreezeHandleMouseDown(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, "columnHeader");
});
}, [refs.workbookContainer, setContext, settings, refs.cellArea]);
useEffect(function () {
var s = context.luckysheet_select_save;
if (_.isNil(s)) return;
var columnTitleMap = {};
for (var i = 0; i < s.length; i += 1) {
var c1 = s[i].column[0];
var c2 = s[i].column[1];
columnTitleMap = selectTitlesMap(columnTitleMap, c1, c2);
}
var columnTitleRange = selectTitlesRange(columnTitleMap);
var selects = [];
for (var j = 0; j < columnTitleRange.length; j += 1) {
var _c = columnTitleRange[j][0];
var _c2 = columnTitleRange[j][columnTitleRange[j].length - 1];
var col = colLocationByIndex(_c2, context.visibledatacolumn)[1];
var col_pre = colLocationByIndex(_c, context.visibledatacolumn)[0];
if (_.isNumber(col) && _.isNumber(col_pre)) {
selects.push({
col: col,
col_pre: col_pre,
c1: _c,
c2: _c2
});
}
}
setSelectedLocation(selects);
}, [context.luckysheet_select_save, context.visibledatacolumn]);
useEffect(function () {
containerRef.current.scrollLeft = context.scrollLeft;
}, [context.scrollLeft]);
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
className: "fortune-col-header",
style: {
height: context.columnHeaderHeight - 1.5
},
onMouseMove: onMouseMove,
onMouseDown: onMouseDown,
onMouseLeave: onMouseLeave,
onContextMenu: onContextMenu
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-cols-freeze-handle",
onMouseDown: onColFreezeHandleMouseDown,
style: {
left: freezeHandleLeft || 0
}
}), /*#__PURE__*/React.createElement("div", {
className: "fortune-cols-change-size",
ref: colChangeSizeRef,
id: "fortune-cols-change-size",
onMouseDown: onColSizeHandleMouseDown,
style: {
left: hoverLocation.col - 5 + (hoverInFreeze ? context.scrollLeft : 0),
opacity: context.luckysheet_cols_change_size ? 1 : 0
}
}), !context.luckysheet_cols_change_size && hoverLocation.col_index >= 0 ? /*#__PURE__*/React.createElement("div", {
className: "fortune-col-header-hover",
style: _.assign({
left: hoverLocation.col_pre,
width: hoverLocation.col - hoverLocation.col_pre - 1,
display: "block"
}, fixColumnStyleOverflowInFreeze(context, hoverLocation.col_index, hoverLocation.col_index, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
}, allowEditRef.current && /*#__PURE__*/React.createElement("span", {
className: "header-arrow",
onClick: function onClick(e) {
setContext(function (ctx) {
ctx.contextMenu = {
x: e.pageX,
y: 90,
headerMenu: true
};
});
},
tabIndex: 0
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "headDownArrow",
width: 12
}))) : null, selectedLocation.map(function (_ref, i) {
var _refs$globalCache$fre3;
var col = _ref.col,
col_pre = _ref.col_pre,
c1 = _ref.c1,
c2 = _ref.c2;
return /*#__PURE__*/React.createElement("div", {
className: "fortune-col-header-selected",
key: i,
style: _.assign({
left: col_pre,
width: col - col_pre - 1,
display: "block",
backgroundColor: "rgba(76, 76, 76, 0.1)"
}, fixColumnStyleOverflowInFreeze(context, c1, c2, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]))
});
}), /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cols-h-cells luckysheetsheetchange",
id: "luckysheet-cols-h-cells_0",
style: {
width: context.ch_width,
height: 1
}
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-cols-h-cells-c"
}, /*#__PURE__*/React.createElement("div", {
className: "luckysheet-grdblkpush"
}))));
};
export default ColumnHeader;