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

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/index.js

@@ -137,7 +137,6 @@ 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";
@@ -617,6 +616,22 @@ 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();
+  };
   var getToolbarItem = useCallback(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -1112,17 +1127,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") {
@@ -1315,7 +1326,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "border") {
-      var items_5 = [{
+      var items_4 = [{
         text: border.borderTop,
         value: "border-top",
         icon: "BorderTop"
@@ -1370,7 +1381,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", {
@@ -1391,7 +1402,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "freeze") {
-      var items_6 = [{
+      var items_5 = [{
         text: freezen.freezenRowRange,
         value: "freeze-row"
       }, {
@@ -1415,7 +1426,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, {
@@ -1437,7 +1448,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-wrap") {
-      var items_7 = [{
+      var items_6 = [{
         text: textWrap.clip,
         iconId: "text-clip",
         value: "clip"
@@ -1450,9 +1461,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,
@@ -1469,7 +1480,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, {
@@ -1500,7 +1511,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"
@@ -1525,9 +1536,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,
@@ -1535,7 +1546,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;
@@ -1560,7 +1571,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "filter") {
-      var items_9 = [{
+      var items_8 = [{
         iconId: "sort-asc",
         value: "sort-asc",
         text: sort.asc,
@@ -1610,7 +1621,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,

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

@@ -1196,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

@@ -1203,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

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/index.js

@@ -20,7 +20,6 @@ var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
 var _useDialog = require("../../hooks/useDialog");
 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");
@@ -626,6 +625,22 @@ 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();
+  };
   var getToolbarItem = (0, _react.useCallback)(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -1121,17 +1136,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") {
@@ -1324,7 +1335,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "border") {
-      var items_5 = [{
+      var items_4 = [{
         text: border.borderTop,
         value: "border-top",
         icon: "BorderTop"
@@ -1379,7 +1390,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", {
@@ -1400,7 +1411,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "freeze") {
-      var items_6 = [{
+      var items_5 = [{
         text: freezen.freezenRowRange,
         value: "freeze-row"
       }, {
@@ -1424,7 +1435,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, {
@@ -1446,7 +1457,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "text-wrap") {
-      var items_7 = [{
+      var items_6 = [{
         text: textWrap.clip,
         iconId: "text-clip",
         value: "clip"
@@ -1459,9 +1470,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,
@@ -1478,7 +1489,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, {
@@ -1509,7 +1520,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"
@@ -1534,9 +1545,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,
@@ -1544,7 +1555,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;
@@ -1569,7 +1580,7 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "filter") {
-      var items_9 = [{
+      var items_8 = [{
         iconId: "sort-asc",
         value: "sort-asc",
         text: sort.asc,
@@ -1619,7 +1630,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,

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

@@ -1196,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

@@ -1203,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/lib/components/Workbook/index.js

@@ -24,6 +24,7 @@ var _modal = require("../../context/modal");
 var _FilterMenu = _interopRequireDefault(require("../ContextMenu/FilterMenu"));
 var _SheetList = _interopRequireDefault(require("../SheetList"));
 var _DunePreview = _interopRequireDefault(require("../DunePreview/DunePreview"));
+var _ConditionRules = _interopRequireDefault(require("../ConditionFormat/ConditionRules"));
 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); }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
@@ -362,6 +363,10 @@ var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
       refs: refs
     };
   }, [context, handleRedo, handleUndo, mergedSettings, refs, setContextWithProduce]);
+  var _e = (0, _react.useState)(false),
+    show = _e[0],
+    setShow = _e[1];
+  var getCond = function getCond() {};
   (0, _react.useEffect)(function () {
     if (!_lodash.default.isEmpty(context.luckysheetfile)) {
       onChange === null || onChange === void 0 ? void 0 : onChange(context.luckysheetfile);
@@ -689,7 +694,20 @@ var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
     value: providerValue
-  }, /*#__PURE__*/_react.default.createElement(_modal.ModalProvider, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      setShow(!show);
+    }
+  }, "Click"), show && /*#__PURE__*/_react.default.createElement("div", {
+    id: "placeholder-conditional-formatting",
+    style: {
+      width: "500px",
+      height: "500px",
+      position: "fixed",
+      zIndex: "1000",
+      backgroundColor: "white"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ConditionRules.default, null)), /*#__PURE__*/_react.default.createElement(_modal.ModalProvider, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-container",
     ref: workbookContainer,
     onKeyDown: onKeyDown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.2.64-linkPasteFix-patch-2",
+  "version": "1.2.64-patch-1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.2.64-linkPasteFix-patch-2",
+    "@fileverse-dev/fortune-core": "1.2.64-patch-1",
     "@fileverse/ui": "^4.1.7-patch-40",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",