@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/ChangeColor/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangeColor = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _ColorPicker = _interopRequireDefault(require("../Toolbar/ColorPicker"));
+require("./index.css");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+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); }
+var ChangeColor = exports.ChangeColor = function ChangeColor(_a) {
+  var triggerParentUpdate = _a.triggerParentUpdate;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext;
+  var _c = (0, _react.useState)(context.luckysheetfile[(0, _fortuneCore.getSheetIndex)(context, context.currentSheetId)].color),
+    selectColor = _c[0],
+    setSelectColor = _c[1];
+  (0, _react.useEffect)(function () {
+    setContext(function (ctx) {
+      if (ctx.allowEdit === false) return;
+      var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
+      ctx.luckysheetfile[index].color = selectColor;
+    });
+  }, [selectColor, setContext]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-change-color"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "color-reset",
+    onClick: function onClick() {
+      return setSelectColor(undefined);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
+    onPick: function onPick(color) {
+      triggerParentUpdate(true);
+      setSelectColor(color);
+      triggerParentUpdate(false);
+    }
+  }));
+};

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

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

package/lib/components/ConditionFormat/ConditionRules.js

@@ -0,0 +1,332 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+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");
+var _datepickerStyles = require("../../utils/datepickerStyles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+(0, _datepickerStyles.injectDatepickerStyles)();
+var ConditionRules = function ConditionRules(_a) {
+  var type = _a.type;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext;
+  var hideDialog = (0, _useDialog.useDialog)().hideDialog;
+  var _c = (0, _fortuneCore.locale)(context),
+    conditionformat = _c.conditionformat,
+    button = _c.button,
+    protection = _c.protection,
+    generalDialog = _c.generalDialog;
+  var _d = (0, _react.useState)({
+      textColor: "#FFFFFF",
+      cellColor: "#D82E2A"
+    }),
+    colorRules = _d[0],
+    setColorRules = _d[1];
+  var dataSelectRange = (0, _react.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 = (0, _react.useCallback)(function (closeType) {
+    if (closeType === "confirm") {
+      setContext(function (ctx) {
+        ctx.conditionRules.textColor.color = colorRules.textColor;
+        ctx.conditionRules.cellColor.color = colorRules.cellColor;
+        (0, _fortuneCore.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]);
+  (0, _react.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.default.createElement("div", {
+    className: "condition-rules"
+  }, !["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["conditionformat_".concat(titleType, "_title")]), (type === "greaterThan" || type === "lessThan" || type === "equal" || type === "textContains") && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement("div", {
+    className: "w-full flex gap-2 items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement("div", {
+    className: "datepicker-toggle"
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", {
+    className: "datepicker-toggle-button"
+  }))), type === "duplicateValue" && (/*#__PURE__*/_react.default.createElement(_ui.Select, {
+    value: context.conditionRules.repeatValue,
+    onValueChange: function onValueChange(value) {
+      setContext(function (ctx) {
+        ctx.conditionRules.repeatValue = value;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null)), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, {
+    className: "condition-rules-select"
+  }, /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+    value: "0"
+  }, conditionformat.duplicateValue), /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
+    value: "1"
+  }, conditionformat.uniqueValue)))), (type === "top10" || type === "top10_percent" || type === "last10" || type === "last10_percent") && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-project-box"
+  }, type === "top10" || type === "top10_percent" ? conditionformat.top : conditionformat.last, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement(_ui.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.default.createElement("span", {
+      className: "color-icon-secondary"
+    }, conditionformat.oneself)) : (/*#__PURE__*/_react.default.createElement("span", {
+      className: "color-icon-secondary"
+    }, "%"))
+  }), /*#__PURE__*/_react.default.createElement(_ui.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.default.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-value text-heading-xsm"
+  }, conditionformat.applyRange), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+      name: "Grid2x2",
+      size: "sm",
+      onClick: function onClick() {
+        dataSelectRange("conditionRules".concat(type));
+      }
+    }),
+    "aria-hidden": "true",
+    readOnly: true,
+    placeholder: conditionformat.selectRange,
+    value: (0, _getDisplayedRangeTxt.getDisplayedRangeTxt)(context),
+    onClick: function onClick() {
+      dataSelectRange("conditionRules".concat(type));
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-set-title text-heading-xsm"
+  }, "".concat(conditionformat.setAs, "\uFF1A")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-setbox"
+  }, /*#__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("label", {
+    htmlFor: "checkTextColor",
+    className: "condition-rules-label"
+  }, conditionformat.textColor), /*#__PURE__*/_react.default.createElement("input", {
+    type: "color",
+    className: "condition-rules-select-color",
+    value: colorRules.textColor,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setColorRules((0, _immer.default)(function (draft) {
+        draft.textColor = value;
+      }));
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-set"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "condition-rules-color"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "checkCellColor"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
+    className: "border-2",
+    checked: context.conditionRules.cellColor.check,
+    onCheckedChange: function onCheckedChange(e) {
+      var checked = e.target.checked;
+      setContext(function (ctx) {
+        ctx.conditionRules.cellColor.check = checked;
+      });
+    }
+  })), /*#__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,
+    onChange: function onChange(e) {
+      var value = e.target.value;
+      setColorRules((0, _immer.default)(function (draft) {
+        draft.cellColor = value;
+      }));
+    }
+  }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    className: "w-full border-t-[1px]"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 justify-end"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      close("close");
+    },
+    tabIndex: 0
+  }, button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      close("confirm");
+    },
+    tabIndex: 0
+  }, button.apply)));
+};
+var _default = exports.default = ConditionRules;

package/lib/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/lib/components/ConditionFormat/index.d.ts

@@ -0,0 +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;