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

package/lib/components/ConditionFormat/ConditionRules.js

@@ -7,11 +7,9 @@ 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 _helper = require("../SheetOverlay/helper");
-require("./formating.css");
 var _immer = _interopRequireDefault(require("immer"));
+var _ui = require("@fileverse/ui");
 var _context = _interopRequireDefault(require("../../context"));
 var _useDialog = require("../../hooks/useDialog");
 var _getDisplayedRangeTxt = require("../DataVerification/getDisplayedRangeTxt");
@@ -20,76 +18,22 @@ 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 rulesType = _a.type,
-    context = _a.context;
-  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 _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 type = _a.type;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext;
   var hideDialog = (0, _useDialog.useDialog)().hideDialog;
-  var _f = (0, _fortuneCore.locale)(context),
-    conditionformat = _f.conditionformat,
-    button = _f.button,
-    protection = _f.protection,
-    generalDialog = _f.generalDialog;
-  var _g = (0, _react.useState)({
+  var _c = (0, _fortuneCore.locale)(context),
+    conditionformat = _c.conditionformat,
+    button = _c.button,
+    protection = _c.protection,
+    generalDialog = _c.generalDialog;
+  var _d = (0, _react.useState)({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    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, _c;
-    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) {
-      for (var key in allCondition) {
-        var conditionFormat = allCondition[key];
-        var range = (_c = conditionFormat.cellrange) === null || _c === void 0 ? void 0 : _c[0];
-        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);
-    }
-    if (buttonClickCreateRef.current) return;
-    if (matchedCondition.length === 0) {
-      setCreate(true);
-    } else if (matchedCondition.length > 0) {
-      setCreate(false);
-    }
-  }, [context]);
+    colorRules = _d[0],
+    setColorRules = _d[1];
   var dataSelectRange = (0, _react.useCallback)(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -103,26 +47,15 @@ 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: "greaterThan",
+        rulesType: "",
         rulesValue: "",
         textColor: {
           check: true,
@@ -132,12 +65,6 @@ var ConditionRules = function ConditionRules(_a) {
           check: true,
           color: "#000000"
         },
-        font: {
-          bold: false,
-          italic: false,
-          underline: false,
-          strikethrough: false
-        },
         betweenValue: {
           value1: "",
           value2: ""
@@ -148,7 +75,7 @@ var ConditionRules = function ConditionRules(_a) {
       };
     });
     hideDialog();
-  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
   (0, _react.useEffect)(function () {
     setContext(function (ctx) {
       ctx.conditionRules.rulesType = type;
@@ -173,12 +100,6 @@ var ConditionRules = function ConditionRules(_a) {
             check: true,
             color: "#000000"
           },
-          font: {
-            bold: false,
-            italic: false,
-            underline: false,
-            strikethrough: false
-          },
           betweenValue: {
             value1: "",
             value2: ""
@@ -191,186 +112,17 @@ 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"
-  }, !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", {
+  }, !["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"
-  }, 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", {
+  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (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;
@@ -383,9 +135,6 @@ 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) {
@@ -397,9 +146,6 @@ 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) {
@@ -451,10 +197,6 @@ 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,
@@ -485,116 +227,47 @@ var ConditionRules = function ConditionRules(_a) {
   })))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-set-title text-heading-xsm"
-  }, "Formatting styles"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "toolbar-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    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
-    }
-  }, /*#__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
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
-    name: "Underline",
-    style: {
-      width: '16px',
-      height: '16px'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    variant: "ghost",
+    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() {
-      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, {
-    variant: "ghost",
-    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
-    style: {
-      width: 30,
-      height: 30
+      dataSelectRange("conditionRules".concat(type));
     }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
+    className: "condition-rules-set-title text-heading-xsm"
+  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-setbox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-set"
+  }, /*#__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;
+      });
     }
-  }, /*#__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",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "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", {
-    style: {
-      marginBottom: "4px"
-    },
+  })), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "checkTextColor",
+    className: "condition-rules-label"
+  }, conditionformat.textColor), /*#__PURE__*/_react.default.createElement("input", {
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.textColor,
@@ -604,25 +277,25 @@ var ConditionRules = function ConditionRules(_a) {
         draft.textColor = value;
       }));
     }
-  })))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    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-set"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
-    name: "PaintBucket",
-    style: {
-      width: '16px',
-      height: '16px'
+    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;
+      });
     }
-  }), /*#__PURE__*/_react.default.createElement("input", {
+  })), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "checkCellColor",
+    className: "condition-rules-label"
+  }, conditionformat.cellColor), /*#__PURE__*/_react.default.createElement("input", {
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.cellColor,
@@ -632,11 +305,10 @@ var ConditionRules = function ConditionRules(_a) {
         draft.cellColor = value;
       }));
     }
-  }))))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex gap-2 justify-end",
-    style: {
-      marginTop: "8px"
-    }
+  }))))), /*#__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(_ui.Button, {
     variant: "secondary",
     style: {
@@ -655,6 +327,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, "Create rule")))));
+  }, button.apply)));
 };
 var _default = exports.default = ConditionRules;

package/lib/components/ConditionFormat/index.css

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