Merge pull request #364 from seatable/opt-color-picker-when-modal-portaled

update

Author: shuntian

src/DTableColorPicker/ColorPickerPortal/index.js

@@ -1,46 +1,78 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import { throttle } from '../../utils/utils';
 
-export default function ColorPickerPortal({ target, scrollContainerId, throttleDelay, children }) {
-
+export default function ColorPickerPortal({ target, scrollContainerId, throttleDelay = 16, children }) {
   const containerRef = useRef(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+  const [position, setPosition] = useState(() => {
+    return { top: '-9999px', left: '-9999px', visibility: 'hidden' };
+  });
 
-  useEffect(() => {
+  const updatePosition = 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(${spaceAbove}px + 2.375rem)`, left: left + 1 + 'px' });
-        return;
-      }
-      setPosition({ top: `calc(${spaceAbove - portalRectHeight}px)`, left: left + 1 + 'px' });
+
+    const targetRect = target.getBoundingClientRect();
+    const { top: spaceAbove, left } = targetRect;
+    const portalRectHeight = containerRef.current.clientHeight;
+
+    const newPosition = {
+      left: `${left + 1}px`,
+      visibility: 'visible',
     };
-    updatePosition();
+
+    if (spaceAbove < portalRectHeight) {
+      newPosition.top = `calc(${spaceAbove}px + 2.375rem)`;
+    } else {
+      newPosition.top = `calc(${spaceAbove - portalRectHeight}px)`;
+    }
+
+    setPosition(prev => ({
+      ...prev,
+      ...newPosition
+    }));
+
+    if (!isPositioned) {
+      setIsPositioned(true);
+    }
+  }, [target, isPositioned]);
+
+  useEffect(() => {
+    if (!target) return;
+
+    const initialPosition = () => {
+      updatePosition();
+      requestAnimationFrame(updatePosition);
+    };
+    const timer = setTimeout(initialPosition, 0);
+
     const throttledUpdatePosition = throttle(updatePosition, throttleDelay);
     const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : null;
 
-    scrollContainer && scrollContainer.addEventListener('scroll', throttledUpdatePosition);
-    window.addEventListener('resize', updatePosition);
+    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?.removeEventListener('scroll', throttledUpdatePosition);
     };
-  }, [target, containerRef, scrollContainerId, throttleDelay]);
+  }, [target, scrollContainerId, throttleDelay, updatePosition]);
+
+  if (!target) return null;
 
   return ReactDOM.createPortal(
     <div
       className='dtable-color-picker-portal'
       style={{
-        position: 'absolute',
-        zIndex: '10',
+        position: 'fixed',
+        zIndex: '1049',
         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}
     >