@fileverse-dev/fortune-react 1.1.94 → 1.1.95

package/es/components/Toolbar/dataVerificationPortal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const DataVerificationPortal: ({ visible }: {
+    visible: boolean;
+}) => React.ReactPortal | null;
+export default DataVerificationPortal;

package/es/components/Toolbar/dataVerificationPortal.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import DataVerification from "../DataVerification";
+var DataVerificationPortal = function DataVerificationPortal(_a) {
+  var visible = _a.visible;
+  var container = document.getElementById("placeholder-data-validation");
+  if (!visible || !container) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DataVerification, null), container);
+};
+export default DataVerificationPortal;

package/es/components/Toolbar/index.js

@@ -123,7 +123,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
-import ReactDOM from 'react-dom/client';
+import DataVerificationPortal from "./dataVerificationPortal";
 import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleTextSize, normalizedCellAttr, getFlowdata, newComment, editComment, deleteComment, showHideComment, showHideAllComments, autoSelectionFormula, handleSum, locale, handleMerge, handleBorder, toolbarItemSelectedFunc, handleFreeze, insertImage, showImgChooser, updateFormat, handleSort, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, createFilter, clearFilter, applyLocation, insertDuneChart } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
 import { IconButton, LucideIcon, Tooltip, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@fileverse/ui";
@@ -137,7 +137,6 @@ import SVGIcon from "../SVGIcon";
 import { useDialog } from "../../hooks/useDialog";
 import { SplitColumn } from "../SplitColumn";
 import { LocationCondition } from "../LocationCondition";
-import DataVerification from "../DataVerification";
 import ConditionalFormat from "../ConditionFormat";
 import CustomButton from "./CustomButton";
 import { CustomColor } from "./CustomColor";
@@ -585,6 +584,9 @@ var Toolbar = function Toolbar(_a) {
       }
     }
   }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
+  var _o = useState(false),
+    showDataValidation = _o[0],
+    setShowDataValidation = _o[1];
   var getToolbarItem = useCallback(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -961,7 +963,9 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "dataVerification") {
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataVerificationPortal, {
+        visible: showDataValidation
+      }), /*#__PURE__*/React.createElement(Button, {
         iconId: name,
         tooltip: tooltip,
         key: name,
@@ -969,16 +973,10 @@ var Toolbar = function Toolbar(_a) {
           var _a;
           (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
           setTimeout(function () {
-            var target = document.getElementById('placeholder-data-validation');
-            console.log("Target for DataValidation:", target);
-            console.log("DataValidationComponent:", DataVerification);
-            if (target) {
-              var root = ReactDOM.createRoot(target);
-              root.render(/*#__PURE__*/React.createElement(DataVerification, null));
-            }
+            setShowDataValidation(true);
           }, 100);
         }
-      });
+      }));
     }
     if (name === "locationCondition") {
       var items_3 = [{

package/lib/components/Toolbar/dataVerificationPortal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const DataVerificationPortal: ({ visible }: {
+    visible: boolean;
+}) => React.ReactPortal | null;
+export default DataVerificationPortal;

package/lib/components/Toolbar/dataVerificationPortal.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+var _DataVerification = _interopRequireDefault(require("../DataVerification"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DataVerificationPortal = function DataVerificationPortal(_a) {
+  var visible = _a.visible;
+  var container = document.getElementById("placeholder-data-validation");
+  if (!visible || !container) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_DataVerification.default, null), container);
+};
+var _default = exports.default = DataVerificationPortal;

package/lib/components/Toolbar/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getLucideIcon = exports.default = exports.CurrencySelector = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _client = _interopRequireDefault(require("react-dom/client"));
+var _dataVerificationPortal = _interopRequireDefault(require("./dataVerificationPortal"));
 var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _ui = require("@fileverse/ui");
@@ -20,7 +20,6 @@ var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
 var _useDialog = require("../../hooks/useDialog");
 var _SplitColumn = require("../SplitColumn");
 var _LocationCondition = require("../LocationCondition");
-var _DataVerification = _interopRequireDefault(require("../DataVerification"));
 var _ConditionFormat = _interopRequireDefault(require("../ConditionFormat"));
 var _CustomButton = _interopRequireDefault(require("./CustomButton"));
 var _CustomColor = require("./CustomColor");
@@ -594,6 +593,9 @@ var Toolbar = function Toolbar(_a) {
       }
     }
   }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
+  var _o = (0, _react.useState)(false),
+    showDataValidation = _o[0],
+    setShowDataValidation = _o[1];
   var getToolbarItem = (0, _react.useCallback)(function (name, i) {
     var _a, _b, _c, _d, _e, _f, _g;
     var tooltip = toolbar[name];
@@ -970,7 +972,9 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "dataVerification") {
-      return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dataVerificationPortal.default, {
+        visible: showDataValidation
+      }), /*#__PURE__*/_react.default.createElement(_Button.default, {
         iconId: name,
         tooltip: tooltip,
         key: name,
@@ -978,16 +982,10 @@ var Toolbar = function Toolbar(_a) {
           var _a;
           (_a = document.getElementById("data-verification-button")) === null || _a === void 0 ? void 0 : _a.click();
           setTimeout(function () {
-            var target = document.getElementById('placeholder-data-validation');
-            console.log("Target for DataValidation:", target);
-            console.log("DataValidationComponent:", _DataVerification.default);
-            if (target) {
-              var root = _client.default.createRoot(target);
-              root.render(/*#__PURE__*/_react.default.createElement(_DataVerification.default, null));
-            }
+            setShowDataValidation(true);
           }, 100);
         }
-      });
+      }));
     }
     if (name === "locationCondition") {
       var items_3 = [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.1.94",
+  "version": "1.1.95",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.1.94",
+    "@fileverse-dev/fortune-core": "1.1.95",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",