react-spring-carousel 3.0.0-beta078 → 3.0.0-beta079

package/dist/types/src/modules/useFullscreenModule.js

@@ -0,0 +1,48 @@
+import { useRef, useEffect } from 'react';
+import screenfull from 'screenfull';
+export function useFullscreenModule({ mainCarouselWrapperRef, onFullScreenChange, handleResize, }) {
+    const isFullscreen = useRef(false);
+    useEffect(() => {
+        function handleFullscreenChange() {
+            if (document.fullscreenElement) {
+                setIsFullscreen(true);
+                onFullScreenChange(true);
+                handleResize && handleResize();
+            }
+            if (!document.fullscreenElement) {
+                setIsFullscreen(false);
+                onFullScreenChange(false);
+                handleResize && handleResize();
+            }
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handleFullscreenChange);
+            return () => {
+                if (screenfull.isEnabled) {
+                    screenfull.off('change', handleFullscreenChange);
+                }
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    function setIsFullscreen(_isFullscreen) {
+        isFullscreen.current = _isFullscreen;
+    }
+    function getIsFullscreen() {
+        return isFullscreen.current;
+    }
+    function enterFullscreen(elementRef) {
+        if (screenfull.isEnabled) {
+            screenfull.request((elementRef || mainCarouselWrapperRef.current));
+        }
+    }
+    function exitFullscreen() {
+        screenfull.isEnabled && screenfull.exit();
+    }
+    return {
+        enterFullscreen,
+        exitFullscreen,
+        getIsFullscreen,
+    };
+}
+//# sourceMappingURL=useFullscreenModule.js.map

package/dist/types/src/modules/useFullscreenModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreenModule.js","sourceRoot":"","sources":["../../../../src/modules/useFullscreenModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,MAAM,UAAU,mBAAmB,CAAC,EAClC,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,GACK;IACjB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,sBAAsB;YAC7B,IAAI,QAAQ,CAAC,iBAAiB,EAAE;gBAC9B,eAAe,CAAC,IAAI,CAAC,CAAA;gBACrB,kBAAkB,CAAC,IAAI,CAAC,CAAA;gBACxB,YAAY,IAAI,YAAY,EAAE,CAAA;aAC/B;YAED,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;gBAC/B,eAAe,CAAC,KAAK,CAAC,CAAA;gBACtB,kBAAkB,CAAC,KAAK,CAAC,CAAA;gBACzB,YAAY,IAAI,YAAY,EAAE,CAAA;aAC/B;QACH,CAAC;QAED,IAAI,UAAU,CAAC,SAAS,EAAE;YACxB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;YAC/C,OAAO,GAAG,EAAE;gBACV,IAAI,UAAU,CAAC,SAAS,EAAE;oBACxB,UAAU,CAAC,GAAG,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;iBACjD;YACH,CAAC,CAAA;SACF;QACD,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,eAAe,CAAC,aAAsB;QAC7C,YAAY,CAAC,OAAO,GAAG,aAAa,CAAA;IACtC,CAAC;IAED,SAAS,eAAe;QACtB,OAAO,YAAY,CAAC,OAAO,CAAA;IAC7B,CAAC;IAED,SAAS,eAAe,CAAC,UAAwB;QAC/C,IAAI,UAAU,CAAC,SAAS,EAAE;YACxB,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,IAAI,sBAAsB,CAAC,OAAO,CAAY,CAAC,CAAA;SAC9E;IACH,CAAC;IAED,SAAS,cAAc;QACrB,UAAU,CAAC,SAAS,IAAI,UAAU,CAAC,IAAI,EAAE,CAAA;IAC3C,CAAC;IAED,OAAO;QACL,eAAe;QACf,cAAc;QACd,eAAe;KAChB,CAAA;AACH,CAAC"}

package/dist/types/src/modules/useThumbsModule.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { UseThumbsModule } from '../types/useThumbsModule.types';
+export declare function useThumbsModule<T extends 'use-spring' | 'use-transition'>({ thumbsSlideAxis, withThumbs, prepareThumbsData, items, renderThumbFnProps, }: UseThumbsModule<T>): {
+    thumbsFragment: JSX.Element | null;
+    handleScroll: (activeItem: number) => void;
+};

package/dist/types/src/modules/useThumbsModule.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSpring } from '@react-spring/web';
+import { useRef } from 'react';
+function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+}
+export function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, renderThumbFnProps, }) {
+    const wrapperRef = useRef(null);
+    const [spring, setSpring] = useSpring(() => ({
+        val: 0,
+    }));
+    function getTotalScrollValue() {
+        return Math.round(Number(wrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
+    }
+    function handleScroll(activeItem) {
+        function getThumbNode() {
+            if (wrapperRef.current) {
+                return wrapperRef.current.querySelector(`#thumb-item-${items[activeItem].id}`);
+            }
+            return null;
+        }
+        const thumbNode = getThumbNode();
+        if (thumbNode && wrapperRef.current) {
+            if (!isInViewport(thumbNode)) {
+                const offset = thumbNode.offsetLeft;
+                const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset;
+                setSpring.start({
+                    from: {
+                        val: wrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] ?? 0,
+                    },
+                    to: {
+                        val,
+                    },
+                    onChange: ({ value }) => {
+                        if (wrapperRef.current) {
+                            wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] = Math.abs(value.val);
+                        }
+                    },
+                });
+            }
+        }
+    }
+    function handlePrepareThumbsData() {
+        function getPreparedItems(_items) {
+            return _items.map((i) => ({
+                id: i.id,
+                renderThumb: i.renderThumb,
+            }));
+        }
+        if (prepareThumbsData) {
+            return prepareThumbsData(getPreparedItems(items));
+        }
+        return getPreparedItems(items);
+    }
+    const thumbsFragment = withThumbs ? (_jsx("div", { className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: {
+            display: 'flex',
+            flex: '1',
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',
+            ...(thumbsSlideAxis === 'x'
+                ? { overflowX: 'auto' }
+                : {
+                    overflowY: 'auto',
+                    maxHeight: '100%',
+                }),
+        }, children: handlePrepareThumbsData().map(({ id, renderThumb }) => {
+            const thumbId = `thumb-item-${id}`;
+            return (_jsx("div", { id: thumbId, className: "thumb-item", children: typeof renderThumb === 'function' ? renderThumb(renderThumbFnProps) : renderThumb }, thumbId));
+        }) })) : null;
+    return {
+        thumbsFragment,
+        handleScroll,
+    };
+}
+//# sourceMappingURL=useThumbsModule.js.map

package/dist/types/src/modules/useThumbsModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbsModule.js","sourceRoot":"","sources":["../../../../src/modules/useThumbsModule.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/types/common.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { UseSpringReturnType } from './useSpringCarousel.types';
+import { UseListenToCustomEvent } from './useEventsModule.types';
+export type SlideActionType = 'prev' | 'next' | 'initial';
+export type SlideMode = 'drag' | 'click' | 'initial';
+export type TransitionSlideMode = 'swipe' | 'click' | 'initial';
+type SpringRenderItem = {
+    useListenToCustomEvent: UseListenToCustomEvent<'use-spring'>['useListenToCustomEvent'];
+    getIsActiveItem: UseSpringReturnType['getIsActiveItem'];
+    getIsPrevItem: UseSpringReturnType['getIsPrevItem'];
+    getIsNextItem: UseSpringReturnType['getIsNextItem'];
+};
+type TransitionRenderItem = {
+    getIsPrevItem: UseSpringReturnType['getIsPrevItem'];
+    getIsNextItem: UseSpringReturnType['getIsNextItem'];
+    useListenToCustomEvent: UseListenToCustomEvent<'use-transition'>['useListenToCustomEvent'];
+    activeItem: {
+        index: number;
+        id: string;
+    };
+};
+export type RenderItemProps<T> = T extends 'use-spring' ? SpringRenderItem : TransitionRenderItem;
+type RenderItemFn<T> = (props: RenderItemProps<T>) => JSX.Element;
+export type ItemWithThumb<T extends 'use-spring' | 'use-transition'> = {
+    id: string;
+    renderItem: ReactNode | RenderItemFn<T>;
+    renderThumb: ReactNode | RenderItemFn<T>;
+};
+export type ItemWithNoThumb<T extends 'use-spring' | 'use-transition'> = {
+    id: string;
+    renderItem: ReactNode | RenderItemFn<T>;
+};
+export type PrepareThumbsData<T extends 'use-spring' | 'use-transition'> = (items: Omit<ItemWithThumb<T>, 'renderItem'>[]) => Omit<ItemWithThumb<T>, 'renderItem'>[];
+export {};

package/dist/types/src/types/common.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=common.js.map

package/dist/types/src/types/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/types/common.ts"],"names":[],"mappings":""}

package/dist/types/src/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './useSpringCarousel.types';
+export * from './useTransitionCarousel.types';

package/dist/types/src/types/index.js

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './useSpringCarousel.types';
+export * from './useTransitionCarousel.types';
+//# sourceMappingURL=index.js.map

package/dist/types/src/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA"}

package/dist/types/src/types/useEventsModule.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useEventsModule.types.js.map

package/dist/types/src/types/useEventsModule.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventsModule.types.js","sourceRoot":"","sources":["../../../../src/types/useEventsModule.types.ts"],"names":[],"mappings":""}

package/dist/types/src/types/useFullscreenModule.types.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from 'react';
+export type FullscreenModule = {
+    mainCarouselWrapperRef: MutableRefObject<HTMLDivElement | null>;
+    handleResize?(): void;
+    onFullScreenChange(isFullscreen: boolean): void;
+};

package/dist/types/src/types/useFullscreenModule.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useFullscreenModule.types.js.map

package/dist/types/src/types/useFullscreenModule.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreenModule.types.js","sourceRoot":"","sources":["../../../../src/types/useFullscreenModule.types.ts"],"names":[],"mappings":""}

package/dist/types/src/types/useSpringCarousel.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useSpringCarousel.types.js.map

package/dist/types/src/types/useSpringCarousel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpringCarousel.types.js","sourceRoot":"","sources":["../../../../src/types/useSpringCarousel.types.ts"],"names":[],"mappings":""}

package/dist/types/src/types/useThumbsModule.types.d.ts

@@ -0,0 +1,8 @@
+import { ItemWithThumb, PrepareThumbsData, RenderItemProps, SpringCarouselWithThumbs } from '../types';
+export type UseThumbsModule<T extends 'use-spring' | 'use-transition'> = {
+    withThumbs?: boolean;
+    thumbsSlideAxis: SpringCarouselWithThumbs['thumbsSlideAxis'];
+    prepareThumbsData?: PrepareThumbsData<T>;
+    items: ItemWithThumb<T>[];
+    renderThumbFnProps: RenderItemProps<T>;
+};

package/dist/types/src/types/useThumbsModule.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useThumbsModule.types.js.map

package/dist/types/src/types/useThumbsModule.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbsModule.types.js","sourceRoot":"","sources":["../../../../src/types/useThumbsModule.types.ts"],"names":[],"mappings":""}

package/dist/types/src/types/useTransitionCarousel.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useTransitionCarousel.types.js.map

package/dist/types/src/types/useTransitionCarousel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionCarousel.types.js","sourceRoot":"","sources":["../../../../src/types/useTransitionCarousel.types.ts"],"names":[],"mappings":""}

package/dist/types/src/useSpringCarousel.d.ts

@@ -0,0 +1,18 @@
+import { UseSpringCarouselWithFreeScroll, UseSpringCarouselWithThumbs, UseSpringCarouselWithNoThumbs, UseSpringCarouselWithNoFixedItems, UseSpringCarouselWithFixedItems, UseSpringFreeScrollReturnType, UseSpringReturnType } from './types';
+type ReturnType<T> = T extends true ? UseSpringFreeScrollReturnType : UseSpringReturnType;
+/**
+ * With free scroll
+ */
+declare function useSpringCarousel(props: UseSpringCarouselWithFreeScroll): ReturnType<true>;
+declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<true>): ReturnType<true>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<true>): ReturnType<true>;
+/**
+ * No free scroll
+ */
+declare function useSpringCarousel(props: UseSpringCarouselWithThumbs<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoThumbs<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithFixedItems<false>): ReturnType<false>;
+declare function useSpringCarousel(props: UseSpringCarouselWithNoFixedItems<false>): ReturnType<false>;
+type ContextProps<T = undefined> = Omit<ReturnType<T extends 'free-scroll' ? true : false>, 'carouselFragment' | 'thumbsFragment'>;
+declare function useSpringCarouselContext<T>(): ContextProps<T>;
+export { useSpringCarousel, useSpringCarouselContext };