@light-sheet/react
Version:
FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
242 lines (240 loc) • 8.49 kB
JavaScript
import React, { useCallback, useContext } from "react";
import "./index.css";
import { locale, updateItem } from "@light-sheet/core";
import _ from "lodash";
import WorkbookContext from "../../context";
import Select, { Option } from "../Toolbar/Select";
import SVGIcon from "../SVGIcon";
import { useDialog } from "../../hooks/useDialog";
import ConditionRules from "./ConditionRules";
import { MenuDivider } from "../Toolbar/Divider";
var ConditionalFormat = function ConditionalFormat(_ref) {
var items = _ref.items,
setOpen = _ref.setOpen;
var _useContext = useContext(WorkbookContext),
context = _useContext.context,
setContext = _useContext.setContext,
refs = _useContext.refs;
var _useDialog = useDialog(),
showDialog = _useDialog.showDialog;
var _locale = locale(context),
conditionformat = _locale.conditionformat;
// 子菜单溢出屏幕时，重新定位子菜单位置
// re-position the subMenu if it oveflows the window
var showSubMenu = useCallback(function (e) {
var target = e.target;
var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
var menuItemRect = menuItem.getBoundingClientRect();
var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
var subMenu = menuItem.querySelector(".condition-format-sub-menu");
if (_.isNil(subMenu)) return;
var menuItemStyle = window.getComputedStyle(menuItem);
var menuItemPaddingRight = parseFloat(menuItemStyle.getPropertyValue("padding-right").replace("px", ""));
if (workbookContainerRect.right - menuItemRect.right < parseFloat(subMenu.style.width.replace("px", ""))) {
subMenu.style.display = "block";
subMenu.style.right = "".concat(menuItemRect.width - menuItemPaddingRight, "px");
} else {
subMenu.style.display = "block";
subMenu.style.right = "".concat(-(parseFloat(subMenu.style.width.replace("px", "")) + menuItemPaddingRight), "px");
}
}, [refs.workbookContainer]);
var hideSubMenu = useCallback(function (e) {
var target = e.target;
if (target.className === "condition-format-sub-menu") {
target.style.display = "none";
return;
}
var subMenu = target.className === "condition-format-item" ? target.parentElement : target.querySelector(".condition-format-sub-menu");
if (_.isNil(subMenu)) return;
subMenu.style.display = "none";
}, []);
// 获得条件格式
var getConditionFormatItem = useCallback(function (name) {
if (name === "-") {
return /*#__PURE__*/React.createElement(MenuDivider, {
key: name
});
}
if (name === "highlightCellRules") {
return /*#__PURE__*/React.createElement(Option, {
key: name,
onMouseEnter: showSubMenu,
onMouseLeave: hideSubMenu
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name], /*#__PURE__*/React.createElement(SVGIcon, {
name: "rightArrow",
width: 18
}), /*#__PURE__*/React.createElement("div", {
className: "condition-format-sub-menu",
style: {
display: "none",
width: 150
}
}, [{
text: "greaterThan",
value: ">"
}, {
text: "lessThan",
value: "<"
}, {
text: "between",
value: "[]"
}, {
text: "equal",
value: "="
}, {
text: "textContains",
value: "()"
}, {
text: "occurrenceDate",
value: conditionformat.yesterday
}, {
text: "duplicateValue",
value: "##"
}].map(function (v) {
return /*#__PURE__*/React.createElement("div", {
className: "condition-format-item",
key: v.text,
onClick: function onClick() {
setOpen(false);
showDialog( /*#__PURE__*/React.createElement(ConditionRules, {
type: v.text
}));
},
tabIndex: 0
}, conditionformat[v.text], /*#__PURE__*/React.createElement("span", null, v.value));
}))));
}
if (name === "itemSelectionRules") {
return /*#__PURE__*/React.createElement(Option, {
key: name,
onMouseEnter: showSubMenu,
onMouseLeave: hideSubMenu
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line"
}, conditionformat[name], /*#__PURE__*/React.createElement(SVGIcon, {
name: "rightArrow",
width: 18
}), /*#__PURE__*/React.createElement("div", {
className: "condition-format-sub-menu",
style: {
display: "none",
width: 180
}
}, [{
text: "top10",
value: conditionformat.top10
}, {
text: "top10_percent",
value: conditionformat.top10_percent
}, {
text: "last10",
value: conditionformat.last10
}, {
text: "last10_percent",
value: conditionformat.last10_percent
}, {
text: "aboveAverage",
value: conditionformat.above
}, {
text: "belowAverage",
value: conditionformat.below
}].map(function (v) {
return /*#__PURE__*/React.createElement("div", {
className: "condition-format-item",
key: v.text,
onClick: function onClick() {
setOpen(false);
showDialog( /*#__PURE__*/React.createElement(ConditionRules, {
type: v.text
}));
},
tabIndex: 0
}, conditionformat[v.text], /*#__PURE__*/React.createElement("span", null, v.value));
}))));
}
if (name === "dataBar") {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name], /*#__PURE__*/React.createElement(SVGIcon, {
name: "rightArrow",
width: 18
}));
}
if (name === "colorGradation") {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name], /*#__PURE__*/React.createElement(SVGIcon, {
name: "rightArrow",
width: 18
}));
}
if (name === "icons") {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name]);
}
if (name === "newFormatRule") {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name]);
}
if (name === "deleteRule") {
return /*#__PURE__*/React.createElement(Option, {
key: name,
onMouseEnter: showSubMenu,
onMouseLeave: hideSubMenu
}, /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line"
}, conditionformat[name], /*#__PURE__*/React.createElement(SVGIcon, {
name: "rightArrow",
width: 18
}), /*#__PURE__*/React.createElement("div", {
className: "condition-format-sub-menu",
style: {
display: "none",
width: 150
}
}, ["deleteSheetRule"].map(function (v) {
return /*#__PURE__*/React.createElement("div", {
className: "condition-format-item",
key: v,
style: {
padding: "6px 10px"
},
onClick: function onClick() {
setContext(function (ctx) {
updateItem(ctx, "delSheet");
});
},
tabIndex: 0
}, conditionformat[v]);
}))));
}
if (name === "manageRules") {
return /*#__PURE__*/React.createElement("div", {
className: "fortune-toolbar-menu-line",
key: "div".concat(name)
}, conditionformat[name]);
}
return /*#__PURE__*/React.createElement("div", null);
}, [conditionformat, hideSubMenu, setContext, setOpen, showDialog, showSubMenu]);
return /*#__PURE__*/React.createElement("div", {
className: "condition-format"
}, /*#__PURE__*/React.createElement(Select, {
style: {
overflow: "visible"
}
}, items.map(function (v) {
return /*#__PURE__*/React.createElement("div", {
key: "option".concat(v)
}, getConditionFormatItem(v));
})));
};
export default ConditionalFormat;