@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/lib/components/ConditionFormat/index.js

@@ -0,0 +1,261 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _Select = _interopRequireWildcard(require("../Toolbar/Select"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _useDialog = require("../../hooks/useDialog");
+var _ConditionRules = _interopRequireDefault(require("./ConditionRules"));
+var _Divider = require("../Toolbar/Divider");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ConditionalFormat = function ConditionalFormat(_a) {
+  var items = _a.items,
+    setOpen = _a.setOpen;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var showDialog = (0, _useDialog.useDialog)().showDialog;
+  var conditionformat = (0, _fortuneCore.locale)(context).conditionformat;
+  var activeSubMenuRef = (0, _react.useRef)(null);
+  var updateSubMenuPosition = (0, _react.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 = (0, _react.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 (_lodash.default.isNil(subMenu)) return;
+    subMenu.style.display = "block";
+    activeSubMenuRef.current = subMenu;
+    updateSubMenuPosition(subMenu, menuItem);
+  }, [updateSubMenuPosition]);
+  var hideSubMenu = (0, _react.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 (_lodash.default.isNil(subMenu)) return;
+    subMenu.style.display = "none";
+    activeSubMenuRef.current = null;
+  }, []);
+  (0, _react.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 = (0, _react.useCallback)(function (name) {
+    if (name === "-") {
+      return /*#__PURE__*/_react.default.createElement(_Divider.MenuDivider, {
+        key: name
+      });
+    }
+    if (name === "highlightCellRules") {
+      return /*#__PURE__*/_react.default.createElement(_Select.Option, {
+        key: name,
+        onMouseEnter: showSubMenu,
+        onMouseLeave: hideSubMenu
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name], /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "rightArrow",
+        width: 18
+      }), /*#__PURE__*/_react.default.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.default.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.default.createElement(_ConditionRules.default, {
+              type: v.text
+            }), undefined, conditionformat["conditionformat_".concat(v.text)]);
+          },
+          tabIndex: 0
+        }, conditionformat[v.text], /*#__PURE__*/_react.default.createElement("span", null, v.value));
+      }))));
+    }
+    if (name === "itemSelectionRules") {
+      return /*#__PURE__*/_react.default.createElement(_Select.Option, {
+        key: name,
+        onMouseEnter: showSubMenu,
+        onMouseLeave: hideSubMenu
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line"
+      }, conditionformat[name], /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "rightArrow",
+        width: 18
+      }), /*#__PURE__*/_react.default.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.default.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.default.createElement(_ConditionRules.default, {
+              type: v.text
+            }), undefined, conditionformat["conditionformat_".concat(v.text)]);
+          },
+          tabIndex: 0
+        }, conditionformat[v.text], /*#__PURE__*/_react.default.createElement("span", null, v.value));
+      }))));
+    }
+    if (name === "dataBar") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name], /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "rightArrow",
+        width: 18
+      }));
+    }
+    if (name === "colorGradation") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name], /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "rightArrow",
+        width: 18
+      }));
+    }
+    if (name === "icons") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name]);
+    }
+    if (name === "newFormatRule") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name]);
+    }
+    if (name === "deleteRule") {
+      return /*#__PURE__*/_react.default.createElement(_Select.Option, {
+        key: name,
+        onMouseEnter: showSubMenu,
+        onMouseLeave: hideSubMenu
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line"
+      }, conditionformat[name], /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+        name: "rightArrow",
+        width: 18
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "condition-format-sub-menu",
+        style: {
+          display: "none"
+        }
+      }, ["deleteSheetRule"].map(function (v) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "condition-format-item text-body-sm color-text-default",
+          key: v,
+          style: {
+            padding: "6px 10px"
+          },
+          onClick: function onClick() {
+            setContext(function (ctx) {
+              (0, _fortuneCore.updateItem)(ctx, "delSheet");
+            });
+          },
+          tabIndex: 0
+        }, conditionformat[v]);
+      }))));
+    }
+    if (name === "manageRules") {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "fortune-toolbar-menu-line",
+        key: "div".concat(name)
+      }, conditionformat[name]);
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  }, [conditionformat, hideSubMenu, setContext, setOpen, showDialog, showSubMenu]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-format"
+  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+    style: {
+      overflow: "visible"
+    }
+  }, items.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "option".concat(v)
+    }, getConditionFormatItem(v));
+  })));
+};
+var _default = exports.default = ConditionalFormat;

package/lib/components/ContextMenu/Divider.d.ts

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

package/lib/components/ContextMenu/Divider.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Divider = function Divider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-context-menu-divider"
+  });
+};
+var _default = exports.default = Divider;

package/lib/components/ContextMenu/FilterMenu.d.ts

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