dtable-ui-component 6.0.51 → 6.0.52-alpha.1

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -14,54 +14,84 @@ function ColorPickerPortal(_ref) {
   let {
     target,
     scrollContainerId,
-    throttleDelay,
+    throttleDelay = 16,
     children
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  const [position, setPosition] = (0, _react.useState)({
-    top: 0,
-    left: 0
+  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
+  const [position, setPosition] = (0, _react.useState)(() => {
+    return {
+      top: '-9999px',
+      left: '-9999px',
+      visibility: 'hidden'
+    };
   });
-  (0, _react.useEffect)(() => {
+  const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
-    const updatePosition = () => {
-      const targetRect = target.getBoundingClientRect();
-      const {
-        top: spaceAbove,
-        left
-      } = targetRect;
-      const portalRectHeight = containerRef.current.clientHeight;
-      if (spaceAbove < portalRectHeight) {
-        setPosition({
-          top: "calc(".concat(spaceAbove, "px + 2.375rem)"),
-          left: left + 1 + 'px'
-        });
-        return;
-      }
-      setPosition({
-        top: "calc(".concat(spaceAbove - portalRectHeight, "px)"),
-        left: left + 1 + 'px'
-      });
+    const targetRect = target.getBoundingClientRect();
+    const {
+      top: spaceAbove,
+      left
+    } = targetRect;
+    const portalRectHeight = containerRef.current.clientHeight;
+    const newPosition = {
+      left: "".concat(left + 1, "px"),
+      visibility: 'visible'
     };
-    updatePosition();
+    if (spaceAbove < portalRectHeight) {
+      newPosition.top = "calc(".concat(spaceAbove, "px + 2.375rem)");
+    } else {
+      newPosition.top = "calc(".concat(spaceAbove - portalRectHeight, "px)");
+    }
+    setPosition(prev => ({
+      ...prev,
+      ...newPosition
+    }));
+    if (!isPositioned) {
+      setIsPositioned(true);
+    }
+  }, [target, isPositioned]);
+  (0, _react.useEffect)(() => {
+    if (!target) return;
+
+    // 初始计算位置
+    const initialPosition = () => {
+      updatePosition();
+      // 强制重排，确保位置计算准确
+      requestAnimationFrame(updatePosition);
+    };
+
+    // 使用setTimeout确保DOM更新后再计算位置
+    const timer = setTimeout(initialPosition, 0);
     const throttledUpdatePosition = (0, _utils.throttle)(updatePosition, throttleDelay);
     const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : null;
-    scrollContainer && scrollContainer.addEventListener('scroll', throttledUpdatePosition);
-    window.addEventListener('resize', updatePosition);
+
+    // 添加事件监听
+    scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', throttledUpdatePosition, {
+      passive: true
+    });
+    window.addEventListener('resize', throttledUpdatePosition, {
+      passive: true
+    });
     return () => {
-      window.removeEventListener('resize', updatePosition);
-      scrollContainer && scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
+      clearTimeout(timer);
+      window.removeEventListener('resize', throttledUpdatePosition);
+      scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
     };
-  }, [target, containerRef, scrollContainerId, throttleDelay]);
+  }, [target, scrollContainerId, throttleDelay, updatePosition]);
+  if (!target) return null;
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-color-picker-portal",
     style: {
-      position: 'absolute',
+      position: 'fixed',
       zIndex: '10',
       left: position.left,
       top: position.top,
       width: '240px',
-      height: '370px'
+      height: '370px',
+      visibility: position.visibility,
+      opacity: isPositioned ? 1 : 0,
+      transition: 'opacity 0.15s ease-in-out'
     },
     ref: containerRef,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.51",
+  "version": "6.0.52-alpha.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",