@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/ChangeColor/index.css

@@ -0,0 +1,76 @@
+#fortune-change-color {
+  min-width: 164px;
+  background: hsl(var(--color-bg-default));
+  position: absolute;
+  top: -100px;
+  left: 232px;
+  border-radius: 6px;
+  padding: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid hsl(var(--color-border-default));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#fortune-change-color .color-reset {
+  position: relative;
+  color: hsl(var(--color-text-default));
+  cursor: pointer;
+  list-style: none;
+  padding: 4px 8px;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding-right: 24px;
+  user-select: none;
+  border-radius: 4px;
+  background: hsl(var(--color-bg-default));
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+#fortune-change-color .color-reset:hover {
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
+}
+
+#fortune-change-color .custom-color {
+  position: relative;
+  margin: auto;
+  padding: 10px;
+  border-radius: 6px;
+  background: white;
+  display: flex;
+  align-items: center;
+  margin: 1px 0px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.button-basic {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  user-select: none;
+}
+
+.button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: -4px;
+}

package/{dist/packages/react/src → es}/components/ChangeColor/index.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import "./index.css";
-type Props = {
-    triggerParentUpdate: (state: boolean) => void;
-};
-export declare const ChangeColor: React.FC<Props>;
-export {};
+import React from "react";
+import "./index.css";
+type Props = {
+    triggerParentUpdate: (state: boolean) => void;
+};
+export declare const ChangeColor: React.FC<Props>;
+export {};

package/es/components/ChangeColor/index.js

@@ -0,0 +1,41 @@
+import { getSheetIndex } from "@fileverse-dev/fortune-core";
+import React, { useContext, useEffect, useState } from "react";
+import WorkbookContext from "../../context";
+import ColorPicker from "../Toolbar/ColorPicker";
+import "./index.css";
+import SVGIcon from "../SVGIcon";
+export var ChangeColor = function ChangeColor(_a) {
+  var triggerParentUpdate = _a.triggerParentUpdate;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext;
+  var _c = useState(context.luckysheetfile[getSheetIndex(context, context.currentSheetId)].color),
+    selectColor = _c[0],
+    setSelectColor = _c[1];
+  useEffect(function () {
+    setContext(function (ctx) {
+      if (ctx.allowEdit === false) return;
+      var index = getSheetIndex(ctx, ctx.currentSheetId);
+      ctx.luckysheetfile[index].color = selectColor;
+    });
+  }, [selectColor, setContext]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "fortune-change-color"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-reset",
+    onClick: function onClick() {
+      return setSelectColor(undefined);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React.createElement(ColorPicker, {
+    onPick: function onPick(color) {
+      triggerParentUpdate(true);
+      setSelectColor(color);
+      triggerParentUpdate(false);
+    }
+  }));
+};

package/{dist/packages/react/src → es}/components/ConditionFormat/ConditionRules.d.ts

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

package/es/components/ConditionFormat/ConditionRules.js

@@ -0,0 +1,323 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import "./index.css";
+import { locale, setConditionRules } 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 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 type = _a.type;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext;
+  var hideDialog = useDialog().hideDialog;
+  var _c = locale(context),
+    conditionformat = _c.conditionformat,
+    button = _c.button,
+    protection = _c.protection,
+    generalDialog = _c.generalDialog;
+  var _d = useState({
+      textColor: "#FFFFFF",
+      cellColor: "#D82E2A"
+    }),
+    colorRules = _d[0],
+    setColorRules = _d[1];
+  var dataSelectRange = useCallback(function (selectType) {
+    hideDialog();
+    setContext(function (ctx) {
+      ctx.conditionRules.textColor.color = colorRules.textColor;
+      ctx.conditionRules.cellColor.color = colorRules.cellColor;
+      ctx.rangeDialog.show = true;
+      ctx.rangeDialog.type = selectType;
+      ctx.rangeDialog.rangeTxt = ctx.conditionRules.rulesValue;
+      ctx.rangeDialog.singleSelect = false;
+    });
+  }, [colorRules.cellColor, colorRules.textColor, hideDialog, setContext]);
+  var close = useCallback(function (closeType) {
+    if (closeType === "confirm") {
+      setContext(function (ctx) {
+        ctx.conditionRules.textColor.color = colorRules.textColor;
+        ctx.conditionRules.cellColor.color = colorRules.cellColor;
+        setConditionRules(ctx, protection, generalDialog, conditionformat, ctx.conditionRules);
+      });
+    }
+    setContext(function (ctx) {
+      ctx.conditionRules = {
+        rulesType: "",
+        rulesValue: "",
+        textColor: {
+          check: true,
+          color: "#000000"
+        },
+        cellColor: {
+          check: true,
+          color: "#000000"
+        },
+        betweenValue: {
+          value1: "",
+          value2: ""
+        },
+        dateValue: "",
+        repeatValue: "0",
+        projectValue: "10"
+      };
+    });
+    hideDialog();
+  }, [colorRules, conditionformat, generalDialog, hideDialog, protection, setContext]);
+  useEffect(function () {
+    setContext(function (ctx) {
+      ctx.conditionRules.rulesType = type;
+      if (!ctx.rangeDialog) return;
+      var rangeDialogType = ctx.rangeDialog.type;
+      var rangeT = ctx.rangeDialog.rangeTxt;
+      if (rangeDialogType === "conditionRulesbetween1") {
+        ctx.conditionRules.betweenValue.value1 = rangeT;
+      } else if (rangeDialogType === "conditionRulesbetween2") {
+        ctx.conditionRules.betweenValue.value2 = rangeT;
+      } else if (rangeDialogType.indexOf("conditionRules") >= 0) {
+        ctx.conditionRules.rulesValue = rangeT;
+      } else if (rangeDialogType === "") {
+        ctx.conditionRules = {
+          rulesType: type,
+          rulesValue: "",
+          textColor: {
+            check: true,
+            color: "#000000"
+          },
+          cellColor: {
+            check: true,
+            color: "#000000"
+          },
+          betweenValue: {
+            value1: "",
+            value2: ""
+          },
+          dateValue: "",
+          repeatValue: "0",
+          projectValue: "10"
+        };
+      }
+      ctx.rangeDialog.type = "";
+      ctx.rangeDialog.rangeTxt = "";
+    });
+  }, []);
+  var titleType = type === "top10_percent" ? "top10" : type === "last10_percent" ? "last10" : type;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules"
+  }, !["aboveAverage", "belowAverage"].includes(type) && (/*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, conditionformat["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "lessThan" || type === "equal" || type === "textContains") && (/*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    value: context.conditionRules.rulesValue,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.conditionRules.rulesValue = value;
+      });
+    }
+  }))), type === "between" && (/*#__PURE__*/React.createElement("div", {
+    className: "w-full flex gap-2 items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "From",
+    value: context.conditionRules.betweenValue.value1,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.conditionRules.betweenValue.value1 = value;
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: "To",
+    value: context.conditionRules.betweenValue.value2,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.conditionRules.betweenValue.value2 = value;
+      });
+    }
+  })))), type === "occurrenceDate" && (/*#__PURE__*/React.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "date",
+    className: "datepicker-input",
+    value: context.conditionRules.dateValue,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.conditionRules.dateValue = value;
+      });
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))), type === "duplicateValue" && (/*#__PURE__*/React.createElement(Select, {
+    value: context.conditionRules.repeatValue,
+    onValueChange: function onValueChange(value) {
+      setContext(function (ctx) {
+        ctx.conditionRules.repeatValue = value;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, null, /*#__PURE__*/React.createElement(SelectValue, null)), /*#__PURE__*/React.createElement(SelectContent, {
+    className: "condition-rules-select"
+  }, /*#__PURE__*/React.createElement(SelectItem, {
+    value: "0"
+  }, conditionformat.duplicateValue), /*#__PURE__*/React.createElement(SelectItem, {
+    value: "1"
+  }, conditionformat.uniqueValue)))), (type === "top10" || type === "top10_percent" || type === "last10" || type === "last10_percent") && (/*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-project-box"
+  }, type === "top10" || type === "top10_percent" ? conditionformat.top : conditionformat.last, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Minus",
+    variant: "ghost",
+    className: "!bg-transparent",
+    disabled: Number(context.conditionRules.projectValue) <= 1,
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        var current = Number(ctx.conditionRules.projectValue) || 0;
+        ctx.conditionRules.projectValue = String(Math.max(current - 1, 1));
+      });
+    }
+  }), /*#__PURE__*/React.createElement(TextField, {
+    className: "condition-rules-project-input pr-0",
+    type: "number",
+    min: 1,
+    max: type === "top10" || type === "last10" ? 10 : 100,
+    value: context.conditionRules.projectValue,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setContext(function (ctx) {
+        ctx.conditionRules.projectValue = value;
+      });
+    },
+    rightIcon: type === "top10" || type === "last10" ? (/*#__PURE__*/React.createElement("span", {
+      className: "color-icon-secondary"
+    }, conditionformat.oneself)) : (/*#__PURE__*/React.createElement("span", {
+      className: "color-icon-secondary"
+    }, "%"))
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Plus",
+    variant: "ghost",
+    className: "!bg-transparent",
+    disabled: Number(context.conditionRules.projectValue) >= (type === "top10" || type === "last10" ? 10 : 100),
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        var current = Number(ctx.conditionRules.projectValue) || 0;
+        ctx.conditionRules.projectValue = String(current + 1);
+      });
+    }
+  })))))), /*#__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"
+  }, /*#__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("label", {
+    htmlFor: "checkTextColor",
+    className: "condition-rules-label"
+  }, conditionformat.textColor), /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    className: "condition-rules-select-color",
+    value: colorRules.textColor,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setColorRules(produce(function (draft) {
+        draft.textColor = value;
+      }));
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "condition-rules-set"
+  }, /*#__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;
+      });
+    }
+  })), /*#__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,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setColorRules(produce(function (draft) {
+        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(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      close("close");
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      close("confirm");
+    },
+    tabIndex: 0
+  }, button.apply)));
+};
+export default ConditionRules;

package/es/components/ConditionFormat/index.css

@@ -0,0 +1,210 @@
+.condition-format-sub-menu {
+  position: absolute;
+  top: -12px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  background: #fff;
+  border: 1px solid hsl(var(--color-border-default));
+  border-radius: 8px;
+  cursor: default;
+  font-size: 14px;
+  z-index: 1004;
+  box-sizing: border-box;
+  user-select: none;
+  outline: none;
+  padding: 8px;
+  min-width: 190px;
+}
+
+.condition-format-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  z-index: 1005;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.condition-format-item:hover {
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
+}
+
+.condition-format-item span {
+  font-size: 14px;
+  color: hsl(var(--color-text-secondary));
+  font-weight: 400;
+}
+
+.horizontal-line {
+  border-top: 1px solid #ebebeb;
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+.condition-rules .button-basic {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  user-select: none;
+  margin-top: 10px;
+}
+
+.condition-rules .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.condition-rules .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+
+.condition-rules {
+  /* padding: 0px 42px 34px 42px; */
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.condition-rules-title {
+  color: #000;
+  cursor: default;
+  font-size: 16px;
+  margin-bottom: 18px;
+}
+
+.condition-rules-value {
+  margin-bottom: 4px;
+}
+
+.condition-rules-inpbox {
+  width: 198px;
+  height: 28px;
+  border: 1px solid #d4d4d4;
+}
+
+.condition-rules-input {
+  width: 150px;
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  outline-style: none;
+  float: left;
+}
+
+.condition-relues-inputicon {
+  float: right;
+  margin-top: 2px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.condition-rules-set-title {
+  margin: 6px 0px;
+}
+
+.condition-rules-setbox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.condition-rules-set {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.condition-rules-color {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.condition-rules-check {
+  /* float: left; */
+  /* margin-top: 10px; */
+}
+
+.condition-rules-label {
+  display: inline-block;
+  width: 70px;
+  user-select: none;
+}
+
+.condition-rules-select-color {
+  background: hsl(var(--color-bg-default));
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.condition-rules-between-box {
+  display: flex;
+  align-items: center;
+}
+
+.condition-rules-between-inpbox {
+  width: 108px;
+  height: 28px;
+  border: 1px solid #d4d4d4;
+}
+
+.condition-rules-between-input {
+  width: 60px;
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  outline-style: none;
+  float: left;
+}
+
+.condition-rules-date {
+  width: 100%;
+}
+
+.condition-rules-select {
+  width: 100%;
+  z-index: 999999;
+}
+
+.condition-rules-project-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.condition-rules-project-input {
+  margin: 0px;
+  width: fit-content;
+  max-width: 55px !important;
+}
+
+/* Hide arrows for Chrome, Safari, Edge */
+input[type="number"].condition-rules-project-input::-webkit-outer-spin-button,
+input[type="number"].condition-rules-project-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Hide arrows for Firefox */
+input[type="number"].condition-rules-project-input {
+  -moz-appearance: textfield;
+}

package/{dist/packages/react/src → es}/components/ConditionFormat/index.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import "./index.css";
-declare const ConditionalFormat: React.FC<{
-    items: string[];
-    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-}>;
-export default ConditionalFormat;
+import React from "react";
+import "./index.css";
+declare const ConditionalFormat: React.FC<{
+    items: string[];
+    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export default ConditionalFormat;