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

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

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

package/es/components/ConditionFormat/ConditionRules.js

@@ -1,87 +1,30 @@
-import React, { useRef, useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import "./index.css";
-import { cn } from "@fileverse/ui";
-import { locale, setConditionRules, getSheetIndex } from "@fileverse-dev/fortune-core";
-import { numberToColumn } from "../SheetOverlay/helper";
-import "./formating.css";
+import { locale, setConditionRules } from "@fileverse-dev/fortune-core";
 import produce from "immer";
-import { Button, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
+import { Button, Checkbox, Divider, IconButton, LucideIcon, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TextField } from "@fileverse/ui";
 import WorkbookContext from "../../context";
 import { useDialog } from "../../hooks/useDialog";
 import { getDisplayedRangeTxt } from "../DataVerification/getDisplayedRangeTxt";
 import { injectDatepickerStyles } from "../../utils/datepickerStyles";
 injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_a) {
-  var rulesType = _a.type,
-    context = _a.context;
-  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 _d = useState([]),
-    matchedConditionFormatKey = _d[0],
-    setMatchedConditionFormatKey = _d[1];
-  var _e = useState(null),
-    allConditionFormats = _e[0],
-    setAllConditionFormats = _e[1];
-  var setContext = useContext(WorkbookContext).setContext;
+  var type = _a.type;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext;
   var hideDialog = useDialog().hideDialog;
-  var _f = locale(context),
-    conditionformat = _f.conditionformat,
-    button = _f.button,
-    protection = _f.protection,
-    generalDialog = _f.generalDialog;
-  var _g = useState({
+  var _c = locale(context),
+    conditionformat = _c.conditionformat,
+    button = _c.button,
+    protection = _c.protection,
+    generalDialog = _c.generalDialog;
+  var _d = useState({
       textColor: "#FFFFFF",
       cellColor: "#D82E2A"
     }),
-    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, _c;
-    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) {
-      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 = useCallback(function (selectType) {
     hideDialog();
     setContext(function (ctx) {
@@ -95,26 +38,15 @@ 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: "greaterThan",
+        rulesType: "",
         rulesValue: "",
         textColor: {
           check: true,
@@ -124,12 +56,6 @@ var ConditionRules = function ConditionRules(_a) {
           check: true,
           color: "#000000"
         },
-        font: {
-          bold: false,
-          italic: false,
-          underline: false,
-          strikethrough: false
-        },
         betweenValue: {
           value1: "",
           value2: ""
@@ -140,7 +66,7 @@ var ConditionRules = function ConditionRules(_a) {
       };
     });
     hideDialog();
-  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext, bold, italic, underline, strikethrough]);
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
   useEffect(function () {
     setContext(function (ctx) {
       ctx.conditionRules.rulesType = type;
@@ -165,12 +91,6 @@ var ConditionRules = function ConditionRules(_a) {
             check: true,
             color: "#000000"
           },
-          font: {
-            bold: false,
-            italic: false,
-            underline: false,
-            strikethrough: false
-          },
           betweenValue: {
             value1: "",
             value2: ""
@@ -183,186 +103,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.createElement("div", {
     className: "condition-rules"
-  }, !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", {
+  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
     className: "condition-rules-value text-heading-xsm"
-  }, 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", {
+  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (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;
@@ -375,9 +126,6 @@ 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) {
@@ -389,9 +137,6 @@ 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) {
@@ -443,10 +188,6 @@ 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,
@@ -477,116 +218,47 @@ var ConditionRules = function ConditionRules(_a) {
   })))))), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-set-title text-heading-xsm"
-  }, "Formatting styles"), /*#__PURE__*/React.createElement("div", {
-    className: "toolbar-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    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
-    }
-  }, /*#__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
-    }
-  }, /*#__PURE__*/React.createElement(LucideIcon, {
-    name: "Underline",
-    style: {
-      width: '16px',
-      height: '16px'
-    }
-  })), /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost",
+    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() {
-      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, {
-    variant: "ghost",
-    className: cn("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
-    style: {
-      width: 30,
-      height: 30
+      dataSelectRange("conditionRules".concat(type));
     }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
+    className: "condition-rules-set-title text-heading-xsm"
+  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-setbox"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-set"
+  }, /*#__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;
+      });
     }
-  }, /*#__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",
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "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", {
-    style: {
-      marginBottom: "4px"
-    },
+  })), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "checkTextColor",
+    className: "condition-rules-label"
+  }, conditionformat.textColor), /*#__PURE__*/React.createElement("input", {
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.textColor,
@@ -596,25 +268,25 @@ var ConditionRules = function ConditionRules(_a) {
         draft.textColor = value;
       }));
     }
-  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    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-set"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React.createElement(LucideIcon, {
-    name: "PaintBucket",
-    style: {
-      width: '16px',
-      height: '16px'
+    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;
+      });
     }
-  }), /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "checkCellColor",
+    className: "condition-rules-label"
+  }, conditionformat.cellColor), /*#__PURE__*/React.createElement("input", {
     type: "color",
     className: "condition-rules-select-color",
     value: colorRules.cellColor,
@@ -624,11 +296,10 @@ var ConditionRules = function ConditionRules(_a) {
         draft.cellColor = value;
       }));
     }
-  }))))))), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 justify-end",
-    style: {
-      marginTop: "8px"
-    }
+  }))))), /*#__PURE__*/React.createElement(Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 justify-end"
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
     style: {
@@ -647,6 +318,6 @@ var ConditionRules = function ConditionRules(_a) {
       close("confirm");
     },
     tabIndex: 0
-  }, "Create rule")))));
+  }, button.apply)));
 };
 export default ConditionRules;