@fileverse-dev/fortune-react 1.2.64-patch-12 → 1.2.65

package/es/components/ConditionFormat/index.css

@@ -115,7 +115,7 @@
 }
 
 .condition-rules-set-title {
-  margin: 0px 0px 16px 0px;
+  margin: 6px 0px;
 }
 
 .condition-rules-setbox {
@@ -149,23 +149,13 @@
 }
 
 .condition-rules-select-color {
-  background: transparent;
-  width: 16px;
-  height: 4px;
-  border-radius: 0px;
-  border: none;
+  background: hsl(var(--color-bg-default));
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
   padding: 0;
   margin: 0;
   cursor: pointer;
-  outline: none;
-}
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-input[type="color"]::-webkit-color-swatch {
-  border: 1px solid #d4d4d4;
 }
 
 .condition-rules-between-box {
@@ -220,50 +210,3 @@ input[type="number"].condition-rules-project-input::-webkit-inner-spin-button {
 input[type="number"].condition-rules-project-input {
   -moz-appearance: textfield;
 }
-
-.condition-list-parent {
-  padding: 12px 8px;
-  gap: 12px;
-}
-
-.condition-list-parent:hover {
-  background-color: hsl(var(--color-bg-default-hover));
-}
-
-.condition-list-pill {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 56px;
-  padding: 4px 16px;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #E8EBEC;
-}
-
-.condition-list-text {
-  font-family: "Helvetica Neue";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-}
-
-.condition-list-type {
-  color: hsl(var(--color-text-default, #363B3F));
-  font-family: "Helvetica Neue";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-}
-
-.condition-list-range {
-  color: hsl(var(--color-text-secondary, #77818A));
-  font-family: "Helvetica Neue";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-}

package/es/components/ConditionFormat/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useRef } from "react";
 import "./index.css";
-import { locale } from "@fileverse-dev/fortune-core";
+import { locale, updateItem } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
 import WorkbookContext from "../../context";
 import Select, { Option } from "../Toolbar/Select";
@@ -227,7 +227,9 @@ var ConditionalFormat = function ConditionalFormat(_a) {
             padding: "6px 10px"
           },
           onClick: function onClick() {
-            setContext(function (ctx) {});
+            setContext(function (ctx) {
+              updateItem(ctx, "delSheet");
+            });
           },
           tabIndex: 0
         }, conditionformat[v]);

package/es/components/ContextMenu/index.js

@@ -128,6 +128,7 @@ import Divider from "./Divider";
 import "./index.css";
 import Menu from "./Menu";
 import "tippy.js/dist/tippy.css";
+import ConditionalFormat from "../ConditionFormat";
 import SVGIcon from "../SVGIcon";
 import { LucideIcon as LocalLucidIcon } from "../../components/SheetOverlay/LucideIcon";
 var ContextMenu = function ContextMenu() {
@@ -985,20 +986,50 @@ var ContextMenu = function ContextMenu() {
       }), /*#__PURE__*/React.createElement("p", null, rightclick.link)));
     }
     if (name === "conditionFormat") {
-      return /*#__PURE__*/React.createElement(Menu, {
+      var closeContextMenu = function closeContextMenu() {
+        return setContext(function (ctx) {
+          ctx.contextMenu = {};
+        });
+      };
+      return /*#__PURE__*/React.createElement(Tippy, {
         key: name,
-        onClick: function onClick() {
-          if (context.allowEdit === false) return;
-          setContext(function (draftCtx) {
-            draftCtx.contextMenu = {};
-          });
-          window.conditionalFormatClick(context.luckysheet_select_save);
-        }
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        onShow: function onShow() {
+          setActiveMenu("conditionFormat");
+        },
+        onHide: function onHide() {
+          if (activeMenu === "conditionFormat") setActiveMenu("");
+        },
+        content: /*#__PURE__*/React.createElement("div", {
+          style: {
+            minWidth: 220
+          }
+        }, /*#__PURE__*/React.createElement(ConditionalFormat, {
+          items: ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"],
+          setOpen: closeContextMenu
+        })),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, {
+        isActive: activeMenu === "conditionFormat"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "context-item"
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-2 context-item"
       }, /*#__PURE__*/React.createElement(LucideIcon, {
         name: "PaintbrushVertical"
-      }), /*#__PURE__*/React.createElement("p", null, "Conditional formatting")));
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.conditionFormat || "Conditional Format")), /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ChevronRight",
+        width: 16,
+        height: 16,
+        className: "color-text-secondary w-4 h-4"
+      })))));
     }
     if (name === "clear-format") {
       return /*#__PURE__*/React.createElement(Menu, {

package/es/components/SheetOverlay/helper.d.ts

@@ -2,7 +2,6 @@ export declare function moveCursorToEnd(editableDiv: HTMLDivElement): void;
 export declare function getCursorPosition(editableDiv: HTMLDivElement): number;
 export declare function isLetterNumberPattern(str: string): boolean;
 export declare function removeLastSpan(htmlString: string): string;
-export declare function numberToColumn(colNumber: number): string;
 export declare function incrementColumn(cell: string): string;
 export declare function decrementColumn(cell: string): string;
 export declare function incrementRow(cell: string): string;

package/es/components/SheetOverlay/helper.js

@@ -47,7 +47,7 @@ function columnToNumber(colPart) {
   }
   return colNumber;
 }
-export function numberToColumn(colNumber) {
+function numberToColumn(colNumber) {
   var colPart = "";
   while (colNumber > 0) {
     colNumber -= 1;

package/es/components/Toolbar/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Cell } from "@fileverse-dev/fortune-core";
 import "./index.css";
-export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "PaintBucket" | "Undo" | "Redo" | "PaintRoller" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
+export declare const getLucideIcon: (title: string) => "Ethereum" | "DollarSign" | "" | "ChevronDown" | "Undo" | "Redo" | "PaintRoller" | "Bold" | "Italic" | "Strikethrough" | "Underline" | "AlignLeft" | "AlignCenter" | "AlignRight" | "ArrowUpFromLine" | "AlignVerticalMiddle" | "ArrowDownToLine" | "TextOverflow" | "WrapText" | "TextClip" | "Baseline" | "PaintBucket" | "Border" | "MergeHorizontal" | "Percent" | "DecimalsArrowLeft" | "DecimalsArrowRight" | "PaintbrushVertical" | "Filter" | "Link" | "MessageSquarePlus" | "Image" | "Sigma" | "ShieldCheck" | "Search" | "DuneChart" | "Ellipsis";
 export declare const CurrencySelector: ({ cell, defaultTextFormat, toolTipText, }: {
     cell: Cell | null | undefined;
     defaultTextFormat: string;

package/es/components/Toolbar/index.js

@@ -127,7 +127,6 @@ import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleT
 import _ from "lodash";
 import { IconButton, LucideIcon, Tooltip, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@fileverse/ui";
 import DataVerificationPortal from "./dataVerificationPortal";
-import ConditionalFormatPortal from "./conditionalFormatPortal";
 import WorkbookContext from "../../context";
 import "./index.css";
 import Button from "./Button";
@@ -138,6 +137,7 @@ import SVGIcon from "../SVGIcon";
 import { useDialog } from "../../hooks/useDialog";
 import { SplitColumn } from "../SplitColumn";
 import { LocationCondition } from "../LocationCondition";
+import ConditionalFormat from "../ConditionFormat";
 import CustomButton from "./CustomButton";
 import { CustomColor } from "./CustomColor";
 import { FormatSearch } from "../FormatSearch";
@@ -596,9 +596,6 @@ var Toolbar = function Toolbar(_a) {
   var _o = useState(false),
     showDataValidation = _o[0],
     setShowDataValidation = _o[1];
-  var _p = useState(false),
-    showConditionalFormat = _p[0],
-    setShowConditionalFormat = _p[1];
   var dataVerificationClick = function dataVerificationClick(selectedCells) {
     var _a;
     var selection = api.getSelection(context);
@@ -619,26 +616,7 @@ var Toolbar = function Toolbar(_a) {
   };
   useEffect(function () {
     window.dataVerificationClick = dataVerificationClick;
-    window.conditionalFormatClick = conditionalFormatClick;
   }, []);
-  var conditionalFormatClick = function conditionalFormatClick(selectedCells) {
-    var _a;
-    var selection = api.getSelection(context);
-    if (!selection && !selectedCells) {
-      setContext(function (ctx) {
-        api.setSelection(ctx, [{
-          row: [0, 0],
-          column: [0, 0]
-        }], {
-          id: context.currentSheetId
-        });
-      });
-    }
-    (_a = document.getElementById("conditional-format-button")) === null || _a === void 0 ? void 0 : _a.click();
-    setTimeout(function () {
-      setShowConditionalFormat(true);
-    }, 100);
-  };
   var getToolbarItem = useCallback(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -1134,13 +1112,17 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "conditionFormat") {
-      var items = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
-      return /*#__PURE__*/React.createElement(Button, {
-        id: "conditionFormat",
-        iconId: name,
-        tooltip: tooltip,
+      var items_4 = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
+      return /*#__PURE__*/React.createElement(Combo, {
+        iconId: "conditionFormat",
         key: name,
-        onClick: conditionalFormatClick
+        tooltip: toolbar.conditionalFormat,
+        showArrow: false
+      }, function (setOpen) {
+        return /*#__PURE__*/React.createElement(ConditionalFormat, {
+          items: items_4,
+          setOpen: setOpen
+        });
       });
     }
     if (name === "image") {
@@ -1333,7 +1315,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "border") {
-      var items_4 = [{
+      var items_5 = [{
         text: border.borderTop,
         value: "border-top",
         icon: "BorderTop"
@@ -1388,7 +1370,7 @@ var Toolbar = function Toolbar(_a) {
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement("div", {
           className: "fortune-toolbar-select fortune-border-grid"
-        }, items_4.map(function (_a) {
+        }, items_5.map(function (_a) {
           var value = _a.value,
             icon = _a.icon;
           return /*#__PURE__*/React.createElement("div", {
@@ -1409,7 +1391,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "freeze") {
-      var items_5 = [{
+      var items_6 = [{
         text: freezen.freezenRowRange,
         value: "freeze-row"
       }, {
@@ -1433,7 +1415,7 @@ var Toolbar = function Toolbar(_a) {
           });
         }
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_5.map(function (_a) {
+        return /*#__PURE__*/React.createElement(Select, null, items_6.map(function (_a) {
           var text = _a.text,
             value = _a.value;
           return /*#__PURE__*/React.createElement(Option, {
@@ -1455,7 +1437,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-wrap") {
-      var items_6 = [{
+      var items_7 = [{
         text: textWrap.clip,
         iconId: "text-clip",
         value: "clip"
@@ -1468,9 +1450,9 @@ var Toolbar = function Toolbar(_a) {
         iconId: "text-wrap",
         value: "wrap"
       }];
-      var curr_3 = items_6[0];
+      var curr_3 = items_7[0];
       if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
-        curr_3 = _.get(items_6, cell.tb);
+        curr_3 = _.get(items_7, cell.tb);
       }
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: curr_3.iconId,
@@ -1487,7 +1469,7 @@ var Toolbar = function Toolbar(_a) {
             justifyContent: "center",
             gap: 4
           }
-        }, items_6.map(function (_a) {
+        }, items_7.map(function (_a) {
           var iconId = _a.iconId,
             value = _a.value;
           return /*#__PURE__*/React.createElement(IconButton, {
@@ -1518,7 +1500,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-rotation") {
-      var items_7 = [{
+      var items_8 = [{
         text: rotation.none,
         iconId: "text-rotation-none",
         value: "none"
@@ -1543,9 +1525,9 @@ var Toolbar = function Toolbar(_a) {
         iconId: "text-rotation-down",
         value: "rotation-down"
       }];
-      var curr = items_7[0];
+      var curr = items_8[0];
       if ((cell === null || cell === void 0 ? void 0 : cell.tr) != null) {
-        curr = _.get(items_7, cell.tr);
+        curr = _.get(items_8, cell.tr);
       }
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: curr.iconId,
@@ -1553,7 +1535,7 @@ var Toolbar = function Toolbar(_a) {
         tooltip: toolbar.textRotate,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_7.map(function (_a) {
+        return /*#__PURE__*/React.createElement(Select, null, items_8.map(function (_a) {
           var text = _a.text,
             iconId = _a.iconId,
             value = _a.value;
@@ -1578,7 +1560,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "filter") {
-      var items_8 = [{
+      var items_9 = [{
         iconId: "sort-asc",
         value: "sort-asc",
         text: sort.asc,
@@ -1628,7 +1610,7 @@ var Toolbar = function Toolbar(_a) {
           style: {
             minWidth: "11.25rem"
           }
-        }, items_8.map(function (_a, index) {
+        }, items_9.map(function (_a, index) {
           var text = _a.text,
             iconId = _a.iconId,
             value = _a.value,
@@ -1677,18 +1659,12 @@ var Toolbar = function Toolbar(_a) {
       }
     }));
   }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency, (_d = context.dataVerification) === null || _d === void 0 ? void 0 : _d.dataRegulation]);
-  useEffect(function () {
-    console.log("context", context);
-  }, [context]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
   }, /*#__PURE__*/React.createElement(DataVerificationPortal, {
     visible: showDataValidation
-  }), /*#__PURE__*/React.createElement(ConditionalFormatPortal, {
-    visible: showConditionalFormat,
-    context: context
   }), /*#__PURE__*/React.createElement("input", {
     id: "fortune-img-upload",
     className: "test-fortune-img-upload",

package/es/components/Workbook/api.d.ts

@@ -1196,8 +1196,4 @@ export declare function generateAPIs(context: Context, setContext: (recipe: (ctx
     getRefs: () => any;
     getShowDialog: () => typeof useDialog;
     getSplitColComponent: () => import("react").FC<{}>;
-    getConditionalFormatComponent: () => import("react").FC<{
-        type?: string | undefined;
-        context?: any;
-    }>;
 };

package/es/components/Workbook/api.js

@@ -14,7 +14,6 @@ import _ from "lodash";
 import { getCryptoPrice } from "../../utils/cryptoApi";
 import { useDialog } from "../../hooks/useDialog";
 import { SplitColumn } from "../../components/SplitColumn";
-import ConditionRules from "../ConditionFormat/ConditionRules";
 export function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache, refs) {
   return {
     applyOp: function applyOp(ops) {
@@ -453,9 +452,6 @@ export function generateAPIs(context, setContext, handleUndo, handleRedo, settin
     },
     getSplitColComponent: function getSplitColComponent() {
       return SplitColumn;
-    },
-    getConditionalFormatComponent: function getConditionalFormatComponent() {
-      return ConditionRules;
     }
   };
 }

package/es/components/Workbook/index.d.ts

@@ -1203,9 +1203,5 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
     getRefs: () => any;
     getShowDialog: () => typeof import("../../hooks/useDialog").useDialog;
     getSplitColComponent: () => React.FC<{}>;
-    getConditionalFormatComponent: () => React.FC<{
-        type?: string | undefined;
-        context?: any;
-    }>;
 }>>;
 export default Workbook;

package/es/components/Workbook/index.js

@@ -353,9 +353,6 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       refs: refs
     };
   }, [context, handleRedo, handleUndo, mergedSettings, refs, setContextWithProduce]);
-  var _e = useState(false),
-    show = _e[0],
-    setShow = _e[1];
   useEffect(function () {
     if (!_.isEmpty(context.luckysheetfile)) {
       onChange === null || onChange === void 0 ? void 0 : onChange(context.luckysheetfile);

package/lib/components/ConditionFormat/ConditionRules.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 import "./index.css";
-import "./formating.css";
 declare const ConditionRules: React.FC<{
-    type?: string;
-    context?: any;
+    type: string;
 }>;
 export default ConditionRules;