@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/lib/components/ContextMenu/SheetTab.js

@@ -0,0 +1,232 @@
+"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 _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _ui = require("@fileverse/ui");
+var _context = _interopRequireDefault(require("../../context"));
+var _useAlert = require("../../hooks/useAlert");
+var _useOutsideClick = require("../../hooks/useOutsideClick");
+var _ChangeColor = require("../ChangeColor");
+var _Divider = _interopRequireDefault(require("./Divider"));
+require("./index.css");
+var _Menu = _interopRequireDefault(require("./Menu"));
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var SheetTabContextMenu = function SheetTabContextMenu() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    settings = _b.settings;
+  var _c = context.sheetTabContextMenu,
+    x = _c.x,
+    y = _c.y,
+    sheet = _c.sheet,
+    onRename = _c.onRename;
+  var sheetconfig = (0, _fortuneCore.locale)(context).sheetconfig;
+  var _d = (0, _react.useState)({
+      x: -1,
+      y: -1
+    }),
+    position = _d[0],
+    setPosition = _d[1];
+  var _e = (0, _react.useState)(false),
+    isShowChangeColor = _e[0],
+    setIsShowChangeColor = _e[1];
+  var _f = (0, _react.useState)(false),
+    isShowInputColor = _f[0],
+    setIsShowInputColor = _f[1];
+  var _g = (0, _useAlert.useAlert)(),
+    showAlert = _g.showAlert,
+    hideAlert = _g.hideAlert;
+  var containerRef = (0, _react.useRef)(null);
+  var close = (0, _react.useCallback)(function () {
+    setContext(function (ctx) {
+      ctx.sheetTabContextMenu = {};
+    });
+  }, [setContext]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (rect && x != null && y != null) {
+      setPosition({
+        x: x,
+        y: y - rect.height
+      });
+    }
+  }, [x, y]);
+  (0, _useOutsideClick.useOutsideClick)(containerRef, close, [close]);
+  var moveSheet = (0, _react.useCallback)(function (delta) {
+    if (context.allowEdit === false) return;
+    if (!sheet) return;
+    setContext(function (ctx) {
+      var _a;
+      var currentOrder = -1;
+      _lodash.default.sortBy(ctx.luckysheetfile, ["order"]).forEach(function (_sheet, i) {
+        _sheet.order = i;
+        if (_sheet.id === sheet.id) {
+          currentOrder = i;
+        }
+      });
+      _fortuneCore.api.setSheetOrder(ctx, (_a = {}, _a[sheet.id] = currentOrder + delta, _a));
+    });
+  }, [context.allowEdit, setContext, sheet]);
+  var hideSheet = (0, _react.useCallback)(function () {
+    if (context.allowEdit === false) return;
+    if (!sheet) return;
+    setContext(function (ctx) {
+      var shownSheets = ctx.luckysheetfile.filter(function (oneSheet) {
+        return _lodash.default.isUndefined(oneSheet.hide) || (oneSheet === null || oneSheet === void 0 ? void 0 : oneSheet.hide) !== 1;
+      });
+      if (shownSheets.length > 1) {
+        _fortuneCore.api.hideSheet(ctx, sheet.id);
+      } else {
+        showAlert(sheetconfig.noMoreSheet, "ok");
+      }
+    });
+  }, [context.allowEdit, setContext, sheet, showAlert, sheetconfig]);
+  var copySheet = (0, _react.useCallback)(function () {
+    if (context.allowEdit === false) return;
+    if (!(sheet === null || sheet === void 0 ? void 0 : sheet.id)) return;
+    setContext(function (ctx) {
+      _fortuneCore.api.copySheet(ctx, sheet.id);
+    }, {
+      addSheetOp: true
+    });
+  }, [context.allowEdit, setContext, sheet === null || sheet === void 0 ? void 0 : sheet.id]);
+  var updateShowInputColor = (0, _react.useCallback)(function (state) {
+    setIsShowInputColor(state);
+  }, []);
+  var focusSheet = (0, _react.useCallback)(function () {
+    if (context.allowEdit === false) return;
+    if (!(sheet === null || sheet === void 0 ? void 0 : sheet.id)) return;
+    setContext(function (ctx) {
+      _lodash.default.forEach(ctx.luckysheetfile, function (sheetfile) {
+        sheetfile.status = sheet.id === sheetfile.id ? 1 : 0;
+      });
+    });
+  }, [context.allowEdit, setContext, sheet === null || sheet === void 0 ? void 0 : sheet.id]);
+  if (!sheet || x == null || y == null) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-context-menu luckysheet-cols-menu",
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    style: {
+      left: position.x,
+      top: position.y,
+      overflow: "visible"
+    },
+    ref: containerRef
+  }, (_a = settings.sheetTabContextMenu) === null || _a === void 0 ? void 0 : _a.map(function (name, i) {
+    if (name === "delete") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          var shownSheets = context.luckysheetfile.filter(function (singleSheet) {
+            return _lodash.default.isUndefined(singleSheet.hide) || singleSheet.hide !== 1;
+          });
+          if (context.luckysheetfile.length > 1 && shownSheets.length > 1) {
+            showAlert(sheetconfig.confirmDelete, "yesno", function () {
+              setContext(function (ctx) {
+                (0, _fortuneCore.deleteSheet)(ctx, sheet.id);
+              }, {
+                deleteSheetOp: {
+                  id: sheet.id
+                }
+              });
+              hideAlert();
+            });
+          } else {
+            showAlert(sheetconfig.noMoreSheet, "ok");
+          }
+          close();
+        }
+      }, sheetconfig.delete);
+    }
+    if (name === "rename") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          onRename === null || onRename === void 0 ? void 0 : onRename();
+          close();
+        }
+      }, sheetconfig.rename);
+    }
+    if (name === "move") {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: name
+      }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        onClick: function onClick() {
+          moveSheet(-1.5);
+          close();
+        }
+      }, sheetconfig.moveLeft), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        onClick: function onClick() {
+          moveSheet(1.5);
+          close();
+        }
+      }, sheetconfig.moveRight));
+    }
+    if (name === "hide") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          hideSheet();
+          close();
+        }
+      }, sheetconfig.hide);
+    }
+    if (name === "copy") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          copySheet();
+          close();
+        }
+      }, sheetconfig.copy);
+    }
+    if (name === "color") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onMouseEnter: function onMouseEnter() {
+          setIsShowChangeColor(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          if (!isShowInputColor) {
+            setIsShowChangeColor(false);
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, sheetconfig.changeColor, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+        name: "ChevronRight",
+        size: "sm"
+      }), isShowChangeColor && context.allowEdit && (/*#__PURE__*/_react.default.createElement(_ChangeColor.ChangeColor, {
+        triggerParentUpdate: updateShowInputColor
+      }))));
+    }
+    if (name === "focus") {
+      return /*#__PURE__*/_react.default.createElement(_Menu.default, {
+        key: name,
+        onClick: function onClick() {
+          focusSheet();
+          close();
+        }
+      }, sheetconfig.focus);
+    }
+    if (name === "|") {
+      return /*#__PURE__*/_react.default.createElement(_Divider.default, {
+        key: "divide-".concat(i)
+      });
+    }
+    return null;
+  }));
+};
+var _default = exports.default = SheetTabContextMenu;

package/lib/components/ContextMenu/index.css

@@ -0,0 +1,322 @@
+.fortune-context-menu {
+  min-width: 240px;
+  max-height: 100%;
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.218s;
+  background: #fff;
+  border: 1px solid hsl(var(--color-border-default));
+  cursor: default;
+  margin: 0;
+  outline: none;
+  padding: 8px;
+  position: absolute;
+  z-index: 1004;
+  box-sizing: border-box;
+  user-select: none;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  /* max-width: 250px; */
+  color: hsl(var(--color-text-default));
+  line-height: 20px;
+}
+
+.context-item {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 4px;
+  gap: 12px;
+}
+
+.context-item:hover {
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
+}
+
+.context-item svg {
+  width: 18px !important;
+  height: 18px !important;
+}
+
+.fortune-context-menu input.luckysheet-mousedown-cancel {
+  width: 35px;
+  text-align: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.fortune-context-menu-divider {
+  width: "100%";
+  height: 1px;
+  margin: 4px 0;
+  background-color: #e0e0e0;
+}
+
+.luckysheet-cols-menu .luckysheet-cols-menuitem {
+  position: relative;
+  color: #333;
+  cursor: pointer;
+  list-style: none;
+  margin: 0;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border-radius: 4px;
+}
+
+/* 右击菜单项目 hover背景色 */
+.luckysheet-cols-menu .luckysheet-cols-menuitem:hover,
+.luckysheet-cols-menu .luckysheet-cols-menuitem-hover {
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
+}
+
+.luckysheet-cols-menu
+  .luckysheet-cols-menuitem
+  .luckysheet-cols-menuitem-content {
+  position: relative;
+  color: #333;
+  cursor: pointer;
+  list-style: none;
+  margin: 0;
+  padding: 8px !important;
+  white-space: nowrap;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fortune-filter-menu .luckysheet-cols-menuitem {
+  padding: 0px;
+}
+
+.fortune-filter-menu
+  .luckysheet-cols-menuitem
+  .luckysheet-cols-menuitem-content {
+  padding: 7px 24px;
+}
+
+.fortune-menuitem-row {
+  display: flex;
+  white-space: pre;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.fortune-byvalue-btn {
+  cursor: pointer;
+  color: blue;
+  text-decoration: underline;
+}
+
+.luckysheet-filter-bycolor-submenu .button-basic,
+.fortune-filter-menu .button-basic {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.luckysheet-filter-bycolor-submenu .button-basic {
+  margin: 5px 20px;
+}
+
+.luckysheet-filter-bycolor-submenu .button-default,
+.fortune-filter-menu .button-default {
+  color: rgb(38, 42, 51);
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(235, 235, 235);
+  margin-left: 10px;
+}
+
+.luckysheet-filter-bycolor-submenu .button-default:hover,
+.fortune-filter-menu .button-default:hover {
+  background-color: #e6e6e6;
+}
+
+.luckysheet-filter-bycolor-submenu .button-primary,
+.fortune-filter-menu .button-primary {
+  color: white;
+  background-color: #0188fb;
+}
+
+.luckysheet-filter-bycolor-submenu .button-primary:hover,
+.fortune-filter-menu .button-primary:hover {
+  background: #5391ff;
+}
+
+.fortune-filter-menu .button-danger {
+  color: white;
+  background-color: #d9534f;
+  margin-left: 10px;
+}
+
+.fortune-filter-menu .button-danger:hover {
+  background-color: #c9302c;
+}
+
+.filter-bycolor-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filtermenu-input-container {
+  padding: 0px;
+}
+
+.filtermenu-input-container input.luckysheet-mousedown-cancel {
+  margin: 0px 20px;
+  width: 230px;
+  box-sizing: border-box;
+  height: 26px;
+  border-radius: 3px;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  padding: 1px 8px;
+  outline: none;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+  text-align: start;
+}
+
+.filtermenu-input-container input.luckysheet-mousedown-cancel {
+  border: 1px solid #a1a1a1;
+}
+
+.filtermenu-input-container input.luckysheet-mousedown-cancel:focus {
+  border: 1px solid rgb(1, 136, 251);
+  outline: none;
+}
+
+.byvalue-btn-row {
+  justify-content: space-between;
+  padding-bottom: 0px;
+  align-items: flex-start;
+}
+
+.filter-caret {
+  width: 0;
+  height: 0;
+  display: inline-block;
+  border: 4px solid transparent;
+}
+
+.filter-caret.right {
+  margin-left: 2px;
+  margin-right: 3px;
+  border-left-color: #000000;
+}
+
+.filter-caret.down {
+  margin-top: 5px;
+  margin-right: 5px;
+  border-top-color: #000000;
+}
+
+.filter-checkbox {
+  margin-left: 0px;
+  margin-right: 5px;
+}
+
+#luckysheet-filter-byvalue-select {
+  position: relative;
+  min-height: 100px;
+  max-height: 210px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px solid hsl(var(--color-border-default));
+}
+
+#luckysheet-filter-byvalue-select .count,
+#luckysheet-pivotTableFilter-byvalue-select .count {
+  color: hsl(var(--color-text-secondary));
+  font-size: 14px;
+}
+
+#luckysheet-filter-byvalue-select .select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 14px;
+}
+
+/*颜色筛选 -- pan*/
+.luckysheet-filter-bycolor-submenu {
+  position: absolute;
+  min-width: 170px;
+  font-size: 12px;
+  padding: 5px 0;
+  z-index: 1004;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: #ffffff;
+}
+
+.luckysheet-filter-bycolor-submenu .title {
+  padding: 10px;
+  font-weight: 600;
+  color: #333;
+  background-color: #f4f4f4;
+  text-align: center;
+}
+
+.luckysheet-filter-bycolor-submenu .one-color-tip {
+  padding: 7px 30px;
+  text-align: center;
+}
+
+.luckysheet-filter-bycolor-submenu .color-list {
+  max-height: 128px;
+  overflow: auto;
+}
+
+.luckysheet-filter-bycolor-submenu .item {
+  padding: 5px 40px 5px 20px;
+  cursor: pointer;
+  position: relative;
+  background-color: #ffffff;
+}
+
+.luckysheet-filter-bycolor-submenu .item:hover {
+  background-color: #d3d3d3;
+}
+
+.luckysheet-filter-bycolor-submenu .item .color-label {
+  display: block;
+  width: 70px;
+  height: 20px;
+  border: 1px solid #d1d1d1;
+}
+
+.luckysheet-filter-bycolor-submenu .item input[type="checkbox"] {
+  position: absolute;
+  right: 10px;
+  top: 6px;
+}
+
+.change-color-triangle {
+  position: absolute;
+  top: 3px;
+  right: -18px;
+}
+
+.tippy-box {
+  background-color: transparent !important;
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "./index.css";
+import "tippy.js/dist/tippy.css";
+declare const ContextMenu: React.FC;
+export default ContextMenu;