react-spring-carousel 2.0.0-beta09 → 2.0.2
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/README.md +21 -100
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,44 +1,31 @@
|
|
|
1
1
|
# react-spring-carousel-js
|
|
2
2
|
|
|
3
|
-
> A performant React carousel component powered by `react-spring` and
|
|
3
|
+
> A performant React carousel component powered by `react-spring` and `@use-gesture`.
|
|
4
4
|
|
|
5
|
-
[
|
|
10
|
-
|
|
11
|
-
## Features
|
|
12
|
-
|
|
13
|
-
- **Extreemely performant**: thanks to react-spring, you'll get a excelent performance with smooth and natural transitions out of the box.
|
|
14
|
-
- **Custom events**: Use our custom events to intercept when things happen and take the experience to the next level!
|
|
15
|
-
- **Mobile first**: You can swipe/drag with no config needed thanks to **react-use-gesture**.
|
|
16
|
-
- **Resizable**: the carousel will automatically resize and adapt if the browser viewport change. Very useful when changing to landscape on mobile devices.
|
|
17
|
-
- **Fullscreen capable**: we provide you the **API** to enter/exit from fullscreen mode! (thanks to **screenful.js**).
|
|
18
|
-
- **Headles UI**: no more headaches trying to style the elements of the carousel. You decide every aspect of the elements of the carousel.
|
|
19
|
-
- **Totally composable**: we give you the instruments (**API**) and you decide where to place all the elements of the carousel and how they will behave and interact.
|
|
20
|
-
- **Easy to configure**: configure the carousel behavior is a piece of cake!
|
|
5
|
+
[](https://www.npmjs.com/package/react-spring-carousel) [](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)
|
|
21
6
|
|
|
22
7
|
## Install
|
|
23
8
|
|
|
24
9
|
```bash
|
|
25
|
-
npm
|
|
10
|
+
// npm v7.x
|
|
11
|
+
npm install --save react-spring-carousel
|
|
26
12
|
```
|
|
27
13
|
|
|
28
|
-
|
|
14
|
+
```bash
|
|
15
|
+
// npm v6.x or less
|
|
16
|
+
npm install --save react-spring react-spring-carousel
|
|
17
|
+
```
|
|
29
18
|
|
|
30
19
|
```bash
|
|
31
|
-
yarn add
|
|
20
|
+
yarn add react-spring-carousel
|
|
32
21
|
```
|
|
33
22
|
|
|
34
23
|
## Usage
|
|
35
24
|
|
|
36
|
-
At it's most basic, to start using the carousel you can do:
|
|
37
|
-
|
|
38
25
|
```tsx
|
|
39
|
-
import { useSpringCarousel } from 'react-spring-carousel
|
|
26
|
+
import { useSpringCarousel } from 'react-spring-carousel'
|
|
40
27
|
|
|
41
|
-
const { carouselFragment } = useSpringCarousel({
|
|
28
|
+
const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
|
|
42
29
|
items: [
|
|
43
30
|
{
|
|
44
31
|
id: 'item-1',
|
|
@@ -51,83 +38,17 @@ const { carouselFragment } = useSpringCarousel({
|
|
|
51
38
|
],
|
|
52
39
|
})
|
|
53
40
|
|
|
54
|
-
return
|
|
41
|
+
return (
|
|
42
|
+
<div>
|
|
43
|
+
<button onClick={slideToPrevItem}>Prev item</button>
|
|
44
|
+
<div>{carouselFragment}</div>
|
|
45
|
+
<button onClick={slideToNextItem}>Next item</button>
|
|
46
|
+
</div>
|
|
47
|
+
)
|
|
55
48
|
```
|
|
56
49
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
## Props
|
|
60
|
-
|
|
61
|
-
You can provide this **options** to better customize the behavior and the aspect of the Carousel:
|
|
62
|
-
|
|
63
|
-
| Prop | Type | Default | Description |
|
|
64
|
-
| -------------------------- | -------------------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
65
|
-
| items | `{id: string renderItem: React.ReactNode renderThumb?: React.ReactNode}[]` | `[]` | Object type of the single carousel slide. |
|
|
66
|
-
| withLoop | `boolean` | `false` | Set to `true` if you want to enable the infinite loop behavior. |
|
|
67
|
-
| withThumbs | `boolean` | `true` | Set to false if you don't want to render the list of thumbs. |
|
|
68
|
-
| springConfig | `SpringConfig` | `config.default` | Customize the spring animation props. |
|
|
69
|
-
| shouldResizeOnWindowResize | `boolean` | `true` | Set to false if you want to disable the auto rezise |
|
|
70
|
-
| draggingSlideTreshold | `number` | `50` | Set the minimum treshold that is required to slide after the item is dragged and then released. |
|
|
71
|
-
| enableThumbsWrapperScroll | `boolean` | `true` | Set to false if you don't want to auto-scroll the list of thumbs when an item is selected. |
|
|
72
|
-
| carouselSlideAxis | `x / y` | `x` | Specify the slide axis direction of the carousel |
|
|
73
|
-
| thumbsSlideAxis | `x / y` | `x` | Specify the slide axis direction of the thumbs list |
|
|
74
|
-
| thumbsMaxHeight | `number` | `0` | Set the max height of the thumb list wrapper; to be only used if you set thumbsSlideAxis to `y` |
|
|
75
|
-
| thumbsWrapperRef | `React.MutableRefObject<HTMLDivElement / null>` | `undefined` | Pass a wrapper ref if you want to style in a particular way the thumbs wrapper list and still want to have the automatic scroll out of the box. If you set `carouselSlideAxis='x'` probably you wouldn't want to do it, as we automatically handle this case. In case you set `carouselSlideAxis='y'` you have to options: or you set the `thumbsMaxHeight` to a fixed height, or if you need to have a fluid height - 100% - then in this case you should pass the ref of the wrapper. This way, we will use your ref to handle the scroll (remember to also set `overflow-y: auto`). |
|
|
76
|
-
| initialActiveItem | `number` | `0` | Set the initial active slide. |
|
|
77
|
-
| itemsPerSlide | `number` | `1` | Define the quantity of items to show per `slide`. It can't be greater than the maximum quantity of items provided. |
|
|
78
|
-
| initialStartingPosition | `start` / `center` / `end` | `start` | `Note: only works if withLoop={true}` Defines the starting position of the current active slide. Normally if you have 3 active items per `slide`, you'll see 1,2,3. If you set `initialStartingPosition='center'`, for example, you'll get the following order: 3,1,2. |
|
|
79
|
-
| disableGestures | `boolean` | `false` | Disable the drag gesture programmatically. |
|
|
80
|
-
|
|
81
|
-
## Options (API)
|
|
82
|
-
|
|
83
|
-
The following options and API can be both extracted from the main `hook` or from the own Carousel `Context` (that can be imported and used inside any component rendered inside the Carousel :smirk:)
|
|
84
|
-
|
|
85
|
-
| Option | Type | Default Value | Description |
|
|
86
|
-
| ---------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
87
|
-
| isFullscreen | `boolean` | `false` | Indicates if the carousel entered in fullscreen mode. |
|
|
88
|
-
| getIsActiveItem | `(id: string): boolean` | `false` | By providing the `id` of an item, you can check if that item the current active one. |
|
|
89
|
-
| getCurrentActiveItem | `() => ({id: string, index: number})` | `() => ({id: '', index: 0})` | To retrieve the `id` and `index` of the current active item. |
|
|
90
|
-
| getIsPrevItem | `(id: string): boolean` | `false` | By providing the `id` of an item, you can check if that item is the previous one in the list of items. Pretty useful if, for example, you render a list of items and want to preload on demand. |
|
|
91
|
-
| getIsNextItem | `(id: string): boolean` | `false` | By providing the `id` of an item, you can check if that item is the next one in the list of items. Pretty useful if, for example, you render a list of items and want to preload on demand. |
|
|
92
|
-
| slideToItem | `(item: string / number): void` | `() => {}` | You can use this method to programmatically slide to a specific item. You can pass the index of the item or the id. |
|
|
93
|
-
| getIsAnimating | `(): boolean` | `() => false` | Use this method to check if the carousel is `animating` or not. Under the hood, `react-carousel-spring-js` uses a ref to keep track of this value. We don't use a state to avoid useless re-render that could impact in the animation smoothness. |
|
|
94
|
-
| getIsDragging | `(): boolean` | `() => false` | Use this method to check if the carousel is `dragging` or not. Under the hood, `react-carousel-spring-js` uses a ref to keep track of this value. We don't use a state to avoid useless re-render that could impact in the animation smoothness. |
|
|
95
|
-
| enterFullscreen | `(elementRef?: HTMLElement): void` | `() => {}` | Use this method to enter in the `fullscreen` mode. **NOTE**: By default, the main wrapper of the carousel will enter in fullscreen mode, but normally you will want to put in the fullscreen mode also other elements, that's why you can pass a custom element ref. |
|
|
96
|
-
| slideToPrevItem | `(): void` | `() => {}` | Use this method slide to the `previous` item. This is useful to build your own navigation buttons. You just need to call it and that's it; the carousel itself will handle all the internal logic part (for example, if the `withLoop` property is set to `false`, when reaching the first item, if you call it it will do nothing.) |
|
|
97
|
-
| slideToNextItem | `(): void` | `() => {}` | Use this method slide to the `next` item. This is useful to build your own navigation buttons. You just need to call it and that's it; the carousel itself will handle all the internal logic part (for example, if the `withLoop` property is set to `false`, when reaching the last item, if you call it it will do nothing.) |
|
|
98
|
-
| useListenToCustomEvent | `<T>(eventName: ReactSpringCustomEvents, eventHandler: (data?: T): void): void` | `() => {}` | Use this hook to perform callback actions in your application when the carousel internal `state` change. |
|
|
99
|
-
|
|
100
|
-
## Events
|
|
101
|
-
|
|
102
|
-
Sometimes it can happend that we'll want to perform some actions when a user interact with the carousel (for example, maybe you'll want to do something every time a slide changes). Normally you'll use **callbacks** to perform actions but this pattern wasn't enough from our perspective.
|
|
103
|
-
|
|
104
|
-
The first reason was because we wanted to avoid, as much as possible, to leverage on the **state** update (AKA React rerender) to perform animations, so that wasn't an option. The second point was that if we wanted to use callbacks it would require us to pass them down from the highest level (you would need to pass them directly into the main hook), and this solution didn't give us the flexibility we wanted. For this reason it was decided to implement our custom events, so that you'll be able to listen pretty much from everywhere and respond accordingly in a simple and effective way.
|
|
105
|
-
|
|
106
|
-
### How they works?
|
|
107
|
-
|
|
108
|
-
Every instance of the Carousel will expose a `useListenToCustomEvent` hook. `useListenToCustomEvent` accept two arguments:
|
|
109
|
-
|
|
110
|
-
- The event name to listen.
|
|
111
|
-
- A callback that will receive some data (dependind on the event that we listen) that will be triggered every time the event is emitted.
|
|
112
|
-
|
|
113
|
-
### List of events
|
|
114
|
-
|
|
115
|
-
| Event | Description |
|
|
116
|
-
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
|
|
117
|
-
| onSlideStartChange | The event is emitted every time a slide is about to slide. |
|
|
118
|
-
| onSlideChange | The event is emitted after the animation slide is completed. |
|
|
119
|
-
| onDrag | The event is emitted when a user drags the carousel items (only available when using `useSpringCarousel`). |
|
|
120
|
-
| onFullscreenChange | The event is emitted when a user enter/exit from the fullscreen mode. |
|
|
121
|
-
| onLeftSwipe | The event is emitted when a user swipe to the left (only available when using `useTransitionCarousel`). |
|
|
122
|
-
| onRightSwipe | The event is emitted when a user swipe to the right (only available when using `useTransitionCarousel`). |
|
|
123
|
-
|
|
124
|
-
To proper type the props that the event will receive, you can use the following types:
|
|
125
|
-
|
|
126
|
-
- onSlideStartChange -> `OnSlideStartChange`
|
|
127
|
-
- onSlideChange -> `OnSlideChange`
|
|
128
|
-
- onDrag -> `OnDrag`
|
|
129
|
-
- onFullscreenChange -> `OnFullscreenChange`
|
|
50
|
+
## Official documentation
|
|
130
51
|
|
|
131
|
-
|
|
52
|
+
For a complete overview of the library, please visit the official documentation.
|
|
132
53
|
|
|
133
|
-
|
|
54
|
+
[Visit here](https://react-spring-carousel.emilianobucci.com)
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-spring"),n=require("@use-gesture/react"),i=require("rxjs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(require("screenfull"));function s(){const e=t.useRef(new i.Subject);return{useListenToCustomEvent:function(r){t.useEffect((()=>{const t=e.current.subscribe(r);return()=>t.unsubscribe()}),[r])},emitObservable:t=>{e.current.next(t)}}}const c="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function l(e){const r=t.useRef(!1);c((()=>{if(!r.current){const t=e();return r.current=!0,()=>{t&&t()}}}),[])}function a({mainCarouselWrapperRef:e,emitObservable:r,handleResize:n}){const i=t.useRef(!1);function u(e){i.current=e}return l((()=>{function e(){document.fullscreenElement&&(u(!0),r({eventName:"onFullscreenChange",isFullscreen:!0}),n&&n()),document.fullscreenElement||(u(!1),r({eventName:"onFullscreenChange",isFullscreen:!1}),n&&n())}if(o.default.isEnabled)return o.default.on("change",e),()=>{o.default.isEnabled&&o.default.off("change",e)}})),{enterFullscreen:function(t){o.default.isEnabled&&o.default.request(t||e.current)},exitFullscreen:function(){o.default.isEnabled&&o.default.exit()},getIsFullscreen:function(){return i.current}}}const f=t.forwardRef((({children:t,...n},i)=>e.jsx(r.animated.div,{...n,ref:i,children:t})));function d({items:n,withThumbs:i,thumbsSlideAxis:u="x",springConfig:o,prepareThumbsData:s,getFluidWrapperScrollValue:c=(()=>0),getSlideValue:a=(()=>0),CustomThumbsWrapperComponent:d,slideType:h}){const m=t.useRef(null),[p,g]=r.useSpring((()=>({x:0,y:0,config:o,onChange:({value:e})=>{m.current&&"fluid"===h&&(m.current["x"===u?"scrollLeft":"scrollTop"]=Math.abs(e[u]))}})));function x(){return m.current["x"===u?"scrollLeft":"scrollTop"]}function b(){return Math.round(Number(m.current?.["x"===u?"scrollWidth":"scrollHeight"])-m.current.getBoundingClientRect()["x"===u?"width":"height"])}function v(){const e=Math.round(c()/a());return b()/e}l((()=>{if(i&&!m.current)throw new Error("The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.")}));const w=d?r.animated(d):f;return{thumbsFragment:i?e.jsx(w,{ref:m,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{p[u].stop()},style:{display:"flex",flex:1,position:"relative",width:"100%",height:"100%",flexDirection:"x"===u?"row":"column",..."x"===u?{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(n)):e(n)}().map((({id:t,renderThumb:r})=>{const n=`thumb-${t}`;return e.jsx("div",{id:n,className:"thumb-item",children:r},n)}))}):null,handleThumbsScroll:function(e,t){if("fluid"===h){const e=b();if("next"===t){const t=x()+v();g.start({from:{[u]:x()},to:{[u]:t>e?e:t}})}if("prev"===t){const e=x()-v();g.start({from:{[u]:x()},to:{[u]:e<0?0:e}})}}else{const r=m.current.querySelector(`#thumb-${n[e].id}`);if(r){const i=m.current,o="x"===u?"offsetWidth":"offsetHeight",s="x"===u?"scrollLeft":"scrollTop",c=function({thumbNode:e,offsetDirection:t,offsetDimension:r}){return e[t]+e[r]/2}({thumbNode:r,offsetDimension:o,offsetDirection:"x"===u?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:i,offsetDimension:o}),a=function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:i,scrollDirection:s}),f=function({thumbWrapper:t,thumbOffsetPosition:r,thumbScrollDimension:i,offsetDimension:o}){const s="x"===u?"scrollWidth":"scrollHeight";return e===n.length-1||r-i>t[s]-t[o]?t[s]-t[o]:0===e?0:r-i}({thumbWrapper:i,thumbOffsetPosition:c,thumbScrollDimension:l,offsetDimension:o});g.start({from:{[u]:a},to:{[u]:"prev"===t&&f<0?0:f},onChange:({value:e})=>{"x"===u?m.current.scrollLeft=e.x:m.current.scrollTop=e.y}})}}}}}const h=t.createContext(void 0);const m=t.createContext(void 0);exports.useSpringCarousel=function({items:i,withLoop:u=!1,draggingSlideTreshold:o,springConfig:f=r.config.default,shouldResizeOnWindowResize:m=!0,withThumbs:p=!1,enableThumbsWrapperScroll:g=!0,carouselSlideAxis:x="x",thumbsSlideAxis:b="x",prepareThumbsData:v,initialActiveItem:w=0,initialStartingPosition:T="start",disableGestures:y=!1,gutter:C=0,startEndGutter:S=0,touchAction:I,slideAmount:R,freeScroll:E=!1,CustomThumbsWrapperComponent:W,enableFreeScrollDrag:A,itemsPerSlide:N=1,slideType:F="fixed"}){const D=t.useRef(!0),L=t.useRef("initial"),P=u?i.length===N?[...i,...i,...i,...i,...i]:[...i,...i,...i]:i,$=t.useRef(w),j=t.useRef(null),M=t.useRef(null),O=t.useRef(!1),q=t.useRef(!1),z=t.useRef(!1),B=t.useRef(0),H=t.useRef(!1),k=t.useRef(0),V=t.useRef(0),G=t.useRef(0),Y=t.useRef(i),X=t.useRef(o??0),_=t.useRef(N),J=t.useRef(C),K=t.useRef(S),Q=t.useRef(w),U=t.useRef(T),Z=t.useRef(x);_.current=N,J.current=C,K.current=S,Q.current=w,U.current=T,Z.current=x;const[ee,te]=r.useSpring((()=>({y:0,x:0,config:f,onChange:({value:e})=>{j.current&&E&&(j.current["x"===Z.current?"scrollLeft":"scrollTop"]=Math.abs(e[Z.current]))}})));function re(){const e=M.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()["x"===Z.current?"width":"height"]+J.current}function ne(){return ee[Z.current].get()}function ie(){return re()*i.length<function(){if(!j.current)throw new Error("mainCarouselWrapperRef is not available");return j.current.getBoundingClientRect()["x"===Z.current?"width":"height"]}()}function ue(){return Math.round(Number(M.current?.["x"===Z.current?"scrollWidth":"scrollHeight"])-M.current.getBoundingClientRect()["x"===Z.current?"width":"height"])}function oe(){return 0===Ce()}function se(){if(!M.current)return 0;const e=re();if("fluid"===F&&"number"==typeof R){if(R<e)throw new Error("slideAmount must be greater than the width of a single item.");return R}return e}function ce(e,t){const r="x"===Z.current?"left":"top";function n(){return re()*i.length}function o(n){u?(e.style.top="0px",e.style[r]=`-${n-K.current}px`):(e.style.left="0px",e.style.top="0px",t&&D.current&&(e.style[r]=`calc(-${t} * 100%)`))}function s(){o(n())}if("fixed"===F){if(_.current>1)switch(U.current){default:case"start":s();break;case"center":c=_.current,o(n()-se()*Math.round((c-1)/2));break;case"end":!function(e){o(n()-se()*Math.round(e-1))}(_.current)}else s()}else s();var c}function le(){if(k.current=window.innerWidth,"fluid"===F){if(ie())return void te.start({immediate:!0,[Z.current]:0});if(B.current=ue(),H.current){const e=-B.current;te.start({immediate:!0,[Z.current]:e})}V.current=window.innerWidth}else te.start({immediate:!0,[Z.current]:-se()*Ce()});B.current=ue(),ce(M.current)}function ae(){window.innerWidth===k.current||E||le()}c((()=>{X.current=o||Math.floor(se()/2/2),le()}),[o,N,C,S,w,T,x,b]);const{useListenToCustomEvent:fe,emitObservable:de}=s(),{enterFullscreen:he,exitFullscreen:me,getIsFullscreen:pe}=a({mainCarouselWrapperRef:j,emitObservable:de,handleResize:ae}),{thumbsFragment:ge,handleThumbsScroll:xe}=d({withThumbs:p,items:i,thumbsSlideAxis:b,springConfig:f,prepareThumbsData:v,slideType:F,getFluidWrapperScrollValue:ue,getSlideValue:se,CustomThumbsWrapperComponent:W});function be(){if(!j.current)throw new Error("Missing mainCarouselWrapperRef.current");return j.current["x"===Z.current?"scrollLeft":"scrollTop"]}const ve=n.useDrag((e=>{const t=e.dragging,r=e.offset["x"===Z.current?0:1],n=e.movement["x"===Z.current?0:1],i=n>X.current,o=n<-X.current,s=e.direction["x"===Z.current?0:1];function c(){e.cancel()}function l(){"fluid"===F?ie()||oe()&&"prev"===Te()?te.start({[Z.current]:0}):H.current&&"next"===Te()?te.start({[Z.current]:-B.current}):te.start({[Z.current]:G.current}):te.start({[Z.current]:-Ce()*se()})}if(t){Re()||Ie(!0),de({eventName:"onDrag",slideActionType:Te(),...e}),we(s>0?"prev":"next");if(Math.abs(ne())+100>=B.current&&"next"===Te()&&(H.current=!0),"prev"===Te()&&(H.current=!1),E){if("boolean"==typeof A?A:"function"==typeof A&&A()){if(0===be()&&"prev"===Te())return void c();te.start({from:{[Z.current]:be()},to:{[Z.current]:-r}})}return}if(te.start({[Z.current]:r}),(i||o)&&ie()&&"fluid"===F)c(),l();else if(H.current&&"next"===Te()&&o)H.current=!1,c(),te.start({[Z.current]:-B.current});else{if(o)return c(),void(!u&&Le()?l():$e());if(i)return c(),void(!u&&oe()?l():Pe())}}!e.last||o||i||E||(l(),de({eventName:"onDrag",slideActionType:Te(),...e}))}),{enabled:!y,from:()=>E?"x"===Z.current?[-be(),0]:[0,-be()]:[ee.x.get(),ee.y.get()]});function we(e){L.current=e}function Te(){return L.current}function ye(e){$.current=e}function Ce(){return $.current}function Se(e){q.current=e}function Ie(e){O.current=e}function Re(){return O.current}function Ee(){const e=Ce();return 0===e?i.length-1:e-1}function We(){const e=Ce();return e===i.length-1?0:e+1}function Ae(e){return i.findIndex((t=>t.id===e))}function Ne(e){return"number"==typeof e?{from:{[Z.current]:e}}:{}}function Fe(e,t){if("number"==typeof e)return{[Z.current]:e};if("number"!=typeof t)throw new Error("to values is not a number!");return{[Z.current]:-se()*t}}function De({from:e,to:t=-1,customTo:r,immediate:n=!1,onRest:u=(()=>{})}){n||(ye(t),Se(!0),de({eventName:"onSlideStartChange",slideActionType:Te(),nextItem:{index:"fluid"===F?-1:t,id:"fluid"===F?"":i[t].id}})),G.current=Fe(r,t)[x],te.start({...Ne(e),to:Fe(r,t),immediate:n,onRest:e=>{e.finished&&(Ie(!1),Se(!1),u(),n||de({eventName:"onSlideChange",slideActionType:Te(),currentItem:{index:"fluid"===F?-1:Ce(),id:"fluid"===F?"":i[Ce()].id}}))}}),g&&p&&!n&&xe(t,Te())}function Le(){return Ce()===i.length-1}function Pe(){if(we("prev"),H.current=!1,"fluid"===F){if(H.current=!1,ie())return;const e=ne()+se()+200;if(E){const e=j.current.scrollLeft-se();De({customTo:e<0?0:e,from:j.current.scrollLeft})}else De(e>=0?u?{from:ne()-re()*i.length,customTo:ne()-re()*i.length+se()}:{customTo:0}:{customTo:ne()+se()})}else{if(!u&&0===Ce()||z.current)return;oe()?De({from:ne()-se()*i.length,to:i.length-1}):De({to:Ee()})}}function $e(){if(we("next"),"fluid"===F){if(ie())return;const e=Math.abs(ne()-se())+100>=B.current;if(E){const e=j.current.scrollLeft+se()>B.current,t=j.current.scrollLeft+se();De({customTo:e?B.current:t,from:j.current.scrollLeft})}else if(u&&Math.abs(ne()-se())>=i.length*re()){const e=re()*i.length;De({from:ne()+e,customTo:ne()+e-se()})}else{if(H.current)return;e?(H.current=!0,De({customTo:-B.current})):De({customTo:ne()-se()})}}else{if(!u&&Ce()===P.length-1||z.current)return;Math.abs(ne()-se()+25)>B.current&&!Re()?H.current=!0:H.current?De({to:i.length-_.current}):Le()?De({from:ne()+se()*i.length,to:0}):De({to:We()})}}function je(e){let t=0;if(t="string"==typeof e?i.findIndex((t=>t.id===e)):e,t>=i.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n you provide a wrong id or a higher numeric index.");if(t===Ce()||i.length!==Y.current.length&&Ce()<i.length)return;const r=Ae(Y.current[Ce()].id);we(Ae(i[t].id)>r?"next":"prev"),De({to:t})}l((()=>{if(X.current<0)throw new Error("draggingSlideTreshold must be greater than 0");if(X.current>se()/2)throw new Error(`draggingSlideTreshold must be equal or less than the half of the width of an item, which is ${Math.floor(se()/2)}`);if(_.current<1)throw new Error("The itemsPerSlide prop can't be less than 1.");if(_.current>i.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(Q.current<0)throw new Error("The initialActiveItem cannot be less than 0.");if(Q.current>i.length)throw new Error("The initialActiveItem cannot be greater than the total length of the items you provide.");m||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation.")})),l((()=>{function e(){document.hidden?z.current=!0:z.current=!1}return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),l((()=>{D.current=!1,B.current=ue(),V.current=window.innerWidth,k.current=window.innerWidth,w>0&&(De({to:w,immediate:!0}),ye(w),!u&&M.current&&(M.current.style.top="0px",M.current.style.left="0px"))})),c((()=>{Q.current<i.length&&Q.current!==$.current&&(De({to:Q.current,immediate:!0}),ye(Q.current))}),[]),c((()=>{if(m)return window.addEventListener("resize",ae),()=>{window.removeEventListener("resize",ae)}}),[m]),c((()=>{M.current&&("x"===Z.current&&(M.current.style.top="0px"),"y"===Z.current&&(M.current.style.left="0px"))}),[x]),c((()=>{B.current=ue();!(i.length===Y.current.length)&&i.length<Y.current.length&&je(i.length-1),Y.current=i}),[ue,i]);const Me={useListenToCustomEvent:fe,getIsFullscreen:pe,enterFullscreen:he,exitFullscreen:me,getIsAnimating:function(){return q.current},getIsDragging:Re,getIsNextItem:function(e){const t=Ae(e),r=Ce();return u&&r===i.length-1?0===t:t===r+1},getIsPrevItem:function(e){const t=Ae(e),r=Ce();return u&&0===r?t===i.length-1:t===r-1},slideToPrevItem:Pe,slideToNextItem:$e,..."fixed"===F?{slideToItem:je,getIsActiveItem:e=>Ae(e)===Ce(),getCurrentActiveItem:()=>({id:i[Ce()].id,index:Ce()})}:{}},Oe=e.jsx(h.Provider,{value:Me,children:e.jsx("div",{ref:j,className:"use-spring-carousel-main-wrapper","data-testid":"use-spring-carousel-wrapper",...E?{onWheel(){ee[Z.current].stop()}}:{},style:{display:"flex",position:"relative",width:"100%",height:"100%",...E?"x"===Z.current?{overflowX:"auto"}:{overflowY:"auto"}:{}},children:e.jsx(r.animated.div,{...ve(),className:"use-spring-carousel-track-wrapper","data-testid":"use-spring-carousel-animated-wrapper",ref:e=>{e&&(M.current=e,ce(e,Q.current))},style:{display:"flex",position:"relative",touchAction:y?"unset":I||("x"===Z.current?"pan-y":"pan-x"),flexDirection:"x"===Z.current?"row":"column",...function(){const e=`calc(100% - ${2*K.current}px)`;return{width:"x"===Z.current?e:"100%",height:"y"===Z.current?e:"100%"}}(),...function(){const e=i.length/N*100,t=100/N,r="x"===Z.current?"left":"y",n=Math.floor(50/t);if("fixed"===F){if("center"===U.current)return{[r]:`calc(-${e}% + ${t*n}%)`};if("end"===U.current)return{[r]:`calc(-${e}% + ${t*(2*n)}%)`}}return{[r]:"0px"}}(),...E?{}:ee},children:P.map((({id:t,renderItem:r},n)=>{return e.jsx("div",{className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",...(i=_.current,"fixed"===F?{..."x"===Z.current?{marginRight:`${J.current}px`}:{marginBottom:`${J.current}px`},flex:`1 0 calc(100% / ${i} - ${J.current*(i-1)/i}px)`}:{..."x"===Z.current?{marginRight:`${J.current}px`}:{marginBottom:`${J.current}px`}})},children:r},`${t}-${n}`);var i}))})})}),qe=e.jsx(h.Provider,{value:Me,children:ge});return{...Me,carouselFragment:Oe,thumbsFragment:qe}},exports.useSpringCarouselContext=function(){const e=t.useContext(h);if(!e)throw new Error("useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.");return e},exports.useTransitionCarousel=function({items:i,withLoop:u=!1,withThumbs:o=!1,springConfig:c=r.config.default,thumbsSlideAxis:l="x",enableThumbsWrapperScroll:f=!0,draggingSlideTreshold:h=50,prepareThumbsData:p,toPrevItemSpringProps:g,toNextItemSpringProps:x,disableGestures:b=!1,CustomThumbsWrapperComponent:v,trail:w,exitBeforeEnter:T=!1,springAnimationProps:y={initial:{opacity:1,position:"absolute"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"absolute"},leave:{opacity:0,position:"absolute"}}}){const C=t.useRef("next"),S=t.useRef(null),I=t.useRef(!1),[R,E]=t.useState(0),{emitObservable:W,useListenToCustomEvent:A}=s(),{enterFullscreen:N,exitFullscreen:F,getIsFullscreen:D}=a({emitObservable:W,mainCarouselWrapperRef:S}),{thumbsFragment:L,handleThumbsScroll:P}=d({items:i,withThumbs:o,thumbsSlideAxis:l,springConfig:c,prepareThumbsData:p,CustomThumbsWrapperComponent:v,slideType:"fixed"}),$=n.useDrag((({last:e,movement:[t]})=>{if(!M()&&e){const e=t>h,r=t<-h,n=0===R,o=R===i.length-1;if(r){if(!u&&o)return;B(),W({eventName:"onLeftSwipe"})}else if(e){if(!u&&n)return;H(),W({eventName:"onRightSwipe"})}}}),{enabled:!b}),j=r.useTransition(R,{config:c,...function(){const e=z();return"prev"===e&&g?{initial:{...y.initial},from:{...g.from},enter:{...g.enter},leave:{...g.leave}}:"next"===e&&x?{initial:{...y.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...y.initial},from:{...y.from},enter:{...y.enter},leave:{...y.leave}}}(),onStart:()=>O(!0),trail:w,exitBeforeEnter:T,key:i[R].id,onRest:e=>{e.finished&&(O(!1),W({eventName:"onSlideChange",slideActionType:z(),currentItem:{index:R,id:i[R].id}}))}})(((t,n)=>e.jsx(r.animated.div,{style:{...t,flex:"1 0 100%",width:"100%",height:"100%"},children:i[n].renderItem})));function M(){return I.current}function O(e){I.current=e}function q(e){C.current=e}function z(){return C.current}function B(){const e=R===i.length-1;u?(q("next"),e?(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:0,id:i[0].id}}),E(0)):(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R+1,id:i[R+1].id}}),E(R+1))):e||(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R+1,id:i[R+1].id}}),q("next"),E(R+1))}function H(){const e=0===R;u?(q("prev"),e?(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:i.length-1,id:i[i.length-1].id}}),E(i.length-1)):(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R-1,id:i[R-1].id}}),E(R-1))):e||(q("prev"),W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R-1,id:i[R-1].id}}),E(R-1))}function k(e){return i.findIndex((t=>t.id===e))}const V={activeItem:R,slideToItem:function(e){let t=0;if(t="string"==typeof e?i.findIndex((t=>t.id===e)):e,t>=i.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n you provide a wrong id or a higher numeric index.");if(t===R)return;const r=k(i[R].id),n=k(i[t].id);W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:n,id:i[t].id}}),q(n>r?"next":"prev"),E(t),f&&o&&P(t)},slideToNextItem:B,slideToPrevItem:H,enterFullscreen:N,exitFullscreen:F,useListenToCustomEvent:A,getIsNextItem:function(e){const t=k(e);return u&&R===i.length-1?0===t:t===R+1},getIsPrevItem:function(e){const t=k(e);return u&&0===R?t===i.length-1:t===R-1},getIsAnimating:M,getIsFullscreen:D,getIsActiveItem:e=>k(e)===R,getCurrentActiveItem:()=>({id:i[R].id,index:R})};return{carouselFragment:e.jsx(m.Provider,{value:V,children:e.jsx("div",{ref:S,...$(),style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:j})}),thumbsFragment:e.jsx(m.Provider,{value:V,children:L}),...V}},exports.useTransitionCarouselContext=function(){const e=t.useContext(m);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n use the context only inside a component that is rendered within the Carousel.");return e};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-spring"),n=require("@use-gesture/react"),i=require("rxjs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(require("screenfull"));function s(){const e=t.useRef(new i.Subject);return{useListenToCustomEvent:function(r){t.useEffect((()=>{const t=e.current.subscribe(r);return()=>t.unsubscribe()}),[r])},emitObservable:t=>{e.current.next(t)}}}const c="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;function l(e){const r=t.useRef(!1);c((()=>{if(!r.current){const t=e();return r.current=!0,()=>{t&&t()}}}),[])}function a({mainCarouselWrapperRef:e,emitObservable:r,handleResize:n}){const i=t.useRef(!1);function u(e){i.current=e}return l((()=>{function e(){document.fullscreenElement&&(u(!0),r({eventName:"onFullscreenChange",isFullscreen:!0}),n&&n()),document.fullscreenElement||(u(!1),r({eventName:"onFullscreenChange",isFullscreen:!1}),n&&n())}if(o.default.isEnabled)return o.default.on("change",e),()=>{o.default.isEnabled&&o.default.off("change",e)}})),{enterFullscreen:function(t){o.default.isEnabled&&o.default.request(t||e.current)},exitFullscreen:function(){o.default.isEnabled&&o.default.exit()},getIsFullscreen:function(){return i.current}}}const f=t.forwardRef((({children:t,...n},i)=>e.jsx(r.animated.div,{...n,ref:i,children:t})));function d({items:n,withThumbs:i,thumbsSlideAxis:u="x",springConfig:o,prepareThumbsData:s,getFluidWrapperScrollValue:c=(()=>0),getSlideValue:a=(()=>0),CustomThumbsWrapperComponent:d,slideType:h}){const m=t.useRef(null),[p,g]=r.useSpring((()=>({x:0,y:0,config:o,onChange:({value:e})=>{m.current&&"fluid"===h&&(m.current["x"===u?"scrollLeft":"scrollTop"]=Math.abs(e[u]))}})));function x(){return m.current["x"===u?"scrollLeft":"scrollTop"]}function b(){return Math.round(Number(m.current?.["x"===u?"scrollWidth":"scrollHeight"])-m.current.getBoundingClientRect()["x"===u?"width":"height"])}function v(){const e=Math.round(c()/a());return b()/e}l((()=>{if(i&&!m.current)throw new Error("The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.")}));const w=d?r.animated(d):f;return{thumbsFragment:i?e.jsx(w,{ref:m,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{p[u].stop()},style:{display:"flex",flex:1,position:"relative",width:"100%",height:"100%",flexDirection:"x"===u?"row":"column",..."x"===u?{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(n)):e(n)}().map((({id:t,renderThumb:r})=>{const n=`thumb-${t}`;return e.jsx("div",{id:n,className:"thumb-item",children:r},n)}))}):null,handleThumbsScroll:function(e,t){if("fluid"===h){const e=b();if("next"===t){const t=x()+v();g.start({from:{[u]:x()},to:{[u]:t>e?e:t}})}if("prev"===t){const e=x()-v();g.start({from:{[u]:x()},to:{[u]:e<0?0:e}})}}else{const r=m.current.querySelector(`#thumb-${n[e].id}`);if(r){const i=m.current,o="x"===u?"offsetWidth":"offsetHeight",s="x"===u?"scrollLeft":"scrollTop",c=function({thumbNode:e,offsetDirection:t,offsetDimension:r}){return e[t]+e[r]/2}({thumbNode:r,offsetDimension:o,offsetDirection:"x"===u?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:i,offsetDimension:o}),a=function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:i,scrollDirection:s}),f=function({thumbWrapper:t,thumbOffsetPosition:r,thumbScrollDimension:i,offsetDimension:o}){const s="x"===u?"scrollWidth":"scrollHeight";return e===n.length-1||r-i>t[s]-t[o]?t[s]-t[o]:0===e?0:r-i}({thumbWrapper:i,thumbOffsetPosition:c,thumbScrollDimension:l,offsetDimension:o});g.start({from:{[u]:a},to:{[u]:"prev"===t&&f<0?0:f},onChange:({value:e})=>{"x"===u?m.current.scrollLeft=e.x:m.current.scrollTop=e.y}})}}}}}const h=t.createContext(void 0);const m=t.createContext(void 0);exports.useSpringCarousel=function({items:i,withLoop:u=!1,draggingSlideTreshold:o,springConfig:f=r.config.default,shouldResizeOnWindowResize:m=!0,withThumbs:p=!1,enableThumbsWrapperScroll:g=!0,carouselSlideAxis:x="x",thumbsSlideAxis:b="x",prepareThumbsData:v,initialActiveItem:w=0,initialStartingPosition:T,disableGestures:y=!1,gutter:C=0,startEndGutter:S=0,touchAction:I,slideAmount:R,freeScroll:E=!1,CustomThumbsWrapperComponent:W,enableFreeScrollDrag:A,itemsPerSlide:N=1,slideType:F="fixed"}){const D=t.useRef(!0),L=t.useRef("initial"),P=u?i.length===N?[...i,...i,...i,...i,...i]:[...i,...i,...i]:i,$=t.useRef(w),j=t.useRef(null),M=t.useRef(null),O=t.useRef(!1),q=t.useRef(!1),z=t.useRef(!1),B=t.useRef(0),H=t.useRef(!1),k=t.useRef(0),V=t.useRef(0),G=t.useRef(0),Y=t.useRef(i),X=t.useRef(o??0),_=t.useRef(N),J=t.useRef(C),K=t.useRef(S),Q=t.useRef(w),U=t.useRef(T),Z=t.useRef(x);_.current=N,J.current=C,K.current=S,Q.current=w,U.current=T,Z.current=x;const[ee,te]=r.useSpring((()=>({y:0,x:0,config:f,onChange:({value:e})=>{j.current&&E&&(j.current["x"===Z.current?"scrollLeft":"scrollTop"]=Math.abs(e[Z.current]))}})));function re(){const e=M.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()["x"===Z.current?"width":"height"]+J.current}function ne(){return ee[Z.current].get()}function ie(){return re()*i.length<function(){if(!j.current)throw new Error("mainCarouselWrapperRef is not available");return j.current.getBoundingClientRect()["x"===Z.current?"width":"height"]}()}function ue(){return Math.round(Number(M.current?.["x"===Z.current?"scrollWidth":"scrollHeight"])-M.current.getBoundingClientRect()["x"===Z.current?"width":"height"])}function oe(){return 0===Ce()}function se(){if(!M.current)return 0;const e=re();if("fluid"===F&&"number"==typeof R){if(R<e)throw new Error("slideAmount must be greater than the width of a single item.");return R}return e}function ce(e,t){const r="x"===Z.current?"left":"top";function n(){return re()*i.length}function o(n){u?(e.style.top="0px",e.style[r]=`-${n-K.current}px`):(e.style.left="0px",e.style.top="0px",t&&D.current&&(e.style[r]=`calc(-${t} * 100%)`))}function s(){o(n())}if("fixed"===F){if(_.current>1)switch(U.current){default:case"start":s();break;case"center":c=_.current,o(n()-se()*Math.round((c-1)/2));break;case"end":!function(e){o(n()-se()*Math.round(e-1))}(_.current)}else s()}else s();var c}function le(){if(k.current=window.innerWidth,"fluid"===F){if(ie())return void te.start({immediate:!0,[Z.current]:0});if(B.current=ue(),H.current){const e=-B.current;te.start({immediate:!0,[Z.current]:e})}V.current=window.innerWidth}else te.start({immediate:!0,[Z.current]:-se()*Ce()});B.current=ue(),ce(M.current)}function ae(){window.innerWidth===k.current||E||le()}c((()=>{X.current=o||Math.floor(se()/2/2),le()}),[o,N,C,S,w,T,x,b]);const{useListenToCustomEvent:fe,emitObservable:de}=s(),{enterFullscreen:he,exitFullscreen:me,getIsFullscreen:pe}=a({mainCarouselWrapperRef:j,emitObservable:de,handleResize:ae}),{thumbsFragment:ge,handleThumbsScroll:xe}=d({withThumbs:p,items:i,thumbsSlideAxis:b,springConfig:f,prepareThumbsData:v,slideType:F,getFluidWrapperScrollValue:ue,getSlideValue:se,CustomThumbsWrapperComponent:W});function be(){if(!j.current)throw new Error("Missing mainCarouselWrapperRef.current");return j.current["x"===Z.current?"scrollLeft":"scrollTop"]}const ve=n.useDrag((e=>{const t=e.dragging,r=e.offset["x"===Z.current?0:1],n=e.movement["x"===Z.current?0:1],i=n>X.current,o=n<-X.current,s=e.direction["x"===Z.current?0:1];function c(){e.cancel()}function l(){"fluid"===F?ie()||oe()&&"prev"===Te()?te.start({[Z.current]:0}):H.current&&"next"===Te()?te.start({[Z.current]:-B.current}):te.start({[Z.current]:G.current}):te.start({[Z.current]:-Ce()*se()})}if(t){Re()||Ie(!0),de({eventName:"onDrag",slideActionType:Te(),...e}),we(s>0?"prev":"next");if(Math.abs(ne())+100>=B.current&&"next"===Te()&&(H.current=!0),"prev"===Te()&&(H.current=!1),E){if("boolean"==typeof A?A:"function"==typeof A&&A()){if(0===be()&&"prev"===Te())return void c();te.start({from:{[Z.current]:be()},to:{[Z.current]:-r}})}return}if(te.start({[Z.current]:r}),(i||o)&&ie()&&"fluid"===F)c(),l();else if(H.current&&"next"===Te()&&o)H.current=!1,c(),te.start({[Z.current]:-B.current});else{if(o)return c(),void(!u&&Le()?l():$e());if(i)return c(),void(!u&&oe()?l():Pe())}}!e.last||o||i||E||(l(),de({eventName:"onDrag",slideActionType:Te(),...e}))}),{enabled:!y,from:()=>E?"x"===Z.current?[-be(),0]:[0,-be()]:[ee.x.get(),ee.y.get()]});function we(e){L.current=e}function Te(){return L.current}function ye(e){$.current=e}function Ce(){return $.current}function Se(e){q.current=e}function Ie(e){O.current=e}function Re(){return O.current}function Ee(){const e=Ce();return 0===e?i.length-1:e-1}function We(){const e=Ce();return e===i.length-1?0:e+1}function Ae(e){return i.findIndex((t=>t.id===e))}function Ne(e){return"number"==typeof e?{from:{[Z.current]:e}}:{}}function Fe(e,t){if("number"==typeof e)return{[Z.current]:e};if("number"!=typeof t)throw new Error("to values is not a number!");return{[Z.current]:-se()*t}}function De({from:e,to:t=-1,customTo:r,immediate:n=!1,onRest:u=(()=>{})}){n||(ye(t),Se(!0),de({eventName:"onSlideStartChange",slideActionType:Te(),nextItem:{index:"fluid"===F?-1:t,id:"fluid"===F?"":i[t].id}})),G.current=Fe(r,t)[x],te.start({...Ne(e),to:Fe(r,t),immediate:n,onRest:e=>{e.finished&&(Ie(!1),Se(!1),u(),n||de({eventName:"onSlideChange",slideActionType:Te(),currentItem:{index:"fluid"===F?-1:Ce(),id:"fluid"===F?"":i[Ce()].id}}))}}),g&&p&&!n&&xe(t,Te())}function Le(){return Ce()===i.length-1}function Pe(){if(we("prev"),H.current=!1,"fluid"===F){if(H.current=!1,ie())return;const e=ne()+se()+200;if(E){const e=j.current.scrollLeft-se();De({customTo:e<0?0:e,from:j.current.scrollLeft})}else De(e>=0?u?{from:ne()-re()*i.length,customTo:ne()-re()*i.length+se()}:{customTo:0}:{customTo:ne()+se()})}else{if(!u&&0===Ce()||z.current)return;oe()?De({from:ne()-se()*i.length,to:i.length-1}):De({to:Ee()})}}function $e(){if(we("next"),"fluid"===F){if(ie())return;const e=Math.abs(ne()-se())+100>=B.current;if(E){const e=j.current.scrollLeft+se()>B.current,t=j.current.scrollLeft+se();De({customTo:e?B.current:t,from:j.current.scrollLeft})}else if(u&&Math.abs(ne()-se())>=i.length*re()){const e=re()*i.length;De({from:ne()+e,customTo:ne()+e-se()})}else{if(H.current)return;e?(H.current=!0,De({customTo:-B.current})):De({customTo:ne()-se()})}}else{if(!u&&Ce()===P.length-1||z.current)return;Math.abs(ne()-se()+25)>B.current&&!Re()?H.current=!0:H.current?De({to:i.length-_.current}):Le()?De({from:ne()+se()*i.length,to:0}):De({to:We()})}}function je(e){let t=0;if(t="string"==typeof e?i.findIndex((t=>t.id===e)):e,t>=i.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n you provide a wrong id or a higher numeric index.");if(t===Ce()||i.length!==Y.current.length&&Ce()<i.length)return;const r=Ae(Y.current[Ce()].id);we(Ae(i[t].id)>r?"next":"prev"),De({to:t})}l((()=>{if(N%2==0&&U.current)throw new Error("initialStartingPosition can be only used if itemsPerSlide is an even value.");if(X.current<0)throw new Error("draggingSlideTreshold must be greater than 0");if(X.current>se()/2)throw new Error(`draggingSlideTreshold must be equal or less than the half of the width of an item, which is ${Math.floor(se()/2)}`);if(_.current<1)throw new Error("The itemsPerSlide prop can't be less than 1.");if(_.current>i.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(Q.current<0)throw new Error("The initialActiveItem cannot be less than 0.");if(Q.current>i.length)throw new Error("The initialActiveItem cannot be greater than the total length of the items you provide.");m||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation.")})),l((()=>{function e(){document.hidden?z.current=!0:z.current=!1}return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),l((()=>{D.current=!1,B.current=ue(),V.current=window.innerWidth,k.current=window.innerWidth,w>0&&(De({to:w,immediate:!0}),ye(w),!u&&M.current&&(M.current.style.top="0px",M.current.style.left="0px"))})),c((()=>{Q.current<i.length&&Q.current!==$.current&&(De({to:Q.current,immediate:!0}),ye(Q.current))}),[]),c((()=>{if(m)return window.addEventListener("resize",ae),()=>{window.removeEventListener("resize",ae)}}),[m]),c((()=>{M.current&&("x"===Z.current&&(M.current.style.top="0px"),"y"===Z.current&&(M.current.style.left="0px"))}),[x]),c((()=>{B.current=ue();!(i.length===Y.current.length)&&i.length<Y.current.length&&je(i.length-1),Y.current=i}),[ue,i]);const Me={useListenToCustomEvent:fe,getIsFullscreen:pe,enterFullscreen:he,exitFullscreen:me,getIsAnimating:function(){return q.current},getIsDragging:Re,getIsNextItem:function(e){const t=Ae(e),r=Ce();return u&&r===i.length-1?0===t:t===r+1},getIsPrevItem:function(e){const t=Ae(e),r=Ce();return u&&0===r?t===i.length-1:t===r-1},slideToPrevItem:Pe,slideToNextItem:$e,..."fixed"===F?{slideToItem:je,getIsActiveItem:e=>Ae(e)===Ce(),getCurrentActiveItem:()=>({id:i[Ce()].id,index:Ce()})}:{}},Oe=e.jsx(h.Provider,{value:Me,children:e.jsx("div",{ref:j,className:"use-spring-carousel-main-wrapper","data-testid":"use-spring-carousel-wrapper",...E?{onWheel(){ee[Z.current].stop()}}:{},style:{display:"flex",position:"relative",width:"100%",height:"100%",...E?"x"===Z.current?{overflowX:"auto"}:{overflowY:"auto"}:{}},children:e.jsx(r.animated.div,{...ve(),className:"use-spring-carousel-track-wrapper","data-testid":"use-spring-carousel-animated-wrapper",ref:e=>{e&&(M.current=e,ce(e,Q.current))},style:{display:"flex",position:"relative",touchAction:y?"unset":I||("x"===Z.current?"pan-y":"pan-x"),flexDirection:"x"===Z.current?"row":"column",...function(){const e=`calc(100% - ${2*K.current}px)`;return{width:"x"===Z.current?e:"100%",height:"y"===Z.current?e:"100%"}}(),...function(){const e=i.length/N*100,t=100/N,r="x"===Z.current?"left":"y",n=Math.floor(50/t);if("fixed"===F){if("center"===U.current)return{[r]:`calc(-${e}% + ${t*n}%)`};if("end"===U.current)return{[r]:`calc(-${e}% + ${t*(2*n)}%)`}}return{[r]:"0px"}}(),...E?{}:ee},children:P.map((({id:t,renderItem:r},n)=>{return e.jsx("div",{className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",...(i=_.current,"fixed"===F?{..."x"===Z.current?{marginRight:`${J.current}px`}:{marginBottom:`${J.current}px`},flex:`1 0 calc(100% / ${i} - ${J.current*(i-1)/i}px)`}:{..."x"===Z.current?{marginRight:`${J.current}px`}:{marginBottom:`${J.current}px`}})},children:r},`${t}-${n}`);var i}))})})}),qe=e.jsx(h.Provider,{value:Me,children:ge});return{...Me,carouselFragment:Oe,thumbsFragment:qe}},exports.useSpringCarouselContext=function(){const e=t.useContext(h);if(!e)throw new Error("useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.");return e},exports.useTransitionCarousel=function({items:i,withLoop:u=!1,withThumbs:o=!1,springConfig:c=r.config.default,thumbsSlideAxis:l="x",enableThumbsWrapperScroll:f=!0,draggingSlideTreshold:h=50,prepareThumbsData:p,toPrevItemSpringProps:g,toNextItemSpringProps:x,disableGestures:b=!1,CustomThumbsWrapperComponent:v,trail:w,exitBeforeEnter:T=!1,springAnimationProps:y={initial:{opacity:1,position:"absolute"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"absolute"},leave:{opacity:0,position:"absolute"}}}){const C=t.useRef("next"),S=t.useRef(null),I=t.useRef(!1),[R,E]=t.useState(0),{emitObservable:W,useListenToCustomEvent:A}=s(),{enterFullscreen:N,exitFullscreen:F,getIsFullscreen:D}=a({emitObservable:W,mainCarouselWrapperRef:S}),{thumbsFragment:L,handleThumbsScroll:P}=d({items:i,withThumbs:o,thumbsSlideAxis:l,springConfig:c,prepareThumbsData:p,CustomThumbsWrapperComponent:v,slideType:"fixed"}),$=n.useDrag((({last:e,movement:[t]})=>{if(!M()&&e){const e=t>h,r=t<-h,n=0===R,o=R===i.length-1;if(r){if(!u&&o)return;B(),W({eventName:"onLeftSwipe"})}else if(e){if(!u&&n)return;H(),W({eventName:"onRightSwipe"})}}}),{enabled:!b}),j=r.useTransition(R,{config:c,...function(){const e=z();return"prev"===e&&g?{initial:{...y.initial},from:{...g.from},enter:{...g.enter},leave:{...g.leave}}:"next"===e&&x?{initial:{...y.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...y.initial},from:{...y.from},enter:{...y.enter},leave:{...y.leave}}}(),onStart:()=>O(!0),trail:w,exitBeforeEnter:T,key:i[R].id,onRest:e=>{e.finished&&(O(!1),W({eventName:"onSlideChange",slideActionType:z(),currentItem:{index:R,id:i[R].id}}))}})(((t,n)=>e.jsx(r.animated.div,{style:{...t,flex:"1 0 100%",width:"100%",height:"100%"},children:i[n].renderItem})));function M(){return I.current}function O(e){I.current=e}function q(e){C.current=e}function z(){return C.current}function B(){const e=R===i.length-1;u?(q("next"),e?(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:0,id:i[0].id}}),E(0)):(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R+1,id:i[R+1].id}}),E(R+1))):e||(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R+1,id:i[R+1].id}}),q("next"),E(R+1))}function H(){const e=0===R;u?(q("prev"),e?(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:i.length-1,id:i[i.length-1].id}}),E(i.length-1)):(W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R-1,id:i[R-1].id}}),E(R-1))):e||(q("prev"),W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:R-1,id:i[R-1].id}}),E(R-1))}function k(e){return i.findIndex((t=>t.id===e))}const V={activeItem:R,slideToItem:function(e){let t=0;if(t="string"==typeof e?i.findIndex((t=>t.id===e)):e,t>=i.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n you provide a wrong id or a higher numeric index.");if(t===R)return;const r=k(i[R].id),n=k(i[t].id);W({eventName:"onSlideStartChange",slideActionType:z(),nextItem:{index:n,id:i[t].id}}),q(n>r?"next":"prev"),E(t),f&&o&&P(t)},slideToNextItem:B,slideToPrevItem:H,enterFullscreen:N,exitFullscreen:F,useListenToCustomEvent:A,getIsNextItem:function(e){const t=k(e);return u&&R===i.length-1?0===t:t===R+1},getIsPrevItem:function(e){const t=k(e);return u&&0===R?t===i.length-1:t===R-1},getIsAnimating:M,getIsFullscreen:D,getIsActiveItem:e=>k(e)===R,getCurrentActiveItem:()=>({id:i[R].id,index:R})};return{carouselFragment:e.jsx(m.Provider,{value:V,children:e.jsx("div",{ref:S,...$(),style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:j})}),thumbsFragment:e.jsx(m.Provider,{value:V,children:L}),...V}},exports.useTransitionCarouselContext=function(){const e=t.useContext(m);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n use the context only inside a component that is rendered within the Carousel.");return e};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|