@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
49 lines • 1.63 kB
JavaScript
import React, { useContext, useEffect } from "react";
import WorkbookContext from "../../../context";
import "./index.css";
var ScrollBar = function ScrollBar(_ref) {
var axis = _ref.axis;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
refs = _useContext.refs,
setContext = _useContext.setContext;
useEffect(function () {
if (axis === "x") {
refs.scrollbarX.current.scrollLeft = context.scrollLeft;
} else {
refs.scrollbarY.current.scrollTop = context.scrollTop;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [axis === "x" ? context.scrollLeft : context.scrollTop]);
return /*#__PURE__*/React.createElement("div", {
ref: axis === "x" ? refs.scrollbarX : refs.scrollbarY,
style: axis === "x" ? {
left: context.rowHeaderWidth,
width: "calc(100% - ".concat(context.rowHeaderWidth, "px)")
} : {
height: "100%",
right: context.rightPanelWidth
},
className: "luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-".concat(axis),
onScroll: function onScroll() {
if (axis === "x") {
setContext(function (draftCtx) {
draftCtx.scrollLeft = refs.scrollbarX.current.scrollLeft;
});
} else {
setContext(function (draftCtx) {
draftCtx.scrollTop = refs.scrollbarY.current.scrollTop;
});
}
}
}, /*#__PURE__*/React.createElement("div", {
style: axis === "x" ? {
width: context.ch_width,
height: 10
} : {
width: 10,
height: context.rh_height
}
}));
};
export default ScrollBar;