@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/DataVerification/RangeDialog.js

@@ -0,0 +1,105 @@
+import { locale } from "@fileverse-dev/fortune-core";
+import { Button, cn, IconButton, TextField } from "@fileverse/ui";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import DataVerification from ".";
+import WorkbookContext from "../../context";
+import { useDialog } from "../../hooks/useDialog";
+import ConditionRules from "../ConditionFormat/ConditionRules";
+import "./index.css";
+import { getDisplayedRangeTxt } from "./getDisplayedRangeTxt";
+var RangeDialog = function RangeDialog() {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext;
+  var showDialog = useDialog().showDialog;
+  var _b = locale(context),
+    dataVerification = _b.dataVerification,
+    button = _b.button,
+    toolbar = _b.toolbar;
+  var _c = useState(getDisplayedRangeTxt(context)),
+    rangeTxt2 = _c[0],
+    setRangeTxt2 = _c[1];
+  var close = useCallback(function () {
+    setContext(function (ctx) {
+      ctx.rangeDialog.show = false;
+      ctx.rangeDialog.singleSelect = false;
+    });
+    if (!context.rangeDialog) return;
+    var rangeDialogType = context.rangeDialog.type;
+    if (rangeDialogType.indexOf("between") >= 0) {
+      showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
+        type: "between"
+      }), undefined, locale(context).conditionformat.conditionformat_between);
+      return;
+    }
+    if (rangeDialogType.indexOf("conditionRules") >= 0) {
+      var rulesType = rangeDialogType.substring("conditionRules".length, rangeDialogType.length);
+      showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
+        type: rulesType
+      }), undefined, locale(context).conditionformat["conditionformat_".concat(rulesType)]);
+      return;
+    }
+    showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
+  }, [setContext, showDialog, context]);
+  useEffect(function () {
+    setRangeTxt2(getDisplayedRangeTxt(context));
+  }, [context, context.luckysheet_select_save]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "range-dialog",
+    className: "fortune-dialog",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onChange: function onChange(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn("flex items-center justify-between border-b color-border-default py-3 px-6")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-heading-sm"
+  }, dataVerification.selectCellRange), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "X",
+    variant: "ghost",
+    onClick: close,
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 pt-4 text-body-sm"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    className: "w-full",
+    readOnly: true,
+    placeholder: dataVerification.selectCellRange2,
+    value: rangeTxt2
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: close,
+    tabIndex: 0
+  }, button.close), /*#__PURE__*/React.createElement(Button, {
+    variant: "default",
+    style: {
+      minWidth: "80px"
+    },
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        ctx.rangeDialog.rangeTxt = rangeTxt2;
+      });
+      close();
+    },
+    tabIndex: 0
+  }, button.confirm)));
+};
+export default RangeDialog;

package/{dist/packages/react/src → es}/components/DataVerification/getDisplayedRangeTxt.d.ts

@@ -1,2 +1,2 @@
-import { Context } from "@fileverse-dev/fortune-core";
-export declare function getDisplayedRangeTxt(context: Context): string;
+import { Context } from "@fileverse-dev/fortune-core";
+export declare function getDisplayedRangeTxt(context: Context): string;

package/es/components/DataVerification/getDisplayedRangeTxt.js

@@ -0,0 +1,9 @@
+import { getRangetxt } from "@fileverse-dev/fortune-core";
+export function getDisplayedRangeTxt(context) {
+  var _a, _b;
+  if (context.luckysheet_select_save) {
+    var range = context.luckysheet_select_save[context.luckysheet_select_save.length - 1];
+    return getRangetxt(context, context.currentSheetId, range, context.currentSheetId);
+  }
+  return (_b = (_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.rangeTxt) !== null && _b !== void 0 ? _b : "";
+}

package/es/components/DataVerification/index.css

@@ -0,0 +1,202 @@
+#fortune-data-verification {
+  min-width: 510px;
+  user-select: none;
+}
+
+#fortune-data-verification .title {
+  font-size: 16px;
+}
+
+#fortune-data-verification .box {
+  font-size: 14px;
+}
+
+#fortune-data-verification .box .box-item {
+  padding: 10px;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+#fortune-data-verification .box .box-item .box-item-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+#fortune-data-verification .box .box-item .data-verification-range {
+  width: 100%;
+  height: 30px;
+  border: 1px solid #d4d4d4;
+}
+
+#fortune-data-verification .box .box-item .show-box-item {
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+#fortune-data-verification .box .box-item .show-box-item .check-box {
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+
+#fortune-data-verification .box .box-item .show-box-item .check-box input {
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+}
+
+#fortune-data-verification .input-box input {
+  height: 30px;
+  padding: 4px 10px 4px 10px;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  margin-top: 6px;
+}
+
+#fortune-data-verification .input-box span {
+  margin: 0px 16px;
+}
+
+.data-verification-range .formulaInputFocus {
+  width: calc(100% - 30px);
+  height: 30px;
+  padding: 0 10px px;
+  float: left;
+  border: none;
+  outline-style: none;
+  box-sizing: border-box;
+}
+
+.data-verification-range .icon {
+  float: right;
+  margin-top: 4px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+#fortune-data-verification .box .box-item .data-verification-type-select {
+  width: 100%;
+  height: 30px;
+  border-color: #d4d4d4;
+  outline-style: none;
+}
+
+#fortune-data-verification .box .box-item .check {
+  font-size: 12px;
+  line-height: 24px;
+}
+
+#fortune-data-verification .box .box-item .check input {
+  vertical-align: text-top;
+}
+
+#fortune-data-verification .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;
+}
+
+#fortune-data-verification .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+
+#fortune-data-verification .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  margin-right: 10px;
+}
+
+#range-dialog {
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  background: #fff;
+  border: 1px solid hsl(var(--color-border-default));
+  outline: 0;
+  position: absolute;
+  z-index: 100003;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -90%);
+  user-select: none;
+}
+
+#range-dialog .dialog-title {
+  background-color: #fff;
+  color: #000;
+  cursor: default;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 24px;
+  margin: 0 0 16px;
+}
+
+#range-dialog input {
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid #d4d4d4;
+  outline-style: none;
+  user-select: none;
+}
+
+#range-dialog .button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: 10px;
+}
+
+#range-dialog .button-close {
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  margin-right: 10px;
+}
+
+#luckysheet-dataVerification-dropdown-List {
+  background-color: hsl(var(--color-bg-default));
+  border: 1px solid hsl(var(--color-border-default));
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(4px);
+  position: absolute;
+  z-index: 10000;
+  box-sizing: border-box;
+  font-size: 14px;
+  padding: 8px;
+  min-width: 160px;
+}
+
+#luckysheet-dataVerification-dropdown-List .dropdown-List-item {
+  padding: 4px 8px;
+  box-sizing: border-box;
+  cursor: pointer !important;
+  border-radius: 4px;
+}
+
+#luckysheet-dataVerification-dropdown-List .dropdown-List-item:hover {
+  background-color: hsl(var(--color-bg-default-hover));
+  transition: background-color 0.2s ease;
+}
+
+[data-radix-popper-content-wrapper] {
+  z-index: 10000 !important;
+}
+
+.data-verification-checkbox-label {
+  min-width: 100px;
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
-import "./index.css";
-declare const DataVerification: React.FC;
-export default DataVerification;
+import React from "react";
+import "./index.css";
+declare const DataVerification: React.FC;
+export default DataVerification;