@envive-ai/react-toolkit-v3 0.3.8 → 0.3.10

package/src/components/PromptCarousel/hooks/useButtonScrollPosition.ts

@@ -1,128 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { RepetitionNumberSuffix } from '../types/types';
-
-const getElementId = (element: Element | null): string | null => {
-  if (!element) return null;
-  return element.id?.trim() || null;
-};
-
-export function useButtonScrollPosition(
-  firstRowScrollRef: React.RefObject<HTMLDivElement>,
-  blockScrollRef: React.RefObject<HTMLDivElement>,
-  shouldUseRowScroll: boolean,
-) {
-  const savedButtonIdRef = useRef<string | null>(null);
-  const savedButtonPositionRef = useRef<number | null>(null);
-
-  const captureButtonUnderMouse = useCallback(
-    (mouseX: number, mouseY: number) => {
-      const container = firstRowScrollRef.current;
-      if (!container) return;
-
-      const containerRect = container.getBoundingClientRect();
-
-      const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
-      const targetButtonId = getElementId(elementUnderMouse);
-
-      let closestButton: HTMLElement | null = null;
-
-      if (targetButtonId) {
-        const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`) as HTMLElement;
-        if (
-          buttonById &&
-          (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse as Node))
-        ) {
-          closestButton = buttonById;
-        }
-      }
-
-      if (!closestButton) {
-        const buttons = Array.from(container.querySelectorAll('button')) as HTMLElement[];
-        let closestDistance = Infinity;
-
-        for (const button of buttons) {
-          const buttonRect = button.getBoundingClientRect();
-
-          if (
-            mouseX >= buttonRect.left &&
-            mouseX <= buttonRect.right &&
-            mouseY >= buttonRect.top &&
-            mouseY <= buttonRect.bottom
-          ) {
-            closestButton = button;
-            break;
-          }
-
-          const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-          const buttonCenterY = buttonRect.top + buttonRect.height / 2;
-          const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
-
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            closestButton = button;
-          }
-        }
-      }
-
-      if (closestButton) {
-        const id = getElementId(closestButton);
-        if (id) {
-          savedButtonIdRef.current = id;
-          const buttonRect = closestButton.getBoundingClientRect();
-          savedButtonPositionRef.current = buttonRect.left - containerRect.left;
-        }
-      }
-    },
-    [firstRowScrollRef],
-  );
-
-  useEffect(() => {
-    if (
-      shouldUseRowScroll ||
-      !blockScrollRef.current ||
-      !savedButtonIdRef.current ||
-      savedButtonPositionRef.current === null
-    ) {
-      return;
-    }
-
-    const container = blockScrollRef.current;
-    const targetId = savedButtonIdRef.current.trim();
-    const targetPosition = savedButtonPositionRef.current;
-
-    const getScrollId = (id: string) => {
-      if (id.endsWith(RepetitionNumberSuffix.TWO)) {
-        return id;
-      }
-
-      if (id.endsWith(RepetitionNumberSuffix.THREE)) {
-        return `${id.slice(0, -2)}${RepetitionNumberSuffix.TWO}`;
-      }
-
-      return `${id}${RepetitionNumberSuffix.TWO}`;
-    };
-
-    const applyScroll = () => {
-      const finalId = getScrollId(targetId);
-      const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`) as HTMLElement;
-      const scrollableContent = container.firstElementChild as HTMLElement;
-
-      if (!targetButton || !scrollableContent) return;
-
-      const contentRect = scrollableContent.getBoundingClientRect();
-      const buttonRect = targetButton.getBoundingClientRect();
-      const buttonPositionInContent = buttonRect.left - contentRect.left + container.scrollLeft;
-      const newScrollLeft = buttonPositionInContent - targetPosition;
-
-      container.scrollLeft = Math.max(0, newScrollLeft);
-    };
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(applyScroll);
-      });
-    });
-  }, [shouldUseRowScroll, blockScrollRef]);
-
-  return { captureButtonUnderMouse };
-}

package/src/components/PromptCarousel/hooks/useCarouselAnimation.ts

@@ -1,47 +0,0 @@
-import { useCallback, useState } from 'react';
-import { AnimationSpeed } from '../types/types';
-import { useButtonScrollPosition } from './useButtonScrollPosition';
-import { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-
-interface UseCarouselAnimationProps {
-  firstRowScrollRef: React.RefObject<HTMLDivElement>;
-  blockScrollRef: React.RefObject<HTMLDivElement>;
-  scrollRefs: React.RefObject<HTMLDivElement>[];
-  animationSpeed: `${AnimationSpeed}`;
-  isAnimated: boolean;
-}
-
-export const useCarouselAnimation = ({
-  firstRowScrollRef,
-  blockScrollRef,
-  scrollRefs,
-  animationSpeed,
-  isAnimated,
-}: UseCarouselAnimationProps) => {
-  const [isAnimationStopped, setIsAnimationStopped] = useState(false);
-  const shouldUseRowScroll = isAnimated && !isAnimationStopped;
-
-  const { captureButtonUnderMouse } = useButtonScrollPosition(
-    firstRowScrollRef,
-    blockScrollRef,
-    shouldUseRowScroll,
-  );
-
-  const onStopAll = useCallback(
-    (mouseX?: number, mouseY?: number) => {
-      if (mouseX !== undefined && mouseY !== undefined) {
-        captureButtonUnderMouse(mouseX, mouseY);
-      }
-      setIsAnimationStopped(true);
-    },
-    [captureButtonUnderMouse],
-  );
-
-  useHorizontalScrollAnimation(
-    scrollRefs,
-    onStopAll,
-    shouldUseRowScroll ? animationSpeed : AnimationSpeed.NONE,
-  );
-
-  return { isAnimationStopped, shouldUseRowScroll };
-};

package/src/components/PromptCarousel/hooks/useCarouselRefs.ts

@@ -1,27 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-interface UseCarouselRefsProps {
-  shouldShowTwoRows: boolean;
-}
-
-export const useCarouselRefs = ({ shouldShowTwoRows }: UseCarouselRefsProps) => {
-  const firstRowScrollRef = useRef<HTMLDivElement>(null);
-  const firstRowStackRef = useRef<HTMLDivElement>(null);
-  const secondRowScrollRef = useRef<HTMLDivElement>(null);
-  const blockScrollRef = useRef<HTMLDivElement>(null);
-  const blockFirstRowStackRef = useRef<HTMLDivElement>(null);
-
-  const scrollRefs = useMemo(
-    () => (shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]),
-    [shouldShowTwoRows],
-  );
-
-  return {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  };
-};