@fileverse-dev/fortune-react 1.2.64-mergeFix-patch-1 → 1.2.64-patch-2

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

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

package/es/components/ConditionFormat/ConditionRules.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import "./index.css";
-import { locale, setConditionRules } from "@fileverse-dev/fortune-core";
+import { locale, setConditionRules, getSheetIndex } from "@fileverse-dev/fortune-core";
+import { numberToColumn } from "../SheetOverlay/helper";
 import produce from "immer";
 import { Button, Checkbox, Divider, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
 import WorkbookContext from "../../context";
@@ -9,22 +10,69 @@ import { getDisplayedRangeTxt } from "../DataVerification/getDisplayedRangeTxt";
 import { injectDatepickerStyles } from "../../utils/datepickerStyles";
 injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_a) {
-  var type = _a.type;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    setContext = _b.setContext;
+  var rulesType = _a.type;
+  var _b = useState('greaterThan'),
+    type = _b[0],
+    setType = _b[1];
+  var _c = useState(false),
+    create = _c[0],
+    setCreate = _c[1];
+  var _d = useState([]),
+    matchedConditionFormatKey = _d[0],
+    setMatchedConditionFormatKey = _d[1];
+  var _e = useState(null),
+    allConditionFormats = _e[0],
+    setAllConditionFormats = _e[1];
+  var _f = useContext(WorkbookContext),
+    context = _f.context,
+    setContext = _f.setContext;
   var hideDialog = useDialog().hideDialog;
-  var _c = locale(context),
-    conditionformat = _c.conditionformat,
-    button = _c.button,
-    protection = _c.protection,
-    generalDialog = _c.generalDialog;
-  var _d = useState({
+  var _g = locale(context),
+    conditionformat = _g.conditionformat,
+    button = _g.button,
+    protection = _g.protection,
+    generalDialog = _g.generalDialog;
+  var _h = useState({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    colorRules = _d[0],
-    setColorRules = _d[1];
+    colorRules = _h[0],
+    setColorRules = _h[1];
+  useEffect(function () {
+    var _a, _b, _c, _d;
+    var index = getSheetIndex(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
+    var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
+    if (allCondition && (allCondition === null || allCondition === void 0 ? void 0 : allCondition.length) === (allConditionFormats === null || allConditionFormats === void 0 ? void 0 : allConditionFormats.length)) return;
+    setAllConditionFormats(allCondition);
+    console.log("allConditionFormats", allCondition, (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0], context);
+    console.log("typed", context);
+    var selectionColumn = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].column;
+    var selectionRow = (_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c[0].row;
+    var matchedCondition = [];
+    if (allCondition) {
+      for (var key in allCondition) {
+        var conditionFormat = allCondition[key];
+        var range = (_d = conditionFormat.cellrange) === null || _d === void 0 ? void 0 : _d[0];
+        console.log("rangeObj", conditionFormat, range);
+        if (!range || !selectionColumn || !selectionRow) continue;
+        var rangeColumns = range.column;
+        var rangeRows = range.row;
+        var isColumnOverlap = !(selectionColumn[1] < rangeColumns[0] || selectionColumn[0] > rangeColumns[1]);
+        var isRowOverlap = !(selectionRow[1] < rangeRows[0] || selectionRow[0] > rangeRows[1]);
+        if (isColumnOverlap && isRowOverlap) {
+          matchedCondition.push(key);
+        }
+      }
+      setMatchedConditionFormatKey(matchedCondition);
+    }
+    console.log("kkkkk", matchedConditionFormatKey, matchedCondition);
+    if (matchedCondition.length === 0) {
+      console.log('whyyyyyyy');
+      setCreate(true);
+    } else if (matchedCondition.length > 0) {
+      setCreate(false);
+    }
+  }, [context]);
   var dataSelectRange = useCallback(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -103,11 +151,104 @@ var ConditionRules = function ConditionRules(_a) {
       ctx.rangeDialog.type = "";
       ctx.rangeDialog.rangeTxt = "";
     });
-  }, []);
+  }, [type]);
+  var conditionList = [{
+    text: "greaterThan",
+    value: ">",
+    label: "Greater Than"
+  }, {
+    text: "greaterThanOrEqual",
+    value: ">=",
+    label: "Greater Than or Equal"
+  }, {
+    text: "lessThan",
+    value: "<",
+    label: "Less Than"
+  }, {
+    text: "lessThanOrEqual",
+    value: "<=",
+    label: "Less Than or Equal"
+  }, {
+    text: "between",
+    value: "[]",
+    label: "Between"
+  }, {
+    text: "equal",
+    value: "=",
+    label: "Equal"
+  }, {
+    text: "textContains",
+    value: "()",
+    label: "Text Contains"
+  }, {
+    text: "occurrenceDate",
+    value: conditionformat.yesterday,
+    label: "Occurrence Date"
+  }, {
+    text: "duplicateValue",
+    value: "##",
+    label: "Duplicate Value"
+  }, {
+    text: "top10",
+    value: conditionformat.top10
+  }, {
+    text: "top10_percent",
+    value: conditionformat.top10_percent,
+    label: "Top 10 Percent"
+  }, {
+    text: "last10",
+    value: conditionformat.last10,
+    label: "Last 10"
+  }, {
+    text: "last10_percent",
+    value: conditionformat.last10_percent,
+    label: "Last 10 Percent"
+  }, {
+    text: "aboveAverage",
+    value: conditionformat.above,
+    label: "Above Average"
+  }, {
+    text: "belowAverage",
+    value: conditionformat.below,
+    label: "Below Average"
+  }];
   var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
   return /*#__PURE__*/React.createElement("div", {
     className: "condition-rules"
-  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+  }, !create ? (/*#__PURE__*/React.createElement("div", null, matchedConditionFormatKey.map(function (key) {
+    var _a, _b;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-6 py-6 border-b border-gray-200 last:border-b-0",
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-center !w-40 !h-40 rounded-3xl !bg-[".concat(allConditionFormats[key].format.cellColor || "", "]"),
+      style: {
+        backgroundColor: allConditionFormats[key].format.cellColor || "",
+        width: '44px',
+        height: '56px'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "text-6xl font-bold !text-[".concat(allConditionFormats[key].format.textColor || "", "] pb-1")
+    }, "123")), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col"
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "text-4xl font-normal text-gray-900 mb-2"
+    }, conditionformat[allConditionFormats[key].conditionName], ' ', (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/React.createElement("p", {
+      className: "text-3xl text-gray-400"
+    }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
+      var startCol = numberToColumn(range.column[0] + 1);
+      var endCol = numberToColumn(range.column[1] + 1);
+      var startRow = range.row[0] + 1;
+      var endRow = range.row[1] + 1;
+      return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
+    }).join(", "))));
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "md",
+    variant: "secondary",
+    onClick: function onClick() {
+      setCreate(true);
+    }
+  }, "Create New Condition Format"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
@@ -215,7 +356,31 @@ var ConditionRules = function ConditionRules(_a) {
         ctx.conditionRules.projectValue = String(current + 1);
       });
     }
-  })))))), /*#__PURE__*/React.createElement("div", {
+  })))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, "Cell(s) format if"), /*#__PURE__*/React.createElement(Select, {
+    value: type,
+    onValueChange: function onValueChange(value) {
+      console.log(value);
+      setType(value);
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", null, conditionformat[type])))), /*#__PURE__*/React.createElement(SelectContent, {
+    position: "popper",
+    side: "bottom",
+    align: "start",
+    sideOffset: 4,
+    className: "z-[100]",
+    "data-dropdown-content": "true"
+  }, conditionList.map(function (option) {
+    return /*#__PURE__*/React.createElement(SelectItem, {
+      key: option.value,
+      value: option.text
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("span", null, conditionformat[option.text])));
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
@@ -318,6 +483,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, button.apply)));
+  }, button.apply)))));
 };
 export default ConditionRules;

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

@@ -2,6 +2,7 @@ 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;
 }
-function numberToColumn(colNumber) {
+export function numberToColumn(colNumber) {
   var colPart = "";
   while (colNumber > 0) {
     colNumber -= 1;

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ConditionalFormatPortal: ({ visible }: {
+    visible: boolean;
+}) => React.ReactPortal | null;
+export default ConditionalFormatPortal;

package/es/components/Toolbar/conditionalFormatPortal.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import ConditionRules from "../ConditionFormat/ConditionRules";
+var ConditionalFormatPortal = function ConditionalFormatPortal(_a) {
+  var visible = _a.visible;
+  var container = document.getElementById("placeholder-conditional-format");
+  if (!visible || !container) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ConditionRules, null), container);
+};
+export default ConditionalFormatPortal;

package/es/components/Toolbar/index.js

@@ -127,6 +127,7 @@ 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";
@@ -135,10 +136,8 @@ import Combo from "./Combo";
 import Select, { Option } from "./Select";
 import SVGIcon from "../SVGIcon";
 import { useDialog } from "../../hooks/useDialog";
-import { useAlert } from "../../hooks/useAlert";
 import { SplitColumn } from "../SplitColumn";
 import { LocationCondition } from "../LocationCondition";
-import ConditionalFormat from "../ConditionFormat";
 import CustomButton from "./CustomButton";
 import { CustomColor } from "./CustomColor";
 import { FormatSearch } from "../FormatSearch";
@@ -482,33 +481,29 @@ var Toolbar = function Toolbar(_a) {
   var _l = useDialog(),
     showDialog = _l.showDialog,
     hideDialog = _l.hideDialog;
-  var _m = useAlert(),
-    showAlert = _m.showAlert,
-    hideAlert = _m.hideAlert;
   var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
   var flowdata = getFlowdata(context);
   contextRef.current = context;
   var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
   var cell = flowdata && row != null && col != null ? (_c = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row]) === null || _c === void 0 ? void 0 : _c[col] : undefined;
-  var _o = locale(context),
-    toolbar = _o.toolbar,
-    merge = _o.merge,
-    border = _o.border,
-    freezen = _o.freezen,
-    defaultFmt = _o.defaultFmt,
-    formula = _o.formula,
-    sort = _o.sort,
-    align = _o.align,
-    textWrap = _o.textWrap,
-    rotation = _o.rotation,
-    screenshot = _o.screenshot,
-    filter = _o.filter,
-    splitText = _o.splitText,
-    findAndReplace = _o.findAndReplace,
-    comment = _o.comment,
-    fontarray = _o.fontarray,
-    sheetconfig = _o.sheetconfig;
+  var _m = locale(context),
+    toolbar = _m.toolbar,
+    merge = _m.merge,
+    border = _m.border,
+    freezen = _m.freezen,
+    defaultFmt = _m.defaultFmt,
+    formula = _m.formula,
+    sort = _m.sort,
+    align = _m.align,
+    textWrap = _m.textWrap,
+    rotation = _m.rotation,
+    screenshot = _m.screenshot,
+    filter = _m.filter,
+    splitText = _m.splitText,
+    findAndReplace = _m.findAndReplace,
+    comment = _m.comment,
+    fontarray = _m.fontarray;
   var toolbarFormat = locale(context).format;
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
@@ -598,9 +593,12 @@ var Toolbar = function Toolbar(_a) {
       ctx.dataVerification.dataRegulation.value1 = "value1";
     });
   }, []);
+  var _o = useState(false),
+    showDataValidation = _o[0],
+    setShowDataValidation = _o[1];
   var _p = useState(false),
-    showDataValidation = _p[0],
-    setShowDataValidation = _p[1];
+    showConditionalFormat = _p[0],
+    setShowConditionalFormat = _p[1];
   var dataVerificationClick = function dataVerificationClick(selectedCells) {
     var _a;
     var selection = api.getSelection(context);
@@ -622,6 +620,25 @@ var Toolbar = function Toolbar(_a) {
   useEffect(function () {
     window.dataVerificationClick = dataVerificationClick;
   }, []);
+  var conditionalFormatClick = function conditionalFormatClick(selectedCells) {
+    var _a;
+    console.log("conditionalFormatClick called");
+    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];
@@ -1117,17 +1134,13 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "conditionFormat") {
-      var items_4 = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "conditionFormat",
+      var items = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
+      return /*#__PURE__*/React.createElement(Button, {
+        id: "conditionFormat",
+        iconId: name,
+        tooltip: tooltip,
         key: name,
-        tooltip: toolbar.conditionalFormat,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(ConditionalFormat, {
-          items: items_4,
-          setOpen: setOpen
-        });
+        onClick: conditionalFormatClick
       });
     }
     if (name === "image") {
@@ -1288,12 +1301,8 @@ var Toolbar = function Toolbar(_a) {
         tooltip: tooltip,
         text: "\u5408\u5E76\u5355\u5143\u683C",
         onClick: function onClick() {
-          var confirmMessage = sheetconfig.confirmMerge;
-          showAlert(confirmMessage, "yesno", function () {
-            setContext(function (ctx) {
-              handleMerge(ctx, "merge-all");
-            });
-            hideAlert();
+          return setContext(function (ctx) {
+            handleMerge(ctx, "merge-all");
           });
         }
       }, function (setOpen) {
@@ -1304,21 +1313,10 @@ var Toolbar = function Toolbar(_a) {
           return /*#__PURE__*/React.createElement(Option, {
             key: value,
             onClick: function onClick() {
-              if (value === "merge-cancel") {
-                setContext(function (ctx) {
-                  handleMerge(ctx, value);
-                });
-                setOpen(false);
-              } else {
-                setOpen(false);
-                var confirmMessage = sheetconfig.confirmMerge;
-                showAlert(confirmMessage, "yesno", function () {
-                  setContext(function (ctx) {
-                    handleMerge(ctx, value);
-                  });
-                  hideAlert();
-                });
-              }
+              setContext(function (ctx) {
+                handleMerge(ctx, value);
+              });
+              setOpen(false);
             }
           }, /*#__PURE__*/React.createElement("div", {
             style: {
@@ -1335,7 +1333,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "border") {
-      var items_5 = [{
+      var items_4 = [{
         text: border.borderTop,
         value: "border-top",
         icon: "BorderTop"
@@ -1390,7 +1388,7 @@ var Toolbar = function Toolbar(_a) {
       }, function (setOpen) {
         return /*#__PURE__*/React.createElement("div", {
           className: "fortune-toolbar-select fortune-border-grid"
-        }, items_5.map(function (_a) {
+        }, items_4.map(function (_a) {
           var value = _a.value,
             icon = _a.icon;
           return /*#__PURE__*/React.createElement("div", {
@@ -1411,7 +1409,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "freeze") {
-      var items_6 = [{
+      var items_5 = [{
         text: freezen.freezenRowRange,
         value: "freeze-row"
       }, {
@@ -1435,7 +1433,7 @@ var Toolbar = function Toolbar(_a) {
           });
         }
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_6.map(function (_a) {
+        return /*#__PURE__*/React.createElement(Select, null, items_5.map(function (_a) {
           var text = _a.text,
             value = _a.value;
           return /*#__PURE__*/React.createElement(Option, {
@@ -1457,7 +1455,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-wrap") {
-      var items_7 = [{
+      var items_6 = [{
         text: textWrap.clip,
         iconId: "text-clip",
         value: "clip"
@@ -1470,9 +1468,9 @@ var Toolbar = function Toolbar(_a) {
         iconId: "text-wrap",
         value: "wrap"
       }];
-      var curr_3 = items_7[0];
+      var curr_3 = items_6[0];
       if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
-        curr_3 = _.get(items_7, cell.tb);
+        curr_3 = _.get(items_6, cell.tb);
       }
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: curr_3.iconId,
@@ -1489,7 +1487,7 @@ var Toolbar = function Toolbar(_a) {
             justifyContent: "center",
             gap: 4
           }
-        }, items_7.map(function (_a) {
+        }, items_6.map(function (_a) {
           var iconId = _a.iconId,
             value = _a.value;
           return /*#__PURE__*/React.createElement(IconButton, {
@@ -1520,7 +1518,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-rotation") {
-      var items_8 = [{
+      var items_7 = [{
         text: rotation.none,
         iconId: "text-rotation-none",
         value: "none"
@@ -1545,9 +1543,9 @@ var Toolbar = function Toolbar(_a) {
         iconId: "text-rotation-down",
         value: "rotation-down"
       }];
-      var curr = items_8[0];
+      var curr = items_7[0];
       if ((cell === null || cell === void 0 ? void 0 : cell.tr) != null) {
-        curr = _.get(items_8, cell.tr);
+        curr = _.get(items_7, cell.tr);
       }
       return /*#__PURE__*/React.createElement(Combo, {
         iconId: curr.iconId,
@@ -1555,7 +1553,7 @@ var Toolbar = function Toolbar(_a) {
         tooltip: toolbar.textRotate,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_8.map(function (_a) {
+        return /*#__PURE__*/React.createElement(Select, null, items_7.map(function (_a) {
           var text = _a.text,
             iconId = _a.iconId,
             value = _a.value;
@@ -1580,7 +1578,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "filter") {
-      var items_9 = [{
+      var items_8 = [{
         iconId: "sort-asc",
         value: "sort-asc",
         text: sort.asc,
@@ -1630,7 +1628,7 @@ var Toolbar = function Toolbar(_a) {
           style: {
             minWidth: "11.25rem"
           }
-        }, items_9.map(function (_a, index) {
+        }, items_8.map(function (_a, index) {
           var text = _a.text,
             iconId = _a.iconId,
             value = _a.value,
@@ -1685,6 +1683,8 @@ var Toolbar = function Toolbar(_a) {
     "aria-label": toolbar.toolbar
   }, /*#__PURE__*/React.createElement(DataVerificationPortal, {
     visible: showDataValidation
+  }), /*#__PURE__*/React.createElement(ConditionalFormatPortal, {
+    visible: showConditionalFormat
   }), /*#__PURE__*/React.createElement("input", {
     id: "fortune-img-upload",
     className: "test-fortune-img-upload",

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

@@ -714,7 +714,6 @@ export declare function generateAPIs(context: Context, setContext: (recipe: (ctx
             chartEditNoOpt: string;
             sheetNameSpecCharError: string;
             sheetNamecannotIsEmptyError: string;
-            confirmMerge: string;
         };
         conditionformat: {
             conditionformat_greaterThan: string;
@@ -1197,4 +1196,7 @@ 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;
+    }>;
 };

package/es/components/Workbook/api.js

@@ -14,6 +14,7 @@ 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) {
@@ -452,6 +453,9 @@ 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

@@ -721,7 +721,6 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
             chartEditNoOpt: string;
             sheetNameSpecCharError: string;
             sheetNamecannotIsEmptyError: string;
-            confirmMerge: string;
         };
         conditionformat: {
             conditionformat_greaterThan: string;
@@ -1204,5 +1203,8 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
     getRefs: () => any;
     getShowDialog: () => typeof import("../../hooks/useDialog").useDialog;
     getSplitColComponent: () => React.FC<{}>;
+    getConditionalFormatComponent: () => React.FC<{
+        type?: string | undefined;
+    }>;
 }>>;
 export default Workbook;

package/es/components/Workbook/index.js

@@ -34,6 +34,7 @@ import { ModalProvider } from "../../context/modal";
 import FilterMenu from "../ContextMenu/FilterMenu";
 import SheetList from "../SheetList";
 import DunePreview from "../DunePreview/DunePreview";
+import ConditionRules from "../ConditionFormat/ConditionRules";
 enablePatches();
 var triggerGroupValuesRefresh = function triggerGroupValuesRefresh(ctx) {
   if (ctx.groupValuesRefreshData.length > 0) {
@@ -353,6 +354,10 @@ 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];
+  var getCond = function getCond() {};
   useEffect(function () {
     if (!_.isEmpty(context.luckysheetfile)) {
       onChange === null || onChange === void 0 ? void 0 : onChange(context.luckysheetfile);
@@ -680,7 +685,20 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }
   return /*#__PURE__*/React.createElement(WorkbookContext.Provider, {
     value: providerValue
-  }, /*#__PURE__*/React.createElement(ModalProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      setShow(!show);
+    }
+  }, "Click"), show && /*#__PURE__*/React.createElement("div", {
+    id: "placeholder-conditional-formatting",
+    style: {
+      width: "500px",
+      height: "500px",
+      position: "fixed",
+      zIndex: "1000",
+      backgroundColor: "white"
+    }
+  }, /*#__PURE__*/React.createElement(ConditionRules, null)), /*#__PURE__*/React.createElement(ModalProvider, null, /*#__PURE__*/React.createElement("div", {
     className: "fortune-container",
     ref: workbookContainer,
     onKeyDown: onKeyDown