@fileverse-dev/fortune-react 1.2.68 → 1.2.69

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

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

package/es/components/ConditionFormat/ConditionRules.js

@@ -1,30 +1,90 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useRef, useCallback, useContext, useEffect, useState } from "react";
 import "./index.css";
-import { locale, setConditionRules } from "@fileverse-dev/fortune-core";
+import { cn, Button, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
+import { locale, setConditionRules, getSheetIndex } from "@fileverse-dev/fortune-core";
 import produce from "immer";
-import { Button, Checkbox, Divider, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
+import { numberToColumn } from "../SheetOverlay/helper";
 import WorkbookContext from "../../context";
 import { useDialog } from "../../hooks/useDialog";
 import { getDisplayedRangeTxt } from "../DataVerification/getDisplayedRangeTxt";
 import { injectDatepickerStyles } from "../../utils/datepickerStyles";
+import "./formating.css";
 injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_a) {
-  var type = _a.type;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    setContext = _b.setContext;
+  var rulesType = _a.type,
+    context = _a.context;
+  console.log("rulesType", rulesType);
+  var _b = useState("greaterThan"),
+    type = _b[0],
+    setType = _b[1];
+  var _c = useState(false),
+    create = _c[0],
+    setCreate = _c[1];
+  var buttonClickCreateRef = useRef(false);
+  var textColorInputRef = useRef(null);
+  var cellColorInputRef = useRef(null);
+  var _d = useState([]),
+    matchedConditionFormatKey = _d[0],
+    setMatchedConditionFormatKey = _d[1];
+  var _e = useState(null),
+    allConditionFormats = _e[0],
+    setAllConditionFormats = _e[1];
+  var setContext = useContext(WorkbookContext).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 _f = locale(context),
+    conditionformat = _f.conditionformat,
+    button = _f.button,
+    protection = _f.protection,
+    generalDialog = _f.generalDialog;
+  var _g = useState({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    colorRules = _d[0],
-    setColorRules = _d[1];
+    colorRules = _g[0],
+    setColorRules = _g[1];
+  var _h = useState(false),
+    bold = _h[0],
+    setBold = _h[1];
+  var _j = useState(false),
+    italic = _j[0],
+    setItalic = _j[1];
+  var _k = useState(false),
+    underline = _k[0],
+    setUnderline = _k[1];
+  var _l = useState(false),
+    strikethrough = _l[0],
+    setStrikethrough = _l[1];
+  useEffect(function () {
+    var _a, _b;
+    var index = 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 = useCallback(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -38,15 +98,26 @@ var ConditionRules = function ConditionRules(_a) {
   }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
   var close = 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
+        };
         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,
@@ -56,6 +127,12 @@ var ConditionRules = function ConditionRules(_a) {
           check: true,
           color: "#000000"
         },
+        font: {
+          bold: false,
+          italic: false,
+          underline: false,
+          strikethrough: false
+        },
         betweenValue: {
           value1: "",
           value2: ""
@@ -66,7 +143,7 @@ var ConditionRules = function ConditionRules(_a) {
       };
     });
     hideDialog();
-  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
   useEffect(function () {
     setContext(function (ctx) {
       ctx.conditionRules.rulesType = type;
@@ -91,6 +168,12 @@ var ConditionRules = function ConditionRules(_a) {
             check: true,
             color: "#000000"
           },
+          font: {
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false
+          },
           betweenValue: {
             value1: "",
             value2: ""
@@ -103,17 +186,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.createElement("div", {
     className: "condition-rules"
-  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+  }, !create ? (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, matchedConditionFormatKey.map(function (key) {
+    var _a, _b;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "group flex items-center border-b border-gray-200 condition-list-parent",
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "condition-list-pill",
+      style: {
+        backgroundColor: allConditionFormats[key].format.cellColor || ""
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "condition-list-text",
+      style: {
+        color: allConditionFormats[key].format.textColor || ""
+      }
+    }, "123")), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col",
+      style: {
+        width: "200px",
+        padding: "8px 0px"
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "condition-list-type"
+    }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/React.createElement("p", {
+      className: "condition-list-range"
+    }, (_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("div", {
+      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+    }, /*#__PURE__*/React.createElement(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 = 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.createElement(Button, {
+    size: "md",
+    variant: "secondary",
+    onClick: function onClick() {
+      setCreate(true);
+      buttonClickCreateRef.current = true;
+    }
+  }, "Create New Condition Format"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.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.createElement("div", {
+  }, conditionformat.applyRange, " range"), /*#__PURE__*/React.createElement(TextField, {
+    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
+      name: "Grid2x2",
+      size: "sm",
+      onClick: function onClick() {
+        dataSelectRange("conditionRules".concat(type));
+      }
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    placeholder: conditionformat.selectRange,
+    value: getDisplayedRangeTxt(context),
+    onClick: function onClick() {
+      dataSelectRange("conditionRules".concat(type));
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, "Format cells if"), /*#__PURE__*/React.createElement(Select, {
+    value: type,
+    onValueChange: function onValueChange(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])));
+  })))), !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, (type === "greaterThan" || type === "greaterThanOrEqual" || type === "lessThan" || type === "lessThanOrEqual" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     value: context.conditionRules.rulesValue,
     onChange: function onChange(e) {
       var value = e.target.value;
@@ -126,6 +377,9 @@ var ConditionRules = function ConditionRules(_a) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "From",
     value: context.conditionRules.betweenValue.value1,
     onChange: function onChange(e) {
@@ -137,6 +391,9 @@ var ConditionRules = function ConditionRules(_a) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     placeholder: "To",
     value: context.conditionRules.betweenValue.value2,
     onChange: function onChange(e) {
@@ -188,6 +445,10 @@ var ConditionRules = function ConditionRules(_a) {
       });
     }
   }), /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "Value",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
     className: "condition-rules-project-input pr-0",
     type: "number",
     min: 1,
@@ -217,48 +478,124 @@ var ConditionRules = function ConditionRules(_a) {
     }
   })))))), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
-  }, conditionformat.applyRange), /*#__PURE__*/React.createElement(TextField, {
-    rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
-      name: "Grid2x2",
-      size: "sm",
-      onClick: function onClick() {
-        dataSelectRange("conditionRules".concat(type));
-      }
-    }),
-    "aria-hidden": "true",
-    readOnly: true,
-    placeholder: conditionformat.selectRange,
-    value: getDisplayedRangeTxt(context),
-    onClick: function onClick() {
-      dataSelectRange("conditionRules".concat(type));
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-set-title text-heading-xsm"
-  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-setbox"
+  }, "Formatting styles"), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set"
+    className: "toolbar-header"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "toolbar-title"
+  }, "Formatting styles preview")), /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-content"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setBold(!bold);
+    },
+    className: 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.createElement(LucideIcon, {
+    name: "Bold",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setItalic(!italic);
+    },
+    className: 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.createElement(LucideIcon, {
+    name: "Italic",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setUnderline(!underline);
+    },
+    className: 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.createElement(LucideIcon, {
+    name: "Underline",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setStrikethrough(!strikethrough);
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Strikethrough",
+    style: {
+      width: "16px",
+      height: "16px"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      var _a;
+      (_a = textColorInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    variant: "ghost",
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "checkTextColor"
-  }, /*#__PURE__*/React.createElement(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.createElement("label", {
-    htmlFor: "checkTextColor",
-    className: "condition-rules-label"
-  }, conditionformat.textColor), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.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.createElement("path", {
+    d: "m5 18 6-12 6 12"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 14h8"
+  })), /*#__PURE__*/React.createElement("input", {
+    ref: textColorInputRef,
+    style: {
+      marginBottom: "4px"
+    },
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.textColor,
@@ -268,25 +605,30 @@ var ConditionRules = function ConditionRules(_a) {
         draft.textColor = value;
       }));
     }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set"
+  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      var _a;
+      (_a = cellColorInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-color"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "checkCellColor"
-  }, /*#__PURE__*/React.createElement(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.createElement(LucideIcon, {
+    name: "PaintBucket",
+    style: {
+      width: "16px",
+      height: "16px"
     }
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "checkCellColor",
-    className: "condition-rules-label"
-  }, conditionformat.cellColor), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/React.createElement("input", {
+    ref: cellColorInputRef,
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.cellColor,
@@ -296,10 +638,11 @@ var ConditionRules = function ConditionRules(_a) {
         draft.cellColor = value;
       }));
     }
-  }))))), /*#__PURE__*/React.createElement(Divider, {
-    className: "w-full border-t-[1px]"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 justify-end"
+  }))))))), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end",
+    style: {
+      marginTop: "8px"
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
     style: {
@@ -318,6 +661,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, button.apply)));
+  }, "Create rule")))));
 };
 export default ConditionRules;