@fileverse-dev/fortune-react 1.0.26 → 1.1.0

package/es/components/ContextMenu/SheetTab.js

@@ -1,223 +0,0 @@
-import { locale, deleteSheet, api } from "@fileverse-dev/fortune-core";
-import _ from "lodash";
-import React, { useContext, useRef, useState, useLayoutEffect, useCallback } from "react";
-import { LucideIcon } from "@fileverse/ui";
-import WorkbookContext from "../../context";
-import { useAlert } from "../../hooks/useAlert";
-import { useOutsideClick } from "../../hooks/useOutsideClick";
-import { ChangeColor } from "../ChangeColor";
-import Divider from "./Divider";
-import "./index.css";
-import Menu from "./Menu";
-var SheetTabContextMenu = function SheetTabContextMenu() {
-  var _a;
-  var _b = useContext(WorkbookContext),
-    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 = locale(context).sheetconfig;
-  var _d = useState({
-      x: -1,
-      y: -1
-    }),
-    position = _d[0],
-    setPosition = _d[1];
-  var _e = useState(false),
-    isShowChangeColor = _e[0],
-    setIsShowChangeColor = _e[1];
-  var _f = useState(false),
-    isShowInputColor = _f[0],
-    setIsShowInputColor = _f[1];
-  var _g = useAlert(),
-    showAlert = _g.showAlert,
-    hideAlert = _g.hideAlert;
-  var containerRef = useRef(null);
-  var close = useCallback(function () {
-    setContext(function (ctx) {
-      ctx.sheetTabContextMenu = {};
-    });
-  }, [setContext]);
-  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]);
-  useOutsideClick(containerRef, close, [close]);
-  var moveSheet = useCallback(function (delta) {
-    if (context.allowEdit === false) return;
-    if (!sheet) return;
-    setContext(function (ctx) {
-      var _a;
-      var currentOrder = -1;
-      _.sortBy(ctx.luckysheetfile, ["order"]).forEach(function (_sheet, i) {
-        _sheet.order = i;
-        if (_sheet.id === sheet.id) {
-          currentOrder = i;
-        }
-      });
-      api.setSheetOrder(ctx, (_a = {}, _a[sheet.id] = currentOrder + delta, _a));
-    });
-  }, [context.allowEdit, setContext, sheet]);
-  var hideSheet = useCallback(function () {
-    if (context.allowEdit === false) return;
-    if (!sheet) return;
-    setContext(function (ctx) {
-      var shownSheets = ctx.luckysheetfile.filter(function (oneSheet) {
-        return _.isUndefined(oneSheet.hide) || (oneSheet === null || oneSheet === void 0 ? void 0 : oneSheet.hide) !== 1;
-      });
-      if (shownSheets.length > 1) {
-        api.hideSheet(ctx, sheet.id);
-      } else {
-        showAlert(sheetconfig.noMoreSheet, "ok");
-      }
-    });
-  }, [context.allowEdit, setContext, sheet, showAlert, sheetconfig]);
-  var copySheet = useCallback(function () {
-    if (context.allowEdit === false) return;
-    if (!(sheet === null || sheet === void 0 ? void 0 : sheet.id)) return;
-    setContext(function (ctx) {
-      api.copySheet(ctx, sheet.id);
-    }, {
-      addSheetOp: true
-    });
-  }, [context.allowEdit, setContext, sheet === null || sheet === void 0 ? void 0 : sheet.id]);
-  var updateShowInputColor = useCallback(function (state) {
-    setIsShowInputColor(state);
-  }, []);
-  var focusSheet = useCallback(function () {
-    if (context.allowEdit === false) return;
-    if (!(sheet === null || sheet === void 0 ? void 0 : sheet.id)) return;
-    setContext(function (ctx) {
-      _.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.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.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          var shownSheets = context.luckysheetfile.filter(function (singleSheet) {
-            return _.isUndefined(singleSheet.hide) || singleSheet.hide !== 1;
-          });
-          if (context.luckysheetfile.length > 1 && shownSheets.length > 1) {
-            showAlert(sheetconfig.confirmDelete, "yesno", function () {
-              setContext(function (ctx) {
-                deleteSheet(ctx, sheet.id);
-              }, {
-                deleteSheetOp: {
-                  id: sheet.id
-                }
-              });
-              hideAlert();
-            });
-          } else {
-            showAlert(sheetconfig.noMoreSheet, "ok");
-          }
-          close();
-        }
-      }, sheetconfig.delete);
-    }
-    if (name === "rename") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          onRename === null || onRename === void 0 ? void 0 : onRename();
-          close();
-        }
-      }, sheetconfig.rename);
-    }
-    if (name === "move") {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: name
-      }, /*#__PURE__*/React.createElement(Menu, {
-        onClick: function onClick() {
-          moveSheet(-1.5);
-          close();
-        }
-      }, sheetconfig.moveLeft), /*#__PURE__*/React.createElement(Menu, {
-        onClick: function onClick() {
-          moveSheet(1.5);
-          close();
-        }
-      }, sheetconfig.moveRight));
-    }
-    if (name === "hide") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          hideSheet();
-          close();
-        }
-      }, sheetconfig.hide);
-    }
-    if (name === "copy") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          copySheet();
-          close();
-        }
-      }, sheetconfig.copy);
-    }
-    if (name === "color") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onMouseEnter: function onMouseEnter() {
-          setIsShowChangeColor(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          if (!isShowInputColor) {
-            setIsShowChangeColor(false);
-          }
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between w-full"
-      }, sheetconfig.changeColor, /*#__PURE__*/React.createElement(LucideIcon, {
-        name: "ChevronRight",
-        size: "sm"
-      }), isShowChangeColor && context.allowEdit && (/*#__PURE__*/React.createElement(ChangeColor, {
-        triggerParentUpdate: updateShowInputColor
-      }))));
-    }
-    if (name === "focus") {
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: name,
-        onClick: function onClick() {
-          focusSheet();
-          close();
-        }
-      }, sheetconfig.focus);
-    }
-    if (name === "|") {
-      return /*#__PURE__*/React.createElement(Divider, {
-        key: "divide-".concat(i)
-      });
-    }
-    return null;
-  }));
-};
-export default SheetTabContextMenu;

package/es/components/ContextMenu/index.css

@@ -1,322 +0,0 @@
-.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;
-}