@envive-ai/react-toolkit-v3 0.3.8 → 0.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AnimatedText/AnimatedText.cjs +1 -0
- package/dist/AnimatedText/AnimatedText.d.cts +3 -3
- package/dist/AnimatedText/AnimatedText.js +1 -0
- package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.cts +2 -2
- package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.ts +2 -2
- package/dist/Carousel/Carousel.cjs +1 -1
- package/dist/Carousel/Carousel.d.cts +2 -2
- package/dist/Carousel/Carousel.d.ts +2 -2
- package/dist/Carousel/Carousel.js +1 -1
- package/dist/Carousel/components/Container.cjs +2 -2
- package/dist/Carousel/components/Container.js +2 -2
- package/dist/ChatFooter/ChatFooter.cjs +1 -1
- package/dist/ChatFooter/ChatFooter.d.cts +2 -2
- package/dist/ChatFooter/ChatFooter.d.ts +2 -2
- package/dist/ChatFooter/ChatFooter.js +1 -1
- package/dist/ChatFooter/components/Layout.cjs +2 -2
- package/dist/ChatFooter/components/Layout.js +2 -2
- package/dist/ChatFooter/components/index.d.cts +5 -5
- package/dist/ChatFooter/components/index.d.ts +5 -5
- package/dist/ChatHeader/ChatHeader.d.cts +2 -2
- package/dist/ChatHeader/ChatHeader.d.ts +2 -2
- package/dist/ChatHeader/components/Handle.cjs +2 -2
- package/dist/ChatHeader/components/Handle.js +2 -2
- package/dist/ChatHeader/components/Toggle.cjs +3 -3
- package/dist/ChatHeader/components/Toggle.js +3 -3
- package/dist/ChatHeader/hooks/useGetCloseButtonProperties.cjs +1 -1
- package/dist/ChatHeader/hooks/useGetCloseButtonProperties.js +1 -1
- package/dist/ChatPreview/ChatPreview.cjs +14 -4
- package/dist/ChatPreview/ChatPreview.d.cts +2 -2
- package/dist/ChatPreview/ChatPreview.d.ts +2 -2
- package/dist/ChatPreview/ChatPreview.js +14 -4
- package/dist/ChatPreview/types/types.d.cts +5 -4
- package/dist/ChatPreview/types/types.d.ts +5 -4
- package/dist/ChatPreviewComparison/ChatPreviewComparison.cjs +14 -4
- package/dist/ChatPreviewComparison/ChatPreviewComparison.d.cts +2 -2
- package/dist/ChatPreviewComparison/ChatPreviewComparison.d.ts +2 -2
- package/dist/ChatPreviewComparison/ChatPreviewComparison.js +14 -4
- package/dist/ChatPreviewComparison/components/Headline.cjs +2 -2
- package/dist/ChatPreviewComparison/components/Headline.js +2 -2
- package/dist/ChatPreviewComparison/components/Layout.cjs +4 -4
- package/dist/ChatPreviewComparison/components/Layout.js +4 -4
- package/dist/ChatPreviewComparison/components/Message.cjs +2 -2
- package/dist/ChatPreviewComparison/components/Message.js +2 -2
- package/dist/ChatPreviewComparison/types/types.d.cts +4 -4
- package/dist/ChatPreviewComparison/types/types.d.ts +4 -4
- package/dist/ChatPreviewLoading/ChatPreviewLoading.d.cts +2 -2
- package/dist/Container/Container.d.cts +5 -5
- package/dist/Container/Container.d.ts +176 -176
- package/dist/DesignTokens/DesignTokensComponent.d.cts +2 -2
- package/dist/DesignTokens/DesignTokensComponent.d.ts +2 -2
- package/dist/Disclaimer/components/Container.cjs +2 -2
- package/dist/Disclaimer/components/Container.js +2 -2
- package/dist/DocumentRetrievalCard/DocumentRetrievalCard.d.cts +2 -2
- package/dist/DocumentRetrievalCard/DocumentRetrievalCard.d.ts +2 -2
- package/dist/DocumentRetrievalCard/components/Layout.cjs +2 -2
- package/dist/DocumentRetrievalCard/components/Layout.js +2 -2
- package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Icon.cjs +1 -1
- package/dist/DocumentRetrievalCard/components/ViewArticleButton/components/Icon.js +1 -1
- package/dist/FloatingButton/FloatingButton.d.cts +2 -2
- package/dist/FloatingChat/FloatingChat.cjs +3 -2
- package/dist/FloatingChat/FloatingChat.d.cts +2 -2
- package/dist/FloatingChat/FloatingChat.d.ts +2 -2
- package/dist/FloatingChat/FloatingChat.js +3 -2
- package/dist/FloatingChat/components/AgentMessage.cjs +9 -5
- package/dist/FloatingChat/components/AgentMessage.js +9 -5
- package/dist/FloatingChat/components/ChatMessages.cjs +1 -1
- package/dist/FloatingChat/components/ChatMessages.js +1 -1
- package/dist/FloatingChat/components/Layout.cjs +13 -13
- package/dist/FloatingChat/components/Layout.js +13 -13
- package/dist/FloatingChat/components/ModalSheet.cjs +5 -6
- package/dist/FloatingChat/components/ModalSheet.js +5 -6
- package/dist/FloatingChat/components/ReviewCardsCarousel.cjs +2 -1
- package/dist/FloatingChat/components/ReviewCardsCarousel.js +2 -1
- package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.cjs +0 -3
- package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.js +0 -3
- package/dist/Image/Image.d.cts +2 -2
- package/dist/Image/Image.d.ts +2 -2
- package/dist/ImageGallery/ImageGallery.d.cts +2 -2
- package/dist/ImageGallery/ImageGallery.d.ts +2 -2
- package/dist/ImageGallery/components/Layout.cjs +1 -1
- package/dist/ImageGallery/components/Layout.js +1 -1
- package/dist/MarkdownProcessor/MarkdownProcessor.d.cts +2 -2
- package/dist/MarkdownProcessor/MarkdownProcessor.d.ts +2 -2
- package/dist/Message/components/LinkButton.cjs +1 -1
- package/dist/Message/components/LinkButton.js +1 -1
- package/dist/OrderLookupCard/OrderLookupCard.cjs +1 -1
- package/dist/OrderLookupCard/OrderLookupCard.js +1 -1
- package/dist/ProductCard/ProductCard.cjs +10 -6
- package/dist/ProductCard/ProductCard.d.cts +2 -2
- package/dist/ProductCard/ProductCard.d.ts +2 -2
- package/dist/ProductCard/ProductCard.js +5 -2
- package/dist/ProductCard/components/Header.cjs +2 -2
- package/dist/ProductCard/components/Header.js +2 -2
- package/dist/PromptButton/PromptButton.d.cts +2 -2
- package/dist/PromptButton/PromptButton.d.ts +2 -2
- package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.cjs +3 -2
- package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.cts +2 -2
- package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts +2 -2
- package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.js +3 -2
- package/dist/PromptButtonCarouselWithImage/components/Layout.cjs +7 -2
- package/dist/PromptButtonCarouselWithImage/components/Layout.js +8 -3
- package/dist/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.cjs +53 -3
- package/dist/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.js +53 -3
- package/dist/PromptCarousel/PromptCarousel.cjs +71 -33
- package/dist/PromptCarousel/PromptCarousel.d.cts +2 -2
- package/dist/PromptCarousel/PromptCarousel.d.ts +2 -2
- package/dist/PromptCarousel/PromptCarousel.js +73 -35
- package/dist/PromptCarousel/hooks/index.cjs +2 -4
- package/dist/PromptCarousel/hooks/index.js +2 -4
- package/dist/PromptCarousel/hooks/useCoordinatedScrollAnimation.cjs +91 -0
- package/dist/PromptCarousel/hooks/useCoordinatedScrollAnimation.js +90 -0
- package/dist/PromptCarousel/hooks/useScrollSync.cjs +65 -0
- package/dist/PromptCarousel/hooks/useScrollSync.js +64 -0
- package/dist/ReviewCard/ReviewCard.d.cts +2 -2
- package/dist/ReviewCard/ReviewCard.d.ts +2 -2
- package/dist/ReviewCard/components/Container.cjs +2 -2
- package/dist/ReviewCard/components/Container.js +2 -2
- package/dist/ReviewCard/components/ReadMoreButton.cjs +1 -1
- package/dist/ReviewCard/components/ReadMoreButton.js +1 -1
- package/dist/ReviewCard/components/index.d.cts +4 -4
- package/dist/ReviewCard/components/index.d.ts +6 -6
- package/dist/SalesAgentProductCard/SalesAgentProductCard.d.cts +2 -2
- package/dist/SalesAgentProductCard/SalesAgentProductCard.d.ts +2 -2
- package/dist/SalesAgentProductCard/components/Container.cjs +2 -2
- package/dist/SalesAgentProductCard/components/Container.js +2 -2
- package/dist/SalesAgentProductCard/components/index.d.cts +6 -6
- package/dist/SalesAgentProductCard/components/index.d.ts +8 -8
- package/dist/SocialProof/SocialProof.cjs +1 -1
- package/dist/SocialProof/SocialProof.d.cts +2 -2
- package/dist/SocialProof/SocialProof.d.ts +2 -2
- package/dist/SocialProof/SocialProof.js +1 -1
- package/dist/SocialProof/components/Headline.cjs +3 -3
- package/dist/SocialProof/components/Headline.js +3 -3
- package/dist/SocialProof/components/LayoutFourHorizontal.cjs +1 -1
- package/dist/SocialProof/components/LayoutFourHorizontal.js +1 -1
- package/dist/SocialProof/components/Subheadline.cjs +1 -1
- package/dist/SocialProof/components/Subheadline.js +1 -1
- package/dist/Stack/Stack.d.cts +2 -2
- package/dist/TextField/utils/getIconColor.cjs +1 -1
- package/dist/TextField/utils/getIconColor.js +1 -1
- package/dist/TextField/utils/getSendIconElement.cjs +1 -1
- package/dist/TextField/utils/getSendIconElement.js +1 -1
- package/dist/TitledPromptCarousel/TitledPromptCarousel.cjs +1 -1
- package/dist/TitledPromptCarousel/TitledPromptCarousel.d.cts +2 -2
- package/dist/TitledPromptCarousel/TitledPromptCarousel.d.ts +2 -2
- package/dist/TitledPromptCarousel/TitledPromptCarousel.js +1 -1
- package/dist/Tokens/index.cjs +1 -1
- package/dist/Tokens/index.js +1 -1
- package/dist/TypingAnimation/TypingAnimation.cjs +1 -1
- package/dist/TypingAnimation/TypingAnimation.d.cts +2 -2
- package/dist/TypingAnimation/TypingAnimation.d.ts +2 -2
- package/dist/TypingAnimation/TypingAnimation.js +1 -1
- package/dist/TypingAnimation/hooks/useGetTypographyVariant.cjs +1 -1
- package/dist/TypingAnimation/hooks/useGetTypographyVariant.js +1 -1
- package/dist/Typography/Typography.d.cts +4 -4
- package/dist/Typography/Typography.d.ts +4 -4
- package/dist/WelcomeMessage/components/Container.cjs +2 -2
- package/dist/WelcomeMessage/components/Container.js +2 -2
- package/dist/WidgetTextField/WidgetTextField.cjs +11 -6
- package/dist/WidgetTextField/WidgetTextField.d.cts +3 -2
- package/dist/WidgetTextField/WidgetTextField.d.ts +3 -2
- package/dist/WidgetTextField/WidgetTextField.js +7 -2
- package/dist/WidgetTextField/components/Container.cjs +2 -2
- package/dist/WidgetTextField/components/Container.js +2 -2
- package/dist/WidgetTextField/components/FakeTextInput.cjs +2 -2
- package/dist/WidgetTextField/components/FakeTextInput.js +2 -2
- package/dist/WidgetTextField/components/Icon.cjs +11 -9
- package/dist/WidgetTextField/components/Icon.js +11 -9
- package/dist/WidgetTextField/types/types.d.cts +3 -0
- package/dist/WidgetTextField/types/types.d.ts +3 -0
- package/dist/WidgetWrapper/WidgetWrapper.d.cts +2 -2
- package/dist/WidgetWrapper/WidgetWrapper.d.ts +2 -2
- package/dist/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.cts +2 -2
- package/dist/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.ts +2 -2
- package/dist/styles.css +1 -1
- package/dist/utils/CustomIcon.cjs +1 -1
- package/dist/utils/CustomIcon.js +1 -1
- package/dist/utils/useDragToScroll.cjs +68 -0
- package/dist/utils/useDragToScroll.js +67 -0
- package/package.json +1 -1
- package/src/components/AnimatedText/AnimatedText.tsx +2 -0
- package/src/components/ChatHeader/hooks/useGetCloseButtonProperties.ts +1 -1
- package/src/components/ChatPreview/ChatPreview.tsx +20 -3
- package/src/components/ChatPreview/types/types.ts +5 -4
- package/src/components/ChatPreviewComparison/ChatPreviewComparison.tsx +20 -3
- package/src/components/ChatPreviewComparison/types/types.ts +4 -4
- package/src/components/FloatingChat/FloatingChat.tsx +3 -2
- package/src/components/FloatingChat/components/AgentMessage.tsx +1 -0
- package/src/components/FloatingChat/components/Layout.tsx +7 -2
- package/src/components/FloatingChat/components/ModalSheet.tsx +5 -7
- package/src/components/FloatingChat/components/ReviewCardsCarousel.tsx +3 -0
- package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx +0 -3
- package/src/components/ProductCard/ProductCard.tsx +12 -1
- package/src/components/ProductCard/components/Header.tsx +10 -8
- package/src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx +6 -3
- package/src/components/PromptButtonCarouselWithImage/components/Layout.tsx +13 -4
- package/src/components/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.tsx +63 -20
- package/src/components/PromptCarousel/PromptCarousel.tsx +89 -51
- package/src/components/PromptCarousel/hooks/index.ts +2 -4
- package/src/components/PromptCarousel/hooks/useCoordinatedScrollAnimation.ts +115 -0
- package/src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts +71 -78
- package/src/components/PromptCarousel/hooks/useScrollSync.ts +83 -0
- package/src/components/TextField/utils/getIconColor.ts +1 -1
- package/src/components/TextField/utils/getSendIconElement.tsx +3 -1
- package/src/components/WidgetTextField/WidgetTextField.tsx +9 -1
- package/src/components/WidgetTextField/components/FakeTextInput.tsx +6 -2
- package/src/components/WidgetTextField/components/Icon.tsx +44 -9
- package/src/components/WidgetTextField/types/types.ts +3 -0
- package/src/components/utils/CustomIcon.tsx +1 -1
- package/src/components/utils/useDragToScroll.ts +83 -0
- package/dist/PromptCarousel/components/BlockScrollContainer.cjs +0 -23
- package/dist/PromptCarousel/components/BlockScrollContainer.js +0 -21
- package/dist/PromptCarousel/components/ButtonContainerRow.cjs +0 -34
- package/dist/PromptCarousel/components/ButtonContainerRow.js +0 -32
- package/dist/PromptCarousel/components/CarouselContentWithBlockScroll.cjs +0 -45
- package/dist/PromptCarousel/components/CarouselContentWithBlockScroll.js +0 -44
- package/dist/PromptCarousel/components/CarouselContentWithRowScroll.cjs +0 -33
- package/dist/PromptCarousel/components/CarouselContentWithRowScroll.js +0 -32
- package/dist/PromptCarousel/components/index.cjs +0 -13
- package/dist/PromptCarousel/components/index.js +0 -13
- package/dist/PromptCarousel/hooks/useButtonScrollPosition.cjs +0 -79
- package/dist/PromptCarousel/hooks/useButtonScrollPosition.js +0 -78
- package/dist/PromptCarousel/hooks/useCarouselAnimation.cjs +0 -23
- package/dist/PromptCarousel/hooks/useCarouselAnimation.js +0 -22
- package/dist/PromptCarousel/hooks/useCarouselRefs.cjs +0 -20
- package/dist/PromptCarousel/hooks/useCarouselRefs.js +0 -19
- package/dist/PromptCarousel/hooks/useGetScrollProperties.cjs +0 -18
- package/dist/PromptCarousel/hooks/useGetScrollProperties.js +0 -17
- package/dist/PromptCarousel/hooks/useHorizontalScrollAnimation.cjs +0 -78
- package/dist/PromptCarousel/hooks/useHorizontalScrollAnimation.js +0 -77
- package/src/components/PromptCarousel/components/BlockScrollContainer.tsx +0 -34
- package/src/components/PromptCarousel/components/ButtonContainerRow.tsx +0 -46
- package/src/components/PromptCarousel/components/CarouselContentWithBlockScroll.tsx +0 -83
- package/src/components/PromptCarousel/components/CarouselContentWithRowScroll.tsx +0 -71
- package/src/components/PromptCarousel/components/index.ts +0 -9
- package/src/components/PromptCarousel/hooks/useButtonScrollPosition.ts +0 -128
- package/src/components/PromptCarousel/hooks/useCarouselAnimation.ts +0 -47
- package/src/components/PromptCarousel/hooks/useCarouselRefs.ts +0 -27
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { RepetitionNumberSuffix } from "../types/types.js";
|
|
2
|
-
import { useCallback, useEffect, useRef } from "react";
|
|
3
|
-
|
|
4
|
-
//#region src/components/PromptCarousel/hooks/useButtonScrollPosition.ts
|
|
5
|
-
const getElementId = (element) => {
|
|
6
|
-
if (!element) return null;
|
|
7
|
-
return element.id?.trim() || null;
|
|
8
|
-
};
|
|
9
|
-
function useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll) {
|
|
10
|
-
const savedButtonIdRef = useRef(null);
|
|
11
|
-
const savedButtonPositionRef = useRef(null);
|
|
12
|
-
const captureButtonUnderMouse = useCallback((mouseX, mouseY) => {
|
|
13
|
-
const container = firstRowScrollRef.current;
|
|
14
|
-
if (!container) return;
|
|
15
|
-
const containerRect = container.getBoundingClientRect();
|
|
16
|
-
const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
|
|
17
|
-
const targetButtonId = getElementId(elementUnderMouse);
|
|
18
|
-
let closestButton = null;
|
|
19
|
-
if (targetButtonId) {
|
|
20
|
-
const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`);
|
|
21
|
-
if (buttonById && (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse))) closestButton = buttonById;
|
|
22
|
-
}
|
|
23
|
-
if (!closestButton) {
|
|
24
|
-
const buttons = Array.from(container.querySelectorAll("button"));
|
|
25
|
-
let closestDistance = Infinity;
|
|
26
|
-
for (const button of buttons) {
|
|
27
|
-
const buttonRect = button.getBoundingClientRect();
|
|
28
|
-
if (mouseX >= buttonRect.left && mouseX <= buttonRect.right && mouseY >= buttonRect.top && mouseY <= buttonRect.bottom) {
|
|
29
|
-
closestButton = button;
|
|
30
|
-
break;
|
|
31
|
-
}
|
|
32
|
-
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
|
|
33
|
-
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
|
|
34
|
-
const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
|
|
35
|
-
if (distance < closestDistance) {
|
|
36
|
-
closestDistance = distance;
|
|
37
|
-
closestButton = button;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
if (closestButton) {
|
|
42
|
-
const id = getElementId(closestButton);
|
|
43
|
-
if (id) {
|
|
44
|
-
savedButtonIdRef.current = id;
|
|
45
|
-
savedButtonPositionRef.current = closestButton.getBoundingClientRect().left - containerRect.left;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}, [firstRowScrollRef]);
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (shouldUseRowScroll || !blockScrollRef.current || !savedButtonIdRef.current || savedButtonPositionRef.current === null) return;
|
|
51
|
-
const container = blockScrollRef.current;
|
|
52
|
-
const targetId = savedButtonIdRef.current.trim();
|
|
53
|
-
const targetPosition = savedButtonPositionRef.current;
|
|
54
|
-
const getScrollId = (id) => {
|
|
55
|
-
if (id.endsWith(RepetitionNumberSuffix.TWO)) return id;
|
|
56
|
-
if (id.endsWith(RepetitionNumberSuffix.THREE)) return `${id.slice(0, -2)}${RepetitionNumberSuffix.TWO}`;
|
|
57
|
-
return `${id}${RepetitionNumberSuffix.TWO}`;
|
|
58
|
-
};
|
|
59
|
-
const applyScroll = () => {
|
|
60
|
-
const finalId = getScrollId(targetId);
|
|
61
|
-
const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`);
|
|
62
|
-
const scrollableContent = container.firstElementChild;
|
|
63
|
-
if (!targetButton || !scrollableContent) return;
|
|
64
|
-
const contentRect = scrollableContent.getBoundingClientRect();
|
|
65
|
-
const newScrollLeft = targetButton.getBoundingClientRect().left - contentRect.left + container.scrollLeft - targetPosition;
|
|
66
|
-
container.scrollLeft = Math.max(0, newScrollLeft);
|
|
67
|
-
};
|
|
68
|
-
requestAnimationFrame(() => {
|
|
69
|
-
requestAnimationFrame(() => {
|
|
70
|
-
requestAnimationFrame(applyScroll);
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
}, [shouldUseRowScroll, blockScrollRef]);
|
|
74
|
-
return { captureButtonUnderMouse };
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
//#endregion
|
|
78
|
-
export { useButtonScrollPosition };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const require_PromptCarousel_types_types = require('../types/types.cjs');
|
|
3
|
-
const require_useHorizontalScrollAnimation = require('./useHorizontalScrollAnimation.cjs');
|
|
4
|
-
const require_useButtonScrollPosition = require('./useButtonScrollPosition.cjs');
|
|
5
|
-
let react = require("react");
|
|
6
|
-
|
|
7
|
-
//#region src/components/PromptCarousel/hooks/useCarouselAnimation.ts
|
|
8
|
-
const useCarouselAnimation = ({ firstRowScrollRef, blockScrollRef, scrollRefs, animationSpeed, isAnimated }) => {
|
|
9
|
-
const [isAnimationStopped, setIsAnimationStopped] = (0, react.useState)(false);
|
|
10
|
-
const shouldUseRowScroll = isAnimated && !isAnimationStopped;
|
|
11
|
-
const { captureButtonUnderMouse } = require_useButtonScrollPosition.useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll);
|
|
12
|
-
require_useHorizontalScrollAnimation.useHorizontalScrollAnimation(scrollRefs, (0, react.useCallback)((mouseX, mouseY) => {
|
|
13
|
-
if (mouseX !== void 0 && mouseY !== void 0) captureButtonUnderMouse(mouseX, mouseY);
|
|
14
|
-
setIsAnimationStopped(true);
|
|
15
|
-
}, [captureButtonUnderMouse]), shouldUseRowScroll ? animationSpeed : require_PromptCarousel_types_types.AnimationSpeed.NONE);
|
|
16
|
-
return {
|
|
17
|
-
isAnimationStopped,
|
|
18
|
-
shouldUseRowScroll
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
//#endregion
|
|
23
|
-
exports.useCarouselAnimation = useCarouselAnimation;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { AnimationSpeed } from "../types/types.js";
|
|
2
|
-
import { useHorizontalScrollAnimation } from "./useHorizontalScrollAnimation.js";
|
|
3
|
-
import { useButtonScrollPosition } from "./useButtonScrollPosition.js";
|
|
4
|
-
import { useCallback, useState } from "react";
|
|
5
|
-
|
|
6
|
-
//#region src/components/PromptCarousel/hooks/useCarouselAnimation.ts
|
|
7
|
-
const useCarouselAnimation = ({ firstRowScrollRef, blockScrollRef, scrollRefs, animationSpeed, isAnimated }) => {
|
|
8
|
-
const [isAnimationStopped, setIsAnimationStopped] = useState(false);
|
|
9
|
-
const shouldUseRowScroll = isAnimated && !isAnimationStopped;
|
|
10
|
-
const { captureButtonUnderMouse } = useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll);
|
|
11
|
-
useHorizontalScrollAnimation(scrollRefs, useCallback((mouseX, mouseY) => {
|
|
12
|
-
if (mouseX !== void 0 && mouseY !== void 0) captureButtonUnderMouse(mouseX, mouseY);
|
|
13
|
-
setIsAnimationStopped(true);
|
|
14
|
-
}, [captureButtonUnderMouse]), shouldUseRowScroll ? animationSpeed : AnimationSpeed.NONE);
|
|
15
|
-
return {
|
|
16
|
-
isAnimationStopped,
|
|
17
|
-
shouldUseRowScroll
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
//#endregion
|
|
22
|
-
export { useCarouselAnimation };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
let react = require("react");
|
|
3
|
-
|
|
4
|
-
//#region src/components/PromptCarousel/hooks/useCarouselRefs.ts
|
|
5
|
-
const useCarouselRefs = ({ shouldShowTwoRows }) => {
|
|
6
|
-
const firstRowScrollRef = (0, react.useRef)(null);
|
|
7
|
-
const firstRowStackRef = (0, react.useRef)(null);
|
|
8
|
-
const secondRowScrollRef = (0, react.useRef)(null);
|
|
9
|
-
return {
|
|
10
|
-
firstRowScrollRef,
|
|
11
|
-
firstRowStackRef,
|
|
12
|
-
secondRowScrollRef,
|
|
13
|
-
blockScrollRef: (0, react.useRef)(null),
|
|
14
|
-
blockFirstRowStackRef: (0, react.useRef)(null),
|
|
15
|
-
scrollRefs: (0, react.useMemo)(() => shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef], [shouldShowTwoRows])
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
//#endregion
|
|
20
|
-
exports.useCarouselRefs = useCarouselRefs;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useMemo, useRef } from "react";
|
|
2
|
-
|
|
3
|
-
//#region src/components/PromptCarousel/hooks/useCarouselRefs.ts
|
|
4
|
-
const useCarouselRefs = ({ shouldShowTwoRows }) => {
|
|
5
|
-
const firstRowScrollRef = useRef(null);
|
|
6
|
-
const firstRowStackRef = useRef(null);
|
|
7
|
-
const secondRowScrollRef = useRef(null);
|
|
8
|
-
return {
|
|
9
|
-
firstRowScrollRef,
|
|
10
|
-
firstRowStackRef,
|
|
11
|
-
secondRowScrollRef,
|
|
12
|
-
blockScrollRef: useRef(null),
|
|
13
|
-
blockFirstRowStackRef: useRef(null),
|
|
14
|
-
scrollRefs: useMemo(() => shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef], [shouldShowTwoRows])
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
//#endregion
|
|
19
|
-
export { useCarouselRefs };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
//#region src/components/PromptCarousel/hooks/useGetScrollProperties.ts
|
|
3
|
-
const useGetScrollProperties = () => {
|
|
4
|
-
return {
|
|
5
|
-
scrollClasses: [
|
|
6
|
-
"envive-tw-overflow-x-scroll",
|
|
7
|
-
"envive-tw-overflow-y-hidden",
|
|
8
|
-
"[&::-webkit-scrollbar]:hidden"
|
|
9
|
-
],
|
|
10
|
-
scrollStyle: {
|
|
11
|
-
scrollbarWidth: "none",
|
|
12
|
-
msOverflowStyle: "none"
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
//#endregion
|
|
18
|
-
exports.useGetScrollProperties = useGetScrollProperties;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
//#region src/components/PromptCarousel/hooks/useGetScrollProperties.ts
|
|
2
|
-
const useGetScrollProperties = () => {
|
|
3
|
-
return {
|
|
4
|
-
scrollClasses: [
|
|
5
|
-
"envive-tw-overflow-x-scroll",
|
|
6
|
-
"envive-tw-overflow-y-hidden",
|
|
7
|
-
"[&::-webkit-scrollbar]:hidden"
|
|
8
|
-
],
|
|
9
|
-
scrollStyle: {
|
|
10
|
-
scrollbarWidth: "none",
|
|
11
|
-
msOverflowStyle: "none"
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
//#endregion
|
|
17
|
-
export { useGetScrollProperties };
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const require_PromptCarousel_types_types = require('../types/types.cjs');
|
|
3
|
-
let react = require("react");
|
|
4
|
-
|
|
5
|
-
//#region src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts
|
|
6
|
-
function useHorizontalScrollAnimation(scrollContainerRefs, onStopAll, animationSpeed = "none") {
|
|
7
|
-
const animationRefs = (0, react.useRef)([]);
|
|
8
|
-
const lastTimestampRefs = (0, react.useRef)([]);
|
|
9
|
-
const accumulatedScrollRefs = (0, react.useRef)([]);
|
|
10
|
-
const isStoppedRef = (0, react.useRef)(false);
|
|
11
|
-
(0, react.useEffect)(() => {
|
|
12
|
-
if (animationSpeed === require_PromptCarousel_types_types.AnimationSpeed.NONE) return;
|
|
13
|
-
const containers = scrollContainerRefs.map((ref) => ref.current).filter((container) => container !== null);
|
|
14
|
-
if (containers.length === 0) return;
|
|
15
|
-
animationRefs.current = containers.map(() => null);
|
|
16
|
-
lastTimestampRefs.current = containers.map(() => null);
|
|
17
|
-
accumulatedScrollRefs.current = containers.map(() => 0);
|
|
18
|
-
const PIXELS_PER_SECOND = animationSpeed === require_PromptCarousel_types_types.AnimationSpeed.FAST ? 60 : 30;
|
|
19
|
-
const cancelAllAnimations = () => {
|
|
20
|
-
animationRefs.current.forEach((rafId) => {
|
|
21
|
-
if (rafId !== null) cancelAnimationFrame(rafId);
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
const createAnimationLoop = (index) => {
|
|
25
|
-
const step = (timestamp) => {
|
|
26
|
-
if (isStoppedRef.current) return;
|
|
27
|
-
const container = containers[index];
|
|
28
|
-
if (!container || container.scrollWidth <= container.clientWidth) {
|
|
29
|
-
animationRefs.current[index] = requestAnimationFrame(step);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
if (lastTimestampRefs.current[index] === null) lastTimestampRefs.current[index] = timestamp;
|
|
33
|
-
const delta = timestamp - lastTimestampRefs.current[index];
|
|
34
|
-
lastTimestampRefs.current[index] = timestamp;
|
|
35
|
-
accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1e3);
|
|
36
|
-
const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
|
|
37
|
-
if (pixelsToScroll > 0) {
|
|
38
|
-
const newScrollLeft = container.scrollLeft + pixelsToScroll;
|
|
39
|
-
const maxScroll = container.scrollWidth - container.clientWidth;
|
|
40
|
-
if (Math.ceil(newScrollLeft) >= maxScroll) {
|
|
41
|
-
container.scrollLeft = 0;
|
|
42
|
-
accumulatedScrollRefs.current[index] = 0;
|
|
43
|
-
} else {
|
|
44
|
-
container.scrollLeft = newScrollLeft;
|
|
45
|
-
accumulatedScrollRefs.current[index] -= pixelsToScroll;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (!isStoppedRef.current) animationRefs.current[index] = requestAnimationFrame(step);
|
|
49
|
-
};
|
|
50
|
-
return step;
|
|
51
|
-
};
|
|
52
|
-
containers.forEach((container, index) => {
|
|
53
|
-
animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
|
|
54
|
-
});
|
|
55
|
-
const handleMouseEnter = (event) => {
|
|
56
|
-
isStoppedRef.current = true;
|
|
57
|
-
onStopAll(event.clientX, event.clientY);
|
|
58
|
-
cancelAllAnimations();
|
|
59
|
-
};
|
|
60
|
-
containers.forEach((container) => {
|
|
61
|
-
container.addEventListener("mouseenter", handleMouseEnter);
|
|
62
|
-
});
|
|
63
|
-
return () => {
|
|
64
|
-
isStoppedRef.current = true;
|
|
65
|
-
cancelAllAnimations();
|
|
66
|
-
containers.forEach((container) => {
|
|
67
|
-
container.removeEventListener("mouseenter", handleMouseEnter);
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
}, [
|
|
71
|
-
animationSpeed,
|
|
72
|
-
scrollContainerRefs,
|
|
73
|
-
onStopAll
|
|
74
|
-
]);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
//#endregion
|
|
78
|
-
exports.useHorizontalScrollAnimation = useHorizontalScrollAnimation;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { AnimationSpeed } from "../types/types.js";
|
|
2
|
-
import { useEffect, useRef } from "react";
|
|
3
|
-
|
|
4
|
-
//#region src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts
|
|
5
|
-
function useHorizontalScrollAnimation(scrollContainerRefs, onStopAll, animationSpeed = "none") {
|
|
6
|
-
const animationRefs = useRef([]);
|
|
7
|
-
const lastTimestampRefs = useRef([]);
|
|
8
|
-
const accumulatedScrollRefs = useRef([]);
|
|
9
|
-
const isStoppedRef = useRef(false);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (animationSpeed === AnimationSpeed.NONE) return;
|
|
12
|
-
const containers = scrollContainerRefs.map((ref) => ref.current).filter((container) => container !== null);
|
|
13
|
-
if (containers.length === 0) return;
|
|
14
|
-
animationRefs.current = containers.map(() => null);
|
|
15
|
-
lastTimestampRefs.current = containers.map(() => null);
|
|
16
|
-
accumulatedScrollRefs.current = containers.map(() => 0);
|
|
17
|
-
const PIXELS_PER_SECOND = animationSpeed === AnimationSpeed.FAST ? 60 : 30;
|
|
18
|
-
const cancelAllAnimations = () => {
|
|
19
|
-
animationRefs.current.forEach((rafId) => {
|
|
20
|
-
if (rafId !== null) cancelAnimationFrame(rafId);
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
const createAnimationLoop = (index) => {
|
|
24
|
-
const step = (timestamp) => {
|
|
25
|
-
if (isStoppedRef.current) return;
|
|
26
|
-
const container = containers[index];
|
|
27
|
-
if (!container || container.scrollWidth <= container.clientWidth) {
|
|
28
|
-
animationRefs.current[index] = requestAnimationFrame(step);
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
if (lastTimestampRefs.current[index] === null) lastTimestampRefs.current[index] = timestamp;
|
|
32
|
-
const delta = timestamp - lastTimestampRefs.current[index];
|
|
33
|
-
lastTimestampRefs.current[index] = timestamp;
|
|
34
|
-
accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1e3);
|
|
35
|
-
const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
|
|
36
|
-
if (pixelsToScroll > 0) {
|
|
37
|
-
const newScrollLeft = container.scrollLeft + pixelsToScroll;
|
|
38
|
-
const maxScroll = container.scrollWidth - container.clientWidth;
|
|
39
|
-
if (Math.ceil(newScrollLeft) >= maxScroll) {
|
|
40
|
-
container.scrollLeft = 0;
|
|
41
|
-
accumulatedScrollRefs.current[index] = 0;
|
|
42
|
-
} else {
|
|
43
|
-
container.scrollLeft = newScrollLeft;
|
|
44
|
-
accumulatedScrollRefs.current[index] -= pixelsToScroll;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
if (!isStoppedRef.current) animationRefs.current[index] = requestAnimationFrame(step);
|
|
48
|
-
};
|
|
49
|
-
return step;
|
|
50
|
-
};
|
|
51
|
-
containers.forEach((container, index) => {
|
|
52
|
-
animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
|
|
53
|
-
});
|
|
54
|
-
const handleMouseEnter = (event) => {
|
|
55
|
-
isStoppedRef.current = true;
|
|
56
|
-
onStopAll(event.clientX, event.clientY);
|
|
57
|
-
cancelAllAnimations();
|
|
58
|
-
};
|
|
59
|
-
containers.forEach((container) => {
|
|
60
|
-
container.addEventListener("mouseenter", handleMouseEnter);
|
|
61
|
-
});
|
|
62
|
-
return () => {
|
|
63
|
-
isStoppedRef.current = true;
|
|
64
|
-
cancelAllAnimations();
|
|
65
|
-
containers.forEach((container) => {
|
|
66
|
-
container.removeEventListener("mouseenter", handleMouseEnter);
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
}, [
|
|
70
|
-
animationSpeed,
|
|
71
|
-
scrollContainerRefs,
|
|
72
|
-
onStopAll
|
|
73
|
-
]);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
//#endregion
|
|
77
|
-
export { useHorizontalScrollAnimation };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import classNames from 'classnames';
|
|
2
|
-
import { useGetScrollProperties } from '../hooks/useGetScrollProperties';
|
|
3
|
-
|
|
4
|
-
interface BlockScrollContainerProps {
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
scrollRef: React.RefObject<HTMLDivElement>;
|
|
7
|
-
className?: string;
|
|
8
|
-
'aria-label'?: string;
|
|
9
|
-
'aria-labelledby'?: string;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export const BlockScrollContainer = ({
|
|
13
|
-
children,
|
|
14
|
-
scrollRef,
|
|
15
|
-
className,
|
|
16
|
-
'aria-label': ariaLabel,
|
|
17
|
-
'aria-labelledby': ariaLabelledBy,
|
|
18
|
-
}: BlockScrollContainerProps) => {
|
|
19
|
-
const { scrollStyle, scrollClasses } = useGetScrollProperties();
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<div
|
|
23
|
-
ref={scrollRef}
|
|
24
|
-
className={classNames(...scrollClasses, className)}
|
|
25
|
-
style={scrollStyle}
|
|
26
|
-
role="group"
|
|
27
|
-
aria-label={ariaLabel}
|
|
28
|
-
aria-labelledby={ariaLabelledBy}
|
|
29
|
-
tabIndex={0}
|
|
30
|
-
>
|
|
31
|
-
{children}
|
|
32
|
-
</div>
|
|
33
|
-
);
|
|
34
|
-
};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import classNames from 'classnames';
|
|
2
|
-
import { Stack } from '../../Stack';
|
|
3
|
-
import { useGetScrollProperties } from '../hooks/useGetScrollProperties';
|
|
4
|
-
|
|
5
|
-
export interface ButtonContainerRowProps {
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
scrollRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
-
stackRef?: React.RefObject<HTMLDivElement>;
|
|
9
|
-
className?: string;
|
|
10
|
-
'aria-label'?: string;
|
|
11
|
-
'aria-labelledby'?: string;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const ButtonContainerRow = ({
|
|
15
|
-
children,
|
|
16
|
-
scrollRef,
|
|
17
|
-
stackRef,
|
|
18
|
-
className,
|
|
19
|
-
'aria-label': ariaLabel,
|
|
20
|
-
'aria-labelledby': ariaLabelledBy,
|
|
21
|
-
}: ButtonContainerRowProps) => {
|
|
22
|
-
const { scrollStyle, scrollClasses } = useGetScrollProperties();
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<div
|
|
26
|
-
ref={scrollRef}
|
|
27
|
-
className={classNames(...scrollClasses, className)}
|
|
28
|
-
style={scrollStyle}
|
|
29
|
-
role="group"
|
|
30
|
-
aria-label={ariaLabel}
|
|
31
|
-
aria-labelledby={ariaLabelledBy}
|
|
32
|
-
tabIndex={0}
|
|
33
|
-
>
|
|
34
|
-
<div ref={stackRef}>
|
|
35
|
-
<Stack
|
|
36
|
-
direction="row"
|
|
37
|
-
align="center"
|
|
38
|
-
gap="2"
|
|
39
|
-
className="envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap"
|
|
40
|
-
>
|
|
41
|
-
{children}
|
|
42
|
-
</Stack>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
);
|
|
46
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { Stack } from '../../Stack';
|
|
2
|
-
import { BlockScrollContainer } from './BlockScrollContainer';
|
|
3
|
-
import { RepetitionNumberSuffix } from '../types/types';
|
|
4
|
-
|
|
5
|
-
export interface CarouselContentWithBlockScrollProps {
|
|
6
|
-
visibleButtonsFirstRow: string[];
|
|
7
|
-
visibleButtonsSecondRow: string[];
|
|
8
|
-
shouldShowTwoRows: boolean;
|
|
9
|
-
renderButton: (
|
|
10
|
-
text: string,
|
|
11
|
-
index: number,
|
|
12
|
-
repetitionNumber?: `${RepetitionNumberSuffix}`,
|
|
13
|
-
) => React.ReactNode;
|
|
14
|
-
isAnimated: boolean;
|
|
15
|
-
isAnimationStopped: boolean;
|
|
16
|
-
blockScrollRef: React.RefObject<HTMLDivElement>;
|
|
17
|
-
blockFirstRowStackRef: React.RefObject<HTMLDivElement>;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export const CarouselContentWithBlockScroll = ({
|
|
21
|
-
visibleButtonsFirstRow,
|
|
22
|
-
visibleButtonsSecondRow,
|
|
23
|
-
shouldShowTwoRows,
|
|
24
|
-
renderButton,
|
|
25
|
-
isAnimated,
|
|
26
|
-
isAnimationStopped,
|
|
27
|
-
blockScrollRef,
|
|
28
|
-
blockFirstRowStackRef,
|
|
29
|
-
}: CarouselContentWithBlockScrollProps) => {
|
|
30
|
-
const showRepetitions = isAnimated && isAnimationStopped;
|
|
31
|
-
|
|
32
|
-
const renderRowButtons = (buttons: string[], startIndex: number) => (
|
|
33
|
-
<>
|
|
34
|
-
{buttons.map((text, index) => renderButton(text, startIndex + index))}
|
|
35
|
-
{showRepetitions &&
|
|
36
|
-
buttons.map((text, index) =>
|
|
37
|
-
renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
|
|
38
|
-
)}
|
|
39
|
-
{showRepetitions &&
|
|
40
|
-
buttons.map((text, index) =>
|
|
41
|
-
renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
|
|
42
|
-
)}
|
|
43
|
-
</>
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
return (
|
|
47
|
-
<BlockScrollContainer
|
|
48
|
-
scrollRef={blockScrollRef}
|
|
49
|
-
aria-label="Scrollable prompt buttons"
|
|
50
|
-
>
|
|
51
|
-
<Stack
|
|
52
|
-
direction="column"
|
|
53
|
-
gap="2"
|
|
54
|
-
className="envive-tw-w-max"
|
|
55
|
-
>
|
|
56
|
-
<div
|
|
57
|
-
ref={blockFirstRowStackRef}
|
|
58
|
-
role={shouldShowTwoRows ? 'group' : undefined}
|
|
59
|
-
aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
|
|
60
|
-
>
|
|
61
|
-
<Stack
|
|
62
|
-
direction="row"
|
|
63
|
-
gap="2"
|
|
64
|
-
className="envive-tw-whitespace-nowrap"
|
|
65
|
-
>
|
|
66
|
-
{renderRowButtons(visibleButtonsFirstRow, 0)}
|
|
67
|
-
</Stack>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
{shouldShowTwoRows && visibleButtonsSecondRow.length > 0 && (
|
|
71
|
-
<Stack
|
|
72
|
-
direction="row"
|
|
73
|
-
gap="2"
|
|
74
|
-
className="envive-tw-whitespace-nowrap"
|
|
75
|
-
aria-label="Second row of prompt buttons"
|
|
76
|
-
>
|
|
77
|
-
{renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
|
|
78
|
-
</Stack>
|
|
79
|
-
)}
|
|
80
|
-
</Stack>
|
|
81
|
-
</BlockScrollContainer>
|
|
82
|
-
);
|
|
83
|
-
};
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { Stack } from '../../Stack';
|
|
2
|
-
import { ButtonContainerRow } from './ButtonContainerRow';
|
|
3
|
-
import { RepetitionNumberSuffix } from '../types/types';
|
|
4
|
-
|
|
5
|
-
export interface CarouselContentWithRowScrollProps {
|
|
6
|
-
visibleButtonsFirstRow: string[];
|
|
7
|
-
visibleButtonsSecondRow: string[];
|
|
8
|
-
shouldShowTwoRows: boolean;
|
|
9
|
-
renderButton: (
|
|
10
|
-
text: string,
|
|
11
|
-
index: number,
|
|
12
|
-
repetitionNumber?: `${RepetitionNumberSuffix}`,
|
|
13
|
-
) => React.ReactNode;
|
|
14
|
-
isAnimated: boolean;
|
|
15
|
-
isAnimationStopped: boolean;
|
|
16
|
-
firstRowScrollRef: React.RefObject<HTMLDivElement>;
|
|
17
|
-
firstRowStackRef: React.RefObject<HTMLDivElement>;
|
|
18
|
-
secondRowScrollRef: React.RefObject<HTMLDivElement>;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const CarouselContentWithRowScroll = ({
|
|
22
|
-
visibleButtonsFirstRow,
|
|
23
|
-
visibleButtonsSecondRow,
|
|
24
|
-
shouldShowTwoRows,
|
|
25
|
-
isAnimated,
|
|
26
|
-
isAnimationStopped,
|
|
27
|
-
renderButton,
|
|
28
|
-
firstRowScrollRef,
|
|
29
|
-
firstRowStackRef,
|
|
30
|
-
secondRowScrollRef,
|
|
31
|
-
}: CarouselContentWithRowScrollProps) => {
|
|
32
|
-
const showRepetitions = isAnimated && !isAnimationStopped;
|
|
33
|
-
|
|
34
|
-
const renderRowButtons = (buttons: string[], startIndex: number) => (
|
|
35
|
-
<>
|
|
36
|
-
{buttons.map((text, index) => renderButton(text, startIndex + index))}
|
|
37
|
-
{showRepetitions &&
|
|
38
|
-
buttons.map((text, index) =>
|
|
39
|
-
renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
|
|
40
|
-
)}
|
|
41
|
-
{showRepetitions &&
|
|
42
|
-
buttons.map((text, index) =>
|
|
43
|
-
renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
|
|
44
|
-
)}
|
|
45
|
-
</>
|
|
46
|
-
);
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<Stack
|
|
50
|
-
direction="column"
|
|
51
|
-
gap="2"
|
|
52
|
-
>
|
|
53
|
-
<ButtonContainerRow
|
|
54
|
-
scrollRef={firstRowScrollRef}
|
|
55
|
-
stackRef={firstRowStackRef}
|
|
56
|
-
aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
|
|
57
|
-
>
|
|
58
|
-
{renderRowButtons(visibleButtonsFirstRow, 0)}
|
|
59
|
-
</ButtonContainerRow>
|
|
60
|
-
|
|
61
|
-
{shouldShowTwoRows && (
|
|
62
|
-
<ButtonContainerRow
|
|
63
|
-
scrollRef={secondRowScrollRef}
|
|
64
|
-
aria-label="Second row of prompt buttons"
|
|
65
|
-
>
|
|
66
|
-
{renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
|
|
67
|
-
</ButtonContainerRow>
|
|
68
|
-
)}
|
|
69
|
-
</Stack>
|
|
70
|
-
);
|
|
71
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { CarouselContentWithRowScroll } from './CarouselContentWithRowScroll';
|
|
2
|
-
import { CarouselContentWithBlockScroll } from './CarouselContentWithBlockScroll';
|
|
3
|
-
import { ButtonContainerRow } from './ButtonContainerRow';
|
|
4
|
-
|
|
5
|
-
export const PromptCarouselComponents = {
|
|
6
|
-
CarouselContentWithRowScroll,
|
|
7
|
-
CarouselContentWithBlockScroll,
|
|
8
|
-
ButtonContainerRow,
|
|
9
|
-
};
|