@fileverse-dev/fortune-react 1.2.67 → 1.2.69-conditional-1

package/lib/components/ConditionFormat/ConditionRules.js

@@ -7,33 +7,93 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./index.css");
+var _ui = require("@fileverse/ui");
 var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _immer = _interopRequireDefault(require("immer"));
-var _ui = require("@fileverse/ui");
+var _helper = require("../SheetOverlay/helper");
 var _context = _interopRequireDefault(require("../../context"));
 var _useDialog = require("../../hooks/useDialog");
 var _getDisplayedRangeTxt = require("../DataVerification/getDisplayedRangeTxt");
 var _datepickerStyles = require("../../utils/datepickerStyles");
+require("./formating.css");
 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,
+    context = _a.context;
+  console.log("rulesType", rulesType);
+  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 buttonClickCreateRef = (0, _react.useRef)(false);
+  var textColorInputRef = (0, _react.useRef)(null);
+  var cellColorInputRef = (0, _react.useRef)(null);
+  var _d = (0, _react.useState)([]),
+    matchedConditionFormatKey = _d[0],
+    setMatchedConditionFormatKey = _d[1];
+  var _e = (0, _react.useState)(null),
+    allConditionFormats = _e[0],
+    setAllConditionFormats = _e[1];
+  var setContext = (0, _react.useContext)(_context.default).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 _f = (0, _fortuneCore.locale)(context),
+    conditionformat = _f.conditionformat,
+    button = _f.button,
+    protection = _f.protection,
+    generalDialog = _f.generalDialog;
+  var _g = (0, _react.useState)({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    colorRules = _d[0],
-    setColorRules = _d[1];
+    colorRules = _g[0],
+    setColorRules = _g[1];
+  var _h = (0, _react.useState)(false),
+    bold = _h[0],
+    setBold = _h[1];
+  var _j = (0, _react.useState)(false),
+    italic = _j[0],
+    setItalic = _j[1];
+  var _k = (0, _react.useState)(false),
+    underline = _k[0],
+    setUnderline = _k[1];
+  var _l = (0, _react.useState)(false),
+    strikethrough = _l[0],
+    setStrikethrough = _l[1];
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    var index = (0, _fortuneCore.getSheetIndex)(context, context === null || context === void 0 ? void 0 : context.currentSheetId) || 0;
+    var allCondition = context.luckysheetfile[index].luckysheet_conditionformat_save;
+    setAllConditionFormats(allCondition);
+    var selectionColumn = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0].column;
+    var selectionRow = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0].row;
+    var matchedCondition = [];
+    if (allCondition) {
+      Object.keys(allCondition).forEach(function (key) {
+        var _a;
+        var conditionFormat = allCondition[key];
+        var range = (_a = conditionFormat.cellrange) === null || _a === void 0 ? void 0 : _a[0];
+        if (!range || !selectionColumn || !selectionRow) return;
+        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);
+    }
+    if (buttonClickCreateRef.current) return;
+    if (matchedCondition.length === 0) {
+      setCreate(true);
+    } else if (matchedCondition.length > 0) {
+      setCreate(false);
+    }
+  }, [context]);
   var dataSelectRange = (0, _react.useCallback)(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -47,15 +107,26 @@ var ConditionRules = function ConditionRules(_a) {
   }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
   var close = (0, _react.useCallback)(function (closeType) {
     if (closeType === "confirm") {
+      buttonClickCreateRef.current = false;
+      setCreate(false);
       setContext(function (ctx) {
         ctx.conditionRules.textColor.color = colorRules.textColor;
         ctx.conditionRules.cellColor.color = colorRules.cellColor;
+        ctx.conditionRules.font = {
+          bold: bold,
+          italic: italic,
+          underline: underline,
+          strikethrough: strikethrough
+        };
         (0, _fortuneCore.setConditionRules)(ctx, protection, generalDialog, conditionformat, ctx.conditionRules);
       });
+    } else {
+      buttonClickCreateRef.current = true;
+      setCreate(false);
     }
     setContext(function (ctx) {
       ctx.conditionRules = {
-        rulesType: "",
+        rulesType: "greaterThan",
         rulesValue: "",
         textColor: {
           check: true,
@@ -65,6 +136,12 @@ var ConditionRules = function ConditionRules(_a) {
           check: true,
           color: "#000000"
         },
+        font: {
+          bold: false,
+          italic: false,
+          underline: false,
+          strikethrough: false
+        },
         betweenValue: {
           value1: "",
           value2: ""
@@ -75,7 +152,7 @@ var ConditionRules = function ConditionRules(_a) {
       };
     });
     hideDialog();
-  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
   (0, _react.useEffect)(function () {
     setContext(function (ctx) {
       ctx.conditionRules.rulesType = type;
@@ -100,6 +177,12 @@ var ConditionRules = function ConditionRules(_a) {
             check: true,
             color: "#000000"
           },
+          font: {
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false
+          },
           betweenValue: {
             value1: "",
             value2: ""
@@ -112,17 +195,185 @@ var ConditionRules = function ConditionRules(_a) {
       ctx.rangeDialog.type = "";
       ctx.rangeDialog.rangeTxt = "";
     });
-  }, []);
-  var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
+  }, [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"
+  }];
   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, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, matchedConditionFormatKey.map(function (key) {
+    var _a, _b;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "group flex items-center border-b border-gray-200 condition-list-parent",
+      key: key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "condition-list-pill",
+      style: {
+        backgroundColor: allConditionFormats[key].format.cellColor || ""
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "condition-list-text",
+      style: {
+        color: allConditionFormats[key].format.textColor || ""
+      }
+    }, "123")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flex flex-col",
+      style: {
+        width: "200px",
+        padding: "8px 0px"
+      }
+    }, /*#__PURE__*/_react.default.createElement("h3", {
+      className: "condition-list-type"
+    }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
+      className: "condition-list-range"
+    }, (_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("div", {
+      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+    }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
+      elevation: 1,
+      icon: "Trash2",
+      size: "md",
+      variant: "secondary",
+      style: {
+        border: "0px",
+        boxShadow: "none",
+        color: "hsl(var(--color-icon-secondary))"
+      },
+      onClick: function onClick() {
+        setContext(function (ctx) {
+          var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
+          var ruleArr = ctx.luckysheetfile[index].luckysheet_conditionformat_save || [];
+          console.log(matchedConditionFormatKey, ruleArr, allConditionFormats);
+          ruleArr.splice(Number(key), 1);
+          ctx.luckysheetfile[index].luckysheet_conditionformat_save = ruleArr;
+          return ctx;
+        });
+      }
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    size: "md",
+    variant: "secondary",
+    onClick: function onClick() {
+      setCreate(true);
+      buttonClickCreateRef.current = true;
+    }
+  }, "Create New Condition Format"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
-  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
+  }, conditionformat.applyRange, " range"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+      name: "Grid2x2",
+      size: "sm",
+      onClick: function onClick() {
+        dataSelectRange("conditionRules".concat(type));
+      }
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    placeholder: conditionformat.selectRange,
+    value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
+    onClick: function onClick() {
+      dataSelectRange("conditionRules".concat(type));
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, "Format cells if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+    value: type,
+    onValueChange: function onValueChange(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])));
+  })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col"
+  }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     value: context.conditionRules.rulesValue,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -135,6 +386,9 @@ var ConditionRules = function ConditionRules(_a) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "From",
     value: context.conditionRules.betweenValue.value1,
     onChange: function onChange(e) {
@@ -146,6 +400,9 @@ var ConditionRules = function ConditionRules(_a) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "To",
     value: context.conditionRules.betweenValue.value2,
     onChange: function onChange(e) {
@@ -197,6 +454,10 @@ var ConditionRules = function ConditionRules(_a) {
       });
     }
   }), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     className: "condition-rules-project-input pr-0",
     type: "number",
     min: 1,
@@ -226,48 +487,124 @@ var ConditionRules = function ConditionRules(_a) {
     }
   })))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
-  }, conditionformat.applyRange), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
-    rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
-      name: "Grid2x2",
-      size: "sm",
-      onClick: function onClick() {
-        dataSelectRange("conditionRules".concat(type));
-      }
-    }),
-    "aria-hidden": "true",
-    readOnly: true,
-    placeholder: conditionformat.selectRange,
-    value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
-    onClick: function onClick() {
-      dataSelectRange("conditionRules".concat(type));
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "condition-rules-set-title text-heading-xsm"
-  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-setbox"
+  }, "Formatting styles"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolbar-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-set"
+    className: "toolbar-header"
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "toolbar-title"
+  }, "Formatting styles preview")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "toolbar-content"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setBold(!bold);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: bold ? "hsl(var(--color-bg-default-selected))" : ""
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "Bold",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setItalic(!italic);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: italic ? "hsl(var(--color-bg-default-selected))" : ""
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "Italic",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setUnderline(!underline);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: underline ? "hsl(var(--color-bg-default-selected))" : ""
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "Underline",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setStrikethrough(!strikethrough);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "Strikethrough",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: function onClick() {
+      var _a;
+      (_a = textColorInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    variant: "ghost",
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    id: "checkTextColor"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
-    className: "border-2",
-    checked: context.conditionRules.textColor.check,
-    onCheckedChange: function onCheckedChange(e) {
-      var checked = e.target.checked;
-      setContext(function (ctx) {
-        ctx.conditionRules.textColor.check = checked;
-      });
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
     }
-  })), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "checkTextColor",
-    className: "condition-rules-label"
-  }, conditionformat.textColor), /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    style: {
+      width: "19px",
+      height: "19px"
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-spell-check2-icon lucide-spell-check-2"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "m5 18 6-12 6 12"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 14h8"
+  })), /*#__PURE__*/_react.default.createElement("input", {
+    ref: textColorInputRef,
+    style: {
+      marginBottom: "4px"
+    },
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.textColor,
@@ -277,25 +614,30 @@ var ConditionRules = function ConditionRules(_a) {
         draft.textColor = value;
       }));
     }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-set"
+  })))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      var _a;
+      (_a = cellColorInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    id: "checkCellColor"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
-    className: "border-2",
-    checked: context.conditionRules.cellColor.check,
-    onCheckedChange: function onCheckedChange(e) {
-      var checked = e.target.checked;
-      setContext(function (ctx) {
-        ctx.conditionRules.cellColor.check = checked;
-      });
+    style: {
+      display: "flex",
+      flexDirection: "column"
     }
-  })), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "checkCellColor",
-    className: "condition-rules-label"
-  }, conditionformat.cellColor), /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "PaintBucket",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    ref: cellColorInputRef,
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.cellColor,
@@ -305,10 +647,11 @@ var ConditionRules = function ConditionRules(_a) {
         draft.cellColor = value;
       }));
     }
-  }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
-    className: "w-full border-t-[1px]"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex gap-2 justify-end"
+  }))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 justify-end",
+    style: {
+      marginTop: "8px"
+    }
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "secondary",
     style: {
@@ -327,6 +670,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, button.apply)));
+  }, "Create rule")))));
 };
 var _default = exports.default = ConditionRules;