@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
43 lines • 1.41 kB
JavaScript
import React, { useContext } from "react";
import WorkbookContext from "../../../context";
import SVGIcon from "../../SVGIcon";
import "./index.css";
var RightPanel = function RightPanel(_ref) {
var title = _ref.title,
content = _ref.content,
footer = _ref.footer,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 120 : _ref$width,
onClose = _ref.onClose;
var _useContext = useContext(WorkbookContext),
setContext = _useContext.setContext;
function handleClose() {
setContext(function (draftCtx) {
draftCtx.rightPanelVisible = false;
draftCtx.rightPanelWidth = 0;
});
onClose === null || onClose === void 0 || onClose();
}
return /*#__PURE__*/React.createElement("section", {
className: "fortune-sheet-sidebar",
style: {
width: width,
height: "100%"
}
}, /*#__PURE__*/React.createElement("header", {
className: "fortune-sheet-sidebar-header"
}, title, /*#__PURE__*/React.createElement("div", {
onClick: handleClose
}, /*#__PURE__*/React.createElement(SVGIcon, {
name: "close",
style: {
padding: 7,
cursor: "pointer"
}
}))), /*#__PURE__*/React.createElement("section", {
className: "fortune-sheet-sidebar-content"
}, content), footer && /*#__PURE__*/React.createElement("footer", {
className: "fortune-sheet-sidebar-footer"
}, footer));
};
export default RightPanel;