@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/ConditionFormat/index.js

@@ -0,0 +1,252 @@
+import React, { useCallback, useContext, useEffect, useRef } from "react";
+import "./index.css";
+import { locale, updateItem } from "@fileverse-dev/fortune-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(_a) {
+  var items = _a.items,
+    setOpen = _a.setOpen;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var showDialog = useDialog().showDialog;
+  var conditionformat = locale(context).conditionformat;
+  var activeSubMenuRef = useRef(null);
+  var updateSubMenuPosition = useCallback(function (subMenu, menuItem) {
+    var menuItemRect = menuItem.getBoundingClientRect();
+    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
+    var subMenuWidth = subMenu.offsetWidth;
+    var availableSpace = workbookContainerRect.right - menuItemRect.right;
+    if (availableSpace < subMenuWidth) {
+      subMenu.style.right = "108%";
+    } else {
+      subMenu.style.right = "-100%";
+    }
+  }, [refs.workbookContainer]);
+  var showSubMenu = useCallback(function (e) {
+    var target = e.target;
+    var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
+    var subMenu = menuItem.querySelector(".condition-format-sub-menu");
+    if (_.isNil(subMenu)) return;
+    subMenu.style.display = "block";
+    activeSubMenuRef.current = subMenu;
+    updateSubMenuPosition(subMenu, menuItem);
+  }, [updateSubMenuPosition]);
+  var hideSubMenu = useCallback(function (e) {
+    var target = e.target;
+    if (target.className === "condition-format-sub-menu") {
+      target.style.display = "none";
+      activeSubMenuRef.current = null;
+      return;
+    }
+    var subMenu = target.className === "condition-format-item" ? target.parentElement : target.querySelector(".condition-format-sub-menu");
+    if (_.isNil(subMenu)) return;
+    subMenu.style.display = "none";
+    activeSubMenuRef.current = null;
+  }, []);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      if (activeSubMenuRef.current) {
+        var menuItem = activeSubMenuRef.current.parentElement;
+        if (menuItem) {
+          updateSubMenuPosition(activeSubMenuRef.current, menuItem);
+        }
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [updateSubMenuPosition]);
+  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"
+        }
+      }, [{
+        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 text-body-sm color-text-default",
+          key: v.text,
+          onClick: function onClick() {
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
+            showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
+              type: v.text
+            }), undefined, conditionformat["conditionformat_".concat(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"
+        }
+      }, [{
+        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 text-body-sm color-text-default",
+          key: v.text,
+          onClick: function onClick() {
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
+            showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
+              type: v.text
+            }), undefined, conditionformat["conditionformat_".concat(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"
+        }
+      }, ["deleteSheetRule"].map(function (v) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "condition-format-item text-body-sm color-text-default",
+          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;

package/{dist/packages/react/src → es}/components/ContextMenu/Divider.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const Divider: React.FC;
-export default Divider;
+import React from "react";
+declare const Divider: React.FC;
+export default Divider;

package/es/components/ContextMenu/Divider.js

@@ -0,0 +1,7 @@
+import React from "react";
+var Divider = function Divider() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-context-menu-divider"
+  });
+};
+export default Divider;

package/{dist/packages/react/src → es}/components/ContextMenu/FilterMenu.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const FilterMenu: React.FC;
-export default FilterMenu;
+import React from "react";
+declare const FilterMenu: React.FC;
+export default FilterMenu;