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

package/lib/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/lib/components/ConditionFormat/ConditionRules.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./index.css");
 var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _helper = require("../SheetOverlay/helper");
 var _immer = _interopRequireDefault(require("immer"));
 var _ui = require("@fileverse/ui");
 var _context = _interopRequireDefault(require("../../context"));
@@ -18,22 +19,69 @@ 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); }
 (0, _datepickerStyles.injectDatepickerStyles)();
 var ConditionRules = function ConditionRules(_a) {
-  var type = _a.type;
-  var _b = (0, _react.useContext)(_context.default),
-    context = _b.context,
-    setContext = _b.setContext;
+  var rulesType = _a.type;
+  var _b = (0, _react.useState)('greaterThan'),
+    type = _b[0],
+    setType = _b[1];
+  var _c = (0, _react.useState)(false),
+    create = _c[0],
+    setCreate = _c[1];
+  var _d = (0, _react.useState)([]),
+    matchedConditionFormatKey = _d[0],
+    setMatchedConditionFormatKey = _d[1];
+  var _e = (0, _react.useState)(null),
+    allConditionFormats = _e[0],
+    setAllConditionFormats = _e[1];
+  var _f = (0, _react.useContext)(_context.default),
+    context = _f.context,
+    setContext = _f.setContext;
   var hideDialog = (0, _useDialog.useDialog)().hideDialog;
-  var _c = (0, _fortuneCore.locale)(context),
-    conditionformat = _c.conditionformat,
-    button = _c.button,
-    protection = _c.protection,
-    generalDialog = _c.generalDialog;
-  var _d = (0, _react.useState)({
+  var _g = (0, _fortuneCore.locale)(context),
+    conditionformat = _g.conditionformat,
+    button = _g.button,
+    protection = _g.protection,
+    generalDialog = _g.generalDialog;
+  var _h = (0, _react.useState)({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    colorRules = _d[0],
-    setColorRules = _d[1];
+    colorRules = _h[0],
+    setColorRules = _h[1];
+  (0, _react.useEffect)(function () {
+    var _a, _b, _c, _d;
+    var index = (0, _fortuneCore.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 = (0, _react.useCallback)(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -112,11 +160,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.default.createElement("div", {
     className: "condition-rules"
-  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
+  }, !create ? (/*#__PURE__*/_react.default.createElement("div", null, matchedConditionFormatKey.map(function (key) {
+    var _a, _b;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex items-center gap-6 py-6 border-b border-gray-200 last:border-b-0",
+      key: key
+    }, /*#__PURE__*/_react.default.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.default.createElement("span", {
+      className: "text-6xl font-bold !text-[".concat(allConditionFormats[key].format.textColor || "", "] pb-1")
+    }, "123")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex flex-col"
+    }, /*#__PURE__*/_react.default.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.default.createElement("p", {
+      className: "text-3xl text-gray-400"
+    }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
+      var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
+      var endCol = (0, _helper.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.default.createElement(_ui.Button, {
+    size: "md",
+    variant: "secondary",
+    onClick: function onClick() {
+      setCreate(true);
+    }
+  }, "Create New Condition Format"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
@@ -224,7 +365,31 @@ var ConditionRules = function ConditionRules(_a) {
         ctx.conditionRules.projectValue = String(current + 1);
       });
     }
-  })))))), /*#__PURE__*/_react.default.createElement("div", {
+  })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, "Cell(s) format if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+    value: type,
+    onValueChange: function onValueChange(value) {
+      console.log(value);
+      setType(value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[type])))), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
+    position: "popper",
+    side: "bottom",
+    align: "start",
+    sideOffset: 4,
+    className: "z-[100]",
+    "data-dropdown-content": "true"
+  }, conditionList.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+      key: option.value,
+      value: option.text
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex items-center gap-2"
+    }, /*#__PURE__*/_react.default.createElement("span", null, conditionformat[option.text])));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
@@ -327,6 +492,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, button.apply)));
+  }, button.apply)))));
 };
 var _default = exports.default = ConditionRules;

package/lib/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/lib/components/SheetOverlay/helper.js

@@ -11,6 +11,7 @@ exports.incrementColumn = incrementColumn;
 exports.incrementRow = incrementRow;
 exports.isLetterNumberPattern = isLetterNumberPattern;
 exports.moveCursorToEnd = moveCursorToEnd;
+exports.numberToColumn = numberToColumn;
 exports.removeLastSpan = removeLastSpan;
 function moveCursorToEnd(editableDiv) {
   editableDiv.focus();

package/lib/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/lib/components/Toolbar/conditionalFormatPortal.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+var _ConditionRules = _interopRequireDefault(require("../ConditionFormat/ConditionRules"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var ConditionalFormatPortal = function ConditionalFormatPortal(_a) {
+  var visible = _a.visible;
+  var container = document.getElementById("placeholder-conditional-format");
+  if (!visible || !container) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_ConditionRules.default, null), container);
+};
+var _default = exports.default = ConditionalFormatPortal;

package/lib/components/Toolbar/index.js

@@ -10,6 +10,7 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _ui = require("@fileverse/ui");
 var _dataVerificationPortal = _interopRequireDefault(require("./dataVerificationPortal"));
+var _conditionalFormatPortal = _interopRequireDefault(require("./conditionalFormatPortal"));
 var _context = _interopRequireDefault(require("../../context"));
 require("./index.css");
 var _Button = _interopRequireDefault(require("./Button"));
@@ -18,10 +19,8 @@ var _Combo = _interopRequireDefault(require("./Combo"));
 var _Select = _interopRequireWildcard(require("./Select"));
 var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
 var _useDialog = require("../../hooks/useDialog");
-var _useAlert = require("../../hooks/useAlert");
 var _SplitColumn = require("../SplitColumn");
 var _LocationCondition = require("../LocationCondition");
-var _ConditionFormat = _interopRequireDefault(require("../ConditionFormat"));
 var _CustomButton = _interopRequireDefault(require("./CustomButton"));
 var _CustomColor = require("./CustomColor");
 var _FormatSearch = require("../FormatSearch");
@@ -491,33 +490,29 @@ var Toolbar = function Toolbar(_a) {
   var _l = (0, _useDialog.useDialog)(),
     showDialog = _l.showDialog,
     hideDialog = _l.hideDialog;
-  var _m = (0, _useAlert.useAlert)(),
-    showAlert = _m.showAlert,
-    hideAlert = _m.hideAlert;
   var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
   var flowdata = (0, _fortuneCore.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 = (0, _fortuneCore.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 = (0, _fortuneCore.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 = (0, _fortuneCore.locale)(context).format;
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
@@ -607,9 +602,12 @@ var Toolbar = function Toolbar(_a) {
       ctx.dataVerification.dataRegulation.value1 = "value1";
     });
   }, []);
+  var _o = (0, _react.useState)(false),
+    showDataValidation = _o[0],
+    setShowDataValidation = _o[1];
   var _p = (0, _react.useState)(false),
-    showDataValidation = _p[0],
-    setShowDataValidation = _p[1];
+    showConditionalFormat = _p[0],
+    setShowConditionalFormat = _p[1];
   var dataVerificationClick = function dataVerificationClick(selectedCells) {
     var _a;
     var selection = _fortuneCore.api.getSelection(context);
@@ -631,6 +629,25 @@ var Toolbar = function Toolbar(_a) {
   (0, _react.useEffect)(function () {
     window.dataVerificationClick = dataVerificationClick;
   }, []);
+  var conditionalFormatClick = function conditionalFormatClick(selectedCells) {
+    var _a;
+    console.log("conditionalFormatClick called");
+    var selection = _fortuneCore.api.getSelection(context);
+    if (!selection && !selectedCells) {
+      setContext(function (ctx) {
+        _fortuneCore.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 = (0, _react.useCallback)(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -1126,17 +1143,13 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "conditionFormat") {
-      var items_4 = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
-      return /*#__PURE__*/_react.default.createElement(_Combo.default, {
-        iconId: "conditionFormat",
+      var items = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
+      return /*#__PURE__*/_react.default.createElement(_Button.default, {
+        id: "conditionFormat",
+        iconId: name,
+        tooltip: tooltip,
         key: name,
-        tooltip: toolbar.conditionalFormat,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/_react.default.createElement(_ConditionFormat.default, {
-          items: items_4,
-          setOpen: setOpen
-        });
+        onClick: conditionalFormatClick
       });
     }
     if (name === "image") {
@@ -1297,12 +1310,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) {
-              (0, _fortuneCore.handleMerge)(ctx, "merge-all");
-            });
-            hideAlert();
+          return setContext(function (ctx) {
+            (0, _fortuneCore.handleMerge)(ctx, "merge-all");
           });
         }
       }, function (setOpen) {
@@ -1313,21 +1322,10 @@ var Toolbar = function Toolbar(_a) {
           return /*#__PURE__*/_react.default.createElement(_Select.Option, {
             key: value,
             onClick: function onClick() {
-              if (value === "merge-cancel") {
-                setContext(function (ctx) {
-                  (0, _fortuneCore.handleMerge)(ctx, value);
-                });
-                setOpen(false);
-              } else {
-                setOpen(false);
-                var confirmMessage = sheetconfig.confirmMerge;
-                showAlert(confirmMessage, "yesno", function () {
-                  setContext(function (ctx) {
-                    (0, _fortuneCore.handleMerge)(ctx, value);
-                  });
-                  hideAlert();
-                });
-              }
+              setContext(function (ctx) {
+                (0, _fortuneCore.handleMerge)(ctx, value);
+              });
+              setOpen(false);
             }
           }, /*#__PURE__*/_react.default.createElement("div", {
             style: {
@@ -1344,7 +1342,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "border") {
-      var items_5 = [{
+      var items_4 = [{
         text: border.borderTop,
         value: "border-top",
         icon: "BorderTop"
@@ -1399,7 +1397,7 @@ var Toolbar = function Toolbar(_a) {
       }, function (setOpen) {
         return /*#__PURE__*/_react.default.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.default.createElement("div", {
@@ -1420,7 +1418,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "freeze") {
-      var items_6 = [{
+      var items_5 = [{
         text: freezen.freezenRowRange,
         value: "freeze-row"
       }, {
@@ -1444,7 +1442,7 @@ var Toolbar = function Toolbar(_a) {
           });
         }
       }, function (setOpen) {
-        return /*#__PURE__*/_react.default.createElement(_Select.default, null, items_6.map(function (_a) {
+        return /*#__PURE__*/_react.default.createElement(_Select.default, null, items_5.map(function (_a) {
           var text = _a.text,
             value = _a.value;
           return /*#__PURE__*/_react.default.createElement(_Select.Option, {
@@ -1466,7 +1464,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-wrap") {
-      var items_7 = [{
+      var items_6 = [{
         text: textWrap.clip,
         iconId: "text-clip",
         value: "clip"
@@ -1479,9 +1477,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 = _lodash.default.get(items_7, cell.tb);
+        curr_3 = _lodash.default.get(items_6, cell.tb);
       }
       return /*#__PURE__*/_react.default.createElement(_Combo.default, {
         iconId: curr_3.iconId,
@@ -1498,7 +1496,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.default.createElement(_ui.IconButton, {
@@ -1529,7 +1527,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"
@@ -1554,9 +1552,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 = _lodash.default.get(items_8, cell.tr);
+        curr = _lodash.default.get(items_7, cell.tr);
       }
       return /*#__PURE__*/_react.default.createElement(_Combo.default, {
         iconId: curr.iconId,
@@ -1564,7 +1562,7 @@ var Toolbar = function Toolbar(_a) {
         tooltip: toolbar.textRotate,
         showArrow: false
       }, function (setOpen) {
-        return /*#__PURE__*/_react.default.createElement(_Select.default, null, items_8.map(function (_a) {
+        return /*#__PURE__*/_react.default.createElement(_Select.default, null, items_7.map(function (_a) {
           var text = _a.text,
             iconId = _a.iconId,
             value = _a.value;
@@ -1589,7 +1587,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "filter") {
-      var items_9 = [{
+      var items_8 = [{
         iconId: "sort-asc",
         value: "sort-asc",
         text: sort.asc,
@@ -1639,7 +1637,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,
@@ -1694,6 +1692,8 @@ var Toolbar = function Toolbar(_a) {
     "aria-label": toolbar.toolbar
   }, /*#__PURE__*/_react.default.createElement(_dataVerificationPortal.default, {
     visible: showDataValidation
+  }), /*#__PURE__*/_react.default.createElement(_conditionalFormatPortal.default, {
+    visible: showConditionalFormat
   }), /*#__PURE__*/_react.default.createElement("input", {
     id: "fortune-img-upload",
     className: "test-fortune-img-upload",

package/lib/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/lib/components/Workbook/api.js

@@ -10,6 +10,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _cryptoApi = require("../../utils/cryptoApi");
 var _useDialog = require("../../hooks/useDialog");
 var _SplitColumn = require("../../components/SplitColumn");
+var _ConditionRules = _interopRequireDefault(require("../ConditionFormat/ConditionRules"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -459,6 +460,9 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     getSplitColComponent: function getSplitColComponent() {
       return _SplitColumn.SplitColumn;
+    },
+    getConditionalFormatComponent: function getConditionalFormatComponent() {
+      return _ConditionRules.default;
     }
   };
 }

package/lib/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;