@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
122 lines • 8.23 kB
JavaScript
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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { createFilterOptions, fixColumnStyleOverflowInFreeze, fixRowStyleOverflowInFreeze, getSheetIndex } from "@light-sheet/core";
import _ from "lodash";
import React, { useCallback, useContext, useEffect } from "react";
import WorkbookContext from "../../context";
import SVGIcon from "../SVGIcon";
var FilterOptions = function FilterOptions(_ref) {
var _refs$globalCache$fre, _refs$globalCache$fre2;
var getContainer = _ref.getContainer;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var filterOptions = context.filterOptions,
currentSheetId = context.currentSheetId,
filter = context.filter,
visibledatarow = context.visibledatarow,
visibledatacolumn = context.visibledatacolumn;
var sheetIndex = getSheetIndex(context, context.currentSheetId);
var _context$luckysheetfi = context.luckysheetfile[sheetIndex],
filter_select = _context$luckysheetfi.filter_select,
frozen = _context$luckysheetfi.frozen;
useEffect(function () {
setContext(function (draftCtx) {
var sheetIdx = getSheetIndex(draftCtx, draftCtx.currentSheetId);
if (sheetIdx == null) return;
draftCtx.luckysheet_filter_save = draftCtx.luckysheetfile[sheetIdx].filter_select;
draftCtx.filter = draftCtx.luckysheetfile[sheetIdx].filter || {};
createFilterOptions(draftCtx, draftCtx.luckysheet_filter_save, undefined);
});
}, [visibledatarow, visibledatacolumn, setContext, currentSheetId, filter_select]);
var showFilterContextMenu = useCallback(function (v, i) {
if (filterOptions == null) return;
setContext(function (draftCtx) {
var _draftCtx$filterConte, _draftCtx$filter$i;
if (((_draftCtx$filterConte = draftCtx.filterContextMenu) === null || _draftCtx$filterConte === void 0 ? void 0 : _draftCtx$filterConte.col) === filterOptions.startCol + i) return;
draftCtx.filterContextMenu = {
x: v.left + draftCtx.rowHeaderWidth - refs.scrollbarX.current.scrollLeft,
y: v.top + 23 + draftCtx.toolbarHeight + draftCtx.calculatebarHeight + draftCtx.columnHeaderHeight - refs.scrollbarY.current.scrollTop,
col: filterOptions.startCol + i,
startRow: filterOptions.startRow,
endRow: filterOptions.endRow,
startCol: filterOptions.startCol,
endCol: filterOptions.endCol,
hiddenRows: _.keys((_draftCtx$filter$i = draftCtx.filter[i]) === null || _draftCtx$filter$i === void 0 ? void 0 : _draftCtx$filter$i.rowhidden).map(function (r) {
return parseInt(r, 10);
}),
listBoxMaxHeight: 400
};
});
}, [filterOptions, getContainer, refs.scrollbarX, refs.scrollbarY, setContext]);
var freezeType = frozen === null || frozen === void 0 ? void 0 : frozen.type;
var frozenColumns = -1;
var frozenRows = -1;
if (freezeType === "row") frozenRows = 0;else if (freezeType === "column") frozenColumns = 0;else if (freezeType === "both") {
frozenColumns = 0;
frozenRows = 0;
} else {
var _frozen$range, _frozen$range2;
frozenColumns = (frozen === null || frozen === void 0 || (_frozen$range = frozen.range) === null || _frozen$range === void 0 ? void 0 : _frozen$range.column_focus) || -1;
frozenRows = (frozen === null || frozen === void 0 || (_frozen$range2 = frozen.range) === null || _frozen$range2 === void 0 ? void 0 : _frozen$range2.row_focus) || -1;
}
return filterOptions == null ? /*#__PURE__*/React.createElement("div", null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
id: "luckysheet-filter-selected-sheet",
className: "luckysheet-cell-selected luckysheet-filter-selected",
style: _.assign({
left: filterOptions.left,
width: filterOptions.width,
top: filterOptions.top,
height: filterOptions.height,
display: "block"
}, fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.endRow, (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId]), fixColumnStyleOverflowInFreeze(context, filterOptions.startCol, filterOptions.endCol, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
}), filterOptions.items.map(function (v, i) {
var _refs$globalCache$fre3, _refs$globalCache$fre4;
var filterParam = filter[i];
var columnOverflowFreezeStyle = fixColumnStyleOverflowInFreeze(context, i + filterOptions.startCol, i + filterOptions.startCol, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]);
var rowOverflowFreezeStyle = fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.startRow, (_refs$globalCache$fre4 = refs.globalCache.freezen) === null || _refs$globalCache$fre4 === void 0 ? void 0 : _refs$globalCache$fre4[context.currentSheetId]);
var col = visibledatacolumn[v.col];
var col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
var left = v.col <= frozenColumns && columnOverflowFreezeStyle.left ? columnOverflowFreezeStyle.left + col - col_pre - 20 : v.left;
var top = filterOptions.startRow <= frozenRows && rowOverflowFreezeStyle.top ? rowOverflowFreezeStyle.top : v.top;
var v_adjusted = _objectSpread(_objectSpread({}, v), {}, {
left: left,
top: top
});
return /*#__PURE__*/React.createElement("div", {
onMouseDown: function onMouseDown(e) {
return e.stopPropagation();
},
onClick: function onClick(e) {
e.stopPropagation();
showFilterContextMenu(v_adjusted, i);
},
onDoubleClick: function onDoubleClick(e) {
return e.stopPropagation();
},
tabIndex: 0,
key: i,
style: _.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
left: left,
top: top,
height: undefined,
width: undefined
}),
className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
}, filterParam == null ? /*#__PURE__*/React.createElement("div", {
className: "caret down"
}) : /*#__PURE__*/React.createElement(SVGIcon, {
name: "filter-fill-white",
style: {
width: 15,
height: 15
}
}));
}));
};
export default FilterOptions;