react-spring-carousel 3.0.0-beta055 → 3.0.0-beta056

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.
@@ -1 +1 @@
1
- {"version":3,"file":"useSpringCarousel.js","sources":["../../src/useSpringCarousel.tsx"],"sourcesContent":["import { config, useSpring } from '@react-spring/web'\nimport React, {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react'\n\nimport { useEventsModule } from './modules/useEventsModule'\nimport { useDrag } from '@use-gesture/react'\nimport { useFullscreenModule } from './modules/useFullscreenModule'\nimport { useThumbsModule } from './modules/useThumbsModule'\nimport ResizeObserver from 'resize-observer-polyfill'\n\nimport {\n SlideActionType,\n SlideMode,\n UseSpringCarouselComplete,\n UseSpringCarouselWithFreeScroll,\n UseSpringCarouselWithThumbs,\n UseSpringCarouselWithNoThumbs,\n UseSpringCarouselWithNoFixedItems,\n UseSpringCarouselWithFixedItems,\n UseSpringFreeScrollReturnType,\n UseSpringReturnType,\n SlideType,\n ItemWithThumb,\n} from './types'\n\ntype ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType\n\n/**\n * With free scroll\n */\nfunction useSpringCarousel(props: UseSpringCarouselWithFreeScroll): ReturnType<true>\nfunction useSpringCarousel(props: UseSpringCarouselWithThumbs<true>): ReturnType<true>\nfunction useSpringCarousel(props: UseSpringCarouselWithNoThumbs<true>): ReturnType<true>\n/**\n * No free scroll\n */\nfunction useSpringCarousel(props: UseSpringCarouselWithThumbs<false>): ReturnType<false>\nfunction useSpringCarousel(props: UseSpringCarouselWithNoThumbs<false>): ReturnType<false>\nfunction useSpringCarousel(\n props: UseSpringCarouselWithFixedItems<false>,\n): ReturnType<false>\nfunction useSpringCarousel(\n props: UseSpringCarouselWithNoFixedItems<false>,\n): ReturnType<false>\n\nfunction useSpringCarousel({\n items,\n init = true,\n withThumbs,\n thumbsSlideAxis = 'x',\n itemsPerSlide: _itemsPerSlide = 1,\n slideType = 'fixed',\n gutter = 0,\n withLoop = false,\n startEndGutter = 0,\n carouselSlideAxis = 'x',\n disableGestures = false,\n draggingSlideTreshold: _draggingSlideTreshold,\n slideWhenThresholdIsReached = false,\n freeScroll,\n enableFreeScrollDrag,\n initialStartingPosition,\n prepareThumbsData,\n initialActiveItem = 0,\n animateWhenActiveItemChange = true,\n getControllerRef,\n}: UseSpringCarouselComplete): ReturnType<typeof freeScroll> {\n const itemsPerSlide = _itemsPerSlide > items.length ? items.length : _itemsPerSlide\n\n const resizeByPropChange = useRef(false)\n const draggingSlideTreshold = useRef(_draggingSlideTreshold ?? 0)\n const slideActionType = useRef<SlideActionType>('initial')\n const slideModeType = useRef<SlideMode>('initial')\n\n /**\n * After the user hits start/end edges of the carousel,\n * we check where the user is going. This is useful\n * to correctly resize the carousel when the carousel is going\n * backward after reaching the last item in fluid slide mode\n */\n const directionAfterReachingEdges =\n useRef<'forward' | 'backward' | 'initial'>('initial')\n\n const activeItem = useRef(initialActiveItem)\n const firstItemReached = useRef(initialActiveItem === 0)\n const lastItemReached = useRef(\n slideType === 'fixed' && initialActiveItem === items.length - 1,\n )\n const mainCarouselWrapperRef = useRef<HTMLDivElement | null>(null)\n const carouselTrackWrapperRef = useRef<HTMLDivElement | null>(null)\n\n const isFirstMount = useRef(true)\n\n const prevTotalScrollValue = useRef(0)\n const prevWindowWidth = useRef(0)\n const prevSlidedValue = useRef(0)\n const prevWithLoop = useRef(withLoop)\n const prevSlideType = useRef(slideType)\n const prevFreeScroll = useRef(freeScroll)\n const windowIsHidden = useRef(false)\n\n const getItems = useCallback(() => {\n if (withLoop) {\n return [\n ...items.map(i => ({\n ...i,\n id: `prev-repeated-item-${i.id}`,\n })),\n ...items,\n ...items.map(i => ({\n ...i,\n id: `next-repeated-item-${i.id}`,\n })),\n ]\n }\n return [...items]\n }, [items, withLoop])\n const internalItems = getItems()\n\n const [spring, setSpring] = useSpring(\n () => ({\n val: 0,\n pause: !init,\n onChange: ({ value }) => {\n if (freeScroll && mainCarouselWrapperRef.current) {\n if (carouselSlideAxis === 'x') {\n mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val)\n } else {\n mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val)\n }\n setStartEndItemReachedOnFreeScroll()\n } else if (carouselTrackWrapperRef.current) {\n if (carouselSlideAxis === 'x') {\n carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`\n } else {\n carouselTrackWrapperRef.current.style.transform = `translate3d(0px,${value.val}px,0px)`\n }\n }\n },\n }),\n [freeScroll],\n )\n const { emitEvent, useListenToCustomEvent } = useEventsModule<'use-spring'>()\n const { thumbsFragment, handleScroll } = useThumbsModule<'use-spring'>({\n withThumbs: !!withThumbs,\n thumbsSlideAxis,\n prepareThumbsData,\n items: items as ItemWithThumb<'use-spring'>[],\n renderThumbFnProps: {\n getIsActiveItem,\n getIsPrevItem,\n useListenToCustomEvent,\n getIsNextItem,\n },\n })\n const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({\n mainCarouselWrapperRef,\n handleResize: () => adjustCarouselWrapperPosition(),\n onFullScreenChange: val => {\n emitEvent({\n eventName: 'onFullscreenChange',\n isFullscreen: val,\n })\n },\n })\n\n function getItemStyles(isLastItem: boolean) {\n if (slideType === 'fixed' && !freeScroll) {\n return {\n marginRight: `${isLastItem ? 0 : gutter}px`,\n flex: `1 0 calc(100% / ${itemsPerSlide} - ${\n (gutter * (itemsPerSlide - 1)) / itemsPerSlide\n }px)`,\n }\n }\n return {\n ...{ marginRight: `${isLastItem ? 0 : gutter}px` },\n }\n }\n\n function getSlideValue() {\n const carouselItem = mainCarouselWrapperRef.current?.querySelector(\n '.use-spring-carousel-item',\n )\n\n if (!carouselItem) {\n throw Error('No carousel items available!')\n }\n\n return (\n carouselItem.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] + gutter\n )\n }\n\n type SlideToItem = {\n from: number\n to: number\n nextActiveItem?: number\n immediate?: boolean\n slideMode: SlideMode\n }\n\n function slideToItem({\n from,\n to,\n nextActiveItem,\n immediate = false,\n slideMode,\n }: SlideToItem) {\n slideModeType.current = slideMode\n\n if (typeof nextActiveItem === 'number') {\n if (!freeScroll) {\n activeItem.current = nextActiveItem\n }\n emitEvent({\n eventName: 'onSlideStartChange',\n slideActionType: slideActionType.current,\n slideMode: slideModeType.current,\n nextItem: {\n startReached: firstItemReached.current,\n endReached: lastItemReached.current,\n index: freeScroll ? -1 : activeItem.current,\n id: freeScroll ? '' : items[activeItem.current].id,\n },\n })\n }\n\n prevSlidedValue.current = to\n setSpring.start({\n immediate,\n from: {\n val: from,\n },\n to: {\n val: to,\n },\n config: {\n ...config.default,\n velocity: spring.val.velocity,\n },\n onRest(value) {\n if (!immediate && value.finished) {\n emitEvent({\n eventName: 'onSlideChange',\n slideActionType: slideActionType.current,\n slideMode: slideModeType.current,\n currentItem: {\n startReached: firstItemReached.current,\n endReached: lastItemReached.current,\n index: freeScroll ? -1 : activeItem.current,\n id: freeScroll ? '' : items[activeItem.current].id,\n },\n })\n }\n },\n })\n if (withThumbs && !immediate) {\n handleScroll(activeItem.current)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n function getTotalScrollValue() {\n if (withLoop) {\n return getSlideValue() * items.length\n }\n return Math.round(\n Number(\n carouselTrackWrapperRef.current?.[\n carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n ],\n ) -\n carouselTrackWrapperRef.current!.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] -\n startEndGutter * 2,\n )\n }\n function getAnimatedWrapperStyles() {\n const percentValue = `calc(100% - ${startEndGutter * 2}px)`\n return {\n width: carouselSlideAxis === 'x' ? percentValue : '100%',\n height: carouselSlideAxis === 'y' ? percentValue : '100%',\n }\n }\n\n function getCarouselItemWidth() {\n const carouselItem = carouselTrackWrapperRef.current?.querySelector(\n '.use-spring-carousel-item',\n )\n if (!carouselItem) {\n throw Error('No carousel items available!')\n }\n return (\n carouselItem.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] + gutter\n )\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n function adjustCarouselWrapperPosition() {\n const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top'\n\n function setPosition(v: number) {\n const ref = carouselTrackWrapperRef.current\n if (!ref) return\n\n if (withLoop) {\n ref.style.top = '0px'\n ref.style.left = '0px'\n ref.style[positionProperty] = `-${v - startEndGutter}px`\n\n firstItemReached.current = false\n lastItemReached.current = false\n } else {\n ref.style.left = '0px'\n ref.style.top = '0px'\n }\n }\n\n if (slideType === 'fixed' && withLoop) {\n if (initialStartingPosition === 'center') {\n setPosition(\n getCarouselItemWidth() * items.length -\n getSlideValue() * Math.round((itemsPerSlide - 1) / 2),\n )\n } else if (initialStartingPosition === 'end') {\n setPosition(\n getCarouselItemWidth() * items.length -\n getSlideValue() * Math.round(itemsPerSlide - 1),\n )\n } else {\n setPosition(getCarouselItemWidth() * items.length)\n }\n }\n\n if (slideType === 'fluid') {\n /**\n * User reached the last item and now is resizing the container that becomes smaller/bigger.\n * Example: on mobile devices the user rotates the device\n */\n if (\n lastItemReached.current &&\n getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&\n !withLoop\n ) {\n const newVal = -getTotalScrollValue()\n prevSlidedValue.current = newVal\n setSpring.start({\n immediate: true,\n val: prevSlidedValue.current,\n })\n return\n }\n\n if (\n Math.abs(prevSlidedValue.current) > 0 &&\n getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&\n !withLoop &&\n !freeScroll &&\n directionAfterReachingEdges.current === 'backward'\n ) {\n const diff = prevTotalScrollValue.current - getTotalScrollValue()\n const next = prevSlidedValue.current + diff\n\n setSpring.start({\n immediate: true,\n val: next,\n })\n\n return () => {\n prevSlidedValue.current = next\n }\n }\n\n return\n }\n\n if (!freeScroll && slideType === 'fixed') {\n const nextValue = -(getSlideValue() * activeItem.current)\n\n /**\n * Here we make sure to always show the latest item as the\n * latest item visible in the carousel viewport.\n */\n if (Math.abs(nextValue) > getTotalScrollValue() && !withLoop) {\n const val = -getTotalScrollValue()\n lastItemReached.current = true\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val: prevSlidedValue.current,\n })\n } else {\n prevSlidedValue.current = nextValue\n setSpring.start({\n immediate: true,\n val: nextValue,\n })\n }\n\n setTimeout(() => {\n resizeByPropChange.current = false\n }, 0)\n }\n }\n function getFromValue() {\n if (freeScroll && mainCarouselWrapperRef.current) {\n return mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ]\n }\n return spring.val.get()\n }\n function getToValue(type: 'next' | 'prev', index?: number) {\n if (freeScroll && type === 'next') {\n const next = prevSlidedValue.current + getSlideValue()\n if (next > getTotalScrollValue()) {\n return getTotalScrollValue()\n }\n return next\n }\n\n if (freeScroll && type === 'prev') {\n const next = prevSlidedValue.current - getSlideValue()\n if (next < 0) {\n return 0\n }\n return next\n }\n\n if (type === 'next') {\n if (typeof index === 'number') {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current - getSlideValue()\n }\n\n if (typeof index === 'number') {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current + getSlideValue()\n }\n\n type SlideToPrevNextItem = {\n type: SlideMode\n index?: number\n immediate?: boolean\n }\n function slideToPrevItem({ type, index, immediate }: SlideToPrevNextItem) {\n if (!init || windowIsHidden.current || (firstItemReached.current && !withLoop)) return\n\n if (lastItemReached.current) {\n directionAfterReachingEdges.current = 'backward'\n }\n\n slideActionType.current = 'prev'\n lastItemReached.current = false\n\n const nextItem = typeof index === 'number' ? index : activeItem.current - 1\n\n if (!withLoop) {\n const nextItemWillExceed = freeScroll\n ? getToValue('prev', index) - getSlideValue() / 3 < 0\n : getToValue('prev', index) + getSlideValue() / 3 > 0\n\n if (firstItemReached.current) return\n if (nextItemWillExceed) {\n firstItemReached.current = true\n lastItemReached.current = false\n\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: 0,\n nextActiveItem: 0,\n immediate,\n })\n return\n }\n }\n if (withLoop && (firstItemReached.current || nextItem < 0)) {\n firstItemReached.current = false\n lastItemReached.current = true\n slideToItem({\n slideMode: type,\n from: getFromValue() - getSlideValue() * items.length,\n to: -(getSlideValue() * items.length) + getSlideValue(),\n nextActiveItem: items.length - 1,\n immediate,\n })\n return\n }\n if (nextItem === 0) {\n firstItemReached.current = true\n }\n if (nextItem === items.length - 1 || nextItem === -1) {\n lastItemReached.current = true\n }\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: getToValue('prev', index),\n nextActiveItem: nextItem,\n immediate,\n })\n }\n function slideToNextItem({ type, index, immediate }: SlideToPrevNextItem) {\n if (!init || windowIsHidden.current || (lastItemReached.current && !withLoop)) return\n\n if (firstItemReached.current) {\n directionAfterReachingEdges.current = 'forward'\n }\n\n slideActionType.current = 'next'\n firstItemReached.current = false\n\n const nextItem = index || activeItem.current + 1\n\n if (!withLoop) {\n const nextItemWillExceed =\n Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3\n\n if (lastItemReached.current) return\n if (nextItemWillExceed) {\n firstItemReached.current = false\n lastItemReached.current = true\n\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: freeScroll ? getTotalScrollValue() : -getTotalScrollValue(),\n nextActiveItem: nextItem,\n immediate,\n })\n return\n }\n }\n if (withLoop && (lastItemReached.current || nextItem > items.length - 1)) {\n lastItemReached.current = false\n firstItemReached.current = true\n slideToItem({\n slideMode: type,\n from: getFromValue() + getSlideValue() * items.length,\n to: 0,\n nextActiveItem: 0,\n immediate,\n })\n return\n }\n if (nextItem === 0) {\n firstItemReached.current = true\n }\n if (nextItem === items.length - 1) {\n lastItemReached.current = true\n }\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: getToValue('next', index),\n nextActiveItem: nextItem,\n immediate,\n })\n }\n function getDraggingSliderTreshold() {\n if (_draggingSlideTreshold) {\n draggingSlideTreshold.current = _draggingSlideTreshold\n } else {\n draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2)\n }\n return draggingSlideTreshold.current\n }\n\n useEffect(() => {\n if (activeItem.current !== initialActiveItem) {\n internalSlideToItem({\n id: initialActiveItem,\n immediate: !animateWhenActiveItemChange,\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialActiveItem])\n useEffect(() => {\n if (init) {\n if (initialActiveItem > items.length - 1) {\n throw new Error(\n `initialActiveItem (${initialActiveItem}) is greater than the total quantity available items (${items.length}).`,\n )\n }\n if (itemsPerSlide > items.length) {\n console.warn(\n `itemsPerSlide (${itemsPerSlide}) is greater than the total quantity available items (${items.length}). Fallback to ${items.length})`,\n )\n }\n }\n }, [initialActiveItem, items, itemsPerSlide, init])\n useEffect(() => {\n prevWindowWidth.current = window.innerWidth\n }, [])\n useEffect(() => {\n prevTotalScrollValue.current = getTotalScrollValue()\n if (!isFirstMount.current) {\n resizeByPropChange.current = true\n adjustCarouselWrapperPosition()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n initialStartingPosition,\n itemsPerSlide,\n startEndGutter,\n gutter,\n init,\n getTotalScrollValue,\n ])\n useEffect(() => {\n /**\n * When these props change we reset the carousel\n */\n if (\n withLoop !== prevWithLoop.current ||\n slideType !== prevSlideType.current ||\n freeScroll !== prevFreeScroll.current\n ) {\n prevWithLoop.current = withLoop\n prevSlideType.current = slideType\n prevFreeScroll.current = freeScroll\n\n if (carouselTrackWrapperRef.current) {\n carouselTrackWrapperRef.current.style.transform = `translate3d(0px, 0px,0px)`\n setSpring.start({\n val: 0,\n immediate: true,\n })\n }\n\n internalSlideToItem({ id: 0, immediate: true, shouldReset: true })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [withLoop, slideType, freeScroll])\n useLayoutEffect(() => {\n /**\n * Set initial track position\n */\n if (carouselTrackWrapperRef.current) {\n adjustCarouselWrapperPosition()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n useEffect(() => {\n /**\n * When itemsPerSlide change we need to update the draggingSlideTreshold.current,\n * since it's default value is based on the calculation of the\n * width of a single item\n */\n getDraggingSliderTreshold()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_draggingSlideTreshold, itemsPerSlide, slideType])\n useEffect(() => {\n if (mainCarouselWrapperRef.current) {\n let timer: NodeJS.Timeout\n const observer = new ResizeObserver(() => {\n if (isFirstMount.current) {\n isFirstMount.current = false\n return\n }\n\n if (windowIsHidden.current) return\n if (!resizeByPropChange.current) {\n prevWindowWidth.current = window.innerWidth\n const cb = adjustCarouselWrapperPosition()\n window.clearTimeout(timer)\n\n timer = setTimeout(() => {\n prevTotalScrollValue.current = getTotalScrollValue()\n if (typeof cb === 'function') {\n cb()\n }\n }, 100)\n }\n })\n observer.observe(mainCarouselWrapperRef.current)\n return () => {\n observer.disconnect()\n }\n }\n }, [adjustCarouselWrapperPosition, getTotalScrollValue])\n useEffect(() => {\n if (!init) return\n function handleVisibilityChange() {\n if (document.hidden) {\n windowIsHidden.current = true\n } else {\n windowIsHidden.current = false\n }\n }\n document.addEventListener('visibilitychange', handleVisibilityChange)\n return () => {\n document.removeEventListener('visibilitychange', handleVisibilityChange)\n }\n }, [init])\n\n const bindDrag = useDrag(\n state => {\n const isDragging = state.dragging\n const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1]\n const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1]\n const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1]\n\n const prevItemTreshold = currentMovement > getDraggingSliderTreshold()\n const nextItemTreshold = currentMovement < -getDraggingSliderTreshold()\n const tot = getTotalScrollValue()\n\n if (isDragging) {\n if (direction > 0) {\n slideActionType.current = 'prev'\n } else {\n slideActionType.current = 'next'\n }\n\n emitEvent({\n ...state,\n eventName: 'onDrag',\n slideActionType: slideActionType.current,\n })\n\n if (freeScroll) {\n if (movement > 0) {\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: 0,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n state.cancel()\n return\n }\n\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: -movement,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n return\n }\n\n setSpring.start({\n val: movement,\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n\n if (slideWhenThresholdIsReached && nextItemTreshold) {\n slideToNextItem({ type: 'drag' })\n state.cancel()\n } else if (slideWhenThresholdIsReached && prevItemTreshold) {\n slideToPrevItem({ type: 'drag' })\n state.cancel()\n }\n\n const res = tot - Math.abs(movement)\n\n if (res < -(getSlideValue() * 2)) {\n state.cancel()\n }\n\n return\n }\n\n if (state.last && freeScroll && movement > 0) {\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: 0,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n return\n }\n if (state.last && !state.canceled && freeScroll) {\n if (slideActionType.current === 'prev') {\n slideToPrevItem({ type: 'drag' })\n }\n if (slideActionType.current === 'next') {\n slideToNextItem({ type: 'drag' })\n }\n }\n\n if (state.last && !state.canceled && !freeScroll) {\n if (nextItemTreshold) {\n if (!withLoop && lastItemReached.current) {\n setSpring.start({\n val: -getTotalScrollValue(),\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n } else {\n slideToNextItem({ type: 'drag' })\n }\n } else if (prevItemTreshold) {\n if (!withLoop && firstItemReached.current) {\n setSpring.start({\n val: 0,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n } else {\n slideToPrevItem({ type: 'drag' })\n }\n } else {\n setSpring.start({\n val: prevSlidedValue.current,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n }\n }\n if (state.last && state.canceled) {\n setSpring.start({\n val: prevSlidedValue.current,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n }\n },\n {\n enabled:\n (init && !disableGestures && !freeScroll) ||\n (!!freeScroll && !!enableFreeScrollDrag),\n axis: carouselSlideAxis,\n from: () => {\n if (freeScroll && mainCarouselWrapperRef.current) {\n return [\n -mainCarouselWrapperRef.current.scrollLeft,\n -mainCarouselWrapperRef.current.scrollTop,\n ]\n }\n if (carouselSlideAxis === 'x') {\n return [spring.val.get(), spring.val.get()]\n }\n return [spring.val.get(), spring.val.get()]\n },\n },\n )\n\n function getWrapperOverflowStyles() {\n if (freeScroll) {\n if (carouselSlideAxis === 'x') {\n return {\n overflowX: 'auto',\n }\n }\n return {\n overflowY: 'auto',\n }\n }\n return {}\n }\n\n function setStartEndItemReachedOnFreeScroll() {\n if (mainCarouselWrapperRef.current) {\n prevSlidedValue.current =\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ]\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] === 0\n ) {\n firstItemReached.current = true\n lastItemReached.current = false\n }\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] > 0 &&\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] < getTotalScrollValue()\n ) {\n firstItemReached.current = false\n lastItemReached.current = false\n }\n\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] === getTotalScrollValue()\n ) {\n firstItemReached.current = false\n lastItemReached.current = true\n }\n }\n }\n function getScrollHandlers() {\n if (freeScroll) {\n return {\n onWheel() {\n spring.val.stop()\n setStartEndItemReachedOnFreeScroll()\n },\n }\n }\n return {}\n }\n\n function findItemIndex(id: string | number, error?: string) {\n let itemIndex = 0\n\n if (typeof id === 'string') {\n itemIndex = items.findIndex(item => item.id === id)\n } else {\n itemIndex = id\n }\n if (itemIndex < 0 || itemIndex >= items.length) {\n if (error) {\n throw new Error(error)\n }\n console.error(\n `The item doesn't exist; check that the id provided - ${id} - is correct.`,\n )\n itemIndex = -1\n }\n\n return itemIndex\n }\n type InternalSlideToItem = {\n id: string | number\n immediate?: boolean\n shouldReset?: boolean\n type?: SlideType\n }\n function internalSlideToItem({\n id,\n immediate,\n shouldReset,\n type,\n }: InternalSlideToItem) {\n if (!init || windowIsHidden.current) return\n\n firstItemReached.current = false\n lastItemReached.current = false\n\n const itemIndex = findItemIndex(\n id,\n \"The item you want to slide to doesn't exist; check the provided id.\",\n )\n\n if (itemIndex === activeItem.current && !shouldReset) {\n return\n }\n\n const currentItem = findItemIndex(items[activeItem.current].id)\n const newActiveItem = findItemIndex(items[itemIndex].id)\n\n if (newActiveItem > currentItem) {\n slideToNextItem({\n type: type || shouldReset ? 'initial' : 'click',\n index: newActiveItem,\n immediate,\n })\n } else {\n slideToPrevItem({\n type: type || shouldReset ? 'initial' : 'click',\n index: newActiveItem,\n immediate,\n })\n }\n }\n function getIsNextItem(id: string | number) {\n const itemIndex = findItemIndex(id, \"The item doesn't exist; check the provided id.\")\n const _activeItem = activeItem.current\n if (withLoop && _activeItem === items.length - 1) {\n return itemIndex === 0\n }\n return itemIndex === _activeItem + 1\n }\n function getIsPrevItem(id: string | number) {\n const itemIndex = findItemIndex(id, \"The item doesn't exist; check the provided id.\")\n const _activeItem = activeItem.current\n if (withLoop && _activeItem === 0) {\n return itemIndex === items.length - 1\n }\n return itemIndex === _activeItem - 1\n }\n function getIsActiveItem(id: string | number) {\n return (\n findItemIndex(\n id,\n \"The item you want to check doesn't exist; check the provided id.\",\n ) === activeItem.current\n )\n }\n\n const res = freeScroll\n ? {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: (animate = true) => {\n slideToPrevItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToNextItem: (animate = true) => {\n slideToNextItem({\n type: 'click',\n immediate: !animate,\n })\n },\n }\n : {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: (animate = true) => {\n slideToPrevItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToNextItem: (animate = true) => {\n slideToNextItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToItem: (id: string | number, animate = true) => {\n internalSlideToItem({ id, immediate: !animate })\n },\n getIsNextItem,\n getIsPrevItem,\n getIsActiveItem,\n }\n\n useEffect(() => {\n if (getControllerRef) {\n getControllerRef({\n slideToNextItem: res.slideToNextItem,\n slideToPrevItem: res.slideToPrevItem,\n slideToItem: res?.slideToItem,\n })\n }\n }, [getControllerRef, res.slideToItem, res.slideToNextItem, res.slideToPrevItem])\n\n const _thumbsFragment = (\n <Context.Provider value={res}>{thumbsFragment}</Context.Provider>\n )\n const carouselFragment = (\n <Context.Provider value={res}>\n <div\n className=\"use-spring-carousel-main-wrapper\"\n ref={mainCarouselWrapperRef}\n {...getScrollHandlers()}\n style={{\n display: 'flex',\n position: 'relative',\n width: '100%',\n height: '100%',\n ...(getWrapperOverflowStyles() as React.CSSProperties),\n }}\n >\n <div\n className=\"use-spring-carousel-track-wrapper\"\n ref={carouselTrackWrapperRef}\n {...bindDrag()}\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',\n touchAction: 'none',\n ...getAnimatedWrapperStyles(),\n }}\n >\n {(freeScroll || !withLoop) && startEndGutter ? (\n <div\n style={{\n flexShrink: 0,\n width: startEndGutter,\n }}\n />\n ) : null}\n {internalItems.map((item, index) => {\n return (\n <div\n key={`${item.id}-${index}`}\n className=\"use-spring-carousel-item\"\n data-testid=\"use-spring-carousel-item-wrapper\"\n style={{\n display: 'flex',\n position: 'relative',\n flex: '1',\n ...getItemStyles(!!freeScroll && index === items.length - 1),\n }}\n >\n {typeof item.renderItem === 'function'\n ? item.renderItem({\n getIsActiveItem,\n getIsNextItem,\n getIsPrevItem,\n useListenToCustomEvent,\n })\n : item.renderItem}\n </div>\n )\n })}\n {freeScroll && startEndGutter ? (\n <div\n style={{\n flexShrink: 0,\n width: startEndGutter,\n }}\n />\n ) : null}\n </div>\n </div>\n </Context.Provider>\n )\n\n return { ...res, carouselFragment, thumbsFragment: _thumbsFragment }\n}\n\ntype ContextProps<T = undefined> = Omit<\n ReturnType<T extends 'free-scroll' ? true : false>,\n 'carouselFragment' | 'thumbsFragment'\n>\n\nconst Context =\n createContext<ContextProps | ContextProps<'free-scroll'> | undefined>(undefined)\n\nfunction useSpringCarouselContext<T>() {\n const context = useContext(Context)\n if (!context) {\n throw new Error('useSpringCarouselContext must be used within the carousel.')\n }\n return context as ContextProps<T>\n}\n\nexport { useSpringCarousel, useSpringCarouselContext }\n"],"names":["useSpringCarousel","items","init","withThumbs","thumbsSlideAxis","itemsPerSlide","_itemsPerSlide","slideType","gutter","withLoop","startEndGutter","carouselSlideAxis","disableGestures","draggingSlideTreshold","_draggingSlideTreshold","slideWhenThresholdIsReached","freeScroll","enableFreeScrollDrag","initialStartingPosition","prepareThumbsData","initialActiveItem","animateWhenActiveItemChange","getControllerRef","length","resizeByPropChange","useRef","slideActionType","slideModeType","directionAfterReachingEdges","activeItem","firstItemReached","lastItemReached","mainCarouselWrapperRef","carouselTrackWrapperRef","isFirstMount","prevTotalScrollValue","prevWindowWidth","prevSlidedValue","prevWithLoop","prevSlideType","prevFreeScroll","windowIsHidden","internalItems","useCallback","map","i","Object","assign","id","getItems","spring","setSpring","useSpring","val","pause","onChange","value","current","scrollLeft","Math","abs","scrollTop","setStartEndItemReachedOnFreeScroll","style","transform","emitEvent","useListenToCustomEvent","useEventsModule","thumbsFragment","handleScroll","useThumbsModule","renderThumbFnProps","getIsActiveItem","getIsPrevItem","getIsNextItem","enterFullscreen","exitFullscreen","getIsFullscreen","useFullscreenModule","handleResize","adjustCarouselWrapperPosition","onFullScreenChange","eventName","isFullscreen","getSlideValue","carouselItem","_a","querySelector","Error","getBoundingClientRect","slideToItem","from","to","nextActiveItem","immediate","slideMode","nextItem","startReached","endReached","index","start","config","default","velocity","onRest","finished","currentItem","getTotalScrollValue","round","Number","getCarouselItemWidth","positionProperty","setPosition","v","ref","top","left","nextValue","setTimeout","newVal","diff","next","getFromValue","get","getToValue","type","slideToPrevItem","nextItemWillExceed","slideToNextItem","getDraggingSliderTreshold","floor","useEffect","internalSlideToItem","console","warn","window","innerWidth","shouldReset","useLayoutEffect","timer","observer","ResizeObserver","cb","clearTimeout","observe","disconnect","document","addEventListener","handleVisibilityChange","removeEventListener","hidden","bindDrag","useDrag","state","isDragging","dragging","movement","offset","currentMovement","direction","prevItemTreshold","nextItemTreshold","tot","friction","tension","cancel","last","canceled","enabled","axis","findItemIndex","error","itemIndex","findIndex","item","newActiveItem","_activeItem","res","animate","_thumbsFragment","_jsx","Context","Provider","children","carouselFragment","className","onWheel","stop","display","position","width","height","overflowX","overflowY","_jsxs","flexDirection","touchAction","percentValue","getAnimatedWrapperStyles","flexShrink","flex","isLastItem","marginRight","renderItem","createContext","undefined","useSpringCarouselContext","context","useContext"],"mappings":"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"}
1
+ {"version":3,"file":"useSpringCarousel.js","sources":["../../src/useSpringCarousel.tsx"],"sourcesContent":["import { config, useSpring } from '@react-spring/web'\nimport React, {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react'\n\nimport { useEventsModule } from './modules/useEventsModule'\nimport { useDrag } from '@use-gesture/react'\nimport { useFullscreenModule } from './modules/useFullscreenModule'\nimport { useThumbsModule } from './modules/useThumbsModule'\nimport ResizeObserver from 'resize-observer-polyfill'\n\nimport {\n SlideActionType,\n SlideMode,\n UseSpringCarouselComplete,\n UseSpringCarouselWithFreeScroll,\n UseSpringCarouselWithThumbs,\n UseSpringCarouselWithNoThumbs,\n UseSpringCarouselWithNoFixedItems,\n UseSpringCarouselWithFixedItems,\n UseSpringFreeScrollReturnType,\n UseSpringReturnType,\n SlideType,\n ItemWithThumb,\n} from './types'\n\ntype ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType\n\n/**\n * With free scroll\n */\nfunction useSpringCarousel(props: UseSpringCarouselWithFreeScroll): ReturnType<true>\nfunction useSpringCarousel(props: UseSpringCarouselWithThumbs<true>): ReturnType<true>\nfunction useSpringCarousel(props: UseSpringCarouselWithNoThumbs<true>): ReturnType<true>\n/**\n * No free scroll\n */\nfunction useSpringCarousel(props: UseSpringCarouselWithThumbs<false>): ReturnType<false>\nfunction useSpringCarousel(props: UseSpringCarouselWithNoThumbs<false>): ReturnType<false>\nfunction useSpringCarousel(\n props: UseSpringCarouselWithFixedItems<false>,\n): ReturnType<false>\nfunction useSpringCarousel(\n props: UseSpringCarouselWithNoFixedItems<false>,\n): ReturnType<false>\n\nfunction useSpringCarousel({\n items,\n init = true,\n withThumbs,\n thumbsSlideAxis = 'x',\n itemsPerSlide: _itemsPerSlide = 1,\n slideType = 'fixed',\n gutter = 0,\n withLoop = false,\n startEndGutter = 0,\n carouselSlideAxis = 'x',\n disableGestures = false,\n draggingSlideTreshold: _draggingSlideTreshold,\n slideWhenThresholdIsReached = false,\n freeScroll,\n enableFreeScrollDrag,\n initialStartingPosition,\n prepareThumbsData,\n initialActiveItem = 0,\n animateWhenActiveItemChange = true,\n getControllerRef,\n}: UseSpringCarouselComplete): ReturnType<typeof freeScroll> {\n const itemsPerSlide = _itemsPerSlide > items.length ? items.length : _itemsPerSlide\n\n const resizeByPropChange = useRef(false)\n const draggingSlideTreshold = useRef(_draggingSlideTreshold ?? 0)\n const slideActionType = useRef<SlideActionType>('initial')\n const slideModeType = useRef<SlideMode>('initial')\n\n /**\n * After the user hits start/end edges of the carousel,\n * we check where the user is going. This is useful\n * to correctly resize the carousel when the carousel is going\n * backward after reaching the last item in fluid slide mode\n */\n const directionAfterReachingEdges = useRef<'forward' | 'backward' | 'initial'>(\n 'initial',\n )\n\n const activeItem = useRef(initialActiveItem)\n const firstItemReached = useRef(initialActiveItem === 0)\n const lastItemReached = useRef(\n slideType === 'fixed' && initialActiveItem === items.length - 1,\n )\n const mainCarouselWrapperRef = useRef<HTMLDivElement | null>(null)\n const carouselTrackWrapperRef = useRef<HTMLDivElement | null>(null)\n\n const isFirstMount = useRef(true)\n\n const prevTotalScrollValue = useRef(0)\n const prevWindowWidth = useRef(0)\n const prevSlidedValue = useRef(0)\n const prevWithLoop = useRef(withLoop)\n const prevSlideType = useRef(slideType)\n const prevFreeScroll = useRef(freeScroll)\n const windowIsHidden = useRef(false)\n\n const getItems = useCallback(() => {\n if (withLoop) {\n return [\n ...items.map(i => ({\n ...i,\n id: `prev-repeated-item-${i.id}`,\n })),\n ...items,\n ...items.map(i => ({\n ...i,\n id: `next-repeated-item-${i.id}`,\n })),\n ]\n }\n return [...items]\n }, [items, withLoop])\n const internalItems = getItems()\n\n const [spring, setSpring] = useSpring(\n () => ({\n val: 0,\n pause: !init,\n onChange: ({ value }) => {\n if (freeScroll && mainCarouselWrapperRef.current) {\n if (carouselSlideAxis === 'x') {\n mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val)\n } else {\n mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val)\n }\n setStartEndItemReachedOnFreeScroll()\n } else if (carouselTrackWrapperRef.current) {\n if (carouselSlideAxis === 'x') {\n carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`\n } else {\n carouselTrackWrapperRef.current.style.transform = `translate3d(0px,${value.val}px,0px)`\n }\n }\n },\n }),\n [freeScroll],\n )\n const { emitEvent, useListenToCustomEvent } = useEventsModule<'use-spring'>()\n const { thumbsFragment, handleScroll } = useThumbsModule<'use-spring'>({\n withThumbs: !!withThumbs,\n thumbsSlideAxis,\n prepareThumbsData,\n items: items as ItemWithThumb<'use-spring'>[],\n renderThumbFnProps: {\n getIsActiveItem,\n getIsPrevItem,\n useListenToCustomEvent,\n getIsNextItem,\n },\n })\n const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({\n mainCarouselWrapperRef,\n handleResize: () => adjustCarouselWrapperPosition(),\n onFullScreenChange: val => {\n emitEvent({\n eventName: 'onFullscreenChange',\n isFullscreen: val,\n })\n },\n })\n\n function getItemStyles(isLastItem: boolean) {\n if (slideType === 'fixed' && !freeScroll) {\n return {\n marginRight: `${isLastItem ? 0 : gutter}px`,\n flex: `1 0 calc(100% / ${itemsPerSlide} - ${\n (gutter * (itemsPerSlide - 1)) / itemsPerSlide\n }px)`,\n }\n }\n return {\n ...{ marginRight: `${isLastItem ? 0 : gutter}px` },\n }\n }\n\n function getSlideValue() {\n const carouselItem = mainCarouselWrapperRef.current?.querySelector(\n '.use-spring-carousel-item',\n )\n\n if (!carouselItem) {\n throw Error('No carousel items available!')\n }\n\n return (\n carouselItem.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] + gutter\n )\n }\n\n type SlideToItem = {\n from: number\n to: number\n nextActiveItem?: number\n immediate?: boolean\n slideMode: SlideMode\n }\n\n function slideToItem({\n from,\n to,\n nextActiveItem,\n immediate = false,\n slideMode,\n }: SlideToItem) {\n slideModeType.current = slideMode\n\n if (typeof nextActiveItem === 'number') {\n if (!freeScroll) {\n activeItem.current = nextActiveItem\n }\n emitEvent({\n eventName: 'onSlideStartChange',\n slideActionType: slideActionType.current,\n slideMode: slideModeType.current,\n nextItem: {\n startReached: firstItemReached.current,\n endReached: lastItemReached.current,\n index: freeScroll ? -1 : activeItem.current,\n id: freeScroll ? '' : items[activeItem.current].id,\n },\n })\n }\n\n prevSlidedValue.current = to\n setSpring.start({\n immediate,\n from: {\n val: from,\n },\n to: {\n val: to,\n },\n config: {\n ...config.default,\n velocity: spring.val.velocity,\n },\n onRest(value) {\n if (!immediate && value.finished) {\n emitEvent({\n eventName: 'onSlideChange',\n slideActionType: slideActionType.current,\n slideMode: slideModeType.current,\n currentItem: {\n startReached: firstItemReached.current,\n endReached: lastItemReached.current,\n index: freeScroll ? -1 : activeItem.current,\n id: freeScroll ? '' : items[activeItem.current].id,\n },\n })\n }\n },\n })\n if (withThumbs && !immediate) {\n handleScroll(activeItem.current)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n function getTotalScrollValue() {\n if (withLoop) {\n return getSlideValue() * items.length\n }\n return Math.round(\n Number(\n carouselTrackWrapperRef.current?.[\n carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n ],\n ) -\n carouselTrackWrapperRef.current!.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] -\n startEndGutter * 2,\n )\n }\n function getAnimatedWrapperStyles() {\n const percentValue = `calc(100% - ${startEndGutter * 2}px)`\n return {\n width: carouselSlideAxis === 'x' ? percentValue : '100%',\n height: carouselSlideAxis === 'y' ? percentValue : '100%',\n }\n }\n\n function getCarouselItemWidth() {\n const carouselItem = carouselTrackWrapperRef.current?.querySelector(\n '.use-spring-carousel-item',\n )\n if (!carouselItem) {\n throw Error('No carousel items available!')\n }\n return (\n carouselItem.getBoundingClientRect()[\n carouselSlideAxis === 'x' ? 'width' : 'height'\n ] + gutter\n )\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n function adjustCarouselWrapperPosition() {\n const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top'\n\n function setPosition(v: number) {\n const ref = carouselTrackWrapperRef.current\n if (!ref) return\n\n if (withLoop) {\n ref.style.top = '0px'\n ref.style.left = '0px'\n ref.style[positionProperty] = `-${v - startEndGutter}px`\n\n firstItemReached.current = false\n lastItemReached.current = false\n } else {\n ref.style.left = '0px'\n ref.style.top = '0px'\n }\n }\n\n if (slideType === 'fixed' && withLoop) {\n if (initialStartingPosition === 'center') {\n setPosition(\n getCarouselItemWidth() * items.length -\n getSlideValue() * Math.round((itemsPerSlide - 1) / 2),\n )\n } else if (initialStartingPosition === 'end') {\n setPosition(\n getCarouselItemWidth() * items.length -\n getSlideValue() * Math.round(itemsPerSlide - 1),\n )\n } else {\n setPosition(getCarouselItemWidth() * items.length)\n }\n }\n\n if (slideType === 'fluid') {\n /**\n * User reached the last item and now is resizing the container that becomes smaller/bigger.\n * Example: on mobile devices the user rotates the device\n */\n if (\n lastItemReached.current &&\n getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&\n !withLoop\n ) {\n const newVal = -getTotalScrollValue()\n prevSlidedValue.current = newVal\n setSpring.start({\n immediate: true,\n val: prevSlidedValue.current,\n })\n return\n }\n\n if (\n Math.abs(prevSlidedValue.current) > 0 &&\n getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&\n !withLoop &&\n !freeScroll &&\n directionAfterReachingEdges.current === 'backward'\n ) {\n const diff = prevTotalScrollValue.current - getTotalScrollValue()\n const next = prevSlidedValue.current + diff\n\n setSpring.start({\n immediate: true,\n val: next,\n })\n\n return () => {\n prevSlidedValue.current = next\n }\n }\n\n return\n }\n\n if (!freeScroll && slideType === 'fixed') {\n const nextValue = -(getSlideValue() * activeItem.current)\n\n /**\n * Here we make sure to always show the latest item as the\n * latest item visible in the carousel viewport.\n */\n if (Math.abs(nextValue) > getTotalScrollValue() && !withLoop) {\n const val = -getTotalScrollValue()\n lastItemReached.current = true\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val: prevSlidedValue.current,\n })\n } else {\n prevSlidedValue.current = nextValue\n setSpring.start({\n immediate: true,\n val: nextValue,\n })\n }\n\n setTimeout(() => {\n resizeByPropChange.current = false\n }, 0)\n }\n }\n function getFromValue() {\n if (freeScroll && mainCarouselWrapperRef.current) {\n return mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ]\n }\n return spring.val.get()\n }\n function getToValue(type: 'next' | 'prev', index?: number) {\n if (freeScroll && type === 'next') {\n const next = prevSlidedValue.current + getSlideValue()\n if (next > getTotalScrollValue()) {\n return getTotalScrollValue()\n }\n return next\n }\n\n if (freeScroll && type === 'prev') {\n const next = prevSlidedValue.current - getSlideValue()\n if (next < 0) {\n return 0\n }\n return next\n }\n\n if (type === 'next') {\n if (typeof index === 'number') {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current - getSlideValue()\n }\n\n if (typeof index === 'number') {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current + getSlideValue()\n }\n\n type SlideToPrevNextItem = {\n type: SlideMode\n index?: number\n immediate?: boolean\n }\n function slideToPrevItem({ type, index, immediate }: SlideToPrevNextItem) {\n if (!init || windowIsHidden.current || (firstItemReached.current && !withLoop)) return\n\n if (lastItemReached.current) {\n directionAfterReachingEdges.current = 'backward'\n }\n\n slideActionType.current = 'prev'\n lastItemReached.current = false\n\n const nextItem = typeof index === 'number' ? index : activeItem.current - 1\n\n if (!withLoop) {\n const nextItemWillExceed = freeScroll\n ? getToValue('prev', index) - getSlideValue() / 3 < 0\n : getToValue('prev', index) + getSlideValue() / 3 > 0\n\n if (firstItemReached.current) return\n if (nextItemWillExceed) {\n firstItemReached.current = true\n lastItemReached.current = false\n\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: 0,\n nextActiveItem: 0,\n immediate,\n })\n return\n }\n }\n if (withLoop && (firstItemReached.current || nextItem < 0)) {\n firstItemReached.current = false\n lastItemReached.current = true\n slideToItem({\n slideMode: type,\n from: getFromValue() - getSlideValue() * items.length,\n to: -(getSlideValue() * items.length) + getSlideValue(),\n nextActiveItem: items.length - 1,\n immediate,\n })\n return\n }\n if (nextItem === 0) {\n firstItemReached.current = true\n }\n if (nextItem === items.length - 1 || nextItem === -1) {\n lastItemReached.current = true\n }\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: getToValue('prev', index),\n nextActiveItem: nextItem,\n immediate,\n })\n }\n function slideToNextItem({ type, index, immediate }: SlideToPrevNextItem) {\n if (!init || windowIsHidden.current || (lastItemReached.current && !withLoop)) return\n\n if (firstItemReached.current) {\n directionAfterReachingEdges.current = 'forward'\n }\n\n slideActionType.current = 'next'\n firstItemReached.current = false\n\n const nextItem = index || activeItem.current + 1\n\n if (!withLoop) {\n const nextItemWillExceed =\n Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3\n\n if (lastItemReached.current) return\n if (nextItemWillExceed) {\n firstItemReached.current = false\n lastItemReached.current = true\n\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: freeScroll ? getTotalScrollValue() : -getTotalScrollValue(),\n nextActiveItem: nextItem,\n immediate,\n })\n return\n }\n }\n if (withLoop && (lastItemReached.current || nextItem > items.length - 1)) {\n lastItemReached.current = false\n firstItemReached.current = true\n slideToItem({\n slideMode: type,\n from: getFromValue() + getSlideValue() * items.length,\n to: 0,\n nextActiveItem: 0,\n immediate,\n })\n return\n }\n if (nextItem === 0) {\n firstItemReached.current = true\n }\n if (nextItem === items.length - 1) {\n lastItemReached.current = true\n }\n slideToItem({\n slideMode: type,\n from: getFromValue(),\n to: getToValue('next', index),\n nextActiveItem: nextItem,\n immediate,\n })\n }\n function getDraggingSliderTreshold() {\n if (_draggingSlideTreshold) {\n draggingSlideTreshold.current = _draggingSlideTreshold\n } else {\n draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2)\n }\n return draggingSlideTreshold.current\n }\n\n useEffect(() => {\n if (activeItem.current !== initialActiveItem) {\n internalSlideToItem({\n id: initialActiveItem,\n immediate: !animateWhenActiveItemChange,\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialActiveItem])\n useEffect(() => {\n if (init) {\n if (initialActiveItem > items.length - 1) {\n throw new Error(\n `initialActiveItem (${initialActiveItem}) is greater than the total quantity available items (${items.length}).`,\n )\n }\n if (itemsPerSlide > items.length) {\n console.warn(\n `itemsPerSlide (${itemsPerSlide}) is greater than the total quantity available items (${items.length}). Fallback to ${items.length})`,\n )\n }\n }\n }, [initialActiveItem, items, itemsPerSlide, init])\n useEffect(() => {\n prevWindowWidth.current = window.innerWidth\n }, [])\n useEffect(() => {\n prevTotalScrollValue.current = getTotalScrollValue()\n if (!isFirstMount.current) {\n resizeByPropChange.current = true\n adjustCarouselWrapperPosition()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n initialStartingPosition,\n itemsPerSlide,\n startEndGutter,\n gutter,\n init,\n getTotalScrollValue,\n ])\n useEffect(() => {\n /**\n * When these props change we reset the carousel\n */\n if (\n withLoop !== prevWithLoop.current ||\n slideType !== prevSlideType.current ||\n freeScroll !== prevFreeScroll.current\n ) {\n prevWithLoop.current = withLoop\n prevSlideType.current = slideType\n prevFreeScroll.current = freeScroll\n\n if (carouselTrackWrapperRef.current) {\n carouselTrackWrapperRef.current.style.transform = `translate3d(0px, 0px,0px)`\n setSpring.start({\n val: 0,\n immediate: true,\n })\n }\n\n internalSlideToItem({ id: 0, immediate: true, shouldReset: true })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [withLoop, slideType, freeScroll])\n useLayoutEffect(() => {\n /**\n * Set initial track position\n */\n if (carouselTrackWrapperRef.current) {\n adjustCarouselWrapperPosition()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n useEffect(() => {\n /**\n * When itemsPerSlide change we need to update the draggingSlideTreshold.current,\n * since it's default value is based on the calculation of the\n * width of a single item\n */\n getDraggingSliderTreshold()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_draggingSlideTreshold, itemsPerSlide, slideType])\n useEffect(() => {\n if (mainCarouselWrapperRef.current) {\n let timer: NodeJS.Timeout\n const observer = new ResizeObserver(() => {\n if (isFirstMount.current) {\n isFirstMount.current = false\n return\n }\n\n if (windowIsHidden.current) return\n if (!resizeByPropChange.current) {\n prevWindowWidth.current = window.innerWidth\n const cb = adjustCarouselWrapperPosition()\n window.clearTimeout(timer)\n\n timer = setTimeout(() => {\n prevTotalScrollValue.current = getTotalScrollValue()\n if (typeof cb === 'function') {\n cb()\n }\n }, 100)\n }\n })\n observer.observe(mainCarouselWrapperRef.current)\n return () => {\n observer.disconnect()\n }\n }\n }, [adjustCarouselWrapperPosition, getTotalScrollValue])\n useEffect(() => {\n if (!init) return\n function handleVisibilityChange() {\n if (document.hidden) {\n windowIsHidden.current = true\n } else {\n windowIsHidden.current = false\n }\n }\n document.addEventListener('visibilitychange', handleVisibilityChange)\n return () => {\n document.removeEventListener('visibilitychange', handleVisibilityChange)\n }\n }, [init])\n\n const bindDrag = useDrag(\n state => {\n const isDragging = state.dragging\n const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1]\n const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1]\n const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1]\n\n const prevItemTreshold = currentMovement > getDraggingSliderTreshold()\n const nextItemTreshold = currentMovement < -getDraggingSliderTreshold()\n const tot = getTotalScrollValue()\n\n if (isDragging) {\n if (direction > 0) {\n slideActionType.current = 'prev'\n } else {\n slideActionType.current = 'next'\n }\n\n emitEvent({\n ...state,\n eventName: 'onDrag',\n slideActionType: slideActionType.current,\n })\n\n if (freeScroll) {\n if (movement > 0) {\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: 0,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n state.cancel()\n return\n }\n\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: -movement,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n return\n }\n\n setSpring.start({\n val: movement,\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n\n if (slideWhenThresholdIsReached && nextItemTreshold) {\n slideToNextItem({ type: 'drag' })\n state.cancel()\n } else if (slideWhenThresholdIsReached && prevItemTreshold) {\n slideToPrevItem({ type: 'drag' })\n state.cancel()\n }\n\n const res = tot - Math.abs(movement)\n\n if (res < -(getSlideValue() * 2)) {\n state.cancel()\n }\n\n return\n }\n\n if (state.last && freeScroll && movement > 0) {\n setSpring.start({\n from: {\n val: getFromValue(),\n },\n to: {\n val: 0,\n },\n config: {\n velocity: state.velocity,\n friction: 50,\n tension: 1000,\n },\n })\n return\n }\n if (state.last && !state.canceled && freeScroll) {\n if (slideActionType.current === 'prev') {\n slideToPrevItem({ type: 'drag' })\n }\n if (slideActionType.current === 'next') {\n slideToNextItem({ type: 'drag' })\n }\n }\n\n if (state.last && !state.canceled && !freeScroll) {\n if (nextItemTreshold) {\n if (!withLoop && lastItemReached.current) {\n setSpring.start({\n val: -getTotalScrollValue(),\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n } else {\n slideToNextItem({ type: 'drag' })\n }\n } else if (prevItemTreshold) {\n if (!withLoop && firstItemReached.current) {\n setSpring.start({\n val: 0,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n } else {\n slideToPrevItem({ type: 'drag' })\n }\n } else {\n setSpring.start({\n val: prevSlidedValue.current,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n }\n }\n if (state.last && state.canceled) {\n setSpring.start({\n val: prevSlidedValue.current,\n config: {\n ...config.default,\n velocity: state.velocity,\n },\n })\n }\n },\n {\n enabled:\n (init && !disableGestures && !freeScroll) ||\n (!!freeScroll && !!enableFreeScrollDrag),\n axis: carouselSlideAxis,\n from: () => {\n if (freeScroll && mainCarouselWrapperRef.current) {\n return [\n -mainCarouselWrapperRef.current.scrollLeft,\n -mainCarouselWrapperRef.current.scrollTop,\n ]\n }\n if (carouselSlideAxis === 'x') {\n return [spring.val.get(), spring.val.get()]\n }\n return [spring.val.get(), spring.val.get()]\n },\n },\n )\n\n function getWrapperOverflowStyles() {\n if (freeScroll) {\n if (carouselSlideAxis === 'x') {\n return {\n overflowX: 'auto',\n }\n }\n return {\n overflowY: 'auto',\n }\n }\n return {}\n }\n\n function setStartEndItemReachedOnFreeScroll() {\n if (mainCarouselWrapperRef.current) {\n prevSlidedValue.current =\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ]\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] === 0\n ) {\n firstItemReached.current = true\n lastItemReached.current = false\n }\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] > 0 &&\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] < getTotalScrollValue()\n ) {\n firstItemReached.current = false\n lastItemReached.current = false\n }\n\n if (\n mainCarouselWrapperRef.current[\n carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] === getTotalScrollValue()\n ) {\n firstItemReached.current = false\n lastItemReached.current = true\n }\n }\n }\n function getScrollHandlers() {\n if (freeScroll) {\n return {\n onWheel() {\n spring.val.stop()\n setStartEndItemReachedOnFreeScroll()\n },\n }\n }\n return {}\n }\n\n function findItemIndex(id: string | number, error?: string) {\n let itemIndex = 0\n\n if (typeof id === 'string') {\n itemIndex = items.findIndex(item => item.id === id)\n } else {\n itemIndex = id\n }\n if (itemIndex < 0 || itemIndex >= items.length) {\n if (error) {\n throw new Error(error)\n }\n console.error(\n `The item doesn't exist; check that the id provided - ${id} - is correct.`,\n )\n itemIndex = -1\n }\n\n return itemIndex\n }\n type InternalSlideToItem = {\n id: string | number\n immediate?: boolean\n shouldReset?: boolean\n type?: SlideType\n }\n function internalSlideToItem({\n id,\n immediate,\n shouldReset,\n type,\n }: InternalSlideToItem) {\n if (!init || windowIsHidden.current) return\n\n firstItemReached.current = false\n lastItemReached.current = false\n\n const itemIndex = findItemIndex(\n id,\n \"The item you want to slide to doesn't exist; check the provided id.\",\n )\n\n if (itemIndex === activeItem.current && !shouldReset) {\n return\n }\n\n const currentItem = findItemIndex(items[activeItem.current].id)\n const newActiveItem = findItemIndex(items[itemIndex].id)\n\n if (newActiveItem > currentItem) {\n slideToNextItem({\n type: type || shouldReset ? 'initial' : 'click',\n index: newActiveItem,\n immediate,\n })\n } else {\n slideToPrevItem({\n type: type || shouldReset ? 'initial' : 'click',\n index: newActiveItem,\n immediate,\n })\n }\n }\n function getIsNextItem(id: string | number) {\n const itemIndex = findItemIndex(id, \"The item doesn't exist; check the provided id.\")\n const _activeItem = activeItem.current\n if (withLoop && _activeItem === items.length - 1) {\n return itemIndex === 0\n }\n return itemIndex === _activeItem + 1\n }\n function getIsPrevItem(id: string | number) {\n const itemIndex = findItemIndex(id, \"The item doesn't exist; check the provided id.\")\n const _activeItem = activeItem.current\n if (withLoop && _activeItem === 0) {\n return itemIndex === items.length - 1\n }\n return itemIndex === _activeItem - 1\n }\n function getIsActiveItem(id: string | number) {\n return (\n findItemIndex(\n id,\n \"The item you want to check doesn't exist; check the provided id.\",\n ) === activeItem.current\n )\n }\n\n const res = freeScroll\n ? {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: (animate = true) => {\n slideToPrevItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToNextItem: (animate = true) => {\n slideToNextItem({\n type: 'click',\n immediate: !animate,\n })\n },\n }\n : {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: (animate = true) => {\n slideToPrevItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToNextItem: (animate = true) => {\n slideToNextItem({\n type: 'click',\n immediate: !animate,\n })\n },\n slideToItem: (id: string | number, animate = true) => {\n internalSlideToItem({ id, immediate: !animate })\n },\n getIsNextItem,\n getIsPrevItem,\n getIsActiveItem,\n }\n\n useEffect(() => {\n if (getControllerRef) {\n getControllerRef({\n slideToNextItem: res.slideToNextItem,\n slideToPrevItem: res.slideToPrevItem,\n slideToItem: res?.slideToItem,\n })\n }\n }, [getControllerRef, res.slideToItem, res.slideToNextItem, res.slideToPrevItem])\n\n const _thumbsFragment = (\n <Context.Provider value={res}>{thumbsFragment}</Context.Provider>\n )\n const carouselFragment = (\n <Context.Provider value={res}>\n <div\n className=\"use-spring-carousel-main-wrapper\"\n ref={mainCarouselWrapperRef}\n {...getScrollHandlers()}\n style={{\n display: 'flex',\n position: 'relative',\n width: '100%',\n height: '100%',\n ...(getWrapperOverflowStyles() as React.CSSProperties),\n }}\n >\n <div\n className=\"use-spring-carousel-track-wrapper\"\n ref={carouselTrackWrapperRef}\n {...bindDrag()}\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',\n touchAction: 'none',\n ...getAnimatedWrapperStyles(),\n }}\n >\n {(freeScroll || !withLoop) && startEndGutter ? (\n <div\n style={{\n flexShrink: 0,\n width: startEndGutter,\n }}\n />\n ) : null}\n {internalItems.map((item, index) => {\n return (\n <div\n key={`${item.id}-${index}`}\n className=\"use-spring-carousel-item\"\n data-testid=\"use-spring-carousel-item-wrapper\"\n style={{\n display: 'flex',\n position: 'relative',\n flex: '1',\n ...getItemStyles(!!freeScroll && index === items.length - 1),\n }}\n >\n {typeof item.renderItem === 'function'\n ? item.renderItem({\n getIsActiveItem,\n getIsNextItem,\n getIsPrevItem,\n useListenToCustomEvent,\n })\n : item.renderItem}\n </div>\n )\n })}\n {(freeScroll || !withLoop) && startEndGutter ? (\n <div\n style={{\n flexShrink: 0,\n width: '1px',\n }}\n />\n ) : null}\n </div>\n </div>\n </Context.Provider>\n )\n\n return { ...res, carouselFragment, thumbsFragment: _thumbsFragment }\n}\n\ntype ContextProps<T = undefined> = Omit<\n ReturnType<T extends 'free-scroll' ? true : false>,\n 'carouselFragment' | 'thumbsFragment'\n>\n\nconst Context = createContext<ContextProps | ContextProps<'free-scroll'> | undefined>(\n undefined,\n)\n\nfunction useSpringCarouselContext<T>() {\n const context = useContext(Context)\n if (!context) {\n throw new Error('useSpringCarouselContext must be used within the carousel.')\n }\n return context as ContextProps<T>\n}\n\nexport { useSpringCarousel, useSpringCarouselContext }\n"],"names":["useSpringCarousel","items","init","withThumbs","thumbsSlideAxis","itemsPerSlide","_itemsPerSlide","slideType","gutter","withLoop","startEndGutter","carouselSlideAxis","disableGestures","draggingSlideTreshold","_draggingSlideTreshold","slideWhenThresholdIsReached","freeScroll","enableFreeScrollDrag","initialStartingPosition","prepareThumbsData","initialActiveItem","animateWhenActiveItemChange","getControllerRef","length","resizeByPropChange","useRef","slideActionType","slideModeType","directionAfterReachingEdges","activeItem","firstItemReached","lastItemReached","mainCarouselWrapperRef","carouselTrackWrapperRef","isFirstMount","prevTotalScrollValue","prevWindowWidth","prevSlidedValue","prevWithLoop","prevSlideType","prevFreeScroll","windowIsHidden","internalItems","useCallback","map","i","Object","assign","id","getItems","spring","setSpring","useSpring","val","pause","onChange","value","current","scrollLeft","Math","abs","scrollTop","setStartEndItemReachedOnFreeScroll","style","transform","emitEvent","useListenToCustomEvent","useEventsModule","thumbsFragment","handleScroll","useThumbsModule","renderThumbFnProps","getIsActiveItem","getIsPrevItem","getIsNextItem","enterFullscreen","exitFullscreen","getIsFullscreen","useFullscreenModule","handleResize","adjustCarouselWrapperPosition","onFullScreenChange","eventName","isFullscreen","getSlideValue","carouselItem","_a","querySelector","Error","getBoundingClientRect","slideToItem","from","to","nextActiveItem","immediate","slideMode","nextItem","startReached","endReached","index","start","config","default","velocity","onRest","finished","currentItem","getTotalScrollValue","round","Number","getCarouselItemWidth","positionProperty","setPosition","v","ref","top","left","nextValue","setTimeout","newVal","diff","next","getFromValue","get","getToValue","type","slideToPrevItem","nextItemWillExceed","slideToNextItem","getDraggingSliderTreshold","floor","useEffect","internalSlideToItem","console","warn","window","innerWidth","shouldReset","useLayoutEffect","timer","observer","ResizeObserver","cb","clearTimeout","observe","disconnect","document","addEventListener","handleVisibilityChange","removeEventListener","hidden","bindDrag","useDrag","state","isDragging","dragging","movement","offset","currentMovement","direction","prevItemTreshold","nextItemTreshold","tot","friction","tension","cancel","last","canceled","enabled","axis","findItemIndex","error","itemIndex","findIndex","item","newActiveItem","_activeItem","res","animate","_thumbsFragment","_jsx","Context","Provider","children","carouselFragment","className","onWheel","stop","display","position","width","height","overflowX","overflowY","_jsxs","flexDirection","touchAction","percentValue","getAnimatedWrapperStyles","flexShrink","flex","isLastItem","marginRight","renderItem","createContext","undefined","useSpringCarouselContext","context","useContext"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{useRef as t,useEffect as e}from"react";import{jsx as n}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";const i="RSC::Event";function o(){const n=t(null);return{useListenToCustomEvent:function(t){e((()=>{function e(e){t(e.detail)}if(n.current||(n.current=document.createElement("div")),n.current)return n.current.addEventListener(i,e,!1),()=>{var t;null===(t=n.current)||void 0===t||t.removeEventListener(i,e,!1)}}),[t])},emitEvent:function(t){if(n.current){const e=new CustomEvent(i,{detail:t});n.current.dispatchEvent(e)}}}}function u({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:o,items:u,renderThumbFnProps:c}){const l=t(null),[s,a]=r((()=>({val:0})));function m(){var t;return Math.round(Number(null===(t=l.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-l.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?n("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:l,onWheel:()=>s.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===e?"row":"column"},"x"===e?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function t(t){return t.map((t=>({id:t.id,renderThumb:t.renderThumb})))}return o?o(t(u)):t(u)}().map((({id:t,renderThumb:e})=>{const r=`thumb-item-${t}`;return n("div",Object.assign({id:r,className:"thumb-item"},{children:"function"==typeof e?e(c):e}),r)}))})):null,handleScroll:function(t){var n,r;const i=l.current?l.current.querySelector(`#thumb-item-${u[t].id}`):null;if(i&&l.current&&!function(t){const e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,o=t>m()?m():t;a.start({from:{val:null!==(r=null===(n=l.current)||void 0===n?void 0:n["x"===e?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:o},onChange:({value:t})=>{l.current&&(l.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}export{u as a,o as u};
2
+ //# sourceMappingURL=useThumbsModule-faa196f9.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useThumbsModule-ff8a59da.js","sources":["../../src/modules/useEventsModule.ts","../../src/modules/useThumbsModule.tsx"],"sourcesContent":["import { FullGestureState } from '@use-gesture/react'\nimport { useEffect, useRef } from 'react'\nimport { SlideActionType, SlideMode, TransitionSlideMode } from '../types/common'\n\nconst eventLabel = 'RSC::Event'\n\ntype OnSlideStartChange<T> = {\n eventName: 'onSlideStartChange'\n slideActionType: SlideActionType\n slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode\n nextItem: {\n index: number\n id: string\n startReached: boolean\n endReached: boolean\n }\n}\ntype OnSlideChange<T> = {\n eventName: 'onSlideChange'\n slideActionType: SlideActionType\n slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode\n currentItem: {\n index: number\n id: string\n startReached: boolean\n endReached: boolean\n }\n}\ntype OnFullscreenChange = {\n eventName: 'onFullscreenChange'\n isFullscreen: boolean\n}\ntype OnDrag = Omit<FullGestureState<'drag'>, 'event'> & {\n eventName: 'onDrag'\n slideActionType: SlideActionType\n}\n\ntype OnLeftSwipe = {\n eventName: 'onLeftSwipe'\n}\n\ntype OnRightSwipe = {\n eventName: 'onRightSwipe'\n}\n\ntype SpringCarouselEvents<T> =\n | OnSlideStartChange<T>\n | OnSlideChange<T>\n | OnDrag\n | OnFullscreenChange\n\ntype TransitionCarouselEvents<T> =\n | OnSlideStartChange<T>\n | OnSlideChange<T>\n | OnFullscreenChange\n | OnLeftSwipe\n | OnRightSwipe\n\ntype Events<T> = T extends 'use-spring'\n ? SpringCarouselEvents<'use-spring'>\n : TransitionCarouselEvents<'use-transition'>\n\ntype EventHandler<T> = (props: Events<T>) => void\n\nexport type UseListenToCustomEvent<T> = {\n useListenToCustomEvent: (eventHandler: EventHandler<T>) => void\n emitEvent: (event: Events<T>) => void\n}\n\nexport function useEventsModule<T extends 'use-spring' | 'use-transition'>() {\n const targetEvent = useRef<HTMLDivElement | null>(null)\n\n function useListenToCustomEvent(eventHandler: EventHandler<T>) {\n useEffect(() => {\n if (!targetEvent.current) {\n targetEvent.current = document.createElement('div')\n }\n\n function handleEvent(event: CustomEvent<Events<T>>) {\n eventHandler(event.detail)\n }\n\n if (targetEvent.current) {\n // @ts-ignore\n targetEvent.current.addEventListener(eventLabel, handleEvent, false)\n return () => {\n // @ts-ignore\n targetEvent.current?.removeEventListener(eventLabel, handleEvent, false)\n }\n }\n }, [eventHandler])\n }\n function emitEvent(event: Events<T>) {\n if (targetEvent.current) {\n const newEvent = new CustomEvent(eventLabel, {\n detail: event,\n })\n targetEvent.current.dispatchEvent(newEvent)\n }\n }\n\n return {\n useListenToCustomEvent,\n emitEvent,\n }\n}\n","import { useSpring } from '@react-spring/web'\nimport { useRef } from 'react'\n\nimport {\n ItemWithThumb,\n PrepareThumbsData,\n RenderItemProps,\n SpringCarouselWithThumbs,\n} from '../types'\n\ntype Props<T extends 'use-spring' | 'use-transition'> = {\n withThumbs?: boolean\n thumbsSlideAxis: SpringCarouselWithThumbs['thumbsSlideAxis']\n prepareThumbsData?: PrepareThumbsData<T>\n items: ItemWithThumb<T>[]\n renderThumbFnProps: RenderItemProps<T>\n}\n\nfunction isInViewport(el: HTMLElement) {\n const rect = el.getBoundingClientRect()\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n}\n\nexport function useThumbsModule<T extends 'use-spring' | 'use-transition'>({\n thumbsSlideAxis = 'x',\n withThumbs = false,\n prepareThumbsData,\n items,\n renderThumbFnProps,\n}: Props<T>) {\n const wrapperRef = useRef<HTMLDivElement | null>(null)\n const [spring, setSpring] = useSpring(() => ({\n val: 0,\n }))\n\n function getTotalScrollValue() {\n return Math.round(\n Number(\n wrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'],\n ) -\n wrapperRef.current!.getBoundingClientRect()[\n thumbsSlideAxis === 'x' ? 'width' : 'height'\n ],\n )\n }\n\n function handleScroll(activeItem: number) {\n function getThumbNode() {\n if (wrapperRef.current) {\n return wrapperRef.current.querySelector(\n `#thumb-item-${items[activeItem].id}`,\n ) as HTMLElement\n }\n return null\n }\n\n const thumbNode = getThumbNode()\n if (thumbNode && wrapperRef.current) {\n if (!isInViewport(thumbNode)) {\n const offset = thumbNode.offsetLeft\n const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset\n\n setSpring.start({\n from: {\n val:\n wrapperRef.current?.[\n thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] ?? 0,\n },\n to: {\n val,\n },\n onChange: ({ value }) => {\n if (wrapperRef.current) {\n wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =\n Math.abs(value.val)\n }\n },\n })\n }\n }\n }\n\n function handlePrepareThumbsData() {\n function getPreparedItems(\n _items: ReturnType<PrepareThumbsData<T>>,\n ): ReturnType<PrepareThumbsData<T>> {\n return _items.map(i => ({\n id: i.id,\n renderThumb: i.renderThumb,\n }))\n }\n\n if (prepareThumbsData) {\n return prepareThumbsData(getPreparedItems(items))\n }\n return getPreparedItems(items)\n }\n\n const thumbsFragment = withThumbs ? (\n <div\n className=\"use-spring-carousel-thumbs-wrapper\"\n ref={wrapperRef}\n onWheel={() => spring.val.stop()}\n style={{\n display: 'flex',\n flex: '1',\n position: 'relative',\n width: '100%',\n height: '100%',\n flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',\n ...(thumbsSlideAxis === 'x'\n ? { overflowX: 'auto' }\n : {\n overflowY: 'auto',\n maxHeight: '100%',\n }),\n }}\n >\n {handlePrepareThumbsData().map(({ id, renderThumb }) => {\n const thumbId = `thumb-item-${id}`\n return (\n <div key={thumbId} id={thumbId} className=\"thumb-item\">\n {typeof renderThumb === 'function'\n ? renderThumb(renderThumbFnProps)\n : renderThumb}\n </div>\n )\n })}\n </div>\n ) : null\n\n return {\n thumbsFragment,\n handleScroll,\n }\n}\n"],"names":["useEventsModule","targetEvent","useRef","useListenToCustomEvent","eventHandler","useEffect","handleEvent","event","detail","current","document","createElement","addEventListener","_a","removeEventListener","emitEvent","newEvent","CustomEvent","dispatchEvent","useThumbsModule","thumbsSlideAxis","withThumbs","prepareThumbsData","items","renderThumbFnProps","wrapperRef","spring","setSpring","useSpring","val","getTotalScrollValue","Math","round","Number","getBoundingClientRect","thumbsFragment","_jsx","Object","assign","className","ref","onWheel","stop","style","display","flex","position","width","height","flexDirection","overflowX","overflowY","maxHeight","children","getPreparedItems","_items","map","i","id","renderThumb","handlePrepareThumbsData","thumbId","handleScroll","activeItem","thumbNode","querySelector","el","rect","top","left","bottom","window","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth","isInViewport","offset","offsetLeft","start","from","to","onChange","value","abs"],"mappings":"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"}
1
+ {"version":3,"file":"useThumbsModule-faa196f9.js","sources":["../../src/modules/useEventsModule.ts","../../src/modules/useThumbsModule.tsx"],"sourcesContent":["import { FullGestureState } from '@use-gesture/react'\nimport { useEffect, useRef } from 'react'\nimport { SlideActionType, SlideMode, TransitionSlideMode } from '../types/common'\n\nconst eventLabel = 'RSC::Event'\n\ntype OnSlideStartChange<T> = {\n eventName: 'onSlideStartChange'\n slideActionType: SlideActionType\n slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode\n nextItem: {\n index: number\n id: string\n startReached: boolean\n endReached: boolean\n }\n}\ntype OnSlideChange<T> = {\n eventName: 'onSlideChange'\n slideActionType: SlideActionType\n slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode\n currentItem: {\n index: number\n id: string\n startReached: boolean\n endReached: boolean\n }\n}\ntype OnFullscreenChange = {\n eventName: 'onFullscreenChange'\n isFullscreen: boolean\n}\ntype OnDrag = Omit<FullGestureState<'drag'>, 'event'> & {\n eventName: 'onDrag'\n slideActionType: SlideActionType\n}\n\ntype OnLeftSwipe = {\n eventName: 'onLeftSwipe'\n}\n\ntype OnRightSwipe = {\n eventName: 'onRightSwipe'\n}\n\ntype SpringCarouselEvents<T> =\n | OnSlideStartChange<T>\n | OnSlideChange<T>\n | OnDrag\n | OnFullscreenChange\n\ntype TransitionCarouselEvents<T> =\n | OnSlideStartChange<T>\n | OnSlideChange<T>\n | OnFullscreenChange\n | OnLeftSwipe\n | OnRightSwipe\n\ntype Events<T> = T extends 'use-spring'\n ? SpringCarouselEvents<'use-spring'>\n : TransitionCarouselEvents<'use-transition'>\n\ntype EventHandler<T> = (props: Events<T>) => void\n\nexport type UseListenToCustomEvent<T> = {\n useListenToCustomEvent: (eventHandler: EventHandler<T>) => void\n emitEvent: (event: Events<T>) => void\n}\n\nexport function useEventsModule<T extends 'use-spring' | 'use-transition'>() {\n const targetEvent = useRef<HTMLDivElement | null>(null)\n\n function useListenToCustomEvent(eventHandler: EventHandler<T>) {\n useEffect(() => {\n if (!targetEvent.current) {\n targetEvent.current = document.createElement('div')\n }\n\n function handleEvent(event: CustomEvent<Events<T>>) {\n eventHandler(event.detail)\n }\n\n if (targetEvent.current) {\n // @ts-ignore\n targetEvent.current.addEventListener(eventLabel, handleEvent, false)\n return () => {\n // @ts-ignore\n targetEvent.current?.removeEventListener(eventLabel, handleEvent, false)\n }\n }\n }, [eventHandler])\n }\n function emitEvent(event: Events<T>) {\n if (targetEvent.current) {\n const newEvent = new CustomEvent(eventLabel, {\n detail: event,\n })\n targetEvent.current.dispatchEvent(newEvent)\n }\n }\n\n return {\n useListenToCustomEvent,\n emitEvent,\n }\n}\n","import { useSpring } from '@react-spring/web'\nimport { useRef } from 'react'\n\nimport {\n ItemWithThumb,\n PrepareThumbsData,\n RenderItemProps,\n SpringCarouselWithThumbs,\n} from '../types'\n\ntype Props<T extends 'use-spring' | 'use-transition'> = {\n withThumbs?: boolean\n thumbsSlideAxis: SpringCarouselWithThumbs['thumbsSlideAxis']\n prepareThumbsData?: PrepareThumbsData<T>\n items: ItemWithThumb<T>[]\n renderThumbFnProps: RenderItemProps<T>\n}\n\nfunction isInViewport(el: HTMLElement) {\n const rect = el.getBoundingClientRect()\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n}\n\nexport function useThumbsModule<T extends 'use-spring' | 'use-transition'>({\n thumbsSlideAxis = 'x',\n withThumbs = false,\n prepareThumbsData,\n items,\n renderThumbFnProps,\n}: Props<T>) {\n const wrapperRef = useRef<HTMLDivElement | null>(null)\n const [spring, setSpring] = useSpring(() => ({\n val: 0,\n }))\n\n function getTotalScrollValue() {\n return Math.round(\n Number(\n wrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'],\n ) -\n wrapperRef.current!.getBoundingClientRect()[\n thumbsSlideAxis === 'x' ? 'width' : 'height'\n ],\n )\n }\n\n function handleScroll(activeItem: number) {\n function getThumbNode() {\n if (wrapperRef.current) {\n return wrapperRef.current.querySelector(\n `#thumb-item-${items[activeItem].id}`,\n ) as HTMLElement\n }\n return null\n }\n\n const thumbNode = getThumbNode()\n if (thumbNode && wrapperRef.current) {\n if (!isInViewport(thumbNode)) {\n const offset = thumbNode.offsetLeft\n const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset\n\n setSpring.start({\n from: {\n val:\n wrapperRef.current?.[\n thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n ] ?? 0,\n },\n to: {\n val,\n },\n onChange: ({ value }) => {\n if (wrapperRef.current) {\n wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =\n Math.abs(value.val)\n }\n },\n })\n }\n }\n }\n\n function handlePrepareThumbsData() {\n function getPreparedItems(\n _items: ReturnType<PrepareThumbsData<T>>,\n ): ReturnType<PrepareThumbsData<T>> {\n return _items.map(i => ({\n id: i.id,\n renderThumb: i.renderThumb,\n }))\n }\n\n if (prepareThumbsData) {\n return prepareThumbsData(getPreparedItems(items))\n }\n return getPreparedItems(items)\n }\n\n const thumbsFragment = withThumbs ? (\n <div\n className=\"use-spring-carousel-thumbs-wrapper\"\n ref={wrapperRef}\n onWheel={() => spring.val.stop()}\n style={{\n display: 'flex',\n flex: '1',\n position: 'relative',\n width: '100%',\n height: '100%',\n flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',\n ...(thumbsSlideAxis === 'x'\n ? { overflowX: 'auto' }\n : {\n overflowY: 'auto',\n maxHeight: '100%',\n }),\n }}\n >\n {handlePrepareThumbsData().map(({ id, renderThumb }) => {\n const thumbId = `thumb-item-${id}`\n return (\n <div key={thumbId} id={thumbId} className=\"thumb-item\">\n {typeof renderThumb === 'function'\n ? renderThumb(renderThumbFnProps)\n : renderThumb}\n </div>\n )\n })}\n </div>\n ) : null\n\n return {\n thumbsFragment,\n handleScroll,\n }\n}\n"],"names":["eventLabel","useEventsModule","targetEvent","useRef","useListenToCustomEvent","eventHandler","useEffect","handleEvent","event","detail","current","document","createElement","addEventListener","_a","removeEventListener","emitEvent","newEvent","CustomEvent","dispatchEvent","useThumbsModule","thumbsSlideAxis","withThumbs","prepareThumbsData","items","renderThumbFnProps","wrapperRef","spring","setSpring","useSpring","val","getTotalScrollValue","Math","round","Number","getBoundingClientRect","thumbsFragment","_jsx","Object","assign","className","ref","onWheel","stop","style","display","flex","position","width","height","flexDirection","overflowX","overflowY","maxHeight","children","getPreparedItems","_items","map","i","id","renderThumb","handlePrepareThumbsData","thumbId","handleScroll","activeItem","thumbNode","querySelector","el","rect","top","left","bottom","window","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth","isInViewport","offset","offsetLeft","start","from","to","onChange","value","abs"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useTransition as t,a as i,config as n}from"@react-spring/web";import{createContext as s,useRef as r,useState as o,useEffect as a,useContext as c}from"react";import{u as l,a as d}from"./useThumbsModule-ff8a59da.js";import{useDrag as u}from"@use-gesture/react";import"screenfull";const m={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};function g({init:s=!0,disableGestures:c=!1,items:g,springConfig:f=n.default,exitBeforeEnter:p=!1,trail:v,withLoop:b=!1,activeItem:x,toPrevItemSpringProps:j=m,toNextItemSpringProps:O=m,draggingSlideTreshold:T=50,thumbsSlideAxis:I="x"}){const y=r("next"),w=r("initial"),S=r(null),[C,E]=o(null!=x?x:0),{emitEvent:N,useListenToCustomEvent:P}=l(),{handleScroll:M,thumbsFragment:k}=d({thumbsSlideAxis:I,items:g,renderThumbFnProps:{getIsNextItem:G,getIsPrevItem:q,useListenToCustomEvent:P,activeItem:{index:C,id:g[C].id}}});function L({to:e,slideType:t,slideMode:i}){y.current=t,w.current=i,N({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:w.current,nextItem:{index:e,id:g[e].id,startReached:0===e,endReached:e===g.length-1}}),E(e),M(C)}function R(e){if(!s)return;const t=0===C;!b&&t||L(b&&t?{to:g.length-1,slideType:"prev",slideMode:e}:{to:C-1,slideType:"prev",slideMode:e})}function A(e){if(!s)return;const t=C===g.length-1;!b&&t||L(b&&t?{to:0,slideType:"next",slideMode:e}:{to:C+1,slideType:"next",slideMode:e})}a((()=>{"number"==typeof x&&x!==C&&E(x)}),[x]);const F=t(C,Object.assign(Object.assign({config:f,key:null,trail:v,exitBeforeEnter:p},"prev"===y.current?{initial:Object.assign({},j.initial),from:Object.assign({},j.from),enter:Object.assign({},j.enter),leave:Object.assign({},j.leave)}:"next"===y.current?{initial:Object.assign({},O.initial),from:Object.assign({},O.from),enter:Object.assign({},O.enter),leave:Object.assign({},O.leave)}:{initial:Object.assign({},m.initial),from:Object.assign({},m.from),enter:Object.assign({},m.enter),leave:Object.assign({},m.leave)}),{onRest(e,t,i){e.finished&&i===C&&N({eventName:"onSlideChange",slideActionType:y.current,slideMode:w.current,currentItem:{index:C,id:g[C].id,startReached:0===C,endReached:C===g.length-1}})}})),B=u((({last:e,movement:[t]})=>{if(e){const e=t>T,i=t<-T,n=0===C,s=C===g.length-1;if(i){if(!b&&s)return;N({eventName:"onLeftSwipe"}),A("swipe")}else if(e){if(!b&&n)return;N({eventName:"onRightSwipe"}),R("swipe")}}}),{enabled:!c});function $(e,t){let i=0;if(i="string"==typeof e?g.findIndex((t=>t.id===e)):e,i<0||i>=g.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),i=-1}return i}function G(e){const t=$(e,"The item doesn't exist; check the provided id."),i=C;return b&&i===g.length-1?0===t:t===i+1}function q(e){const t=$(e,"The item doesn't exist; check the provided id."),i=C;return b&&0===i?t===g.length-1:t===i-1}const z=F(((t,n,s,r)=>{const o=g[n].renderItem;return e(i.div,Object.assign({id:`use-transition-carousel-item-${r}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},t),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:"function"==typeof o?o({useListenToCustomEvent:P,getIsNextItem:G,getIsPrevItem:q,activeItem:{index:C,id:g[C].id}}):o}))})),D={useListenToCustomEvent:P,slideToPrevItem:()=>R("click"),slideToNextItem:()=>A("click")},H=e(h.Provider,Object.assign({value:D},{children:k})),J=e(h.Provider,Object.assign({value:D},{children:e("div",Object.assign({ref:S},B(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:z}))}));return Object.assign(Object.assign({},D),{carouselFragment:J,thumbsFragment:H})}const h=s(void 0);function f(){const e=c(h);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}export{g as useTransitionCarousel,f as useTransitionCarouselContext};
1
+ import{jsx as e}from"react/jsx-runtime";import{useTransition as t,a as i,config as n}from"@react-spring/web";import{createContext as s,useRef as r,useState as o,useEffect as a,useContext as c}from"react";import{u as l,a as d}from"./useThumbsModule-faa196f9.js";import{useDrag as u}from"@use-gesture/react";import"screenfull";const m={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};function g({init:s=!0,disableGestures:c=!1,items:g,springConfig:f=n.default,exitBeforeEnter:p=!1,trail:v,withLoop:b=!1,activeItem:x,toPrevItemSpringProps:j=m,toNextItemSpringProps:O=m,draggingSlideTreshold:T=50,thumbsSlideAxis:I="x"}){const y=r("next"),w=r("initial"),S=r(null),[C,E]=o(null!=x?x:0),{emitEvent:N,useListenToCustomEvent:P}=l(),{handleScroll:M,thumbsFragment:k}=d({thumbsSlideAxis:I,items:g,renderThumbFnProps:{getIsNextItem:G,getIsPrevItem:q,useListenToCustomEvent:P,activeItem:{index:C,id:g[C].id}}});function L({to:e,slideType:t,slideMode:i}){y.current=t,w.current=i,N({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:w.current,nextItem:{index:e,id:g[e].id,startReached:0===e,endReached:e===g.length-1}}),E(e),M(C)}function R(e){if(!s)return;const t=0===C;!b&&t||L(b&&t?{to:g.length-1,slideType:"prev",slideMode:e}:{to:C-1,slideType:"prev",slideMode:e})}function A(e){if(!s)return;const t=C===g.length-1;!b&&t||L(b&&t?{to:0,slideType:"next",slideMode:e}:{to:C+1,slideType:"next",slideMode:e})}a((()=>{"number"==typeof x&&x!==C&&E(x)}),[x]);const F=t(C,Object.assign(Object.assign({config:f,key:null,trail:v,exitBeforeEnter:p},"prev"===y.current?{initial:Object.assign({},j.initial),from:Object.assign({},j.from),enter:Object.assign({},j.enter),leave:Object.assign({},j.leave)}:"next"===y.current?{initial:Object.assign({},O.initial),from:Object.assign({},O.from),enter:Object.assign({},O.enter),leave:Object.assign({},O.leave)}:{initial:Object.assign({},m.initial),from:Object.assign({},m.from),enter:Object.assign({},m.enter),leave:Object.assign({},m.leave)}),{onRest(e,t,i){e.finished&&i===C&&N({eventName:"onSlideChange",slideActionType:y.current,slideMode:w.current,currentItem:{index:C,id:g[C].id,startReached:0===C,endReached:C===g.length-1}})}})),B=u((({last:e,movement:[t]})=>{if(e){const e=t>T,i=t<-T,n=0===C,s=C===g.length-1;if(i){if(!b&&s)return;N({eventName:"onLeftSwipe"}),A("swipe")}else if(e){if(!b&&n)return;N({eventName:"onRightSwipe"}),R("swipe")}}}),{enabled:!c});function $(e,t){let i=0;if(i="string"==typeof e?g.findIndex((t=>t.id===e)):e,i<0||i>=g.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),i=-1}return i}function G(e){const t=$(e,"The item doesn't exist; check the provided id."),i=C;return b&&i===g.length-1?0===t:t===i+1}function q(e){const t=$(e,"The item doesn't exist; check the provided id."),i=C;return b&&0===i?t===g.length-1:t===i-1}const z=F(((t,n,s,r)=>{const o=g[n].renderItem;return e(i.div,Object.assign({id:`use-transition-carousel-item-${r}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},t),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:"function"==typeof o?o({useListenToCustomEvent:P,getIsNextItem:G,getIsPrevItem:q,activeItem:{index:C,id:g[C].id}}):o}))})),D={useListenToCustomEvent:P,slideToPrevItem:()=>R("click"),slideToNextItem:()=>A("click")},H=e(h.Provider,Object.assign({value:D},{children:k})),J=e(h.Provider,Object.assign({value:D},{children:e("div",Object.assign({ref:S},B(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:z}))}));return Object.assign(Object.assign({},D),{carouselFragment:J,thumbsFragment:H})}const h=s(void 0);function f(){const e=c(h);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}export{g as useTransitionCarousel,f as useTransitionCarouselContext};
2
2
  //# sourceMappingURL=useTransitionCarousel.js.map
@@ -1,2 +1,2 @@
1
1
  import { ItemWithNoThumb } from './types/common';
2
- export declare const mockedItems: ItemWithNoThumb[];
2
+ export declare const mockedItems: ItemWithNoThumb<'use-transition'>[];
@@ -1,6 +1,6 @@
1
1
  import { FullGestureState } from '@use-gesture/react';
2
2
  import { SlideActionType, SlideMode, TransitionSlideMode } from '../types/common';
3
- declare type OnSlideStartChange<T> = {
3
+ type OnSlideStartChange<T> = {
4
4
  eventName: 'onSlideStartChange';
5
5
  slideActionType: SlideActionType;
6
6
  slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode;
@@ -11,7 +11,7 @@ declare type OnSlideStartChange<T> = {
11
11
  endReached: boolean;
12
12
  };
13
13
  };
14
- declare type OnSlideChange<T> = {
14
+ type OnSlideChange<T> = {
15
15
  eventName: 'onSlideChange';
16
16
  slideActionType: SlideActionType;
17
17
  slideMode: T extends 'use-spring' ? SlideMode : TransitionSlideMode;
@@ -22,25 +22,25 @@ declare type OnSlideChange<T> = {
22
22
  endReached: boolean;
23
23
  };
24
24
  };
25
- declare type OnFullscreenChange = {
25
+ type OnFullscreenChange = {
26
26
  eventName: 'onFullscreenChange';
27
27
  isFullscreen: boolean;
28
28
  };
29
- declare type OnDrag = Omit<FullGestureState<'drag'>, 'event'> & {
29
+ type OnDrag = Omit<FullGestureState<'drag'>, 'event'> & {
30
30
  eventName: 'onDrag';
31
31
  slideActionType: SlideActionType;
32
32
  };
33
- declare type OnLeftSwipe = {
33
+ type OnLeftSwipe = {
34
34
  eventName: 'onLeftSwipe';
35
35
  };
36
- declare type OnRightSwipe = {
36
+ type OnRightSwipe = {
37
37
  eventName: 'onRightSwipe';
38
38
  };
39
- declare type SpringCarouselEvents<T> = OnSlideStartChange<T> | OnSlideChange<T> | OnDrag | OnFullscreenChange;
40
- declare type TransitionCarouselEvents<T> = OnSlideStartChange<T> | OnSlideChange<T> | OnFullscreenChange | OnLeftSwipe | OnRightSwipe;
41
- declare type Events<T> = T extends 'use-spring' ? SpringCarouselEvents<'use-spring'> : TransitionCarouselEvents<'use-transition'>;
42
- declare type EventHandler<T> = (props: Events<T>) => void;
43
- export declare type UseListenToCustomEvent<T> = {
39
+ type SpringCarouselEvents<T> = OnSlideStartChange<T> | OnSlideChange<T> | OnDrag | OnFullscreenChange;
40
+ type TransitionCarouselEvents<T> = OnSlideStartChange<T> | OnSlideChange<T> | OnFullscreenChange | OnLeftSwipe | OnRightSwipe;
41
+ type Events<T> = T extends 'use-spring' ? SpringCarouselEvents<'use-spring'> : TransitionCarouselEvents<'use-transition'>;
42
+ type EventHandler<T> = (props: Events<T>) => void;
43
+ export type UseListenToCustomEvent<T> = {
44
44
  useListenToCustomEvent: (eventHandler: EventHandler<T>) => void;
45
45
  emitEvent: (event: Events<T>) => void;
46
46
  };
@@ -1,5 +1,5 @@
1
1
  import { MutableRefObject } from 'react';
2
- declare type FullscreenModule = {
2
+ type FullscreenModule = {
3
3
  mainCarouselWrapperRef: MutableRefObject<HTMLDivElement | null>;
4
4
  handleResize?(): void;
5
5
  onFullScreenChange(isFullscreen: boolean): void;
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ItemWithThumb, PrepareThumbsData, RenderItemProps, SpringCarouselWithThumbs } from '../types';
3
- declare type Props<T extends 'use-spring' | 'use-transition'> = {
3
+ type Props<T extends 'use-spring' | 'use-transition'> = {
4
4
  withThumbs?: boolean;
5
5
  thumbsSlideAxis: SpringCarouselWithThumbs['thumbsSlideAxis'];
6
6
  prepareThumbsData?: PrepareThumbsData<T>;
@@ -1,16 +1,16 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { UseListenToCustomEvent } from '../modules/useEventsModule';
3
3
  import { UseSpringReturnType } from './useSpringCarousel.types';
4
- export declare type SlideActionType = 'prev' | 'next' | 'initial';
5
- export declare type SlideMode = 'drag' | 'click' | 'initial';
6
- export declare type TransitionSlideMode = 'swipe' | 'click' | 'initial';
7
- declare type SpringRenderItem = {
4
+ export type SlideActionType = 'prev' | 'next' | 'initial';
5
+ export type SlideMode = 'drag' | 'click' | 'initial';
6
+ export type TransitionSlideMode = 'swipe' | 'click' | 'initial';
7
+ type SpringRenderItem = {
8
8
  useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
9
9
  getIsActiveItem: UseSpringReturnType['getIsActiveItem'];
10
10
  getIsPrevItem: UseSpringReturnType['getIsPrevItem'];
11
11
  getIsNextItem: UseSpringReturnType['getIsNextItem'];
12
12
  };
13
- declare type TransitionRenderItem = {
13
+ type TransitionRenderItem = {
14
14
  getIsPrevItem: UseSpringReturnType['getIsPrevItem'];
15
15
  getIsNextItem: UseSpringReturnType['getIsNextItem'];
16
16
  useListenToCustomEvent: UseListenToCustomEvent<'use-transition'>['useListenToCustomEvent'];
@@ -19,16 +19,16 @@ declare type TransitionRenderItem = {
19
19
  id: string;
20
20
  };
21
21
  };
22
- export declare type RenderItemProps<T> = T extends 'use-spring' ? SpringRenderItem : TransitionRenderItem;
23
- declare type RenderItemFn<T> = (props: RenderItemProps<T>) => JSX.Element;
24
- export declare type ItemWithThumb<T extends 'use-spring' | 'use-transition'> = {
22
+ export type RenderItemProps<T> = T extends 'use-spring' ? SpringRenderItem : TransitionRenderItem;
23
+ type RenderItemFn<T> = (props: RenderItemProps<T>) => JSX.Element;
24
+ export type ItemWithThumb<T extends 'use-spring' | 'use-transition'> = {
25
25
  id: string;
26
26
  renderItem: ReactNode | RenderItemFn<T>;
27
27
  renderThumb: ReactNode | RenderItemFn<T>;
28
28
  };
29
- export declare type ItemWithNoThumb<T extends 'use-spring' | 'use-transition'> = {
29
+ export type ItemWithNoThumb<T extends 'use-spring' | 'use-transition'> = {
30
30
  id: string;
31
31
  renderItem: ReactNode | RenderItemFn<T>;
32
32
  };
33
- export declare type PrepareThumbsData<T extends 'use-spring' | 'use-transition'> = (items: Omit<ItemWithThumb<T>, 'renderItem'>[]) => Omit<ItemWithThumb<T>, 'renderItem'>[];
33
+ export type PrepareThumbsData<T extends 'use-spring' | 'use-transition'> = (items: Omit<ItemWithThumb<T>, 'renderItem'>[]) => Omit<ItemWithThumb<T>, 'renderItem'>[];
34
34
  export {};
@@ -1,7 +1,7 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { UseListenToCustomEvent } from '../modules/useEventsModule';
3
3
  import { ItemWithThumb, ItemWithNoThumb, PrepareThumbsData } from '../types';
4
- export declare type UseSpringReturnType = {
4
+ export type UseSpringReturnType = {
5
5
  carouselFragment: ReactNode;
6
6
  thumbsFragment: ReactNode;
7
7
  useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
@@ -15,7 +15,7 @@ export declare type UseSpringReturnType = {
15
15
  getIsNextItem(id: string | number): boolean;
16
16
  getIsPrevItem(id: string | number): boolean;
17
17
  };
18
- export declare type UseSpringFreeScrollReturnType = {
18
+ export type UseSpringFreeScrollReturnType = {
19
19
  carouselFragment: ReactNode;
20
20
  thumbsFragment: ReactNode;
21
21
  useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
@@ -25,40 +25,40 @@ export declare type UseSpringFreeScrollReturnType = {
25
25
  slideToNextItem(animate?: boolean): void;
26
26
  slideToPrevItem(animate?: boolean): void;
27
27
  };
28
- export declare type SlideType = 'fixed' | 'fluid';
29
- export declare type SpringCarouselWithThumbs<T = 'use-spring'> = {
28
+ export type SlideType = 'fixed' | 'fluid';
29
+ export type SpringCarouselWithThumbs<T extends 'use-spring' | 'use-transition' = 'use-spring'> = {
30
30
  withThumbs: true;
31
31
  thumbsSlideAxis?: 'x' | 'y';
32
32
  items: ItemWithThumb<T>[];
33
33
  prepareThumbsData?: PrepareThumbsData<T>;
34
34
  };
35
- export declare type SpringCarouselWithNoThumbs<T = 'use-spring'> = {
35
+ export type SpringCarouselWithNoThumbs<T extends 'use-spring' | 'use-transition' = 'use-spring'> = {
36
36
  withThumbs?: false | undefined;
37
37
  thumbsSlideAxis?: never;
38
38
  items: ItemWithNoThumb<T>[];
39
39
  prepareThumbsData?: never;
40
40
  };
41
- export declare type SpringCarouselWithFixedItems = {
41
+ export type SpringCarouselWithFixedItems = {
42
42
  slideType?: SlideType[0];
43
43
  itemsPerSlide?: number;
44
44
  startEndGutter?: number;
45
45
  initialActiveItem?: number;
46
46
  };
47
- export declare type SpringCarouselWithNoFixedItems = {
47
+ export type SpringCarouselWithNoFixedItems = {
48
48
  slideType?: SlideType[1];
49
49
  itemsPerSlide?: never;
50
50
  startEndGutter?: never;
51
51
  initialActiveItem?: never;
52
52
  };
53
- export declare type SpringCarouselWithLoop = {
53
+ export type SpringCarouselWithLoop = {
54
54
  withLoop: true;
55
- initialStartingPosition: 'start' | 'center' | 'end';
55
+ initialStartingPosition?: 'start' | 'center' | 'end';
56
56
  };
57
- export declare type SpringCarouselWithNoLoop = {
57
+ export type SpringCarouselWithNoLoop = {
58
58
  withLoop?: false | undefined;
59
59
  initialStartingPosition?: never;
60
60
  };
61
- export declare type SpringCarouselFreeScroll = {
61
+ export type SpringCarouselFreeScroll = {
62
62
  freeScroll: true;
63
63
  withLoop?: never;
64
64
  slideType?: never;
@@ -68,7 +68,7 @@ export declare type SpringCarouselFreeScroll = {
68
68
  animateWhenActiveItemChange?: never;
69
69
  slideWhenThresholdIsReached?: never;
70
70
  };
71
- export declare type SpringCarouselNoFreeScroll = {
71
+ export type SpringCarouselNoFreeScroll = {
72
72
  freeScroll?: never | false | undefined;
73
73
  withLoop?: boolean;
74
74
  slideType?: SlideType;
@@ -78,12 +78,12 @@ export declare type SpringCarouselNoFreeScroll = {
78
78
  animateWhenActiveItemChange?: boolean;
79
79
  slideWhenThresholdIsReached?: boolean;
80
80
  };
81
- export declare type ControllerRef = {
81
+ export type ControllerRef = {
82
82
  slideToNextItem: UseSpringReturnType['slideToNextItem'];
83
83
  slideToPrevItem: UseSpringReturnType['slideToPrevItem'];
84
84
  slideToItem?: UseSpringReturnType['slideToItem'];
85
85
  };
86
- export declare type BaseProps = {
86
+ export type BaseProps = {
87
87
  init?: boolean;
88
88
  gutter?: number;
89
89
  carouselSlideAxis?: 'x' | 'y';
@@ -92,11 +92,11 @@ export declare type BaseProps = {
92
92
  startEndGutter?: number;
93
93
  getControllerRef?(ref: ControllerRef): void;
94
94
  };
95
- declare type ScrollType<T> = T extends true ? SpringCarouselFreeScroll : SpringCarouselNoFreeScroll;
96
- export declare type UseSpringCarouselWithThumbs<T> = BaseProps & SpringCarouselWithThumbs & ScrollType<T> & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
97
- export declare type UseSpringCarouselWithNoThumbs<T> = BaseProps & SpringCarouselWithNoThumbs & ScrollType<T> & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
98
- export declare type UseSpringCarouselWithFixedItems<T> = BaseProps & SpringCarouselWithFixedItems & ScrollType<T> & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
99
- export declare type UseSpringCarouselWithNoFixedItems<T> = BaseProps & SpringCarouselWithNoFixedItems & ScrollType<T> & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
100
- export declare type UseSpringCarouselWithFreeScroll = BaseProps & SpringCarouselFreeScroll & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs);
101
- export declare type UseSpringCarouselComplete = BaseProps & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop) & (SpringCarouselFreeScroll | SpringCarouselNoFreeScroll);
95
+ type ScrollType<T> = T extends true ? SpringCarouselFreeScroll : SpringCarouselNoFreeScroll;
96
+ export type UseSpringCarouselWithThumbs<T> = BaseProps & SpringCarouselWithThumbs & ScrollType<T> & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
97
+ export type UseSpringCarouselWithNoThumbs<T> = BaseProps & SpringCarouselWithNoThumbs & ScrollType<T> & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
98
+ export type UseSpringCarouselWithFixedItems<T> = BaseProps & SpringCarouselWithFixedItems & ScrollType<T> & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
99
+ export type UseSpringCarouselWithNoFixedItems<T> = BaseProps & SpringCarouselWithNoFixedItems & ScrollType<T> & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop);
100
+ export type UseSpringCarouselWithFreeScroll = BaseProps & SpringCarouselFreeScroll & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs);
101
+ export type UseSpringCarouselComplete = BaseProps & (SpringCarouselWithThumbs | SpringCarouselWithNoThumbs) & (SpringCarouselWithFixedItems | SpringCarouselWithNoFixedItems) & (SpringCarouselWithLoop | SpringCarouselWithNoLoop) & (SpringCarouselFreeScroll | SpringCarouselNoFreeScroll);
102
102
  export {};