react-spring-carousel 3.0.0-beta029 → 3.0.0-beta030
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/useSpringCarousel.js +1 -1
- package/dist/esm/useSpringCarousel.js.map +1 -1
- package/dist/types/mockedItems.d.ts +2 -5
- package/dist/types/types/common.d.ts +13 -3
- package/dist/types/types/useSpringCarousel.types.d.ts +6 -3
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -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 {\n SlideActionType,\n SlideMode,\n UseSpringCarouselComplete,\n SpringCarouselWithThumbs,\n UseSpringCarouselWithFreeScroll,\n UseSpringCarouselWithThumbs,\n UseSpringCarouselWithNoThumbs,\n UseSpringCarouselWithNoFixedItems,\n UseSpringCarouselWithFixedItems,\n UseSpringFreeScrollReturnType,\n UseSpringReturnType,\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}: UseSpringCarouselComplete): ReturnType<typeof freeScroll> {\n const itemsPerSlide = _itemsPerSlide > items.length ? items.length : _itemsPerSlide\n const prevWindowWidth = useRef(0)\n const draggingSlideTreshold = useRef(_draggingSlideTreshold ?? 0)\n const slideActionType = useRef<SlideActionType>('initial')\n const slideModeType = useRef<SlideMode>('initial')\n const prevSlidedValue = useRef(0)\n const [spring, setSpring] = useSpring(() => ({\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 const activeItem = useRef(initialActiveItem)\n const firstItemReached = useRef(initialActiveItem === 0)\n const lastItemReached = useRef(false)\n const mainCarouselWrapperRef = useRef<HTMLDivElement | null>(null)\n const carouselTrackWrapperRef = useRef<HTMLDivElement | null>(null)\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 { emitEvent, useListenToCustomEvent } = useEventsModule<'use-spring'>()\n const { thumbsFragment, handleScroll } = useThumbsModule({\n withThumbs: !!withThumbs,\n thumbsSlideAxis,\n prepareThumbsData,\n items: items as SpringCarouselWithThumbs['items'],\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: 'click' | 'drag'\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\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 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 } else {\n ref.style.left = '0px'\n ref.style.top = '0px'\n }\n }\n\n const currentFromValue = Math.abs(getFromValue())\n\n if (\n currentFromValue < getTotalScrollValue() &&\n slideType === 'fluid' &&\n lastItemReached.current &&\n !withLoop\n ) {\n lastItemReached.current = false\n }\n if (currentFromValue > getTotalScrollValue() && !withLoop) {\n const val = -getTotalScrollValue()\n lastItemReached.current = true\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val,\n })\n return\n }\n\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 if (!freeScroll && slideType === 'fixed') {\n const val = -(getSlideValue() * activeItem.current)\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val,\n })\n }\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 (index) {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current - getSlideValue()\n }\n\n if (index) {\n return -(index * getSlideValue())\n }\n return prevSlidedValue.current + getSlideValue()\n }\n function slideToPrevItem(\n type: Exclude<SlideMode, 'initial'> = 'click',\n index?: number,\n ) {\n if (!init || (firstItemReached.current && !withLoop)) return\n\n slideActionType.current = 'prev'\n lastItemReached.current = false\n\n const nextItem = 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 })\n return\n }\n }\n if (withLoop && firstItemReached.current) {\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 })\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 })\n }\n function slideToNextItem(\n type: Exclude<SlideMode, 'initial'> = 'click',\n index?: number,\n ) {\n if (!init || (lastItemReached.current && !withLoop)) return\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 })\n return\n }\n }\n if (withLoop && lastItemReached.current) {\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 })\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 })\n }\n\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 adjustCarouselWrapperPosition()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n initialStartingPosition,\n itemsPerSlide,\n withLoop,\n startEndGutter,\n gutter,\n freeScroll,\n slideType,\n init,\n ])\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 if (_draggingSlideTreshold) {\n draggingSlideTreshold.current = _draggingSlideTreshold\n } else {\n draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_draggingSlideTreshold])\n useEffect(() => {\n function handleResize() {\n if (window.innerWidth === prevWindowWidth.current) return\n prevWindowWidth.current = window.innerWidth\n adjustCarouselWrapperPosition()\n }\n if ('ResizeObserver' in window && mainCarouselWrapperRef.current) {\n const observer = new ResizeObserver(() => {\n prevWindowWidth.current = window.innerWidth\n adjustCarouselWrapperPosition()\n })\n observer.observe(mainCarouselWrapperRef.current)\n return () => {\n observer.disconnect()\n }\n } else {\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n carouselSlideAxis,\n initialStartingPosition,\n itemsPerSlide,\n withLoop,\n startEndGutter,\n gutter,\n freeScroll,\n slideType,\n init,\n ])\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 > draggingSlideTreshold.current\n const nextItemTreshold = currentMovement < -draggingSlideTreshold.current\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 (slideActionType.current === 'prev' && movement > 0) {\n state.cancel()\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\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('drag')\n state.cancel()\n } else if (slideWhenThresholdIsReached && prevItemTreshold) {\n slideToPrevItem('drag')\n state.cancel()\n }\n return\n }\n\n if (state.last && !state.canceled && freeScroll) {\n if (slideActionType.current === 'prev') {\n slideToPrevItem('drag')\n }\n if (slideActionType.current === 'next') {\n slideToNextItem('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('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('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 },\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 function internalSlideToItem(id: string | number) {\n if (!init) 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) {\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('click', newActiveItem)\n } else {\n slideToPrevItem('click', newActiveItem)\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: () => slideToPrevItem(),\n slideToNextItem: () => slideToNextItem(),\n }\n : {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: () => slideToPrevItem(),\n slideToNextItem: () => slideToNextItem(),\n slideToItem: internalSlideToItem,\n getIsNextItem,\n getIsPrevItem,\n getIsActiveItem,\n }\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 && 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 {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","length","prevWindowWidth","useRef","slideActionType","slideModeType","prevSlidedValue","spring","setSpring","useSpring","val","pause","onChange","value","mainCarouselWrapperRef","current","scrollLeft","Math","abs","scrollTop","setStartEndItemReachedOnFreeScroll","carouselTrackWrapperRef","style","transform","activeItem","firstItemReached","lastItemReached","internalItems","useCallback","map","i","Object","assign","id","getItems","emitEvent","useListenToCustomEvent","useEventsModule","thumbsFragment","handleScroll","useThumbsModule","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","currentFromValue","getFromValue","get","getToValue","type","next","slideToPrevItem","nextItemWillExceed","slideToNextItem","useEffect","console","warn","window","innerWidth","useLayoutEffect","floor","observer","ResizeObserver","observe","disconnect","addEventListener","removeEventListener","bindDrag","useDrag","state","isDragging","dragging","movement","offset","currentMovement","direction","prevItemTreshold","nextItemTreshold","cancel","friction","tension","last","canceled","enabled","axis","findItemIndex","error","itemIndex","findIndex","item","res","newActiveItem","getIsNextItem","_activeItem","getIsPrevItem","getIsActiveItem","_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 {\n SlideActionType,\n SlideMode,\n UseSpringCarouselComplete,\n SpringCarouselWithThumbs,\n UseSpringCarouselWithFreeScroll,\n UseSpringCarouselWithThumbs,\n UseSpringCarouselWithNoThumbs,\n UseSpringCarouselWithNoFixedItems,\n UseSpringCarouselWithFixedItems,\n UseSpringFreeScrollReturnType,\n UseSpringReturnType,\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}: UseSpringCarouselComplete): ReturnType<typeof freeScroll> {\n const itemsPerSlide = _itemsPerSlide > items.length ? items.length : _itemsPerSlide\n const prevWindowWidth = useRef(0)\n const draggingSlideTreshold = useRef(_draggingSlideTreshold ?? 0)\n const slideActionType = useRef<SlideActionType>('initial')\n const slideModeType = useRef<SlideMode>('initial')\n const prevSlidedValue = useRef(0)\n const [spring, setSpring] = useSpring(() => ({\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 const activeItem = useRef(initialActiveItem)\n const firstItemReached = useRef(initialActiveItem === 0)\n const lastItemReached = useRef(false)\n const mainCarouselWrapperRef = useRef<HTMLDivElement | null>(null)\n const carouselTrackWrapperRef = useRef<HTMLDivElement | null>(null)\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 { emitEvent, useListenToCustomEvent } = useEventsModule<'use-spring'>()\n const { thumbsFragment, handleScroll } = useThumbsModule({\n withThumbs: !!withThumbs,\n thumbsSlideAxis,\n prepareThumbsData,\n items: items as SpringCarouselWithThumbs['items'],\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: 'click' | 'drag'\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 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,\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 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 } else {\n ref.style.left = '0px'\n ref.style.top = '0px'\n }\n }\n\n const currentFromValue = Math.abs(getFromValue())\n\n if (\n currentFromValue < getTotalScrollValue() &&\n slideType === 'fluid' &&\n lastItemReached.current &&\n !withLoop\n ) {\n lastItemReached.current = false\n }\n if (currentFromValue > getTotalScrollValue() && !withLoop) {\n const val = -getTotalScrollValue()\n lastItemReached.current = true\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val,\n })\n return\n }\n\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 if (!freeScroll && slideType === 'fixed') {\n const val = -(getSlideValue() * activeItem.current)\n prevSlidedValue.current = val\n setSpring.start({\n immediate: true,\n val,\n })\n }\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 function slideToPrevItem(\n type: Exclude<SlideMode, 'initial'> = 'click',\n index?: number,\n immediate?: boolean,\n ) {\n if (!init || (firstItemReached.current && !withLoop)) return\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) {\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(\n type: Exclude<SlideMode, 'initial'> = 'click',\n index?: number,\n immediate?: boolean,\n ) {\n if (!init || (lastItemReached.current && !withLoop)) return\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) {\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\n useEffect(() => {\n internalSlideToItem(initialActiveItem, !animateWhenActiveItemChange)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialActiveItem, animateWhenActiveItemChange])\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 adjustCarouselWrapperPosition()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n initialStartingPosition,\n itemsPerSlide,\n withLoop,\n startEndGutter,\n gutter,\n freeScroll,\n slideType,\n init,\n ])\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 if (_draggingSlideTreshold) {\n draggingSlideTreshold.current = _draggingSlideTreshold\n } else {\n draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_draggingSlideTreshold])\n useEffect(() => {\n function handleResize() {\n if (window.innerWidth === prevWindowWidth.current) return\n prevWindowWidth.current = window.innerWidth\n adjustCarouselWrapperPosition()\n }\n if ('ResizeObserver' in window && mainCarouselWrapperRef.current) {\n const observer = new ResizeObserver(() => {\n prevWindowWidth.current = window.innerWidth\n adjustCarouselWrapperPosition()\n })\n observer.observe(mainCarouselWrapperRef.current)\n return () => {\n observer.disconnect()\n }\n } else {\n window.addEventListener('resize', handleResize)\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n carouselSlideAxis,\n initialStartingPosition,\n itemsPerSlide,\n withLoop,\n startEndGutter,\n gutter,\n freeScroll,\n slideType,\n init,\n ])\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 > draggingSlideTreshold.current\n const nextItemTreshold = currentMovement < -draggingSlideTreshold.current\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 (slideActionType.current === 'prev' && movement > 0) {\n state.cancel()\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\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('drag')\n state.cancel()\n } else if (slideWhenThresholdIsReached && prevItemTreshold) {\n slideToPrevItem('drag')\n state.cancel()\n }\n return\n }\n\n if (state.last && !state.canceled && freeScroll) {\n if (slideActionType.current === 'prev') {\n slideToPrevItem('drag')\n }\n if (slideActionType.current === 'next') {\n slideToNextItem('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('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('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 function internalSlideToItem(id: string | number, immediate = false) {\n if (!init) 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) {\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('click', newActiveItem, immediate)\n } else {\n slideToPrevItem('click', newActiveItem, immediate)\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: () => slideToPrevItem(),\n slideToNextItem: () => slideToNextItem(),\n }\n : {\n useListenToCustomEvent,\n enterFullscreen,\n exitFullscreen,\n getIsFullscreen,\n slideToPrevItem: () => slideToPrevItem(),\n slideToNextItem: () => slideToNextItem(),\n slideToItem: internalSlideToItem,\n getIsNextItem,\n getIsPrevItem,\n getIsActiveItem,\n }\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","length","prevWindowWidth","useRef","slideActionType","slideModeType","prevSlidedValue","spring","setSpring","useSpring","val","pause","onChange","value","mainCarouselWrapperRef","current","scrollLeft","Math","abs","scrollTop","setStartEndItemReachedOnFreeScroll","carouselTrackWrapperRef","style","transform","activeItem","firstItemReached","lastItemReached","internalItems","useCallback","map","i","Object","assign","id","getItems","emitEvent","useListenToCustomEvent","useEventsModule","thumbsFragment","handleScroll","useThumbsModule","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","currentFromValue","getFromValue","get","getToValue","type","next","slideToPrevItem","nextItemWillExceed","slideToNextItem","useEffect","internalSlideToItem","console","warn","window","innerWidth","useLayoutEffect","floor","observer","ResizeObserver","observe","disconnect","addEventListener","removeEventListener","bindDrag","useDrag","state","isDragging","dragging","movement","offset","currentMovement","direction","prevItemTreshold","nextItemTreshold","cancel","friction","tension","last","canceled","enabled","axis","findItemIndex","error","itemIndex","findIndex","item","newActiveItem","getIsNextItem","_activeItem","getIsPrevItem","getIsActiveItem","res","_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,14 +1,24 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { UseListenToCustomEvent } from '../modules/useEventsModule';
|
|
3
|
+
import { UseSpringReturnType } from './useSpringCarousel.types';
|
|
2
4
|
export declare type SlideActionType = 'prev' | 'next' | 'initial';
|
|
3
5
|
export declare type SlideMode = 'drag' | 'click' | 'initial';
|
|
4
6
|
export declare type TransitionSlideMode = 'swipe' | 'click' | 'initial';
|
|
7
|
+
export declare type RenderItemProps = {
|
|
8
|
+
useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
|
|
9
|
+
getIsActiveItem: UseSpringReturnType['getIsActiveItem'];
|
|
10
|
+
getIsPrevItem: UseSpringReturnType['getIsPrevItem'];
|
|
11
|
+
getIsNextItem: UseSpringReturnType['getIsNextItem'];
|
|
12
|
+
};
|
|
13
|
+
declare type RenderItemFn = (props: RenderItemProps) => JSX.Element;
|
|
5
14
|
export declare type ItemWithThumb = {
|
|
6
15
|
id: string;
|
|
7
|
-
renderItem: ReactNode;
|
|
8
|
-
renderThumb: ReactNode;
|
|
16
|
+
renderItem: ReactNode | RenderItemFn;
|
|
17
|
+
renderThumb: ReactNode | RenderItemFn;
|
|
9
18
|
};
|
|
10
19
|
export declare type ItemWithNoThumb = {
|
|
11
20
|
id: string;
|
|
12
|
-
renderItem: ReactNode;
|
|
21
|
+
renderItem: ReactNode | RenderItemFn;
|
|
13
22
|
};
|
|
14
23
|
export declare type PrepareThumbsData = (items: Omit<ItemWithThumb, 'renderItem'>[]) => Omit<ItemWithThumb, 'renderItem'>[];
|
|
24
|
+
export {};
|
|
@@ -25,6 +25,7 @@ export declare type UseSpringFreeScrollReturnType = {
|
|
|
25
25
|
slideToNextItem(): void;
|
|
26
26
|
slideToPrevItem(): void;
|
|
27
27
|
};
|
|
28
|
+
export declare type SlideType = 'fixed' | 'fluid';
|
|
28
29
|
export declare type SpringCarouselWithThumbs = {
|
|
29
30
|
withThumbs: true;
|
|
30
31
|
thumbsSlideAxis?: 'x' | 'y';
|
|
@@ -38,18 +39,20 @@ export declare type SpringCarouselWithNoThumbs = {
|
|
|
38
39
|
prepareThumbsData?: never;
|
|
39
40
|
};
|
|
40
41
|
export declare type SpringCarouselWithFixedItems = {
|
|
41
|
-
slideType?:
|
|
42
|
+
slideType?: SlideType[0];
|
|
42
43
|
itemsPerSlide?: number;
|
|
43
44
|
startEndGutter?: number;
|
|
44
45
|
initialStartingPosition?: 'start' | 'center' | 'end';
|
|
45
46
|
initialActiveItem?: number;
|
|
47
|
+
animateWhenActiveItemChange?: boolean;
|
|
46
48
|
};
|
|
47
49
|
export declare type SpringCarouselWithNoFixedItems = {
|
|
48
|
-
slideType?:
|
|
50
|
+
slideType?: SlideType[1];
|
|
49
51
|
itemsPerSlide?: never;
|
|
50
52
|
startEndGutter?: never;
|
|
51
53
|
initialStartingPosition?: never;
|
|
52
54
|
initialActiveItem?: never;
|
|
55
|
+
animateWhenActiveItemChange?: never;
|
|
53
56
|
};
|
|
54
57
|
export declare type SpringCarouselWithLoop = {
|
|
55
58
|
withLoop?: true;
|
|
@@ -68,7 +71,7 @@ export declare type SpringCarouselFreeScroll = {
|
|
|
68
71
|
export declare type SpringCarouselNoFreeScroll = {
|
|
69
72
|
freeScroll?: never | false | undefined;
|
|
70
73
|
withLoop?: boolean;
|
|
71
|
-
slideType?:
|
|
74
|
+
slideType?: SlideType;
|
|
72
75
|
enableFreeScrollDrag?: never;
|
|
73
76
|
initialActiveItem?: number;
|
|
74
77
|
itemsPerSlide?: number;
|
package/dist/umd/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.ReactSpring,e.React,e.UseGestureReact,e.Screenfull)}(this,(function(e,t,n,r,i,s){"use strict";const c="RSC::Event";function o(){const e=r.useRef(null);return{useListenToCustomEvent:function(t){r.useEffect((()=>{function n(e){t(e.detail)}if(e.current||(e.current=document.createElement("div")),e.current)return e.current.addEventListener(c,n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(c,n,!1)}}),[t])},emitEvent:function(t){if(e.current){const n=new CustomEvent(c,{detail:t});e.current.dispatchEvent(n)}}}}function l({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:n}){const i=r.useRef(!1);function c(e){i.current=e}return r.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t(!0),n&&n()),document.fullscreenElement||(c(!1),t(!1),n&&n())}if(s.isEnabled)return s.on("change",e),()=>{s.isEnabled&&s.off("change",e)}}),[]),{enterFullscreen:function(t){s.isEnabled&&s.request(t||e.current)},exitFullscreen:function(){s.isEnabled&&s.exit()},getIsFullscreen:function(){return i.current}}}function u({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:s,items:c}){const o=r.useRef(null),[l,u]=n.useSpring((()=>({val:0})));function a(){var t;return Math.round(Number(null===(t=o.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-o.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:o,onWheel:()=>l.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 e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:e,renderThumb:n})=>{const r=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:n}),r)}))})):null,handleScroll:function(t){var n,r;const i=o.current?o.current.querySelector(`#thumb-item-${c[t].id}`):null;if(i&&o.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,s=t>a()?a():t;u.start({from:{val:null!==(r=null===(n=o.current)||void 0===n?void 0:n["x"===e?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:s},onChange:({value:t})=>{o.current&&(o.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const a=r.createContext(void 0);const d={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};const f=r.createContext(void 0);e.useEventsModule=o,e.useFullscreenModule=l,e.useSpringCarousel=function({items:e,init:s=!0,withThumbs:c,thumbsSlideAxis:d="x",itemsPerSlide:f=1,slideType:g="fixed",gutter:h=0,withLoop:m=!1,startEndGutter:v=0,carouselSlideAxis:p="x",disableGestures:x=!1,draggingSlideTreshold:b,slideWhenThresholdIsReached:w=!1,freeScroll:j,enableFreeScrollDrag:y,initialStartingPosition:T,prepareThumbsData:O,initialActiveItem:R=0}){const E=f>e.length?e.length:f,S=r.useRef(0),C=r.useRef(null!=b?b:0),I=r.useRef("initial"),M=r.useRef("initial"),F=r.useRef(0),[L,N]=n.useSpring((()=>({val:0,pause:!s,onChange({value:e}){j&&P.current?("x"===p?P.current.scrollLeft=Math.abs(e.val):P.current.scrollTop=Math.abs(e.val),re()):W.current&&(W.current.style.transform="x"===p?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),A=r.useRef(R),$=r.useRef(0===R),k=r.useRef(!1),P=r.useRef(null),W=r.useRef(null),q=r.useCallback((()=>m?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,m])(),{emitEvent:D,useListenToCustomEvent:B}=o(),{thumbsFragment:z,handleScroll:H}=u({withThumbs:!!c,thumbsSlideAxis:d,prepareThumbsData:O,items:e}),{enterFullscreen:G,exitFullscreen:X,getIsFullscreen:Y}=l({mainCarouselWrapperRef:P,handleResize:()=>V(),onFullScreenChange:e=>{D({eventName:"onFullscreenChange",isFullscreen:e})}});function J(){var e;const t=null===(e=P.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===p?"width":"height"]+h}function U({from:t,to:r,nextActiveItem:i,immediate:s=!1,slideMode:o}){M.current=o,"number"==typeof i&&(j||(A.current=i),D({eventName:"onSlideStartChange",slideActionType:I.current,slideMode:M.current,nextItem:{startReached:$.current,endReached:k.current,index:j?-1:A.current,id:j?"":e[A.current].id}})),F.current=r,N.start({immediate:s,from:{val:t},to:{val:r},config:Object.assign(Object.assign({},n.config.default),{velocity:L.val.velocity}),onRest(t){!s&&t.finished&&D({eventName:"onSlideChange",slideActionType:I.current,slideMode:M.current,currentItem:{startReached:$.current,endReached:k.current,index:j?-1:A.current,id:j?"":e[A.current].id}})}}),c&&!s&&H(A.current)}function K(){var t;return m?J()*e.length:Math.round(Number(null===(t=W.current)||void 0===t?void 0:t["x"===p?"scrollWidth":"scrollHeight"])-W.current.getBoundingClientRect()["x"===p?"width":"height"]-2*v)}function Q(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===p?"width":"height"]+h}function V(){const t="x"===p?"left":"top";function n(e){const n=W.current;n&&(m?(n.style.top="0px",n.style.left="0px",n.style[t]=`-${e-v}px`):(n.style.left="0px",n.style.top="0px"))}const r=Math.abs(Z());if(r<K()&&"fluid"===g&&k.current&&!m&&(k.current=!1),r>K()&&!m){const e=-K();return k.current=!0,F.current=e,void N.start({immediate:!0,val:e})}if(n("center"===T?Q()*e.length-J()*Math.round((E-1)/2):"end"===T?Q()*e.length-J()*Math.round(E-1):Q()*e.length),!j&&"fixed"===g){const e=-J()*A.current;F.current=e,N.start({immediate:!0,val:e})}}function Z(){return j&&P.current?P.current["x"===p?"scrollLeft":"scrollTop"]:L.val.get()}function _(e,t){if(j&&"next"===e){const e=F.current+J();return e>K()?K():e}if(j&&"prev"===e){const e=F.current-J();return e<0?0:e}return"next"===e?t?-t*J():F.current-J():t?-t*J():F.current+J()}function ee(t="click",n){if(!s||$.current&&!m)return;I.current="prev",k.current=!1;const r=n||A.current-1;if(!m){const e=j?_("prev",n)-J()/3<0:_("prev",n)+J()/3>0;if($.current)return;if(e)return $.current=!0,k.current=!1,void U({slideMode:t,from:Z(),to:0,nextActiveItem:0})}if(m&&$.current)return $.current=!1,k.current=!0,void U({slideMode:t,from:Z()-J()*e.length,to:-J()*e.length+J(),nextActiveItem:e.length-1});0===r&&($.current=!0),r!==e.length-1&&-1!==r||(k.current=!0),U({slideMode:t,from:Z(),to:_("prev",n),nextActiveItem:r})}function te(t="click",n){if(!s||k.current&&!m)return;I.current="next",$.current=!1;const r=n||A.current+1;if(!m){const e=Math.abs(_("next",n))>K()-J()/3;if(k.current)return;if(e)return $.current=!1,k.current=!0,void U({slideMode:t,from:Z(),to:j?K():-K(),nextActiveItem:r})}if(m&&k.current)return k.current=!1,$.current=!0,void U({slideMode:t,from:Z()+J()*e.length,to:0,nextActiveItem:0});0===r&&($.current=!0),r===e.length-1&&(k.current=!0),U({slideMode:t,from:Z(),to:_("next",n),nextActiveItem:r})}r.useEffect((()=>{if(s){if(R>e.length-1)throw new Error(`initialActiveItem (${R}) is greater than the total quantity available items (${e.length}).`);E>e.length&&console.warn(`itemsPerSlide (${E}) is greater than the total quantity available items (${e.length}). Fallback to ${e.length})`)}}),[R,e,E,s]),r.useEffect((()=>{S.current=window.innerWidth}),[]),r.useEffect((()=>{V()}),[T,E,m,v,h,j,g,s]),r.useLayoutEffect((()=>{W.current&&V()}),[]),r.useEffect((()=>{C.current=b||Math.floor(J()/2/2)}),[b]),r.useEffect((()=>{function e(){window.innerWidth!==S.current&&(S.current=window.innerWidth,V())}if("ResizeObserver"in window&&P.current){const e=new ResizeObserver((()=>{S.current=window.innerWidth,V()}));return e.observe(P.current),()=>{e.disconnect()}}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[p,T,E,m,v,h,j,g,s]);const ne=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===p?0:1],i=e.movement["x"===p?0:1],s=e.direction["x"===p?0:1],c=i>C.current,o=i<-C.current;if(t)return I.current=s>0?"prev":"next",D(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:I.current})),j?"prev"===I.current&&r>0?(e.cancel(),void N.start({from:{val:Z()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void N.start({from:{val:Z()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}}):(N.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(w&&o?(te("drag"),e.cancel()):w&&c&&(ee("drag"),e.cancel())));e.last&&!e.canceled&&j&&("prev"===I.current&&ee("drag"),"next"===I.current&&te("drag")),!e.last||e.canceled||j||(o?!m&&k.current?N.start({val:-K(),config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):te("drag"):c?!m&&$.current?N.start({val:0,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):ee("drag"):N.start({val:F.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}))}),{enabled:s&&!x&&!j||!!j&&!!y,axis:p,from:()=>j&&P.current?[-P.current.scrollLeft,-P.current.scrollTop]:[L.val.get(),L.val.get()]});function re(){P.current&&(F.current=P.current["x"===p?"scrollLeft":"scrollTop"],0===P.current["x"===p?"scrollLeft":"scrollTop"]&&($.current=!0,k.current=!1),P.current["x"===p?"scrollLeft":"scrollTop"]>0&&P.current["x"===p?"scrollLeft":"scrollTop"]<K()&&($.current=!1,k.current=!1),P.current["x"===p?"scrollLeft":"scrollTop"]===K()&&($.current=!1,k.current=!0))}function ie(t,n){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r<0||r>=e.length){if(n)throw new Error(n);console.error(`The item doesn't exist; check that the id provided - ${t} - is correct.`),r=-1}return r}const se=j?{useListenToCustomEvent:B,enterFullscreen:G,exitFullscreen:X,getIsFullscreen:Y,slideToPrevItem:()=>ee(),slideToNextItem:()=>te()}:{useListenToCustomEvent:B,enterFullscreen:G,exitFullscreen:X,getIsFullscreen:Y,slideToPrevItem:()=>ee(),slideToNextItem:()=>te(),slideToItem:function(t){if(!s)return;$.current=!1,k.current=!1;const n=ie(t,"The item you want to slide to doesn't exist; check the provided id.");if(n===A.current)return;const r=ie(e[A.current].id),i=ie(e[n].id);i>r?te("click",i):ee("click",i)},getIsNextItem:function(t){const n=ie(t,"The item doesn't exist; check the provided id."),r=A.current;return m&&r===e.length-1?0===n:n===r+1},getIsPrevItem:function(t){const n=ie(t,"The item doesn't exist; check the provided id."),r=A.current;return m&&0===r?n===e.length-1:n===r-1},getIsActiveItem:function(e){return ie(e,"The item you want to check doesn't exist; check the provided id.")===A.current}},ce=t.jsx(a.Provider,Object.assign({value:se},{children:z})),oe=t.jsx(a.Provider,Object.assign({value:se},{children:t.jsx("div",Object.assign({className:"use-spring-carousel-main-wrapper",ref:P},j?{onWheel(){L.val.stop(),re()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},j?"x"===p?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsxs("div",Object.assign({className:"use-spring-carousel-track-wrapper",ref:W},ne(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===p?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*v}px)`;return{width:"x"===p?e:"100%",height:"y"===p?e:"100%"}}())},{children:[j&&v?t.jsx("div",{style:{flexShrink:0,width:v}}):null,q.map(((n,r)=>{return t.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},(i=!!j&&r===e.length-1,"fixed"!==g||j?Object.assign({marginRight:`${i?0:h}px`}):{marginRight:`${i?0:h}px`,flex:`1 0 calc(100% / ${E} - ${h*(E-1)/E}px)`}))},{children:n.renderItem}),`${n.id}-${r}`);var i})),j&&v?t.jsx("div",{style:{flexShrink:0,width:v}}):null]}))}))}));return Object.assign(Object.assign({},se),{carouselFragment:oe,thumbsFragment:ce})},e.useSpringCarouselContext=function(){const e=r.useContext(a);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},e.useThumbsModule=u,e.useTransitionCarousel=function({init:e=!0,disableGestures:s=!1,items:c,springConfig:l=n.config.default,exitBeforeEnter:a=!1,trail:g,withLoop:h=!1,activeItem:m,toPrevItemSpringProps:v=d,toNextItemSpringProps:p=d,draggingSlideTreshold:x=50,thumbsSlideAxis:b="x"}){const w=r.useRef("next"),j=r.useRef("initial"),y=r.useRef(null),[T,O]=r.useState(null!=m?m:0),{emitEvent:R,useListenToCustomEvent:E}=o(),{handleScroll:S,thumbsFragment:C}=u({thumbsSlideAxis:b,items:c});function I({to:e,slideType:t,slideMode:n}){w.current=t,j.current=n,R({eventName:"onSlideStartChange",slideActionType:w.current,slideMode:j.current,nextItem:{index:e,id:c[e].id,startReached:0===e,endReached:e===c.length-1}}),O(e),S(T)}function M(t){if(!e)return;const n=0===T;!h&&n||I(h&&n?{to:c.length-1,slideType:"prev",slideMode:t}:{to:T-1,slideType:"prev",slideMode:t})}function F(t){if(!e)return;const n=T===c.length-1;!h&&n||I(h&&n?{to:0,slideType:"next",slideMode:t}:{to:T+1,slideType:"next",slideMode:t})}r.useEffect((()=>{"number"==typeof m&&m!==T&&O(m)}),[m]);const L=n.useTransition(T,Object.assign(Object.assign({config:l,key:null,trail:g,exitBeforeEnter:a},"prev"===w.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:"next"===w.current?{initial:Object.assign({},p.initial),from:Object.assign({},p.from),enter:Object.assign({},p.enter),leave:Object.assign({},p.leave)}:{initial:Object.assign({},d.initial),from:Object.assign({},d.from),enter:Object.assign({},d.enter),leave:Object.assign({},d.leave)}),{onRest(e,t,n){e.finished&&n===T&&R({eventName:"onSlideChange",slideActionType:w.current,slideMode:j.current,currentItem:{index:T,id:c[T].id,startReached:0===T,endReached:T===c.length-1}})}})),N=i.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>x,n=t<-x,r=0===T,i=T===c.length-1;if(n){if(!h&&i)return;R({eventName:"onLeftSwipe"}),F("swipe")}else if(e){if(!h&&r)return;R({eventName:"onRightSwipe"}),M("swipe")}}}),{enabled:!s}),A=L(((e,r,i,s)=>t.jsx(n.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},e),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:c[r].renderItem})))),$={useListenToCustomEvent:E,slideToPrevItem:()=>M("click"),slideToNextItem:()=>F("click")},k=t.jsx(f.Provider,Object.assign({value:$},{children:C})),P=t.jsx(f.Provider,Object.assign({value:$},{children:t.jsx("div",Object.assign({ref:y},N(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:A}))}));return Object.assign(Object.assign({},$),{carouselFragment:P,thumbsFragment:k})},e.useTransitionCarouselContext=function(){const e=r.useContext(f);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}}));
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.ReactSpring,e.React,e.UseGestureReact,e.Screenfull)}(this,(function(e,t,n,r,i,s){"use strict";const c="RSC::Event";function o(){const e=r.useRef(null);return{useListenToCustomEvent:function(t){r.useEffect((()=>{function n(e){t(e.detail)}if(e.current||(e.current=document.createElement("div")),e.current)return e.current.addEventListener(c,n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(c,n,!1)}}),[t])},emitEvent:function(t){if(e.current){const n=new CustomEvent(c,{detail:t});e.current.dispatchEvent(n)}}}}function l({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:n}){const i=r.useRef(!1);function c(e){i.current=e}return r.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t(!0),n&&n()),document.fullscreenElement||(c(!1),t(!1),n&&n())}if(s.isEnabled)return s.on("change",e),()=>{s.isEnabled&&s.off("change",e)}}),[]),{enterFullscreen:function(t){s.isEnabled&&s.request(t||e.current)},exitFullscreen:function(){s.isEnabled&&s.exit()},getIsFullscreen:function(){return i.current}}}function u({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:s,items:c}){const o=r.useRef(null),[l,u]=n.useSpring((()=>({val:0})));function a(){var t;return Math.round(Number(null===(t=o.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-o.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:o,onWheel:()=>l.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 e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:e,renderThumb:n})=>{const r=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:n}),r)}))})):null,handleScroll:function(t){var n,r;const i=o.current?o.current.querySelector(`#thumb-item-${c[t].id}`):null;if(i&&o.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,s=t>a()?a():t;u.start({from:{val:null!==(r=null===(n=o.current)||void 0===n?void 0:n["x"===e?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:s},onChange:({value:t})=>{o.current&&(o.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const a=r.createContext(void 0);const d={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};const f=r.createContext(void 0);e.useEventsModule=o,e.useFullscreenModule=l,e.useSpringCarousel=function({items:e,init:s=!0,withThumbs:c,thumbsSlideAxis:d="x",itemsPerSlide:f=1,slideType:m="fixed",gutter:g=0,withLoop:h=!1,startEndGutter:v=0,carouselSlideAxis:p="x",disableGestures:x=!1,draggingSlideTreshold:b,slideWhenThresholdIsReached:y=!1,freeScroll:j,enableFreeScrollDrag:w,initialStartingPosition:T,prepareThumbsData:O,initialActiveItem:R=0,animateWhenActiveItemChange:E=!0}){const I=f>e.length?e.length:f,S=r.useRef(0),C=r.useRef(null!=b?b:0),M=r.useRef("initial"),F=r.useRef("initial"),L=r.useRef(0),[A,N]=n.useSpring((()=>({val:0,pause:!s,onChange({value:e}){j&&W.current?("x"===p?W.current.scrollLeft=Math.abs(e.val):W.current.scrollTop=Math.abs(e.val),ie()):q.current&&(q.current.style.transform="x"===p?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),$=r.useRef(R),k=r.useRef(0===R),P=r.useRef(!1),W=r.useRef(null),q=r.useRef(null),D=r.useCallback((()=>h?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,h])(),{emitEvent:B,useListenToCustomEvent:z}=o(),{thumbsFragment:H,handleScroll:G}=u({withThumbs:!!c,thumbsSlideAxis:d,prepareThumbsData:O,items:e}),{enterFullscreen:X,exitFullscreen:Y,getIsFullscreen:J}=l({mainCarouselWrapperRef:W,handleResize:()=>Z(),onFullScreenChange:e=>{B({eventName:"onFullscreenChange",isFullscreen:e})}});function U(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===p?"width":"height"]+g}function K({from:t,to:r,nextActiveItem:i,immediate:s=!1,slideMode:o}){F.current=o,"number"==typeof i&&(j||($.current=i),B({eventName:"onSlideStartChange",slideActionType:M.current,slideMode:F.current,nextItem:{startReached:k.current,endReached:P.current,index:j?-1:$.current,id:j?"":e[$.current].id}})),L.current=r,N.start({immediate:s,from:{val:t},to:{val:r},config:Object.assign(Object.assign({},n.config.default),{velocity:A.val.velocity}),onRest(t){!s&&t.finished&&B({eventName:"onSlideChange",slideActionType:M.current,slideMode:F.current,currentItem:{startReached:k.current,endReached:P.current,index:j?-1:$.current,id:j?"":e[$.current].id}})}}),c&&!s&&G($.current)}function Q(){var t;return h?U()*e.length:Math.round(Number(null===(t=q.current)||void 0===t?void 0:t["x"===p?"scrollWidth":"scrollHeight"])-q.current.getBoundingClientRect()["x"===p?"width":"height"]-v)}function V(){var e;const t=null===(e=q.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===p?"width":"height"]+g}function Z(){const t="x"===p?"left":"top";function n(e){const n=q.current;n&&(h?(n.style.top="0px",n.style.left="0px",n.style[t]=`-${e-v}px`):(n.style.left="0px",n.style.top="0px"))}const r=Math.abs(_());if(r<Q()&&"fluid"===m&&P.current&&!h&&(P.current=!1),r>Q()&&!h){const e=-Q();return P.current=!0,L.current=e,void N.start({immediate:!0,val:e})}if(n("center"===T?V()*e.length-U()*Math.round((I-1)/2):"end"===T?V()*e.length-U()*Math.round(I-1):V()*e.length),!j&&"fixed"===m){const e=-U()*$.current;L.current=e,N.start({immediate:!0,val:e})}}function _(){return j&&W.current?W.current["x"===p?"scrollLeft":"scrollTop"]:A.val.get()}function ee(e,t){if(j&&"next"===e){const e=L.current+U();return e>Q()?Q():e}if(j&&"prev"===e){const e=L.current-U();return e<0?0:e}return"next"===e?"number"==typeof t?-t*U():L.current-U():"number"==typeof t?-t*U():L.current+U()}function te(t="click",n,r){if(!s||k.current&&!h)return;M.current="prev",P.current=!1;const i="number"==typeof n?n:$.current-1;if(!h){const e=j?ee("prev",n)-U()/3<0:ee("prev",n)+U()/3>0;if(k.current)return;if(e)return k.current=!0,P.current=!1,void K({slideMode:t,from:_(),to:0,nextActiveItem:0,immediate:r})}if(h&&k.current)return k.current=!1,P.current=!0,void K({slideMode:t,from:_()-U()*e.length,to:-U()*e.length+U(),nextActiveItem:e.length-1,immediate:r});0===i&&(k.current=!0),i!==e.length-1&&-1!==i||(P.current=!0),K({slideMode:t,from:_(),to:ee("prev",n),nextActiveItem:i,immediate:r})}function ne(t="click",n,r){if(!s||P.current&&!h)return;M.current="next",k.current=!1;const i=n||$.current+1;if(!h){const e=Math.abs(ee("next",n))>Q()-U()/3;if(P.current)return;if(e)return k.current=!1,P.current=!0,void K({slideMode:t,from:_(),to:j?Q():-Q(),nextActiveItem:i,immediate:r})}if(h&&P.current)return P.current=!1,k.current=!0,void K({slideMode:t,from:_()+U()*e.length,to:0,nextActiveItem:0,immediate:r});0===i&&(k.current=!0),i===e.length-1&&(P.current=!0),K({slideMode:t,from:_(),to:ee("next",n),nextActiveItem:i,immediate:r})}r.useEffect((()=>{ce(R,!E)}),[R,E]),r.useEffect((()=>{if(s){if(R>e.length-1)throw new Error(`initialActiveItem (${R}) is greater than the total quantity available items (${e.length}).`);I>e.length&&console.warn(`itemsPerSlide (${I}) is greater than the total quantity available items (${e.length}). Fallback to ${e.length})`)}}),[R,e,I,s]),r.useEffect((()=>{S.current=window.innerWidth}),[]),r.useEffect((()=>{Z()}),[T,I,h,v,g,j,m,s]),r.useLayoutEffect((()=>{q.current&&Z()}),[]),r.useEffect((()=>{C.current=b||Math.floor(U()/2/2)}),[b]),r.useEffect((()=>{function e(){window.innerWidth!==S.current&&(S.current=window.innerWidth,Z())}if("ResizeObserver"in window&&W.current){const e=new ResizeObserver((()=>{S.current=window.innerWidth,Z()}));return e.observe(W.current),()=>{e.disconnect()}}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[p,T,I,h,v,g,j,m,s]);const re=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===p?0:1],i=e.movement["x"===p?0:1],s=e.direction["x"===p?0:1],c=i>C.current,o=i<-C.current;if(t)return M.current=s>0?"prev":"next",B(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:M.current})),j?"prev"===M.current&&r>0?(e.cancel(),void N.start({from:{val:_()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void N.start({from:{val:_()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}}):(N.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(y&&o?(ne("drag"),e.cancel()):y&&c&&(te("drag"),e.cancel())));e.last&&!e.canceled&&j&&("prev"===M.current&&te("drag"),"next"===M.current&&ne("drag")),!e.last||e.canceled||j||(o?!h&&P.current?N.start({val:-Q(),config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):ne("drag"):c?!h&&k.current?N.start({val:0,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})}):te("drag"):N.start({val:L.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})})),e.last&&e.canceled&&N.start({val:L.current,config:Object.assign(Object.assign({},n.config.default),{velocity:e.velocity})})}),{enabled:s&&!x&&!j||!!j&&!!w,axis:p,from:()=>j&&W.current?[-W.current.scrollLeft,-W.current.scrollTop]:[A.val.get(),A.val.get()]});function ie(){W.current&&(L.current=W.current["x"===p?"scrollLeft":"scrollTop"],0===W.current["x"===p?"scrollLeft":"scrollTop"]&&(k.current=!0,P.current=!1),W.current["x"===p?"scrollLeft":"scrollTop"]>0&&W.current["x"===p?"scrollLeft":"scrollTop"]<Q()&&(k.current=!1,P.current=!1),W.current["x"===p?"scrollLeft":"scrollTop"]===Q()&&(k.current=!1,P.current=!0))}function se(t,n){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r<0||r>=e.length){if(n)throw new Error(n);console.error(`The item doesn't exist; check that the id provided - ${t} - is correct.`),r=-1}return r}function ce(t,n=!1){if(!s)return;k.current=!1,P.current=!1;const r=se(t,"The item you want to slide to doesn't exist; check the provided id.");if(r===$.current)return;const i=se(e[$.current].id),c=se(e[r].id);c>i?ne("click",c,n):te("click",c,n)}function oe(t){const n=se(t,"The item doesn't exist; check the provided id."),r=$.current;return h&&r===e.length-1?0===n:n===r+1}function le(t){const n=se(t,"The item doesn't exist; check the provided id."),r=$.current;return h&&0===r?n===e.length-1:n===r-1}function ue(e){return se(e,"The item you want to check doesn't exist; check the provided id.")===$.current}const ae=j?{useListenToCustomEvent:z,enterFullscreen:X,exitFullscreen:Y,getIsFullscreen:J,slideToPrevItem:()=>te(),slideToNextItem:()=>ne()}:{useListenToCustomEvent:z,enterFullscreen:X,exitFullscreen:Y,getIsFullscreen:J,slideToPrevItem:()=>te(),slideToNextItem:()=>ne(),slideToItem:ce,getIsNextItem:oe,getIsPrevItem:le,getIsActiveItem:ue},de=t.jsx(a.Provider,Object.assign({value:ae},{children:H})),fe=t.jsx(a.Provider,Object.assign({value:ae},{children:t.jsx("div",Object.assign({className:"use-spring-carousel-main-wrapper",ref:W},j?{onWheel(){A.val.stop(),ie()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},j?"x"===p?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsxs("div",Object.assign({className:"use-spring-carousel-track-wrapper",ref:q},re(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===p?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*v}px)`;return{width:"x"===p?e:"100%",height:"y"===p?e:"100%"}}())},{children:[!j&&h||!v?null:t.jsx("div",{style:{flexShrink:0,width:v}}),D.map(((n,r)=>{return t.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},(i=!!j&&r===e.length-1,"fixed"!==m||j?Object.assign({marginRight:`${i?0:g}px`}):{marginRight:`${i?0:g}px`,flex:`1 0 calc(100% / ${I} - ${g*(I-1)/I}px)`}))},{children:"function"==typeof n.renderItem?n.renderItem({getIsActiveItem:ue,getIsNextItem:oe,getIsPrevItem:le,useListenToCustomEvent:z}):n.renderItem}),`${n.id}-${r}`);var i})),j&&v?t.jsx("div",{style:{flexShrink:0,width:v}}):null]}))}))}));return Object.assign(Object.assign({},ae),{carouselFragment:fe,thumbsFragment:de})},e.useSpringCarouselContext=function(){const e=r.useContext(a);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},e.useThumbsModule=u,e.useTransitionCarousel=function({init:e=!0,disableGestures:s=!1,items:c,springConfig:l=n.config.default,exitBeforeEnter:a=!1,trail:m,withLoop:g=!1,activeItem:h,toPrevItemSpringProps:v=d,toNextItemSpringProps:p=d,draggingSlideTreshold:x=50,thumbsSlideAxis:b="x"}){const y=r.useRef("next"),j=r.useRef("initial"),w=r.useRef(null),[T,O]=r.useState(null!=h?h:0),{emitEvent:R,useListenToCustomEvent:E}=o(),{handleScroll:I,thumbsFragment:S}=u({thumbsSlideAxis:b,items:c});function C({to:e,slideType:t,slideMode:n}){y.current=t,j.current=n,R({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:j.current,nextItem:{index:e,id:c[e].id,startReached:0===e,endReached:e===c.length-1}}),O(e),I(T)}function M(t){if(!e)return;const n=0===T;!g&&n||C(g&&n?{to:c.length-1,slideType:"prev",slideMode:t}:{to:T-1,slideType:"prev",slideMode:t})}function F(t){if(!e)return;const n=T===c.length-1;!g&&n||C(g&&n?{to:0,slideType:"next",slideMode:t}:{to:T+1,slideType:"next",slideMode:t})}r.useEffect((()=>{"number"==typeof h&&h!==T&&O(h)}),[h]);const L=n.useTransition(T,Object.assign(Object.assign({config:l,key:null,trail:m,exitBeforeEnter:a},"prev"===y.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:"next"===y.current?{initial:Object.assign({},p.initial),from:Object.assign({},p.from),enter:Object.assign({},p.enter),leave:Object.assign({},p.leave)}:{initial:Object.assign({},d.initial),from:Object.assign({},d.from),enter:Object.assign({},d.enter),leave:Object.assign({},d.leave)}),{onRest(e,t,n){e.finished&&n===T&&R({eventName:"onSlideChange",slideActionType:y.current,slideMode:j.current,currentItem:{index:T,id:c[T].id,startReached:0===T,endReached:T===c.length-1}})}})),A=i.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>x,n=t<-x,r=0===T,i=T===c.length-1;if(n){if(!g&&i)return;R({eventName:"onLeftSwipe"}),F("swipe")}else if(e){if(!g&&r)return;R({eventName:"onRightSwipe"}),M("swipe")}}}),{enabled:!s}),N=L(((e,r,i,s)=>t.jsx(n.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},e),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:c[r].renderItem})))),$={useListenToCustomEvent:E,slideToPrevItem:()=>M("click"),slideToNextItem:()=>F("click")},k=t.jsx(f.Provider,Object.assign({value:$},{children:S})),P=t.jsx(f.Provider,Object.assign({value:$},{children:t.jsx("div",Object.assign({ref:w},A(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:N}))}));return Object.assign(Object.assign({},$),{carouselFragment:P,thumbsFragment:k})},e.useTransitionCarouselContext=function(){const e=r.useContext(f);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e}}));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|