Function ColorLoupe

packages/@react-spectrum/s2/src/ColorHandle.tsx:112–200

({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any)

}

function ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any) {
  let patternId = useId();

  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});
  useLayoutEffect(() => {
    let rect = containerRef.current?.getBoundingClientRect();
    setContainerRect({
      top: rect?.top || 0,
      left: rect?.left || 0,
      width: rect?.width || 0,
      height: rect?.height || 0
    });
  }, [containerRef]);

  // Compute the pixel position of the thumb.
  let {x: thumbLeft, y: thumbTop} = getPosition();
  thumbTop *= containerRect.height;
  thumbLeft *= containerRect.width;

  let enterAnimation = keyframes(`
    from {
      transform: translateY(8px);
      opacity: 0;
    }
  `);

  let exitAnimation = keyframes(`
    to {
      transform: translateY(8px);
      opacity: 0;
    }
  `);

  return (
    <svg
      style={{
        // Position relative to the viewport.
        position: 'fixed',
        top: containerRect.top + thumbTop,
        left: containerRect.left + thumbLeft,
        marginTop: -LOUPE_HEIGHT - LOUPE_BORDER_WIDTH * 2 - HANDLE_SIZE / 2 - LOUPE_OFFSET,
        marginLeft: -LOUPE_WIDTH / 2 - LOUPE_BORDER_WIDTH,
        animationName: isExiting ? exitAnimation : enterAnimation
      }}
      className={style({
        filter: 'elevated',
        pointerEvents: 'none',
        animationDuration: 125,
        animationFillMode: 'forwards',
        animationTimingFunction: 'in-out',
        isolation: 'isolate'
      })}
      onAnimationEnd={e => {
        if (e.animationName === exitAnimation) {
          onExited();
        }
      }}