@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/hooks/useSlideshowControls.js

@@ -0,0 +1,105 @@
+import { useId } from "./useId.js";
+import { useInterval } from "./useInterval.js";
+import { AUTOPLAY_DEFAULT_INTERVAL } from "../components/slideshow/constants.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/hooks/useSlideshowControls.ts
+var DEFAULT_OPTIONS = {
+	activeIndex: 0,
+	groupBy: 1,
+	interval: AUTOPLAY_DEFAULT_INTERVAL
+};
+var useSlideshowControls = ({ activeIndex = DEFAULT_OPTIONS.activeIndex, groupBy = DEFAULT_OPTIONS.groupBy, interval = DEFAULT_OPTIONS.interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId }) => {
+	const [currentIndex, setCurrentIndex] = useState(activeIndex);
+	const [element, setElement] = useState(null);
+	const slidesCount = Math.ceil(itemsCount / Math.min(groupBy, itemsCount));
+	const goToNextSlide = useCallback((loopback = true) => {
+		setCurrentIndex((index) => {
+			if (loopback && index === slidesCount - 1) return 0;
+			if (index < slidesCount - 1) return index + 1;
+			return index;
+		});
+	}, [slidesCount, setCurrentIndex]);
+	const goToPreviousSlide = useCallback((loopback = true) => {
+		setCurrentIndex((index) => {
+			if (loopback && index === 0) return slidesCount - 1;
+			if (index > 0) return index - 1;
+			return index;
+		});
+	}, [slidesCount, setCurrentIndex]);
+	const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
+	const [isForcePaused, setIsForcePaused] = useState(false);
+	const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
+	useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null);
+	useEffect(() => {
+		if (currentIndex > slidesCount - 1) setCurrentIndex(defaultActiveIndex);
+	}, [
+		currentIndex,
+		slidesCount,
+		defaultActiveIndex
+	]);
+	const startAutoPlay = () => {
+		setIsAutoPlaying(Boolean(autoPlay));
+	};
+	const stopAutoPlay = () => {
+		setIsAutoPlaying(false);
+	};
+	const onPaginationClick = useCallback((index) => {
+		stopAutoPlay();
+		setIsForcePaused(true);
+		if (index >= 0 && index < slidesCount) setCurrentIndex(index);
+	}, [slidesCount, setCurrentIndex]);
+	const onNextClick = useCallback((loopback = true) => {
+		stopAutoPlay();
+		setIsForcePaused(true);
+		goToNextSlide(loopback);
+	}, [goToNextSlide]);
+	const onPreviousClick = useCallback((loopback = true) => {
+		stopAutoPlay();
+		setIsForcePaused(true);
+		goToPreviousSlide(loopback);
+	}, [goToPreviousSlide]);
+	useEffect(() => {
+		setCurrentIndex(activeIndex);
+	}, [activeIndex]);
+	useEffect(() => {
+		if (!onChange) return;
+		onChange(currentIndex);
+	}, [currentIndex, onChange]);
+	const generatedSlideshowId = useId();
+	const slideshowId = id || generatedSlideshowId;
+	const generatedSlidesId = useId();
+	const slideshowSlidesId = slidesId || generatedSlidesId;
+	const toggleAutoPlay = () => {
+		if (isSlideshowAutoPlaying) stopAutoPlay();
+		else startAutoPlay();
+	};
+	const toggleForcePause = () => {
+		const shouldBePaused = !isForcePaused;
+		setIsForcePaused(shouldBePaused);
+		if (!shouldBePaused) startAutoPlay();
+		else stopAutoPlay();
+	};
+	const startIndexVisible = currentIndex * groupBy;
+	return {
+		startIndexVisible,
+		endIndexVisible: startIndexVisible + groupBy,
+		setSlideshow: setElement,
+		slideshow: element,
+		slideshowId,
+		slideshowSlidesId,
+		onPreviousClick,
+		onNextClick,
+		onPaginationClick,
+		isAutoPlaying: isSlideshowAutoPlaying,
+		toggleAutoPlay,
+		activeIndex: currentIndex,
+		slidesCount,
+		setActiveIndex: setCurrentIndex,
+		startAutoPlay,
+		stopAutoPlay,
+		isForcePaused,
+		toggleForcePause
+	};
+};
+//#endregion
+export { DEFAULT_OPTIONS, useSlideshowControls };

package/_internal/hooks/useStopPropagation.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import isFunction from "lodash/isFunction.js";
+//#region src/hooks/useStopPropagation.ts
+/**
+* Wrap mouse event handler to stop event propagation.
+*
+* @param  handler   The mouse handler to wrap.
+* @return Mouse handler stopping propagation.
+*/
+function useStopPropagation(handler) {
+	return useCallback((evt) => {
+		if (!evt || !isFunction(handler)) return;
+		handler(evt);
+		evt.stopPropagation();
+	}, [handler]);
+}
+//#endregion
+export { useStopPropagation };

package/_internal/hooks/useTransitionVisibility.js

@@ -0,0 +1,41 @@
+import { isReducedMotion } from "../utils/browser/isReducedMotion.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/useTransitionVisibility.ts
+/**
+* Returns true if the component is visible tracking the opacity transition.
+*
+* @param ref Element on which to listen the transition event.
+* @param isComponentVisible Whether the component intends to be visible or not.
+* @param onVisibilityChange Callback called when the visibility changes.
+* @return true if the component should be rendered
+*/
+var useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityChange) => {
+	const [isVisible, setVisible] = useState(isComponentVisible);
+	const previousVisibility = useRef(isVisible);
+	useEffect(() => {
+		if (isComponentVisible) {
+			setVisible(true);
+			return;
+		}
+		const { current: element } = ref;
+		if (!element || !window.TransitionEvent || isReducedMotion()) {
+			setVisible(false);
+			return;
+		}
+		const timer = setTimeout(() => setVisible(false), timeout);
+		return () => clearTimeout(timer);
+	}, [
+		isComponentVisible,
+		ref,
+		timeout
+	]);
+	useEffect(() => {
+		if (onVisibilityChange && previousVisibility.current !== isVisible) {
+			onVisibilityChange(isVisible);
+			previousVisibility.current = isVisible;
+		}
+	}, [isVisible, onVisibilityChange]);
+	return isVisible || isComponentVisible;
+};
+//#endregion
+export { useTransitionVisibility };